Add edit button to scroll watch playlist on touchscreens

[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 e951ea236a62bec29b30615ff920941ed9576ed3..f982408046e93c777f868fde80fd6282a841705c 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,16 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core'
 import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -25,24 +32,42 @@ export type TopMenuDropdownParam = {
 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
   suffixLabels: { [ parentLabel: string ]: string }
   hasIcons = false
+  container: undefined | 'body' = undefined
+  isModalOpened = false
+  currentMenuEntryIndex: number
 
   private openedOnHover = false
   private routeSub: Subscription
 
-  constructor (private router: Router) {}
+  constructor (
+    private router: Router,
+    private modalService: NgbModal,
+    private screen: ScreenService
+  ) { }
+
+  get isInSmallView () {
+    return this.screen.isInSmallView()
+  }
 
   ngOnInit () {
     this.updateChildLabels(window.location.pathname)
 
     this.routeSub = this.router.events
-                        .pipe(filter(event => event instanceof NavigationEnd))
-                        .subscribe(() => this.updateChildLabels(window.location.pathname))
+      .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 and small views
+    if (this.isInSmallView) {
+      this.container = 'body'
+    }
   }
 
   ngOnDestroy () {
@@ -75,6 +100,27 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.openedOnHover = false
   }
 
+  openModal (index: number) {
+    this.currentMenuEntryIndex = index
+    this.isModalOpened = true
+
+    this.modalService.open(this.modal, {
+      centered: true,
+      beforeDismiss: async () => {
+        this.onModalDismiss()
+        return true
+      }
+    })
+  }
+
+  onModalDismiss () {
+    this.isModalOpened = false
+  }
+
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+
   private updateChildLabels (path: string) {
     this.suffixLabels = {}