diff --git a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.html b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.html index ac6d466..7d82abe 100644 --- a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.html +++ b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.html @@ -1,6 +1,6 @@
diff --git a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.scss b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.scss index 8db781a..73a04e5 100644 --- a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.scss +++ b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.scss @@ -4,16 +4,18 @@ display: flex; } -.image-container > img { +img { margin: auto; + max-height: 100%; + max-width: 100%; + height: auto; + width: auto; } img.scale-height { height: 100%; - width: auto; } img.scale-width { width: 100%; - height: auto; } diff --git a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.ts b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.ts index e0a113a..86fa312 100644 --- a/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.ts +++ b/mediarepo-ui/src/app/components/content-aware-image/content-aware-image.component.ts @@ -9,6 +9,8 @@ import {SafeResourceUrl} from "@angular/platform-browser"; export class ContentAwareImageComponent { @Input() imageSrc!: string | SafeResourceUrl; + @Input() maximizeHeight: boolean = true; + @Input() maximizeWidth: boolean = true; scaleWidth = false; diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html index 465c3b5..4746e1f 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html +++ b/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html @@ -1,7 +1,7 @@ {{gridEntry.file?.name}} - + diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/file-grid/file-grid.component.html index c46a1cb..39080b8 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.html @@ -1,8 +1,11 @@ - -
-
- + - + + +
diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss b/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss index dbc6e20..27a3cd5 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss +++ b/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss @@ -6,9 +6,18 @@ app-file-grid-entry { .file-scroll { height: 100%; + width: 100%; +} + +.file-gallery-inner { + width: 100%; + height: 100%; + display: block; + overflow: hidden; } .file-row { display: flex; flex-direction: row; + width: 100%; } 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 231505d..bb84073 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 @@ -1,5 +1,5 @@ import { - Component, + Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, @@ -27,6 +27,7 @@ export class FileGridComponent implements OnChanges, OnInit { @Output() fileSelectEvent = new EventEmitter(); @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; + @ViewChild("galleryWrapper") galleryWrapper!: ElementRef; selectedEntries: GridEntry[] = []; @@ -50,23 +51,37 @@ export class FileGridComponent implements OnChanges, OnInit { } } - private handlePreselection() { - if (this.preselectedFile && this.selectedEntries.length === 0) { - const selectedEntry = this.gridEntries.find(e => e.file.hash == this.preselectedFile?.hash); - if (selectedEntry) { - this.setSelectedFile(selectedEntry); - } - } - } + /** + * File selector logic + * @param {FileGridEntryComponent} clickedEntry + */ + setSelectedFile(clickedEntry: GridEntry) { + const previousSelectionSize = this.selectedEntries.length; - private handleScrollToPreselection() { - if (this.preselectedFile && this.selectedEntries.length === 0) { - const rowIndex = this.partitionedGridEntries.findIndex( - r => r.findIndex(e => e.file.hash == this.preselectedFile?.hash) >= 0); - if (rowIndex >= 0) { - this.virtualScroll?.scrollToIndex(rowIndex); + if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) { + this.selectedEntries.forEach(entry => {if (entry !== clickedEntry) entry.selected = false}); + this.selectedEntries = []; + } + if (this.shiftClicked && this.selectedEntries.length > 0) { + this.handleShiftSelect(clickedEntry); + } else { + clickedEntry.selected = !clickedEntry.selected; + 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]); + } else if (this.selectedEntries.length == 0 && previousSelectionSize == 1){ + this.fileSelectEvent.emit(undefined); + } else { + this.fileMultiselectEvent.emit(this.selectedEntries.map(entry => entry.file)); + } } private setPartitionedGridEntries() { @@ -98,39 +113,6 @@ export class FileGridComponent implements OnChanges, OnInit { } } - /** - * File selector logic - * @param {FileGridEntryComponent} clickedEntry - */ - setSelectedFile(clickedEntry: GridEntry) { - const previousSelectionSize = this.selectedEntries.length; - - if (!(this.shiftClicked || this.ctrlClicked) && this.selectedEntries.length > 0) { - this.selectedEntries.forEach(entry => {if (entry !== clickedEntry) entry.selected = false}); - this.selectedEntries = []; - } - if (this.shiftClicked && this.selectedEntries.length > 0) { - this.handleShiftSelect(clickedEntry); - } else { - clickedEntry.selected = !clickedEntry.selected; - 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]); - } else if (this.selectedEntries.length == 0 && previousSelectionSize == 1){ - this.fileSelectEvent.emit(undefined); - } else { - this.fileMultiselectEvent.emit(this.selectedEntries.map(entry => entry.file)); - } - } - private handleShiftSelect(clickedEntry: GridEntry): void { const lastEntry = this.selectedEntries[this.selectedEntries.length - 1]; let found = false;