Adding scroll to the top button #587, fixes #427

bpatrik · Aug 8, 2023 · b7529b1 · b7529b1
1 parent d1ed607
commit b7529b1
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git 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>({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
@@ -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
@@ -7,7 +7,7 @@
     <div class="container-fluid">
       <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
          [queryParams]="queryService.getParams()">
-        <app-icon class="d-inline-block align-top" [width]="30" [height]="30" ></app-icon>
+        <app-icon class="d-inline-block align-top" [width]="30" [height]="30"></app-icon>
         <strong class="d-none d-lg-inline-block">{{title}}</strong>
       </a>
       <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
@@ -57,14 +57,14 @@
             </ng-container>
             <li class="nav-item d-xl-block d-none">
             <span>
-              <app-language #languageSelector class="navbar-btn" ></app-language>
+              <app-language #languageSelector class="navbar-btn"></app-language>
             </span>
             </li>
             <li class="nav-item divider-vertical d-xl-block d-none">
             </li>
             <li class="nav-item dropdown">
               <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom"
-                   [autoClose]="false"  container="body">
+                   [autoClose]="false" container="body">
                 <button id="button-alignment" dropdownToggle
                         type="button" class="btn btn-tertiary dropdown-toggle"
                         aria-controls="dropdown-alignment">
@@ -204,3 +204,10 @@
   <ng-content select="[navbar-appendix]"></ng-content>
 </div>
 <ng-content select="[body]"></ng-content>
+<button
+  *ngIf="enableScrollUpButton"
+  (click)="scrollUp()"
+  [class.show-btn-scroll-up]="!shouldHideNavbar && !navbarKeepTop"
+  class="btn btn-tertiary rounded-pill btn-scroll-up">
+  <span class="oi oi-chevron-top"></span>
+</button>
diff --git 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
@@ -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;