From 1956f2d0b0f4065aed401c05150d6f8a336f2e4f Mon Sep 17 00:00:00 2001 From: trivernis Date: Thu, 11 Nov 2021 20:10:33 +0100 Subject: [PATCH] Fix resizing issues with filegrid and gallery Signed-off-by: trivernis --- .../file-gallery/file-gallery.component.ts | 39 +++++++++++++------ .../file-grid/file-grid.component.ts | 10 ++++- .../src/app/pages/home/home.component.html | 2 +- .../src/app/pages/home/home.component.ts | 14 +++++-- .../home/import-tab/import-tab.component.html | 4 +- .../home/import-tab/import-tab.component.scss | 6 ++- .../home/import-tab/import-tab.component.ts | 5 ++- .../src/app/services/tab/tab.service.spec.ts | 16 ++++++++ .../src/app/services/tab/tab.service.ts | 15 +++++++ 9 files changed, 90 insertions(+), 21 deletions(-) create mode 100644 mediarepo-ui/src/app/services/tab/tab.service.spec.ts create mode 100644 mediarepo-ui/src/app/services/tab/tab.service.ts diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts index 9e9c680..d924fe1 100644 --- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts @@ -16,6 +16,7 @@ import {SafeResourceUrl} from "@angular/platform-browser"; import {Selectable} from "../../models/Selectable"; import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling"; import {CdkDragMove} from "@angular/cdk/drag-drop"; +import {TabService} from "../../services/tab/tab.service"; @Component({ selector: 'app-file-gallery', @@ -42,7 +43,8 @@ export class FileGalleryComponent implements OnChanges, OnInit { public imagePosition = {x: 0, y: 0}; public mouseInImageView = false; - constructor(private fileService: FileService) { + constructor(private tabService: TabService, private fileService: FileService) { + tabService.selectedTab.subscribe(() => this.adjustElementSizes()); } /** @@ -56,25 +58,31 @@ export class FileGalleryComponent implements OnChanges, OnInit { this.selectedFile?.unselect(); entry.select(); this.selectedFile = entry; - const selectedIndex = this.entries.indexOf(entry); - //this.virtualScroll.scrollToIndex(, "smooth"); await this.loadSelectedFile(); if (this.virtualScroll) { - const viewportSize = this.virtualScroll.getViewportSize(); - const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered - this.virtualScroll.scrollToIndex( - Math.max(selectedIndex - indexAdjustment, 0), "smooth"); - - if (selectedIndex > indexAdjustment) { - this.virtualScroll.scrollToOffset( - this.virtualScroll.measureScrollOffset("left") + 130, "smooth"); - } + this.scrollToSelection(); } + this.fileSelectEvent.emit(this.selectedFile.data); } } + private scrollToSelection(): void { + if (this.selectedFile) { + const selectedIndex = this.entries.indexOf(this.selectedFile); + const viewportSize = this.virtualScroll.getViewportSize(); + const indexAdjustment = (viewportSize / 260) / 2; // adjustment to have the selected item centered + this.virtualScroll.scrollToIndex( + Math.max(selectedIndex - indexAdjustment, 0), "smooth"); + + if (selectedIndex > indexAdjustment) { + this.virtualScroll.scrollToOffset( + this.virtualScroll.measureScrollOffset("left") + 130, "smooth"); + } + } + } + /** * Loads the content url of the selected file * @returns {Promise} @@ -192,4 +200,11 @@ export class FileGalleryComponent implements OnChanges, OnInit { } return undefined; } + + public adjustElementSizes(): void { + if (this.virtualScroll) { + this.virtualScroll.checkViewportSize(); + this.scrollToSelection(); + } + } } 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 004aa91..3e2e606 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 @@ -14,6 +14,7 @@ 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"; @Component({ selector: 'app-file-grid', @@ -38,7 +39,8 @@ export class FileGridComponent implements OnChanges, OnInit { private ctrlClicked = false; private gridEntries: GridEntry[] = [] - constructor() { + constructor(private tabService: TabService) { + tabService.selectedTab.subscribe(() => this.adjustElementSizes()); } public ngOnInit(): void { @@ -181,4 +183,10 @@ export class FileGridComponent implements OnChanges, OnInit { break; } } + + public adjustElementSizes(): void { + if (this.virtualScroll) { + this.virtualScroll.checkViewportSize(); + } + } } diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html index 8c9f604..c8dc551 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.html +++ b/mediarepo-ui/src/app/pages/home/home.component.html @@ -1,5 +1,5 @@
- + diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts index ba60124..8d3bfc3 100644 --- a/mediarepo-ui/src/app/pages/home/home.component.ts +++ b/mediarepo-ui/src/app/pages/home/home.component.ts @@ -1,8 +1,9 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {Repository} from "../../models/Repository"; import {RepositoryService} from "../../services/repository/repository.service"; -import {MatTabGroup} from "@angular/material/tabs"; +import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs"; import {TagService} from "../../services/tag/tag.service"; +import {TabService} from "../../services/tab/tab.service"; @Component({ selector: 'app-home', @@ -16,8 +17,11 @@ export class HomeComponent implements OnInit { @ViewChild("tabGroup") tabGroup!: MatTabGroup; - constructor(private repoService: RepositoryService, private tagService: TagService) { - } + constructor( + private tabService: TabService, + private repoService: RepositoryService, + private tagService: TagService) + {} public async ngOnInit(): Promise { this.selectedRepository = this.repoService.selectedRepository.getValue(); @@ -42,4 +46,8 @@ export class HomeComponent implements OnInit { async loadRepoData() { await this.tagService.loadTags(); } + + public onTabSelectionChange(event: MatTabChangeEvent): void { + this.tabService.setSelectedTab(event.index); + } } 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 a512144..2a918d3 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 @@ -1,8 +1,8 @@ - + - + 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 5eeec16..2fe967e 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,8 +16,12 @@ mat-drawer { width: 25%; } -app-import-tab-sidebar, app-file-gallery { +app-import-tab-sidebar, app-file-grid { height: 100%; width: 100%; margin: 0; } + +app-file-grid { + 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 f26b3c0..cf8980f 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,6 +1,7 @@ -import {Component} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {File} from "../../../models/File"; import {FileService} from "../../../services/file/file.service"; +import {FileGridComponent} from "../../../components/file-grid/file-grid.component"; @Component({ selector: 'app-import-tab', @@ -11,6 +12,8 @@ export class ImportTabComponent { public files: File[] = []; + @ViewChild("fileGrid") fileGrid!: FileGridComponent; + constructor(private fileService: FileService) { } diff --git a/mediarepo-ui/src/app/services/tab/tab.service.spec.ts b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts new file mode 100644 index 0000000..6621cb9 --- /dev/null +++ b/mediarepo-ui/src/app/services/tab/tab.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { TabService } from './tab.service'; + +describe('TabService', () => { + let service: TabService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TabService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/services/tab/tab.service.ts b/mediarepo-ui/src/app/services/tab/tab.service.ts new file mode 100644 index 0000000..d6bfcf6 --- /dev/null +++ b/mediarepo-ui/src/app/services/tab/tab.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import {BehaviorSubject} from "rxjs"; + +@Injectable({ + providedIn: 'root' +}) +export class TabService { + + public selectedTab = new BehaviorSubject(0); + constructor() { } + + public setSelectedTab(index: number) { + this.selectedTab.next(index); + } +}