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.
37 lines
1.8 KiB
HTML
37 lines
1.8 KiB
HTML
<app-busy-indicator [blurBackground]="true" class="file-edit-inner" fxLayout="column">
|
|
<div class="file-edit-header" fxFlex="100px">
|
|
<h1>Edit Tags</h1>
|
|
<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" 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"></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>
|