diff --git a/mediarepo-ui/src/app/app.component-theme.scss b/mediarepo-ui/src/app/app.component-theme.scss index 49b102e..3085e01 100644 --- a/mediarepo-ui/src/app/app.component-theme.scss +++ b/mediarepo-ui/src/app/app.component-theme.scss @@ -10,6 +10,18 @@ background-color: darken(mat.get-color-from-palette($primary-palette, 'darker'), 35); color: white } + ::ng-deep ::-webkit-scrollbar { + width: 10px; + } + + ::ng-deep ::-webkit-scrollbar-thumb { + background: mat.get-color-from-palette($primary-palette, 'darker'); + border-radius: 1px; + } + + ::ng-deep ::-webkit-scrollbar-thumb:hover { + background: mat.get-color-from-palette($primary-palette); + } .warn { background-color: mat.get-color-from-palette($warn-palette); diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts index 638e0b8..0dc7d5b 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts +++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts @@ -27,6 +27,7 @@ export class FileGridEntryComponent implements OnInit, OnDestroy { selectedThumbnail: Thumbnail | undefined; contentUrl: SafeResourceUrl | undefined; + constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) { } async ngOnInit() { @@ -37,21 +38,20 @@ export class FileGridEntryComponent implements OnInit, OnDestroy { if (this.contentUrl) { const url = this.contentUrl; this.contentUrl = undefined; - URL?.revokeObjectURL(url as string); } } async loadImage() { try { - const thumbnails = await this.fileService.getThumbnails(this.gridEntry.file.hash); - let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500)); - this.selectedThumbnail = thumbnail; - - if (!thumbnail) { - console.log("Thumbnail is empty?!", thumbnails); - } else { - this.contentUrl = await this.fileService.readThumbnail(thumbnail!!); - } + const thumbnails = await this.fileService.getThumbnails(this.gridEntry.file.hash); + let thumbnail = thumbnails.find(t => (t.height > 250 || t.width > 250) && (t.height < 500 && t.width < 500)); + this.selectedThumbnail = thumbnail; + + if (!thumbnail) { + console.log("Thumbnail is empty?!", thumbnails); + } else { + this.contentUrl = await this.fileService.readThumbnail(thumbnail!!); + } } catch (err) { this.errorBroker.showError(err); } diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts index 7c5c3b3..742014e 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts @@ -62,7 +62,14 @@ export class FileGridComponent implements OnChanges { this.handleShiftSelect(clickedEntry); } else { clickedEntry.selected = !clickedEntry.selected; - this.selectedEntries.push(clickedEntry); + if (!clickedEntry.selected) { + const index = this.selectedEntries.indexOf(clickedEntry); + if (index > -1) { + this.selectedEntries.splice(index, 1); + } + } else { + this.selectedEntries.push(clickedEntry); + } } if (this.selectedEntries.length == 1) { this.fileSelectEvent.emit(this.selectedEntries.map(entry => entry.file)[0]); diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html index a93026b..b338537 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.html +++ b/mediarepo-ui/src/app/pages/home/home.component.html @@ -4,6 +4,7 @@ +
@@ -20,15 +21,20 @@ (matChipInputTokenEnd)="addSearchTag($event)"/> -

Tags

- - {{tag.namespace ? tag.namespace + ':' + tag.name : tag.name}} - +
+

Selection Tags

+ + {{tag.namespace ? tag.namespace + ':' + tag.name : tag.name}} + +
+
+ (fileSelectEvent)="onFileSelect($event)" + (fileMultiselectEvent)="onFileMultiSelect($event)" + >
diff --git a/mediarepo-ui/src/app/pages/home/home.component.scss b/mediarepo-ui/src/app/pages/home/home.component.scss index 8cd91d2..6bcacf4 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.scss +++ b/mediarepo-ui/src/app/pages/home/home.component.scss @@ -12,9 +12,21 @@ width: 100%; } +#file-tag-list { + height: calc(100% - 8em); + overflow: auto; +} + +.drawer-sidebar-inner { + height: 100%; + width: 100%; + display: block; +} + mat-drawer { height: 100%; width: 25%; + overflow: hidden; } mat-drawer-content { diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts index a8c22e3..3f047ae 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.ts +++ b/mediarepo-ui/src/app/pages/home/home.component.ts @@ -35,6 +35,12 @@ export class HomeComponent implements OnInit { await this.fileService.getFiles(); } + async onFileMultiSelect(files: File[]) { + if (files.length === 0) { + this.clearFileDetails(); + } + } + async onFileSelect(file: File | undefined) { if (file) { await this.showFileDetails(file);