aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-04-26 11:39:03 +0200
committerChocobozzz <me@florianbigard.com>2019-05-13 09:45:37 +0200
commit64545a834b881d9b49d84f99119070f356b93e24 (patch)
tree7614ee5700817ab0fd06d034394c5e4b5cdf1fe4
parent743f023c5361af1428e927171effb2616d4e0245 (diff)
downloadPeerTube-64545a834b881d9b49d84f99119070f356b93e24.tar.gz
PeerTube-64545a834b881d9b49d84f99119070f356b93e24.tar.zst
PeerTube-64545a834b881d9b49d84f99119070f356b93e24.zip
Fix top menu dropdown
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.ts13
2 files changed, 13 insertions, 2 deletions
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 54a8f9e80..35511ee62 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -3,7 +3,7 @@
3 3
4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a> 4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
5 5
6 <div *ngIf="!menuEntry.routerLink" ngbDropdown container="body" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)"> 6 <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
7 <span 7 <span
8 (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor 8 (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
9 (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page" 9 (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index e951ea236..5ccdafb54 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -4,6 +4,7 @@ import { NavigationEnd, Router } from '@angular/router'
4import { Subscription } from 'rxjs' 4import { Subscription } from 'rxjs'
5import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' 5import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
6import { GlobalIconName } from '@app/shared/images/global-icon.component' 6import { GlobalIconName } from '@app/shared/images/global-icon.component'
7import { ScreenService } from '@app/shared/misc/screen.service'
7 8
8export type TopMenuDropdownParam = { 9export type TopMenuDropdownParam = {
9 label: string 10 label: string
@@ -27,11 +28,15 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
27 28
28 suffixLabels: { [ parentLabel: string ]: string } 29 suffixLabels: { [ parentLabel: string ]: string }
29 hasIcons = false 30 hasIcons = false
31 container: undefined | 'body' = undefined
30 32
31 private openedOnHover = false 33 private openedOnHover = false
32 private routeSub: Subscription 34 private routeSub: Subscription
33 35
34 constructor (private router: Router) {} 36 constructor (
37 private router: Router,
38 private screen: ScreenService
39 ) {}
35 40
36 ngOnInit () { 41 ngOnInit () {
37 this.updateChildLabels(window.location.pathname) 42 this.updateChildLabels(window.location.pathname)
@@ -43,6 +48,12 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
43 this.hasIcons = this.menuEntries.some( 48 this.hasIcons = this.menuEntries.some(
44 e => e.children && e.children.some(c => !!c.iconName) 49 e => e.children && e.children.some(c => !!c.iconName)
45 ) 50 )
51
52 // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
53 // But this break our hovering system
54 if (this.screen.isInMobileView()) {
55 this.container = 'body'
56 }
46 } 57 }
47 58
48 ngOnDestroy () { 59 ngOnDestroy () {