simplify navigation within most admin menus

5 files changed, 1 insertions, 241 deletions

diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index 85b2795c5..abc823c62 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
-import { TopMenuDropdownParam } from './top-menu-dropdown.component'
+import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
   selector: 'my-my-account',
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 8604b8b60..0ce243844 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -33,7 +33,6 @@ import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/m
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component'
 import { MyAccountComponent } from './my-account.component'
-import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
 
 @NgModule({
   imports: [
@@ -79,8 +78,6 @@ import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
     MyAccountVideoPlaylistUpdateComponent,
     MyAccountVideoPlaylistsComponent,
     MyAccountVideoPlaylistElementsComponent,
-
-    TopMenuDropdownComponent
   ],
 
   exports: [
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.html b/client/src/app/+my-account/top-menu-dropdown.component.html
deleted file mode 100644
index aeaceb662..000000000
--- a/client/src/app/+my-account/top-menu-dropdown.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
-  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
-
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
-
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
-      #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
-      <span
-        *ngIf="isInSmallView"
-        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
-        (click)="openModal(id)" role="button" class="title-page title-page-settings">
-        <ng-container i18n>{{ menuEntry.label }}</ng-container>
-        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
-      </span>
-
-      <span
-        *ngIf="!isInSmallView"
-        (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
-      >
-        <ng-container i18n>{{ menuEntry.label }}</ng-container>
-        <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
-      </span>
-
-      <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
-
-          {{ menuChild.label }}
-        </a>
-      </div>
-    </div>
-  </ng-container>
-</div>
-
-<ng-template #modal let-close="close" let-dismiss="dismiss">
-  <div class="modal-body">
-    <ng-container *ngFor="let menuEntry of menuEntries; index as id">
-      <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
-        <a *ngFor="let menuChild of menuEntry.children"
-          [ngClass]="{ icon: hasIcons }"
-          [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
-          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
-
-          {{ menuChild.label }}
-        </a>
-      </div>
-    </ng-container>
-  </div>
-</ng-template>
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.scss b/client/src/app/+my-account/top-menu-dropdown.component.scss
deleted file mode 100644
index 84dd7dce3..000000000
--- a/client/src/app/+my-account/top-menu-dropdown.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-.parent-entry {
-  span[role=button] {
-    cursor: pointer;
-  }
-
-  a {
-    display: block;
-  }
-}
-
-::ng-deep .dropdown-toggle::after {
-  position: relative;
-  top: 2px;
-}
-
-::ng-deep .dropdown-menu {
-  margin-top: 0 !important;
-}
-
-.icon {
-  @include dropdown-with-icon-item;
-
-  top: -1px;
-}
-
-.sub-menu.no-scroll {
-  overflow-x: hidden;
-}
-
-.modal-body {
-  .hidden {
-    display: none;
-  }
-
-  a {
-    @include disable-default-a-behaviour;
-
-    color: currentColor;
-    box-sizing: border-box;
-    display: block;
-    font-size: 1.2rem;
-    padding: 9px 12px;
-    text-align: initial;
-    text-transform: unset;
-    width: 100%;
-
-    &.active {
-      color: pvar(--mainBackgroundColor) !important;
-      background-color: pvar(--mainHoverColor);
-      opacity: .9;
-    }
-  }
-}
diff --git a/client/src/app/+my-account/top-menu-dropdown.component.ts b/client/src/app/+my-account/top-menu-dropdown.component.ts
deleted file mode 100644
index 5909db0b5..000000000
--- a/client/src/app/+my-account/top-menu-dropdown.component.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { Subscription } from 'rxjs'
-import { filter, take } from 'rxjs/operators'
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
-import { MenuService, ScreenService } from '@app/core'
-import { GlobalIconName } from '@app/shared/shared-icons'
-import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-
-export type TopMenuDropdownParam = {
-  label: string
-  routerLink?: string
-
-  children?: {
-    label: string
-    routerLink: string
-
-    iconName?: GlobalIconName
-  }[]
-}
-
-@Component({
-  selector: 'my-top-menu-dropdown',
-  templateUrl: './top-menu-dropdown.component.html',
-  styleUrls: [ './top-menu-dropdown.component.scss' ]
-})
-export class TopMenuDropdownComponent implements OnInit, OnDestroy {
-  @Input() menuEntries: TopMenuDropdownParam[] = []
-
-  @ViewChild('modal', { static: true }) modal: NgbModal
-
-  suffixLabels: { [ parentLabel: string ]: string }
-  hasIcons = false
-  isModalOpened = false
-  currentMenuEntryIndex: number
-
-  private openedOnHover = false
-  private routeSub: Subscription
-
-  constructor (
-    private router: Router,
-    private modalService: NgbModal,
-    private screen: ScreenService,
-    private menuService: MenuService
-  ) { }
-
-  get isInSmallView () {
-    let marginLeft = 0
-    if (this.menuService.isMenuDisplayed) {
-      marginLeft = this.menuService.menuWidth
-    }
-
-    return this.screen.isInSmallView(marginLeft)
-  }
-
-  ngOnInit () {
-    this.updateChildLabels(window.location.pathname)
-
-    this.routeSub = this.router.events
-      .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)
-    )
-  }
-
-  ngOnDestroy () {
-    if (this.routeSub) this.routeSub.unsubscribe()
-  }
-
-  openDropdownOnHover (dropdown: NgbDropdown) {
-    this.openedOnHover = true
-    dropdown.open()
-
-    // Menu was closed
-    dropdown.openChange
-            .pipe(take(1))
-            .subscribe(() => this.openedOnHover = false)
-  }
-
-  dropdownAnchorClicked (dropdown: NgbDropdown) {
-    if (this.openedOnHover) {
-      this.openedOnHover = false
-      return
-    }
-
-    return dropdown.toggle()
-  }
-
-  closeDropdownIfHovered (dropdown: NgbDropdown) {
-    if (this.openedOnHover === false) return
-
-    dropdown.close()
-    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 = {}
-
-    for (const entry of this.menuEntries) {
-      if (!entry.children) continue
-
-      for (const child of entry.children) {
-        if (path.startsWith(child.routerLink)) {
-          this.suffixLabels[entry.label] = child.label
-        }
-      }
-    }
-  }
-}