Add tag editing to import tab and remove name editing

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent d7e477efb8
commit 628d1d92ad

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit"> <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
<app-file-edit #fileedit [files]="this.selectedFiles"></app-file-edit> <app-file-edit #fileedit [files]="this.selectedFiles"></app-file-edit>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>

@ -3,5 +3,8 @@
<mat-tab label="Import"> <mat-tab label="Import">
<app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import> <app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import>
</mat-tab> </mat-tab>
<mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
<app-file-edit [files]="selectedFiles"></app-file-edit>
</mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>

@ -1,4 +1,4 @@
import {Component, EventEmitter, Output} from "@angular/core"; import {Component, EventEmitter, Input, Output} from "@angular/core";
import {File} from "../../../../models/File"; import {File} from "../../../../models/File";
@Component({ @Component({
@ -8,6 +8,7 @@ import {File} from "../../../../models/File";
}) })
export class ImportTabSidebarComponent { export class ImportTabSidebarComponent {
@Input() selectedFiles: File[] = [];
@Output() fileImported = new EventEmitter<File>(); @Output() fileImported = new EventEmitter<File>();
@Output() importFinished = new EventEmitter<void>(); @Output() importFinished = new EventEmitter<void>();

@ -1,9 +1,9 @@
<mat-drawer-container autosize> <mat-drawer-container autosize>
<mat-drawer disableClose="true" mode="side" opened> <mat-drawer disableClose="true" mode="side" opened>
<app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" <app-import-tab-sidebar [selectedFiles]="selectedFiles" (fileImported)="this.addFileFromImport($event)"
(importFinished)="this.refreshFileView()"></app-import-tab-sidebar> (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<app-file-multiview [files]="this.files"></app-file-multiview> <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>

@ -9,6 +9,7 @@ import {File} from "../../../models/File";
export class ImportTabComponent { export class ImportTabComponent {
public files: File[] = []; public files: File[] = [];
public selectedFiles: File[] = [];
constructor() { constructor() {
} }
@ -32,4 +33,8 @@ export class ImportTabComponent {
public refreshFileView() { public refreshFileView() {
this.files = [...this.files]; this.files = [...this.files];
} }
public onFileSelect(files: File[]) {
this.selectedFiles = files;
}
} }

@ -1,10 +1,7 @@
<div class="file-edit-inner" fxLayout="column"> <div class="file-edit-inner" fxLayout="column">
<div class="file-metadata" fxFlex="150px"> <div class="file-edit-header" fxFlex="100px">
<h1>Edit File</h1> <h1>Edit Tags</h1>
<mat-form-field *ngIf="this.files.length === 1" appearance="fill"> <mat-divider></mat-divider>
<mat-label>Name</mat-label>
<input #fileNameInput (focusout)="this.changeFileName(fileNameInput.value)" matInput>
</mat-form-field>
</div> </div>
<div class="tag-edit-list" fxFlex fxFlexAlign="start" fxFlexFill> <div class="tag-edit-list" fxFlex fxFlexAlign="start" fxFlexFill>
<cdk-virtual-scroll-viewport #tagScroll itemSize="50" maxBufferPx="2000" minBufferPx="1000"> <cdk-virtual-scroll-viewport #tagScroll itemSize="50" maxBufferPx="2000" minBufferPx="1000">

@ -1,4 +1,4 @@
.file-metadata, .tag-input { .file-edit-header, .tag-input {
width: 100%; width: 100%;
mat-form-field, app-tag-input { mat-form-field, app-tag-input {
@ -10,6 +10,13 @@
} }
} }
.file-edit-header {
text-align: center;
h1 {
margin-top: 20px;
}
}
.file-edit-inner { .file-edit-inner {
height: 100%; height: 100%;
width: 100%; width: 100%;

Loading…
Cancel
Save