aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html13
-rw-r--r--client/src/app/menu/menu.component.ts14
2 files changed, 13 insertions, 14 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index a5985a301..88e3d60db 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -3,7 +3,7 @@
3 <div class="top-menu"> 3 <div class="top-menu">
4 <div *ngIf="isLoggedIn" class="logged-in-block"> 4 <div *ngIf="isLoggedIn" class="logged-in-block">
5 <div> 5 <div>
6 <my-avatar-notification [user]="user" (navigate)="onSameUrlRestoreScrollPosition($event)"></my-avatar-notification> 6 <my-avatar-notification [user]="user" (navigate)="onActiveLinkScrollToAnchor($event)"></my-avatar-notification>
7 7
8 <div class="logged-in-info"> 8 <div class="logged-in-info">
9 <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a> 9 <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
@@ -22,7 +22,8 @@
22 22
23 <div class="dropdown-divider"></div> 23 <div class="dropdown-divider"></div>
24 24
25 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/notifications"> 25 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/notifications"
26 #notifications (click)="onActiveLinkScrollToAnchor(notifications)">
26 <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon> <ng-container i18n>My notifications</ng-container> 27 <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon> <ng-container i18n>My notifications</ng-container>
27 </a> 28 </a>
28 29
@@ -35,7 +36,7 @@
35 </a> 36 </a>
36 37
37 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles" 38 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
38 #settingsLanguagesSubtitles (click)="onSameUrlRestoreScrollPosition(settingsLanguagesSubtitles)"> 39 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
39 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon> 40 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
40 <span i18n>Videos:</span> 41 <span i18n>Videos:</span>
41 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span> 42 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
@@ -43,7 +44,7 @@
43 44
44 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" 45 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings"
45 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy 46 fragment="video-sensitive-content-policy" #settingsSensitiveContentPolicy
46 (click)="onSameUrlRestoreScrollPosition(settingsSensitiveContentPolicy)"> 47 (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)">
47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon> 48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon> 49 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
49 <span i18n>Sensitive:</span> 50 <span i18n>Sensitive:</span>
@@ -72,12 +73,12 @@
72 </div> 73 </div>
73 74
74 <div class="logged-in-menu"> 75 <div class="logged-in-menu">
75 <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onSameUrlRestoreScrollPosition(settingsLink)"> 76 <a routerLink="/my-account" routerLinkActive="active" #settingsLink (click)="onActiveLinkScrollToAnchor(settingsLink)">
76 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> 77 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
77 <ng-container i18n>My account</ng-container> 78 <ng-container i18n>My account</ng-container>
78 </a> 79 </a>
79 80
80 <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onSameUrlRestoreScrollPosition(libraryLink)"> 81 <a routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
81 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 82 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
82 <ng-container i18n>My library</ng-container> 83 <ng-container i18n>My library</ng-container>
83 </a> 84 </a>
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 48ed91973..97a3b6d24 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,8 +1,10 @@
1import { ViewportScroller } from '@angular/common'
1import { HotkeysService } from 'angular2-hotkeys' 2import { HotkeysService } from 'angular2-hotkeys'
2import * as debug from 'debug' 3import * as debug from 'debug'
3import { switchMap } from 'rxjs/operators' 4import { switchMap } from 'rxjs/operators'
4import { Component, OnInit, ViewChild } from '@angular/core' 5import { Component, OnInit, ViewChild } from '@angular/core'
5import { Router } from '@angular/router' 6import { Router } from '@angular/router'
7import { scrollToTop } from '@app/helpers'
6import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core' 8import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
7import { LanguageChooserComponent } from '@app/menu/language-chooser.component' 9import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
8import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component' 10import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
@@ -39,6 +41,7 @@ export class MenuComponent implements OnInit {
39 } 41 }
40 42
41 constructor ( 43 constructor (
44 private viewportScroller: ViewportScroller,
42 private authService: AuthService, 45 private authService: AuthService,
43 private userService: UserService, 46 private userService: UserService,
44 private serverService: ServerService, 47 private serverService: ServerService,
@@ -199,23 +202,18 @@ export class MenuComponent implements OnInit {
199 return this.languages.find(lang => lang.id === localeId).label 202 return this.languages.find(lang => lang.id === localeId).label
200 } 203 }
201 204
202 onSameUrlRestoreScrollPosition (link: HTMLAnchorElement) { 205 onActiveLinkScrollToAnchor (link: HTMLAnchorElement) {
203 const linkURL = link.getAttribute('href') 206 const linkURL = link.getAttribute('href')
204 const linkHash = link.getAttribute('fragment') 207 const linkHash = link.getAttribute('fragment')
205 208
206 // On same url without fragment restore top scroll position 209 // On same url without fragment restore top scroll position
207 if (!linkHash && this.router.url.includes(linkURL)) { 210 if (!linkHash && this.router.url.includes(linkURL)) {
208 window.scrollTo({ 211 scrollToTop('smooth')
209 left: 0,
210 top: 0,
211 behavior: 'smooth'
212 })
213 } 212 }
214 213
215 // On same url with fragment restore anchor scroll position 214 // On same url with fragment restore anchor scroll position
216 if (linkHash && this.router.url === linkURL) { 215 if (linkHash && this.router.url === linkURL) {
217 const anchor = document.getElementById(link.getAttribute('fragment')) 216 this.viewportScroller.scrollToAnchor(linkHash)
218 anchor.scrollIntoView({ behavior: 'smooth', inline: 'nearest' })
219 } 217 }
220 218
221 if (this.screenService.isInSmallView()) { 219 if (this.screenService.isInSmallView()) {