Handle overview pagination in client

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / menu / top-menu-dropdown.component.ts

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 272b721b2be98eff791f0f51e9dfe58eca04f78d..24a083654ee5dcaecdc105f3f88a6f36a3604571 100644 (file)
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -1,9 +1,10 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { filter, take } from 'rxjs/operators'
-import { NavigationStart, Router } from '@angular/router'
+import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { drop } from 'lodash-es'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -12,6 +13,8 @@ export type TopMenuDropdownParam = {
   children?: {
     label: string
     routerLink: string
+
+    iconName?: GlobalIconName
   }[]
 }
 
@@ -24,18 +27,32 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
   suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
+  container: undefined | 'body' = undefined
 
   private openedOnHover = false
   private routeSub: Subscription
 
-  constructor (private router: Router) {}
+  constructor (
+    private router: Router,
+    private screen: ScreenService
+  ) {}
 
   ngOnInit () {
     this.updateChildLabels(window.location.pathname)
 
     this.routeSub = this.router.events
-                        .pipe(filter(event => event instanceof NavigationStart))
+                        .pipe(filter(event => event instanceof NavigationEnd))
                         .subscribe(() => this.updateChildLabels(window.location.pathname))
+
+    this.hasIcons = this.menuEntries.some(
+      e => e.children && e.children.some(c => !!c.iconName)
+    )
+
+    // We have to set body for the container to avoid scroll overflow on mobile view
+    if (this.screen.isInMobileView()) {
+      this.container = 'body'
+    }
   }
 
   ngOnDestroy () {
@@ -49,7 +66,16 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     // Menu was closed
     dropdown.openChange
             .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
+  }
+
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+
+    return dropdown.toggle()
   }
 
   closeDropdownIfHovered (dropdown: NgbDropdown) {