From a86aaef510a1320544b5ea73a777c54450b7326a Mon Sep 17 00:00:00 2001 From: trivernis Date: Mon, 13 Dec 2021 17:49:52 +0100 Subject: [PATCH] Fix issues with grid key naviation It should only navigate now when focussed. Same logic applies to the gallery. The focus is kept when changing between the gallery and the grid. TG-48 #closed Signed-off-by: trivernis --- .../src/app/components/core/core.component.ts | 5 +-- .../shared/app-common/app-common.module.ts | 3 ++ .../input-receiver.directive.spec.ts | 8 ++++ .../input-receiver.directive.ts | 32 ++++++++++++++ .../file-gallery/file-gallery.component.html | 2 +- .../file-gallery/file-gallery.component.ts | 44 +++++++++++-------- .../file-grid/file-grid.component.html | 4 +- .../file-grid/file-grid.component.ts | 44 +++++++++++-------- .../file-multiview.component.html | 4 +- .../file-multiview.component.ts | 14 +++++- .../src/app/services/file/file.service.ts | 1 - 11 files changed, 113 insertions(+), 48 deletions(-) create mode 100644 mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.spec.ts create mode 100644 mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.ts diff --git a/mediarepo-ui/src/app/components/core/core.component.ts b/mediarepo-ui/src/app/components/core/core.component.ts index 37f1409..c24484a 100644 --- a/mediarepo-ui/src/app/components/core/core.component.ts +++ b/mediarepo-ui/src/app/components/core/core.component.ts @@ -43,14 +43,12 @@ export class CoreComponent { this.stateService.state.subscribe(state => { this.appState = state; - console.log("new state", state); if (this.appState.tabs.value.length === 0) { this.addTab(); } state.tabs.subscribe(tabs => { - console.log("new tabs", tabs); this.tabs = tabs; - console.log(tabs); + if (this.tabs.length === 0) { this.addTab(); } @@ -101,7 +99,6 @@ export class CoreComponent { } public async onMouseClickTabLabel(tab: TabState, event: MouseEvent) { - console.log(event); if (event.button === 1) { // middle mouse button await this.closeTab(tab); } diff --git a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts index 55c6460..6bc8863 100644 --- a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts +++ b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts @@ -15,6 +15,7 @@ import {MatMenuModule} from "@angular/material/menu"; import { ContentAwareImageComponent } from "./content-aware-image/content-aware-image.component"; +import { InputReceiverDirective } from "./input-receiver/input-receiver.directive"; @NgModule({ @@ -23,12 +24,14 @@ import { BusyIndicatorComponent, ContextMenuComponent, ContentAwareImageComponent, + InputReceiverDirective, ], exports: [ ConfirmDialogComponent, BusyIndicatorComponent, ContextMenuComponent, ContentAwareImageComponent, + InputReceiverDirective, ], imports: [ CommonModule, diff --git a/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.spec.ts b/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.spec.ts new file mode 100644 index 0000000..37946f5 --- /dev/null +++ b/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.spec.ts @@ -0,0 +1,8 @@ +import { InputReceiverDirective } from './input-receiver.directive'; + +describe('InputReceiverDirective', () => { + it('should create an instance', () => { + const directive = new InputReceiverDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.ts b/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.ts new file mode 100644 index 0000000..718296a --- /dev/null +++ b/mediarepo-ui/src/app/components/shared/app-common/input-receiver/input-receiver.directive.ts @@ -0,0 +1,32 @@ +import { + Directive, + EventEmitter, + HostBinding, + HostListener, + Output +} from "@angular/core"; + +@Directive({ + selector: "[appInputReceiver]" +}) +export class InputReceiverDirective { + + constructor() { + } + + @Output() keyDownEvent = new EventEmitter(); + @Output() keyUpEvent = new EventEmitter(); + + @HostBinding("tabindex") tabIndex = 1; + + @HostListener("keydown", ["$event"]) + onKeyDown(event: KeyboardEvent) { + this.keyDownEvent.emit(event); + } + + @HostListener("keyup", ["$event"]) + onKeyUp(event: KeyboardEvent) { + this.keyUpEvent.emit(event); + } + +} diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html index 9a67404..d12f2ee 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts index f7b06ec..d5dadb2 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.ts @@ -1,5 +1,6 @@ import { - Component, + AfterContentInit, AfterViewInit, + Component, ElementRef, EventEmitter, HostListener, Input, @@ -21,7 +22,7 @@ import {TabService} from "../../../../../services/tab/tab.service"; templateUrl: "./file-gallery.component.html", styleUrls: ["./file-gallery.component.scss"] }) -export class FileGalleryComponent implements OnChanges, OnInit { +export class FileGalleryComponent implements OnChanges, OnInit, AfterViewInit { @Input() files: File[] = []; @Input() preselectedFile: File | undefined; @@ -31,6 +32,7 @@ export class FileGalleryComponent implements OnChanges, OnInit { entries: Selectable[] = []; @ViewChild("virtualScroll") virtualScroll!: CdkVirtualScrollViewport; + @ViewChild("inner") inner!: ElementRef; public selectedFile: Selectable | undefined; public fileContentUrl: SafeResourceUrl | undefined; @@ -50,6 +52,10 @@ export class FileGalleryComponent implements OnChanges, OnInit { } } + public ngAfterViewInit(): void { + this.focus(); + } + public async ngOnChanges(changes: SimpleChanges): Promise { if (changes["files"]) { this.entries = this.files.map( @@ -138,6 +144,24 @@ export class FileGalleryComponent implements OnChanges, OnInit { } } + public focus() { + this.inner.nativeElement.focus(); + } + + public async handleKeydownEvent(event: KeyboardEvent) { + switch (event.key) { + case "ArrowRight": + await this.nextItem(); + break; + case "ArrowLeft": + await this.previousItem(); + break; + case "Escape": + this.onEscapeClick(); + break; + } + } + private scrollToSelection(): void { if (this.selectedFile) { const selectedIndex = this.entries.indexOf(this.selectedFile); @@ -174,20 +198,4 @@ export class FileGalleryComponent implements OnChanges, OnInit { setTimeout(() => this.escapeCount--, 500); } } - - @HostListener("window:keydown", ["$event"]) - private async handleKeydownEvent(event: KeyboardEvent) { - switch (event.key) { - case "ArrowRight": - await this.nextItem(); - break; - case "ArrowLeft": - await this.previousItem(); - break; - case "Escape": - this.onEscapeClick(); - break; - } - } - } 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 6a62c74..08e714a 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,4 +1,4 @@ -
+
@@ -15,7 +15,7 @@
- + diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts index 5a83fb0..52d1286 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-grid/file-grid.component.ts @@ -1,4 +1,5 @@ import { + AfterContentInit, AfterViewInit, Component, ElementRef, EventEmitter, @@ -22,7 +23,7 @@ import {Selectable} from "../../../../../models/Selectable"; templateUrl: "./file-grid.component.html", styleUrls: ["./file-grid.component.scss"] }) -export class FileGridComponent implements OnChanges, OnInit { +export class FileGridComponent implements OnChanges, OnInit, AfterViewInit { @Input() files: File[] = []; @Input() columns: number = 6; @@ -31,7 +32,7 @@ export class FileGridComponent implements OnChanges, OnInit { @Output() fileSelectEvent = new EventEmitter(); @ViewChild("virtualScrollGrid") virtualScroll!: CdkVirtualScrollViewport; - @ViewChild("galleryWrapper") galleryWrapper!: ElementRef; + @ViewChild("inner") inner!: ElementRef; selectedEntries: Selectable[] = []; partitionedGridEntries: Selectable[][] = []; @@ -52,6 +53,10 @@ export class FileGridComponent implements OnChanges, OnInit { this.setPartitionedGridEntries(); } + public ngAfterViewInit(): void { + this.focus(); + } + ngOnChanges(changes: SimpleChanges): void { if (changes["files"]) { this.gridEntries = this.files.map( @@ -211,7 +216,6 @@ export class FileGridComponent implements OnChanges, OnInit { const viewportSize = this.virtualScroll.getViewportSize(); let offsetTop = this.virtualScroll.measureScrollOffset("top"); const contentOffset = Math.floor(selectedIndex / this.columns) * 260; - console.log(offsetTop, contentOffset, viewportSize); if (contentOffset > offsetTop + viewportSize - 300 || contentOffset < offsetTop) { this.virtualScroll.scrollToIndex(Math.floor(selectedIndex / this.columns)); @@ -224,22 +228,11 @@ export class FileGridComponent implements OnChanges, OnInit { } } - private pageDown() { - if (this.virtualScroll) { - const offsetTop = this.virtualScroll.measureScrollOffset("top"); - this.virtualScroll.scrollToOffset(offsetTop + this.virtualScroll.getViewportSize()); - } - } - - private pageUp() { - if (this.virtualScroll) { - const offsetTop = this.virtualScroll.measureScrollOffset("top"); - this.virtualScroll.scrollToOffset(offsetTop - this.virtualScroll.getViewportSize()); - } + public focus() { + this.inner.nativeElement.focus(); } - @HostListener("window:keydown", ["$event"]) - private handleKeydownEvent(event: KeyboardEvent) { + public handleKeydownEvent(event: KeyboardEvent) { this.shiftClicked ||= event.shiftKey; this.ctrlClicked ||= event.ctrlKey; @@ -279,9 +272,22 @@ export class FileGridComponent implements OnChanges, OnInit { } } - @HostListener("window:keyup", ["$event"]) - private handleKeyupEvent(event: KeyboardEvent) { + public handleKeyupEvent(event: KeyboardEvent) { this.shiftClicked = event.shiftKey? false : this.shiftClicked; this.ctrlClicked = event.ctrlKey? false : this.ctrlClicked; } + + private pageDown() { + if (this.virtualScroll) { + const offsetTop = this.virtualScroll.measureScrollOffset("top"); + this.virtualScroll.scrollToOffset(offsetTop + this.virtualScroll.getViewportSize()); + } + } + + private pageUp() { + if (this.virtualScroll) { + const offsetTop = this.virtualScroll.measureScrollOffset("top"); + this.virtualScroll.scrollToOffset(offsetTop - this.virtualScroll.getViewportSize()); + } + } } diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html index d1218c3..a2be8f0 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.html @@ -1,7 +1,7 @@ - - diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts index 5f30323..e6d046f 100644 --- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts +++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-multiview.component.ts @@ -1,5 +1,14 @@ -import {Component, EventEmitter, Input, Output} from "@angular/core"; +import { + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild +} from "@angular/core"; import {File} from "../../../../models/File"; +import {FileGalleryComponent} from "./file-gallery/file-gallery.component"; +import {FileGridComponent} from "./file-grid/file-grid.component"; @Component({ selector: "app-file-multiview", @@ -14,6 +23,9 @@ export class FileMultiviewComponent { @Output() fileOpenEvent = new EventEmitter(); @Output() fileSelectEvent = new EventEmitter(); + @ViewChild(FileGalleryComponent) fileGallery!: FileGalleryComponent; + @ViewChild(FileGridComponent) fileGrid!: FileGridComponent; + public selectedFiles: File[] = []; public preselectedFile: File | undefined; diff --git a/mediarepo-ui/src/app/services/file/file.service.ts b/mediarepo-ui/src/app/services/file/file.service.ts index ea604b7..b4ef3b2 100644 --- a/mediarepo-ui/src/app/services/file/file.service.ts +++ b/mediarepo-ui/src/app/services/file/file.service.ts @@ -20,7 +20,6 @@ export class FileService { } public async findFiles(filters: FilterExpression[], sortBy: SortKey[]): Promise { - console.log(filters); let backendFilters = filters.map(f => f.toBackendType()); return await invoke("plugin:mediarepo|find_files", {