diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts index ab776c3..dd087ca 100644 --- a/mediarepo-ui/src/app/app.module.ts +++ b/mediarepo-ui/src/app/app.module.ts @@ -15,10 +15,10 @@ import {MatSnackBarModule} from "@angular/material/snack-bar"; import {MatFormFieldModule} from "@angular/material/form-field"; import {MatInputModule} from "@angular/material/input"; import {ReactiveFormsModule} from "@angular/forms"; -import {FileGridComponent} from './components/file-grid/file-grid.component'; +import {FileGridComponent} from './components/file-multiview/file-grid/file-grid.component'; import {MatSidenavModule} from "@angular/material/sidenav"; import {MatGridListModule} from "@angular/material/grid-list"; -import {FileGridEntryComponent} from './components/file-grid/file-grid-entry/file-grid-entry.component'; +import {FileGridEntryComponent} from './components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component'; import {MatProgressBarModule} from "@angular/material/progress-bar"; import {MatPaginatorModule} from "@angular/material/paginator"; import {ScrollingModule} from "@angular/cdk/scrolling"; @@ -32,8 +32,8 @@ import {MatRippleModule} from "@angular/material/core"; import {SortDialogComponent} from './components/file-search/sort-dialog/sort-dialog.component'; import {MatDialogModule} from "@angular/material/dialog"; import {MatSelectModule} from "@angular/material/select"; -import {FileGalleryComponent} from './components/file-gallery/file-gallery.component'; -import {FileGalleryEntryComponent} from './components/file-gallery/file-gallery-entry/file-gallery-entry.component'; +import {FileGalleryComponent} from './components/file-multiview/file-gallery/file-gallery.component'; +import {FileGalleryEntryComponent} from './components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component'; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import {BlockUIModule} from "primeng/blockui"; import {PanelModule} from "primeng/panel"; @@ -58,15 +58,16 @@ import {TagFilterListItemComponent} from './components/file-search/filter-dialog import {TagInputComponent} from './components/inputs/tag-input/tag-input.component'; import {ContextMenuComponent} from './components/context-menu/context-menu.component'; import {FileContextMenuComponent} from './components/context-menu/file-context-menu/file-context-menu.component'; -import {ContentViewerComponent} from './components/file-gallery/content-viewer/content-viewer.component'; -import {ImageViewerComponent} from './components/file-gallery/content-viewer/image-viewer/image-viewer.component'; -import {VideoViewerComponent} from './components/file-gallery/content-viewer/video-viewer/video-viewer.component'; +import {ContentViewerComponent} from './components/file-multiview/file-gallery/content-viewer/content-viewer.component'; +import {ImageViewerComponent} from './components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component'; +import {VideoViewerComponent} from './components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component'; import {HttpClientModule} from "@angular/common/http"; -import { AudioViewerComponent } from './components/file-gallery/content-viewer/audio-viewer/audio-viewer.component'; +import { AudioViewerComponent } from './components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component'; import { BusyIndicatorComponent } from './components/busy-indicator/busy-indicator.component'; import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbnail.component'; import {NgIconsModule} from "@ng-icons/core"; import * as materialIcons from "@ng-icons/material-icons"; +import { FileMultiviewComponent } from './components/file-multiview/file-multiview.component'; @NgModule({ declarations: [ @@ -102,6 +103,7 @@ import * as materialIcons from "@ng-icons/material-icons"; AudioViewerComponent, BusyIndicatorComponent, FileThumbnailComponent, + FileMultiviewComponent, ], imports: [ BrowserModule, diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/audio-viewer/audio-viewer.component.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.ts similarity index 87% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.ts index af22e9c..6df8cbe 100644 --- a/mediarepo-ui/src/app/components/file-gallery/content-viewer/content-viewer.component.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/content-viewer.component.ts @@ -8,11 +8,11 @@ import { SimpleChanges, ViewChild } from '@angular/core'; import {SafeResourceUrl} from "@angular/platform-browser"; -import {File} from "../../../models/File"; -import {FileService} from "../../../services/file/file.service"; -import {FileHelper} from "../../../services/file/file.helper"; -import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; -import {BusyIndicatorComponent} from "../../busy-indicator/busy-indicator.component"; +import {File} from "../../../../models/File"; +import {FileService} from "../../../../services/file/file.service"; +import {FileHelper} from "../../../../services/file/file.helper"; +import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service"; +import {BusyIndicatorComponent} from "../../../busy-indicator/busy-indicator.component"; type ContentType = "image" | "video" | "audio" | "other"; diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/content-viewer/video-viewer/video-viewer.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss similarity index 88% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss index 93954f3..c36be2f 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss +++ b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '~@angular/material' as mat; +@use '../../../../../../node_modules/@angular/material/index' as mat; @mixin color($theme) { $color-config: mat.get-color-config($theme); diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts similarity index 84% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts index 290d4ec..341bfe9 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component.ts @@ -7,11 +7,11 @@ import { Output, SimpleChanges } from '@angular/core'; -import {File} from "../../../models/File"; -import {FileService} from "../../../services/file/file.service"; +import {File} from "../../../../models/File"; +import {FileService} from "../../../../services/file/file.service"; import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser"; -import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; -import {Selectable} from "../../../models/Selectable"; +import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service"; +import {Selectable} from "../../../../models/Selectable"; @Component({ selector: 'app-file-gallery-entry', diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.html diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.scss diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.ts similarity index 95% rename from mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.ts index b209366..4cc2057 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-gallery/file-gallery.component.ts @@ -9,12 +9,12 @@ import { SimpleChanges, ViewChild } from '@angular/core'; -import {File} from "../../models/File"; -import {FileService} from "../../services/file/file.service"; +import {File} from "../../../models/File"; +import {FileService} from "../../../services/file/file.service"; import {SafeResourceUrl} from "@angular/platform-browser"; -import {Selectable} from "../../models/Selectable"; +import {Selectable} from "../../../models/Selectable"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; -import {TabService} from "../../services/tab/tab.service"; +import {TabService} from "../../../services/tab/tab.service"; @Component({ selector: 'app-file-gallery', diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/GridEntry.ts b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/GridEntry.ts similarity index 58% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/GridEntry.ts rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/GridEntry.ts index 4fadec9..e434fb4 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/GridEntry.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/GridEntry.ts @@ -1,4 +1,4 @@ -import {File} from "../../../models/File"; +import {File} from "../../../../models/File"; export type GridEntry = { file: File, diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss similarity index 88% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss index 497545e..5dd01a8 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme.scss +++ b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use '~@angular/material' as mat; +@use '../../../../../../node_modules/@angular/material/index' as mat; @mixin color($theme) { $color-config: mat.get-color-config($theme); 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-multiview/file-grid/file-grid-entry/file-grid-entry.component.html similarity index 100% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.html diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.scss diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.spec.ts 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-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts similarity index 87% rename from mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts index 940b7d2..753f097 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component.ts @@ -9,9 +9,9 @@ import { SimpleChanges, ViewChild } from '@angular/core'; -import {File} from "../../../models/File"; -import {FileService} from "../../../services/file/file.service"; -import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; +import {File} from "../../../../models/File"; +import {FileService} from "../../../../services/file/file.service"; +import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service"; import {SafeResourceUrl} from "@angular/platform-browser"; import {GridEntry} from "./GridEntry"; diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.html similarity index 91% rename from mediarepo-ui/src/app/components/file-grid/file-grid.component.html rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.html index a7d1dac..50cbda6 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.html @@ -5,7 +5,7 @@
diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.scss similarity index 100% rename from mediarepo-ui/src/app/components/file-grid/file-grid.component.scss rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.scss diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.spec.ts similarity index 100% rename from mediarepo-ui/src/app/components/file-grid/file-grid.component.spec.ts rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.spec.ts diff --git a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.ts similarity index 88% rename from mediarepo-ui/src/app/components/file-grid/file-grid.component.ts rename to mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.ts index 29df5c0..48bc11d 100644 --- a/mediarepo-ui/src/app/components/file-grid/file-grid.component.ts +++ b/mediarepo-ui/src/app/components/file-multiview/file-grid/file-grid.component.ts @@ -10,12 +10,12 @@ import { SimpleChanges, ViewChild } from '@angular/core'; -import {File} from "../../models/File"; +import {File} from "../../../models/File"; import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component"; import {GridEntry} from "./file-grid-entry/GridEntry"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; -import {TabService} from "../../services/tab/tab.service"; -import {FileService} from "../../services/file/file.service"; +import {TabService} from "../../../services/tab/tab.service"; +import {FileService} from "../../../services/file/file.service"; @Component({ selector: 'app-file-grid', @@ -27,9 +27,8 @@ export class FileGridComponent implements OnChanges, OnInit { @Input() files: File[] = []; @Input() columns: number = 6; @Input() preselectedFile: File | undefined; - @Output() fileDblClickEvent = new EventEmitter(); - @Output() fileMultiselectEvent = new EventEmitter(); - @Output() fileSelectEvent = new EventEmitter(); + @Output() fileOpenEvent = new EventEmitter(); + @Output() fileSelectEvent = new EventEmitter(); @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; @ViewChild("galleryWrapper") galleryWrapper!: ElementRef; @@ -90,15 +89,7 @@ export class FileGridComponent implements OnChanges, OnInit { 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)); - } + this.fileSelectEvent.emit(this.selectedEntries.map(g => g.file)); } private setPartitionedGridEntries() { diff --git a/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.html b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.html new file mode 100644 index 0000000..a6779fe --- /dev/null +++ b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.html @@ -0,0 +1,4 @@ + + diff --git a/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.scss b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.scss new file mode 100644 index 0000000..9fb7bee --- /dev/null +++ b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.scss @@ -0,0 +1,4 @@ +app-file-gallery, app-file-grid { + width: 100%; + height: 100%; +} diff --git a/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.spec.ts b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.spec.ts new file mode 100644 index 0000000..affbe79 --- /dev/null +++ b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FileMultiviewComponent } from './file-multiview.component'; + +describe('FileMultiviewComponent', () => { + let component: FileMultiviewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FileMultiviewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FileMultiviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.ts b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.ts new file mode 100644 index 0000000..36ee6df --- /dev/null +++ b/mediarepo-ui/src/app/components/file-multiview/file-multiview.component.ts @@ -0,0 +1,43 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {File} from "../../models/File"; + +@Component({ + selector: 'app-file-multiview', + templateUrl: './file-multiview.component.html', + styleUrls: ['./file-multiview.component.scss'] +}) +export class FileMultiviewComponent { + + @Input() files!: File[]; + @Input() mode: "grid" | "gallery" = "grid"; + + @Output() fileOpenEvent = new EventEmitter(); + @Output() fileSelectEvent = new EventEmitter(); + + public selectedFiles: File[] = []; + public preselectedFile: File | undefined; + + constructor() { } + + public onFileSelect(files: File[]): void { + this.selectedFiles = files; + this.preselectedFile = files[0]; + this.fileSelectEvent.emit(this.selectedFiles); + } + + public onSinglefileSelect(file: File | undefined): void { + if (file) { + this.selectedFiles = [file]; + this.preselectedFile = file; + } else { + this.selectedFiles = []; + } + this.fileSelectEvent.emit(this.selectedFiles); + } + + public onFileOpen(file: File): void { + this.preselectedFile = file; + this.mode = "gallery"; + this.fileOpenEvent.emit(file); + } +} diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html index 19d1273..540071a 100644 --- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html +++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html @@ -6,16 +6,7 @@ - - + diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss index ece6467..d6fa12e 100644 --- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss +++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.scss @@ -20,11 +20,7 @@ mat-drawer-container { overflow: hidden; } -app-file-grid { - padding: 0; -} - -app-file-gallery, app-files-tab-sidebar { +app-file-multiview { padding: 0; height: 100%; width: 100%; diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.ts b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.ts index 1938cc7..141c908 100644 --- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.ts +++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.ts @@ -13,8 +13,6 @@ export class FilesTabComponent implements OnInit { files: File[] = []; - showGallery = false; - preselectedFile: File | undefined; contentLoading = false; selectedFiles: File[] = []; @@ -30,26 +28,7 @@ export class FilesTabComponent implements OnInit { }); } - async onFileMultiSelect(files: File[]) { + async onFileSelect(files: File[]) { this.selectedFiles = files; } - - - async onFileSelect(file: File | undefined) { - if (file) { - this.selectedFiles = [file]; - } else { - this.selectedFiles = []; - } - } - - async openGallery(preselectedFile: File) { - this.preselectedFile = preselectedFile; - this.showGallery = true; - } - - async closeGallery(preselectedFile: File | undefined) { - this.preselectedFile = preselectedFile; - this.showGallery = false; - } } diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html index 2a918d3..09f995d 100644 --- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html +++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.html @@ -3,6 +3,6 @@ - + diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss index 2fe967e..025d3c9 100644 --- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss +++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.scss @@ -16,12 +16,12 @@ mat-drawer { width: 25%; } -app-import-tab-sidebar, app-file-grid { +app-import-tab-sidebar, app-file-multiview { height: 100%; width: 100%; margin: 0; } -app-file-grid { +app-file-multiview { display: block; } diff --git a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts index c956001..df95e62 100644 --- a/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts +++ b/mediarepo-ui/src/app/pages/home/import-tab/import-tab.component.ts @@ -1,8 +1,5 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component} from '@angular/core'; import {File} from "../../../models/File"; -import {FileService} from "../../../services/file/file.service"; -import {FileGridComponent} from "../../../components/file-grid/file-grid.component"; -import {DialogFilter} from "@tauri-apps/api/dialog"; @Component({ selector: 'app-import-tab', @@ -12,9 +9,8 @@ import {DialogFilter} from "@tauri-apps/api/dialog"; export class ImportTabComponent { public files: File[] = []; - @ViewChild("fileGrid") fileGrid!: FileGridComponent; - constructor(private fileService: FileService) { + constructor() { } /** diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss index dfcb9d4..d5b7851 100644 --- a/mediarepo-ui/src/styles.scss +++ b/mediarepo-ui/src/styles.scss @@ -1,9 +1,9 @@ @use 'sass:map'; @use "~@angular/material" as mat; @use 'src/app/app.component-theme' as app; -@use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry; +@use 'app/components/file-multiview/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry; @use 'src/app/components/file-search/file-search.component-theme' as file-search; -@use "src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry; +@use "app/components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry; @include mat.core();