From b7529b13e10f283ecf0b26d3c6aee7d12a936a3b Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Tue, 8 Aug 2023 23:49:38 +0200 Subject: [PATCH] Adding scroll to the top button #587, fixes #427 --- src/common/config/public/ClientConfig.ts | 15 +++++++++++++++ src/frontend/app/ui/frame/frame.component.css | 14 ++++++++++++++ src/frontend/app/ui/frame/frame.component.html | 13 ++++++++++--- src/frontend/app/ui/frame/frame.component.ts | 14 +++++++++++--- src/frontend/styles.css | 6 +++--- 5 files changed, 53 insertions(+), 9 deletions(-) diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts index 9ce70634..839a980f 100644 --- a/src/common/config/public/ClientConfig.ts +++ b/src/common/config/public/ClientConfig.ts @@ -29,6 +29,10 @@ export enum ThemeModes { light = 1, dark, auto } +export enum ScrollUpModes { + never = 1, mobileOnly, always +} + export type TAGS = { client?: true, priority?: ConfigPriority, @@ -739,6 +743,17 @@ export class NavBarConfig { description: $localize`Ratio of the page height, you need to scroll to hide the navigation bar.`, }) NavbarHideDelay: number = 0.15; + + @ConfigProperty({ + tags: { + name: $localize`Show scroll up button`, + priority: ConfigPriority.underTheHood + }, + type: ScrollUpModes, + description: $localize`Set when the floating scroll-up button should be visible.`, + }) + showScrollUpButton: ScrollUpModes = ScrollUpModes.mobileOnly; + } @SubConfigClass({tags: {client: true}, softReadonly: true}) diff --git a/src/frontend/app/ui/frame/frame.component.css b/src/frontend/app/ui/frame/frame.component.css index 78515612..b4b1f9af 100644 --- a/src/frontend/app/ui/frame/frame.component.css +++ b/src/frontend/app/ui/frame/frame.component.css @@ -60,3 +60,17 @@ a.dropdown-item span, button.dropdown-item span, div.dropdown-item span { a.dropdown-item span.badge, button.dropdown-item span.badge { margin-left: -0.8rem; } + +.btn-scroll-up { + position: fixed; + width: 3em; + height: 3em; + right: -3em; + bottom: 3em; + transition: 0.3s right; + z-index: 999; +} + +.show-btn-scroll-up{ + right: 1em; +} diff --git a/src/frontend/app/ui/frame/frame.component.html b/src/frontend/app/ui/frame/frame.component.html index 3107671f..91366a8b 100644 --- a/src/frontend/app/ui/frame/frame.component.html +++ b/src/frontend/app/ui/frame/frame.component.html @@ -7,7 +7,7 @@
- + {{title}}
@@ -57,14 +57,14 @@
  • - +
  • + [autoClose]="false" container="body">
    + diff --git a/src/frontend/app/ui/frame/frame.component.ts b/src/frontend/app/ui/frame/frame.component.ts index ccca6c21..a8f61932 100644 --- a/src/frontend/app/ui/frame/frame.component.ts +++ b/src/frontend/app/ui/frame/frame.component.ts @@ -6,13 +6,14 @@ import {Config} from '../../../../common/config/public/Config'; import {BehaviorSubject} from 'rxjs'; import {NotificationService} from '../../model/notification.service'; import {QueryService} from '../../model/query.service'; -import {NavigationLinkTypes, ThemeModes} from '../../../../common/config/public/ClientConfig'; +import {NavigationLinkTypes, ScrollUpModes, ThemeModes} from '../../../../common/config/public/ClientConfig'; import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO'; import {Utils} from '../../../../common/Utils'; import {PageHelper} from '../../model/page.helper'; import {BsDropdownDirective} from 'ngx-bootstrap/dropdown'; import {LanguageComponent} from '../language/language.component'; import {ThemeService} from '../../model/theme.service'; +import {DeviceDetectorService} from 'ngx-device-detector'; @Component({ selector: 'app-frame', @@ -49,14 +50,17 @@ export class FrameComponent { @ViewChild('languageSelector', {static: true}) languageSelector: LanguageComponent; ThemeModes = ThemeModes; + public readonly enableScrollUpButton: boolean; constructor( private authService: AuthenticationService, public notificationService: NotificationService, public queryService: QueryService, private router: Router, - public themeService: ThemeService + public themeService: ThemeService, + private deviceService: DeviceDetectorService ) { + this.enableScrollUpButton = Config.Gallery.NavBar.showScrollUpButton === ScrollUpModes.always || (Config.Gallery.NavBar.showScrollUpButton === ScrollUpModes.mobileOnly && this.deviceService.isDesktop()); this.user = this.authService.user; } @@ -106,7 +110,7 @@ export class FrameComponent { const down = this.lastScroll.any < scrollPosition; 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 + // We are the top where the navbar by default lives if (this.navContainer.nativeElement.offsetHeight > scrollPosition) { // do not force move navbar up when we are scrolling up from bottom if (this.shouldHideNavbar != false || scrollPosition <= 0) { @@ -141,5 +145,9 @@ export class FrameComponent { this.lastScroll.any = scrollPosition; } + + scrollUp(): void { + PageHelper.ScrollY = 0; + } } diff --git a/src/frontend/styles.css b/src/frontend/styles.css index 452ef17b..e254511e 100644 --- a/src/frontend/styles.css +++ b/src/frontend/styles.css @@ -35,8 +35,8 @@ This is mostly btn-light */ .btn-tertiary, [data-bs-theme=light] .btn-tertiary { --bs-btn-color: #000; - --bs-btn-bg: #f8f9fa; - --bs-btn-border-color: #f8f9fa; + --bs-btn-bg: var(--bs-body-bg); + --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: #000; --bs-btn-hover-bg: #d3d4d5; --bs-btn-hover-border-color: #c6c7c8; @@ -55,7 +55,7 @@ This is mostly btn-dark + border fix */ [data-bs-theme=dark] .btn-tertiary { --bs-btn-color: #fff; - --bs-btn-bg: rgba(var(--bs-body-color-rgb), 0.03); + --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #424649;