1
0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00

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

This commit is contained in:
Patrik J. Braun 2023-08-08 23:49:38 +02:00
parent d1ed607647
commit b7529b13e1
5 changed files with 53 additions and 9 deletions

View File

@ -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})

View File

@ -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;
}

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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;