diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts index 2381aec6..743584a0 100644 --- a/src/common/config/public/ClientConfig.ts +++ b/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', - description: $localize`Ratio of the page height, you need to scroll to show or hide the navigationbar.`, + type: 'positiveFloat', + 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: {client: true}, softReadonly: true}) diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts index 211777c1..30c42715 100644 --- a/src/frontend/app/app.module.ts +++ b/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 { JobProgressComponent } from './ui/settings/workflow/progress/job-progress.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 {SettingsEntryComponent} from './ui/settings/template/settings-entry/settings-entry.component'; -import { UsersComponent } from './ui/settings/users/users.component'; -import { SharingsListComponent } from './ui/settings/sharings-list/sharings-list.component'; +import {UsersComponent} from './ui/settings/users/users.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], }) diff --git a/src/frontend/app/ui/frame/frame.component.ts b/src/frontend/app/ui/frame/frame.component.ts index b2e8274e..73f36f10 100644 --- a/src/frontend/app/ui/frame/frame.component.ts +++ b/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 downDelay = down && this.lastScroll.up < 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.NavbarHideDelay; //we are the top where the navbar by default lives if (this.navContainer.nativeElement.offsetHeight > scrollPosition) { diff --git a/src/frontend/app/ui/gallery/directories/directories.component.ts b/src/frontend/app/ui/gallery/directories/directories.component.ts index d963e36f..4771a2bc 100644 --- a/src/frontend/app/ui/gallery/directories/directories.component.ts +++ b/src/frontend/app/ui/gallery/directories/directories.component.ts @@ -1,6 +1,6 @@ -import { Component, ElementRef, Input, OnChanges } from '@angular/core'; -import { DeviceDetectorService } from 'ngx-device-detector'; -import { SubDirectoryDTO } from '../../../../../common/entities/DirectoryDTO'; +import {Component, ElementRef, HostListener, Input, OnChanges} from '@angular/core'; +import {DeviceDetectorService} from 'ngx-device-detector'; +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 containerWidth = - this.container.nativeElement.parentElement.clientWidth; - this.size = containerWidth / Math.round(containerWidth / size) - 5; + const targetSize = 220 + directoryMargin; + this.size = Math.floor(containerWidth / Math.round((containerWidth / targetSize)) - directoryMargin * 2); } } } diff --git a/src/frontend/app/ui/gallery/gallery.component.css b/src/frontend/app/ui/gallery/gallery.component.css index 6858c05a..f2689d6b 100644 --- a/src/frontend/app/ui/gallery/gallery.component.css +++ b/src/frontend/app/ui/gallery/gallery.component.css @@ -55,6 +55,7 @@ app-gallery-map { .directories { margin-right: 2px; margin-left: 2px; + display: block; } diff --git a/src/frontend/app/ui/gallery/gallery.component.html b/src/frontend/app/ui/gallery/gallery.component.html index 0b1acd2c..f6c90dda 100644 --- a/src/frontend/app/ui/gallery/gallery.component.html +++ b/src/frontend/app/ui/gallery/gallery.component.html @@ -39,10 +39,10 @@ -
+
+ *ngIf="ShowMarkDown"> @@ -52,7 +52,7 @@
diff --git a/src/frontend/app/ui/gallery/gallery.component.ts b/src/frontend/app/ui/gallery/gallery.component.ts index 86ed588d..27ee73d2 100644 --- a/src/frontend/app/ui/gallery/gallery.component.ts +++ b/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; + } } diff --git a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts index 29def038..cd8d1fe5 100644 --- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts +++ b/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(); }