Move gallery + grid to encapsulating file-multiview component

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent 23654e5150
commit 62321ccebb

@ -15,10 +15,10 @@ import {MatSnackBarModule} from "@angular/material/snack-bar";
import {MatFormFieldModule} from "@angular/material/form-field"; import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input"; import {MatInputModule} from "@angular/material/input";
import {ReactiveFormsModule} from "@angular/forms"; 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 {MatSidenavModule} from "@angular/material/sidenav";
import {MatGridListModule} from "@angular/material/grid-list"; 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 {MatProgressBarModule} from "@angular/material/progress-bar";
import {MatPaginatorModule} from "@angular/material/paginator"; import {MatPaginatorModule} from "@angular/material/paginator";
import {ScrollingModule} from "@angular/cdk/scrolling"; 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 {SortDialogComponent} from './components/file-search/sort-dialog/sort-dialog.component';
import {MatDialogModule} from "@angular/material/dialog"; import {MatDialogModule} from "@angular/material/dialog";
import {MatSelectModule} from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {FileGalleryComponent} from './components/file-gallery/file-gallery.component'; import {FileGalleryComponent} from './components/file-multiview/file-gallery/file-gallery.component';
import {FileGalleryEntryComponent} from './components/file-gallery/file-gallery-entry/file-gallery-entry.component'; import {FileGalleryEntryComponent} from './components/file-multiview/file-gallery/file-gallery-entry/file-gallery-entry.component';
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import {BlockUIModule} from "primeng/blockui"; import {BlockUIModule} from "primeng/blockui";
import {PanelModule} from "primeng/panel"; 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 {TagInputComponent} from './components/inputs/tag-input/tag-input.component';
import {ContextMenuComponent} from './components/context-menu/context-menu.component'; import {ContextMenuComponent} from './components/context-menu/context-menu.component';
import {FileContextMenuComponent} from './components/context-menu/file-context-menu/file-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 {ContentViewerComponent} from './components/file-multiview/file-gallery/content-viewer/content-viewer.component';
import {ImageViewerComponent} from './components/file-gallery/content-viewer/image-viewer/image-viewer.component'; import {ImageViewerComponent} from './components/file-multiview/file-gallery/content-viewer/image-viewer/image-viewer.component';
import {VideoViewerComponent} from './components/file-gallery/content-viewer/video-viewer/video-viewer.component'; import {VideoViewerComponent} from './components/file-multiview/file-gallery/content-viewer/video-viewer/video-viewer.component';
import {HttpClientModule} from "@angular/common/http"; 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 { BusyIndicatorComponent } from './components/busy-indicator/busy-indicator.component';
import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbnail.component'; import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbnail.component';
import {NgIconsModule} from "@ng-icons/core"; import {NgIconsModule} from "@ng-icons/core";
import * as materialIcons from "@ng-icons/material-icons"; import * as materialIcons from "@ng-icons/material-icons";
import { FileMultiviewComponent } from './components/file-multiview/file-multiview.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -102,6 +103,7 @@ import * as materialIcons from "@ng-icons/material-icons";
AudioViewerComponent, AudioViewerComponent,
BusyIndicatorComponent, BusyIndicatorComponent,
FileThumbnailComponent, FileThumbnailComponent,
FileMultiviewComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

@ -8,11 +8,11 @@ import {
SimpleChanges, ViewChild SimpleChanges, ViewChild
} from '@angular/core'; } from '@angular/core';
import {SafeResourceUrl} from "@angular/platform-browser"; import {SafeResourceUrl} from "@angular/platform-browser";
import {File} from "../../../models/File"; import {File} from "../../../../models/File";
import {FileService} from "../../../services/file/file.service"; import {FileService} from "../../../../services/file/file.service";
import {FileHelper} from "../../../services/file/file.helper"; import {FileHelper} from "../../../../services/file/file.helper";
import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
import {BusyIndicatorComponent} from "../../busy-indicator/busy-indicator.component"; import {BusyIndicatorComponent} from "../../../busy-indicator/busy-indicator.component";
type ContentType = "image" | "video" | "audio" | "other"; type ContentType = "image" | "video" | "audio" | "other";

