Add Alt+UP shortkey for folder navigation #587

src/frontend/app/ui/gallery/filter/filter.gallery.component.ts

@@ -1,10 +1,6 @@
-import { Component } from '@angular/core';
+import { OnDestroy,  OnInit,Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FilterOption, FilterService, SelectedFilter } from './filter.service';
-import {
-  OnDestroy,
-  OnInit,
-} from '../../../../../../node_modules/@angular/core';
 
 @Component({
   selector: 'app-gallery-filter',

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts

@@ -432,7 +432,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   private hideControls = () => {
-     this.controllersDimmed = true;
+    this.controllersDimmed = true;
   };
 
   private updateFaceContainerDim(): void {

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -4,6 +4,7 @@
       <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
         <li *ngFor="let path of routes | async" class="breadcrumb-item">
           <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
+             [title]="path.title || ''"
              [queryParams]="queryService.getParams()">{{path.name}}</a>
           <ng-container *ngIf="!path.route">{{path.name}}</ng-container>
         </li>

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts

@@ -1,21 +1,13 @@
-import {Component} from '@angular/core';
+import {Component, HostListener} from '@angular/core';
-import {RouterLink} from '@angular/router';
+import {Router, RouterLink} from '@angular/router';
 import {UserDTOUtils} from '../../../../../common/entities/UserDTO';
 import {AuthenticationService} from '../../../model/network/authentication.service';
 import {QueryService} from '../../../model/query.service';
-import {
+import {ContentService, ContentWrapperWithError, DirectoryContent,} from '../content.service';
-  ContentService,
-  ContentWrapperWithError,
-  DirectoryContent,
-} from '../content.service';
 import {Utils} from '../../../../../common/Utils';
 import {SortingMethods} from '../../../../../common/entities/SortingMethods';
 import {Config} from '../../../../../common/config/public/Config';
-import {
+import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../../../../common/entities/SearchQueryDTO';
-  SearchQueryTypes,
-  TextSearch,
-  TextSearchQueryMatchTypes,
-} from '../../../../../common/entities/SearchQueryDTO';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {GallerySortingService} from './sorting.service';
@@ -37,12 +29,14 @@ export class GalleryNavigatorComponent {
   public routes: Observable<NavigatorPath[]>;
   public showFilters = false;
   private readonly RootFolderName: string;
+  private parentPath: string = null;
 
   constructor(
     public authService: AuthenticationService,
     public queryService: QueryService,
     public galleryService: ContentService,
-    public sortingService: GallerySortingService
+    public sortingService: GallerySortingService,
+    private router: Router,
   ) {
     this.sortingMethodsType = Utils.enumToArray(SortingMethods);
     this.RootFolderName = $localize`Home`;
@@ -52,6 +46,7 @@ export class GalleryNavigatorComponent {
     );
     this.routes = this.galleryService.content.pipe(
       map((c) => {
+        this.parentPath = null;
         if (!c.directory) {
           return [];
         }
@@ -96,9 +91,15 @@ export class GalleryNavigatorComponent {
                 ? route
                 : null,
             });
+
           }
         });
 
+        // parent directory has a shortcut to navigate to
+        if (arr.length >= 2 && arr[arr.length - 2].route) {
+          this.parentPath = arr[arr.length - 2].route;
+          arr[arr.length - 2].title = $localize`key: alt + up`;
+        }
         return arr;
 
       })
@@ -158,10 +159,32 @@ export class GalleryNavigatorComponent {
       text: Utils.concatUrls('./', c.directory.path, c.directory.name),
     } as TextSearch);
   }
+
+
+  navigateToParentDirectory() {
+    if (!this.parentPath) {
+      return;
+    }
+    this.router.navigate(['/gallery', this.parentPath],
+      {queryParams: this.queryService.getParams()})
+      .catch(console.error);
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  onKeyPress(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+        if (event.altKey) {
+          this.navigateToParentDirectory();
+        }
+        break;
+    }
+  }
 }
 
 interface NavigatorPath {
   name: string;
   route: string;
+  title?: string;
 }
 

src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.ts

@@ -1,10 +1,9 @@
-import {Component, EventEmitter, forwardRef, Input, Output,} from '@angular/core';
+import {Component, EventEmitter, forwardRef, Input, Output,TemplateRef} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
 import {AutoCompleteService} from '../autocomplete.service';
 import {SearchQueryDTO} from '../../../../../../common/entities/SearchQueryDTO';
 import {ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator,} from '@angular/forms';
 import {SearchQueryParserService} from '../search-query-parser.service';
-import {TemplateRef} from '../../../../../../../node_modules/@angular/core';
 import {BsModalRef, BsModalService,} from '../../../../../../../node_modules/ngx-bootstrap/modal';
 
 @Component({

src/frontend/app/ui/settings/template/template.component.ts

@@ -7,7 +7,7 @@ import {WebConfig} from '../../../../../common/config/private/WebConfig';
 import {JobProgressDTO} from '../../../../../common/entities/job/JobProgressDTO';
 import {JobDTOUtils} from '../../../../../common/entities/job/JobDTO';
 import {ScheduledJobsService} from '../scheduled-jobs.service';
-import {FormControl} from '../../../../../../node_modules/@angular/forms';
+import {FormControl} from '@angular/forms';
 import {Subscription} from 'rxjs';
 import {IWebConfigClassPrivate} from '../../../../../../node_modules/typeconfig/src/decorators/class/IWebConfigClass';
 import {ConfigPriority, TAGS} from '../../../../../common/config/public/ClientConfig';

src/frontend/app/ui/settings/workflow/workflow.component.ts

@@ -1,5 +1,4 @@
-import {Component, OnDestroy, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {Component, forwardRef, OnDestroy, OnInit, QueryList, ViewChildren} from '@angular/core';
-import {forwardRef} from '../../../../../../node_modules/@angular/core';
 import {ModalDirective} from 'ngx-bootstrap/modal';
 import {
   AfterJobTrigger,
@@ -11,7 +10,6 @@ import {
 import {ScheduledJobsService} from '../scheduled-jobs.service';
 import {BackendtextService} from '../../../model/backendtext.service';
 import {SettingsService} from '../settings.service';
-import {ConfigTemplateEntry} from '../../../../../common/entities/job/JobDTO';
 import {JobProgressDTO, JobProgressStates} from '../../../../../common/entities/job/JobProgressDTO';
 import {
   AfterJobTriggerConfig,
@@ -20,13 +18,7 @@ import {
   PeriodicJobTriggerConfig,
   ScheduledJobTriggerConfig
 } from '../../../../../common/config/private/PrivateConfig';
-import {
+import {ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator} from '@angular/forms';
-  ControlValueAccessor,
-  NG_VALIDATORS,
-  NG_VALUE_ACCESSOR,
-  ValidationErrors,
-  Validator
-} from '../../../../../../node_modules/@angular/forms';
 
 @Component({
   selector: 'app-settings-workflow',
@@ -105,7 +97,6 @@ export class WorkflowComponent implements ControlValueAccessor, Validator, OnIni
   }
 
 
-
   ngOnInit(): void {
     this.jobsService.subscribeToProgress();
     this.jobsService.getAvailableJobs().catch(console.error);