You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.9 KiB
HTML
38 lines
1.9 KiB
HTML
<app-busy-indicator [blurBackground]="true" class="file-edit-inner" fxLayout="column">
|
|
<div class="file-edit-header" fxFlex="130px">
|
|
<h1>Edit Tags</h1>
|
|
<h3>{{tags.length}} Tags</h3>
|
|
<mat-divider></mat-divider>
|
|
</div>
|
|
<div class="tag-edit-list" fxFlex fxFlexAlign="start" fxFlexFill>
|
|
<cdk-virtual-scroll-viewport #tagScroll itemSize="50" maxBufferPx="2000" minBufferPx="1000">
|
|
<div *cdkVirtualFor="let tag of tags; trackBy: trackByTagId" class="editable-tag">
|
|
<app-tag-item [tag]="tag"></app-tag-item>
|
|
<button (click)="removeTag(tag)" class="tag-remove-button" mat-icon-button>
|
|
<ng-icon name="mat-remove"></ng-icon>
|
|
</button>
|
|
</div>
|
|
</cdk-virtual-scroll-viewport>
|
|
</div>
|
|
<mat-divider fxFlex="1em"></mat-divider>
|
|
<div class="tag-input" fxFlex="200px">
|
|
<div class="tag-input-field">
|
|
<app-tag-input (tagAdded)="this.editTag($event)" [allowInvalid]="true"
|
|
[availableTags]="(this.allTags | async) ?? []"></app-tag-input>
|
|
<button class="add-tag-button" mat-icon-button>
|
|
<ng-icon *ngIf="editMode === 'Toggle'" name="mat-change-circle"></ng-icon>
|
|
<ng-icon *ngIf="editMode === 'Add'" name="mat-add-circle"></ng-icon>
|
|
<ng-icon *ngIf="editMode === 'Remove'" name="mat-remove-circle"></ng-icon>
|
|
</button>
|
|
</div>
|
|
<mat-form-field appearance="fill" class="form-field-mode">
|
|
<mat-label>Mode</mat-label>
|
|
<mat-select [(value)]="editMode">
|
|
<mat-option value="Toggle">Toggle</mat-option>
|
|
<mat-option value="Add">Add</mat-option>
|
|
<mat-option value="Remove">Remove</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</app-busy-indicator>
|