Improving Directory UI responsiveness #587

src/common/config/public/ClientConfig.ts

@@ -431,13 +431,22 @@ export class NavBarConfig {
   ];
   @ConfigProperty({
     tags: {
-      name: $localize`Navbar show/hide delay`,
+      name: $localize`Navbar show delay`,
       priority: ConfigPriority.underTheHood
     },
-    type: 'ratio',
+    type: 'positiveFloat',
-    description: $localize`Ratio of the page height, you need to scroll to show or hide the navigationbar.`,
+    description: $localize`Ratio of the page height, you need to scroll to show the navigation bar.`,
   })
-  NavbarShowHideDelay: number = 0.15;
+  NavbarShowDelay: number = 0.30;
+  @ConfigProperty({
+    tags: {
+      name: $localize`Navbar hide delay`,
+      priority: ConfigPriority.underTheHood
+    },
+    type: 'positiveFloat',
+    description: $localize`Ratio of the page height, you need to scroll to hide the navigation bar.`,
+  })
+  NavbarHideDelay: number = 0.15;
 }
 
 @SubConfigClass<TAGS>({tags: {client: true}, softReadonly: true})

src/frontend/app/app.module.ts

@@ -99,11 +99,11 @@ import {FilterService} from './ui/gallery/filter/filter.service';
 import {TemplateComponent} from './ui/settings/template/template.component';
 import {WorkflowComponent} from './ui/settings/workflow/workflow.component';
 import {GalleryStatisticComponent} from './ui/settings/gallery-statistic/gallery-statistic.component';
-import { JobButtonComponent } from './ui/settings/workflow/button/job-button.settings.component';
+import {JobButtonComponent} from './ui/settings/workflow/button/job-button.settings.component';
-import { JobProgressComponent } from './ui/settings/workflow/progress/job-progress.settings.component';
+import {JobProgressComponent} from './ui/settings/workflow/progress/job-progress.settings.component';
 import {SettingsEntryComponent} from './ui/settings/template/settings-entry/settings-entry.component';
-import { UsersComponent } from './ui/settings/users/users.component';
+import {UsersComponent} from './ui/settings/users/users.component';
-import { SharingsListComponent } from './ui/settings/sharings-list/sharings-list.component';
+import {SharingsListComponent} from './ui/settings/sharings-list/sharings-list.component';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -272,7 +272,9 @@ Marker.prototype.options.icon = iconDefault;
     VersionService,
     ScheduledJobsService,
     BackendtextService,
-    CookieService
+    CookieService,
+    GPXFilesFilterPipe,
+    MDFilesFilterPipe,
   ],
   bootstrap: [AppComponent],
 })

src/frontend/app/ui/frame/frame.component.ts

