From 30d55e75cae1adec3fc43c84691975bf8b97db34 Mon Sep 17 00:00:00 2001 From: Kim <1877318+kimsible@users.noreply.github.com> Date: Mon, 17 Aug 2020 10:13:31 +0200 Subject: Add restore scroll position on user-dropdown anchors links and scroll to top on active sub-menu links (#3066) * Add restore scroll position on router same url * Remove settings top anchor * Add scrollToTop on active links fixed sub-menu * Add restore scroll position on notification avatar links * Toggle menu and close pophover when click on active dropdown menu-left link * Add onSameUrlRestoreScrollPosition on user dropdown channels link * Same behavior scrollTop and scroll to anchor everywhere Co-authored-by: kimsible --- .../my-account-settings.component.html | 2 -- client/src/app/app.component.ts | 2 +- .../app/menu/avatar-notification.component.html | 3 +- .../src/app/menu/avatar-notification.component.ts | 7 ++++- client/src/app/menu/menu.component.html | 18 ++++++++---- client/src/app/menu/menu.component.ts | 33 ++++++++++++++++++++-- .../misc/top-menu-dropdown.component.html | 8 ++++-- .../misc/top-menu-dropdown.component.ts | 10 +++++++ 8 files changed, 66 insertions(+), 17 deletions(-) diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html index de8353851..2ad014f01 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html @@ -1,7 +1,5 @@

Settings

-
-
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index ef0b1ae56..b8af4e2c7 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -121,7 +121,7 @@ export class AppComponent implements OnInit, AfterViewInit { // scrollToAnchor first to preserve anchor position when using history navigation if (e.anchor) { setTimeout(() => { - this.viewportScroller.scrollToAnchor(e.anchor) + document.getElementById(e.anchor).scrollIntoView({ behavior: 'smooth', inline: 'nearest' }) }) return diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 7999b3346..b24bd0309 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -21,6 +21,7 @@
@@ -34,7 +35,7 @@ [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()" > - + See all your notifications diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts index 9a64faa6a..8b9955069 100644 --- a/client/src/app/menu/avatar-notification.component.ts +++ b/client/src/app/menu/avatar-notification.component.ts @@ -1,6 +1,6 @@ import { Subject, Subscription } from 'rxjs' import { filter } from 'rxjs/operators' -import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core' +import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild } from '@angular/core' import { NavigationEnd, Router } from '@angular/router' import { Notifier, User, UserNotificationSocket } from '@app/core' import { UserNotificationService } from '@app/shared/shared-main' @@ -15,6 +15,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { @ViewChild('popover', { static: true }) popover: NgbPopover @Input() user: User + @Output() navigate = new EventEmitter() unreadNotifications = 0 loaded = false @@ -65,6 +66,10 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { this.loaded = true } + onNavigate (link: HTMLAnchorElement) { + this.navigate.emit(link) + } + markAllAsRead () { this.markAllAsReadSubject.next(true) } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 7f83a6fb8..2011899d3 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -2,7 +2,7 @@
- +
{{ user.account?.displayName }} @@ -21,11 +21,13 @@
- + Account settings - + Channels settings @@ -37,13 +39,16 @@ {{ language }} - + Videos: {{ videoLanguages.join(', ') }} - + Sensitive: @@ -56,7 +61,8 @@ - + More account settings diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 3d6cbda24..f9a0a9f57 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -2,7 +2,8 @@ import { HotkeysService } from 'angular2-hotkeys' import * as debug from 'debug' import { switchMap } from 'rxjs/operators' import { Component, OnInit, ViewChild } from '@angular/core' -import { AuthService, AuthStatus, AuthUser, RedirectService, ScreenService, ServerService, UserService } from '@app/core' +import { Router } from '@angular/router' +import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core' import { LanguageChooserComponent } from '@app/menu/language-chooser.component' import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component' import { ServerConfig, UserRight, VideoConstant } from '@shared/models' @@ -43,8 +44,10 @@ export class MenuComponent implements OnInit { private serverService: ServerService, private redirectService: RedirectService, private hotkeysService: HotkeysService, - private screenService: ScreenService - ) { } + private screenService: ScreenService, + private menuService: MenuService, + private router: Router + ) { } get isInMobileView () { return this.screenService.isInMobileView() @@ -192,6 +195,30 @@ export class MenuComponent implements OnInit { return this.languages.find(lang => lang.id === localeId).label } + onSameUrlRestoreScrollPosition (link: HTMLAnchorElement) { + const linkURL = link.getAttribute('href') + const linkHash = link.getAttribute('fragment') + + // On same url without fragment restore top scroll position + if (!linkHash && this.router.url.includes(linkURL)) { + window.scrollTo({ + left: 0, + top: 0, + behavior: 'smooth' + }) + } + + // On same url with fragment restore anchor scroll position + if (linkHash && this.router.url === linkURL) { + const anchor = document.getElementById(link.getAttribute('fragment')) + anchor.scrollIntoView({ behavior: 'smooth', inline: 'nearest' }) + } + + if (this.screenService.isInSmallView()) { + this.menuService.toggleMenu() + } + } + private buildUserLanguages () { if (!this.user) { this.videoLanguages = [] diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html index 416bd9bc8..ee3346ea9 100644 --- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html +++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html @@ -1,7 +1,7 @@
- {{ menuEntry.label }} + {{ menuEntry.label }}
@@ -28,7 +28,8 @@ + [routerLink]="menuChild.routerLink" + #routerLink (click)="onActiveLinkScrollToTop(routerLink)"> {{ menuChild.label }} @@ -46,7 +47,8 @@ + [routerLink]="menuChild.routerLink" routerLinkActive="active" + #routerLink (click)="dismissOtherModals(); onActiveLinkScrollToTop(routerLink)"> {{ menuChild.label }} diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts index 043b647c9..ba5568595 100644 --- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts +++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts @@ -94,6 +94,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { this.isModalOpened = false } + onActiveLinkScrollToTop (link: HTMLAnchorElement) { + if (!this.isBroadcastMessageDisplayed && this.router.url.includes(link.getAttribute('href'))) { + window.scrollTo({ + left: 0, + top: 0, + behavior: 'smooth' + }) + } + } + dismissOtherModals () { this.modalService.dismissAll() } -- cgit v1.2.3