From 398d9041696a6cf1f89d8680e0694dd833f035b7 Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 10 Feb 2022 21:05:30 +0100 Subject: [PATCH] Change file grid to have a dynamic column count Signed-off-by: trivernis --- mediarepo-ui/src-tauri/src/main.rs | 4 +- .../content-aware-image.component.ts | 37 ++++++++++++++++--- .../file-grid/file-grid.component.html | 1 + .../file-grid/file-grid.component.ts | 27 +++++++++++++- 4 files changed, 61 insertions(+), 8 deletions(-) diff --git a/mediarepo-ui/src-tauri/src/main.rs b/mediarepo-ui/src-tauri/src/main.rs index d8fde70..c35fe60 100644 --- a/mediarepo-ui/src-tauri/src/main.rs +++ b/mediarepo-ui/src-tauri/src/main.rs @@ -3,6 +3,7 @@ all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] +use tauri::{LogicalSize, Size}; use tracing_subscriber::EnvFilter; use tracing_subscriber::fmt::format::FmtSpan; @@ -15,7 +16,8 @@ fn main() { .init(); mediarepo_api::tauri_plugin::register_plugin(tauri::Builder::default()) .on_page_load(|window, _| { - window.set_title(format!("mediarepo {}", env!("CARGO_PKG_VERSION")).as_str()).unwrap(); + window.set_title(format!("mediarepo {}", env!("CARGO_PKG_VERSION")).as_str()).expect("failed to set window title"); + window.set_min_size(Some(Size::Logical(LogicalSize { width: 1000.0, height: 750.0 }))).expect("failed to set minimal size"); }) .run(tauri::generate_context!()) .expect("error while running tauri application"); diff --git a/mediarepo-ui/src/app/components/shared/app-common/content-aware-image/content-aware-image.component.ts b/mediarepo-ui/src/app/components/shared/app-common/content-aware-image/content-aware-image.component.ts index 8a76433..f5b6742 100644 --- a/mediarepo-ui/src/app/components/shared/app-common/content-aware-image/content-aware-image.component.ts +++ b/mediarepo-ui/src/app/components/shared/app-common/content-aware-image/content-aware-image.component.ts @@ -1,12 +1,23 @@ -import {Component, DoCheck, ElementRef, Input, OnInit, ViewChild} from "@angular/core"; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + DoCheck, + ElementRef, + Input, + OnDestroy, + OnInit, + ViewChild +} from "@angular/core"; import {SafeResourceUrl} from "@angular/platform-browser"; @Component({ selector: "app-content-aware-image", templateUrl: "./content-aware-image.component.html", - styleUrls: ["./content-aware-image.component.scss"] + styleUrls: ["./content-aware-image.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ContentAwareImageComponent implements OnInit, DoCheck { +export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy { @Input() imageSrc!: string | SafeResourceUrl; @Input() maximizeHeight: boolean = true; @Input() maximizeWidth: boolean = true; @@ -17,17 +28,28 @@ export class ContentAwareImageComponent implements OnInit, DoCheck { scaleWidth = false; private previousHeight = 0; private previousWidth = 0; + private readonly checkInterval?: number; - constructor() { + constructor(private changeDetector: ChangeDetectorRef) { + this.checkInterval = setInterval(() => this.checkSize(), 1000); } public ngOnInit(): void { if (this.image) { this.image.nativeElement.decoding = this.decoding; + this.changeDetector.detach(); } } + public ngOnDestroy(): void { + clearInterval(this.checkInterval); + } + public ngDoCheck(): void { + this.checkSize(); + } + + public checkSize(): void { if (this.image?.nativeElement && this.imageContainer?.nativeElement) { this.adjustSize(this.image.nativeElement, this.imageContainer.nativeElement); } @@ -47,7 +69,12 @@ export class ContentAwareImageComponent implements OnInit, DoCheck { this.previousWidth = containerWidth; const imageRelativeHeight = image.naturalHeight / containerHeight; const imageRelativeWidth = image.naturalWidth / containerWidth; - this.scaleWidth = imageRelativeWidth > imageRelativeHeight; + const scaleWidth = imageRelativeWidth > imageRelativeHeight; + + if (scaleWidth != this.scaleWidth) { + this.scaleWidth = scaleWidth; + this.changeDetector.detectChanges(); + } } } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html index 1a00f17..f2e0528 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.html @@ -1,6 +1,7 @@
(); @Output() fileSelect = new EventEmitter(); @@ -44,11 +45,14 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit { public selectedEntries: Selectable[] = []; public partitionedGridEntries: Selectable[][] = []; + private columns = 6; + private entrySizePx = 260; private shiftClicked = false; private ctrlClicked = false; private gridEntries: Selectable[] = []; constructor( + private changeDetector: ChangeDetectorRef, private logger: LoggingService, private tabService: TabService, private fileService: FileService, @@ -64,6 +68,11 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit { public ngAfterViewInit(): void { this.focus(); + this.calculateColumnCount(); + } + + public ngAfterViewChecked(): void { + this.calculateColumnCount(); } ngOnChanges(changes: SimpleChanges): void { @@ -190,6 +199,20 @@ export class FileGridComponent implements OnChanges, OnInit, AfterViewInit { this.fileChanged.next(); } + public calculateColumnCount() { + if (this.inner && this.inner.nativeElement) { + const width = Math.abs(this.inner.nativeElement.clientWidth); + const columns = Math.floor(width / this.entrySizePx); + + if (columns != this.columns) { + console.debug("grid displaying", columns, "columns"); + this.columns = Math.max(columns, 1); + this.setPartitionedGridEntries(); + this.changeDetector.detectChanges(); + } + } + } + private setPartitionedGridEntries() { this.partitionedGridEntries = []; let scrollToIndex = -1;