@ -1,5 +1,5 @@
@use 'sass:map'; @use 'sass:map';
@use '~@angular/material' as mat; @use '../../../../../../node_modules/@angular/material/index' as mat;
@mixin color($theme) { @mixin color($theme) {
$color-config: mat.get-color-config($theme); $color-config: mat.get-color-config($theme);

@ -7,11 +7,11 @@ import {
Output, Output,
SimpleChanges SimpleChanges
} from '@angular/core'; } from '@angular/core';
import {File} from "../../../models/File"; import {File} from "../../../../models/File";
import {FileService} from "../../../services/file/file.service"; import {FileService} from "../../../../services/file/file.service";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser"; import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
import {Selectable} from "../../../models/Selectable"; import {Selectable} from "../../../../models/Selectable";
@Component({ @Component({
selector: 'app-file-gallery-entry', selector: 'app-file-gallery-entry',

@ -9,12 +9,12 @@ import {
SimpleChanges, SimpleChanges,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import {File} from "../../models/File"; import {File} from "../../../models/File";
import {FileService} from "../../services/file/file.service"; import {FileService} from "../../../services/file/file.service";
import {SafeResourceUrl} from "@angular/platform-browser"; import {SafeResourceUrl} from "@angular/platform-browser";
import {Selectable} from "../../models/Selectable"; import {Selectable} from "../../../models/Selectable";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {TabService} from "../../services/tab/tab.service"; import {TabService} from "../../../services/tab/tab.service";
@Component({ @Component({
selector: 'app-file-gallery', selector: 'app-file-gallery',

@ -1,4 +1,4 @@
import {File} from "../../../models/File"; import {File} from "../../../../models/File";
export type GridEntry = { export type GridEntry = {
file: File, file: File,

@ -1,5 +1,5 @@
@use 'sass:map'; @use 'sass:map';
@use '~@angular/material' as mat; @use '../../../../../../node_modules/@angular/material/index' as mat;
@mixin color($theme) { @mixin color($theme) {
$color-config: mat.get-color-config($theme); $color-config: mat.get-color-config($theme);

@ -9,9 +9,9 @@ import {
SimpleChanges, SimpleChanges,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import {File} from "../../../models/File"; import {File} from "../../../../models/File";
import {FileService} from "../../../services/file/file.service"; import {FileService} from "../../../../services/file/file.service";
import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service"; import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
import {SafeResourceUrl} from "@angular/platform-browser"; import {SafeResourceUrl} from "@angular/platform-browser";
import {GridEntry} from "./GridEntry"; import {GridEntry} from "./GridEntry";

@ -5,7 +5,7 @@
<div class="file-row"> <div class="file-row">
<app-file-grid-entry <app-file-grid-entry
*ngFor="let gridEntry of rowEntry" (clickEvent)="setSelectedFile($event.gridEntry)" *ngFor="let gridEntry of rowEntry" (clickEvent)="setSelectedFile($event.gridEntry)"
(dblClickEvent)="fileDblClickEvent.emit($event.gridEntry.file)" (dblClickEvent)="fileOpenEvent.emit($event.gridEntry.file)"
(contextmenu)="fileContextMenu.onContextMenu($event, gridEntry.file)" (contextmenu)="fileContextMenu.onContextMenu($event, gridEntry.file)"
[gridEntry]="gridEntry"></app-file-grid-entry> [gridEntry]="gridEntry"></app-file-grid-entry>
</div> </div>

@ -10,12 +10,12 @@ import {
SimpleChanges, SimpleChanges,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import {File} from "../../models/File"; import {File} from "../../../models/File";
import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component"; import {FileGridEntryComponent} from "./file-grid-entry/file-grid-entry.component";
import {GridEntry} from "./file-grid-entry/GridEntry"; import {GridEntry} from "./file-grid-entry/GridEntry";
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {TabService} from "../../services/tab/tab.service"; import {TabService} from "../../../services/tab/tab.service";
import {FileService} from "../../services/file/file.service"; import {FileService} from "../../../services/file/file.service";
@Component({ @Component({
selector: 'app-file-grid', selector: 'app-file-grid',
@ -27,9 +27,8 @@ export class FileGridComponent implements OnChanges, OnInit {
@Input() files: File[] = []; @Input() files: File[] = [];
@Input() columns: number = 6; @Input() columns: number = 6;
@Input() preselectedFile: File | undefined; @Input() preselectedFile: File | undefined;
@Output() fileDblClickEvent = new EventEmitter<File>(); @Output() fileOpenEvent = new EventEmitter<File>();
@Output() fileMultiselectEvent = new EventEmitter<File[]>(); @Output() fileSelectEvent = new EventEmitter<File[]>();
@Output() fileSelectEvent = new EventEmitter<File | undefined>();
@ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport;
@ViewChild("galleryWrapper") galleryWrapper!: ElementRef<HTMLDivElement>; @ViewChild("galleryWrapper") galleryWrapper!: ElementRef<HTMLDivElement>;
@ -90,15 +89,7 @@ export class FileGridComponent implements OnChanges, OnInit {
this.selectedEntries.push(clickedEntry); this.selectedEntries.push(clickedEntry);
} }
} }
if (this.selectedEntries.length == 1) { this.fileSelectEvent.emit(this.selectedEntries.map(g => g.file));
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() { private setPartitionedGridEntries() {

@ -0,0 +1,4 @@
<app-file-grid *ngIf="this.mode === 'grid'" [files]="this.files" [preselectedFile]="this.preselectedFile"
(fileSelectEvent)="this.onFileSelect($event)" (fileOpenEvent)="this.onFileOpen($event)"></app-file-grid>
<app-file-gallery *ngIf="this.mode === 'gallery'" [files]="this.files" [preselectedFile]="this.preselectedFile"
(fileSelectEvent)="this.onSinglefileSelect($event)" (closeEvent)="this.mode = 'grid'"></app-file-gallery>

@ -0,0 +1,4 @@
app-file-gallery, app-file-grid {
width: 100%;
height: 100%;
}

@ -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<FileMultiviewComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FileMultiviewComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(FileMultiviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -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<File>();
@Output() fileSelectEvent = new EventEmitter<File[]>();
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);
}
}

@ -6,16 +6,7 @@
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<app-busy-indicator [busy]="contentLoading" [blurBackground]="true"> <app-busy-indicator [busy]="contentLoading" [blurBackground]="true">
<app-file-grid (fileDblClickEvent)="openGallery($event)" (fileMultiselectEvent)="onFileMultiSelect($event)" <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
(fileSelectEvent)="onFileSelect($event)"
*ngIf="!this.showGallery"
[files]="files"
[preselectedFile]="this.preselectedFile"
></app-file-grid>
<app-file-gallery (closeEvent)="this.closeGallery($event.selectedFile?.data)"
(fileSelectEvent)="onFileSelect($event)" *ngIf="this.showGallery"
[files]="files"
[preselectedFile]="this.preselectedFile"></app-file-gallery>
</app-busy-indicator> </app-busy-indicator>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>

@ -20,11 +20,7 @@ mat-drawer-container {
overflow: hidden; overflow: hidden;
} }
app-file-grid { app-file-multiview {
padding: 0;
}
app-file-gallery, app-files-tab-sidebar {
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;

@ -13,8 +13,6 @@ export class FilesTabComponent implements OnInit {
files: File[] = []; files: File[] = [];
showGallery = false;
preselectedFile: File | undefined;
contentLoading = false; contentLoading = false;
selectedFiles: File[] = []; selectedFiles: File[] = [];
@ -30,26 +28,7 @@ export class FilesTabComponent implements OnInit {
}); });
} }
async onFileMultiSelect(files: File[]) { async onFileSelect(files: File[]) {
this.selectedFiles = files; 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;
}
} }

@ -3,6 +3,6 @@
<app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar> <app-import-tab-sidebar (fileImported)="this.addFileFromImport($event)" (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<app-file-grid #fileGrid [files]="this.files" ></app-file-grid> <app-file-multiview [files]="this.files" ></app-file-multiview>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>

@ -16,12 +16,12 @@ mat-drawer {
width: 25%; width: 25%;
} }
app-import-tab-sidebar, app-file-grid { app-import-tab-sidebar, app-file-multiview {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
app-file-grid { app-file-multiview {
display: block; display: block;
} }

@ -1,8 +1,5 @@
import {Component, ViewChild} from '@angular/core'; import {Component} from '@angular/core';
import {File} from "../../../models/File"; 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({ @Component({
selector: 'app-import-tab', selector: 'app-import-tab',
@ -12,9 +9,8 @@ import {DialogFilter} from "@tauri-apps/api/dialog";
export class ImportTabComponent { export class ImportTabComponent {
public files: File[] = []; public files: File[] = [];
@ViewChild("fileGrid") fileGrid!: FileGridComponent;
constructor(private fileService: FileService) { constructor() {
} }
/** /**

@ -1,9 +1,9 @@
@use 'sass:map'; @use 'sass:map';
@use "~@angular/material" as mat; @use "~@angular/material" as mat;
@use 'src/app/app.component-theme' as app; @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-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(); @include mat.core();

Loading…
Cancel
Save