From d363ef5360b479d5f494ac1559fba59b2069fe9e Mon Sep 17 00:00:00 2001
From: Kim <1877318+kimsible@users.noreply.github.com>
Date: Thu, 30 Apr 2020 19:23:54 +0200
Subject: Use modal instead of dropdown menu in small/mobile views (#2674)

Co-Authored-By: Rigel Kent <par@rigelk.eu>
---
 .../app/shared/menu/top-menu-dropdown.component.ts | 50 +++++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

(limited to '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 24a083654..f98240804 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -1,8 +1,14 @@
-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'
 
@@ -26,31 +32,40 @@ 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,
+    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 view
-    if (this.screen.isInMobileView()) {
+    // We have to set body for the container to avoid scroll overflow on mobile and small views
+    if (this.isInSmallView) {
       this.container = 'body'
     }
   }
@@ -85,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 = {}
 
-- 
cgit v1.2.3