@@ -97,8 +97,8 @@ export class FrameComponent {
     const scrollPosition = PageHelper.ScrollY;
     const up = this.lastScroll.any > scrollPosition;
     const down = this.lastScroll.any < scrollPosition;
-    const upDelay = up && this.lastScroll.down > scrollPosition + window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay;
+    const upDelay = up && this.lastScroll.down > scrollPosition + window.innerHeight * Config.Gallery.NavBar.NavbarShowDelay;
-    const downDelay = down && this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay;
+    const downDelay = down && this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarHideDelay;
 
     //we are the top where the navbar by default lives
     if (this.navContainer.nativeElement.offsetHeight > scrollPosition) {

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

@@ -1,6 +1,6 @@
-import { Component, ElementRef, Input, OnChanges } from '@angular/core';
+import {Component, ElementRef, HostListener, Input, OnChanges} from '@angular/core';
-import { DeviceDetectorService } from 'ngx-device-detector';
+import {DeviceDetectorService} from 'ngx-device-detector';
-import { SubDirectoryDTO } from '../../../../../common/entities/DirectoryDTO';
+import {SubDirectoryDTO} from '../../../../../common/entities/DirectoryDTO';
 
 @Component({
   selector: 'app-gallery-directories',
@@ -23,15 +23,25 @@ export class DirectoriesComponent implements OnChanges {
     this.updateSize();
   }
 
+  @HostListener('window:resize')
+  onResize(): void {
+    this.updateSize();
+  }
+
   private updateSize(): void {
+    if (!this.container?.nativeElement?.clientWidth) {
+      return;
+    }
+    const directoryMargin = 2; // 2px margin on both sides
+    const containerWidth =
+      this.container.nativeElement.clientWidth - 1; // the browser sometimes makes some rounding error. Sacrifice 1px to make that error up.
+
     if (!this.isDesktop && window.innerWidth < window.innerHeight) {
       // On portrait mode, show 2 directories side by side with some padding
-      this.size = Math.round(window.innerWidth / 2) - 25;
+      this.size = Math.floor(containerWidth / 2 - (directoryMargin * 2));
     } else {
-      const size = 220 + 5;
+      const targetSize = 220 + directoryMargin;
-      const containerWidth =
+      this.size = Math.floor(containerWidth / Math.round((containerWidth / targetSize)) - directoryMargin * 2);
-        this.container.nativeElement.parentElement.clientWidth;
-      this.size = containerWidth / Math.round(containerWidth / size) - 5;
     }
   }
 }

src/frontend/app/ui/gallery/gallery.component.css

@@ -55,6 +55,7 @@ app-gallery-map {
 .directories {
   margin-right: 2px;
   margin-left: 2px;
+  display: block;
 }
 
 

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

@@ -39,10 +39,10 @@
       <app-gallery-directories class="directories"
                                [directories]="directoryContent?.directories || []"></app-gallery-directories>
 
-      <div class="blog-map-row">
+      <div class="blog-map-row" *ngIf="ShowMarkDown || ShowMap">
         <div class="blog-wrapper"
              [style.width]="blogOpen ?  '100%' : 'calc(100% - 100px)'"
-             *ngIf="config.MetaFile.markdown  && directoryContent?.metaFile && (directoryContent.metaFile | mdFiles).length>0">
+             *ngIf="ShowMarkDown">
           <app-gallery-blog [collapsed]="!blogOpen"
                             [mdFiles]="directoryContent.metaFile | mdFiles"></app-gallery-blog>
 
@@ -52,7 +52,7 @@
           </button>
         </div>
         <app-gallery-map
-          *ngIf="(isPhotoWithLocation || (directoryContent?.metaFile | gpxFiles)?.length > 0) && mapEnabled"
+          *ngIf="ShowMap"
           [photos]="directoryContent?.media | photosOnly"
           [gpxFiles]="directoryContent?.metaFile | gpxFiles"></app-gallery-map>
       </div>

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

@@ -16,6 +16,8 @@ import {GallerySortingService} from './navigator/sorting.service';
 import {MediaDTO} from '../../../../common/entities/MediaDTO';
 import {FilterService} from './filter/filter.service';
 import {PiTitleService} from '../../model/pi-title.service';
+import {GPXFilesFilterPipe} from '../../pipes/GPXFilesFilterPipe';
+import {MDFilesFilterPipe} from '../../pipes/MDFilesFilterPipe';
 
 @Component({
   selector: 'app-gallery',
@@ -59,7 +61,9 @@ export class GalleryComponent implements OnInit, OnDestroy {
     private navigation: NavigationService,
     private filterService: FilterService,
     private sortingService: GallerySortingService,
-    private piTitleService: PiTitleService
+    private piTitleService: PiTitleService,
+    private gpxFilesFilterPipe: GPXFilesFilterPipe,
+    private mdFilesFilterPipe:MDFilesFilterPipe,
   ) {
     this.mapEnabled = Config.Map.enabled;
     PageHelper.showScrollY();
@@ -199,4 +203,12 @@ export class GalleryComponent implements OnInit, OnDestroy {
       }
     }
   };
+
+  get ShowMarkDown():boolean{
+    return this.config.MetaFile.markdown  && this.directoryContent?.metaFile && this.mdFilesFilterPipe.transform(this.directoryContent.metaFile).length>0;
+  }
+
+  get ShowMap():boolean{
+    return (this.isPhotoWithLocation || this.gpxFilesFilterPipe.transform(this.directoryContent?.metaFile)?.length > 0) && this.mapEnabled;
+  }
 }

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

@@ -199,7 +199,7 @@ export class GalleryNavigatorComponent {
     const scrollPosition = PageHelper.ScrollY;
     if (this.lastScroll.any < scrollPosition) { // scroll down
       //hide delay
-      if (this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarShowHideDelay) {
+      if (this.lastScroll.up < scrollPosition - window.innerHeight * Config.Gallery.NavBar.NavbarHideDelay) {
         this.showFilters = false;
         this.dropdown.hide();
       }