From 0a4cb95c98d4b6f7c3e404535996f706c659e13e Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 2 Jul 2020 09:00:17 +0200 Subject: simplify navigation within most admin menus --- client/src/app/+my-account/my-account.component.ts | 2 +- client/src/app/+my-account/my-account.module.ts | 3 - .../+my-account/top-menu-dropdown.component.html | 50 -------- .../+my-account/top-menu-dropdown.component.scss | 56 --------- .../app/+my-account/top-menu-dropdown.component.ts | 131 --------------------- 5 files changed, 1 insertion(+), 241 deletions(-) delete mode 100644 client/src/app/+my-account/top-menu-dropdown.component.html delete mode 100644 client/src/app/+my-account/top-menu-dropdown.component.scss delete mode 100644 client/src/app/+my-account/top-menu-dropdown.component.ts (limited to 'client/src/app/+my-account') 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 @@ -
- - - {{ menuEntry.label }} - -
- - {{ menuEntry.label }} - - {{ suffixLabels[menuEntry.label] }} - - - - {{ menuEntry.label }} - - {{ suffixLabels[menuEntry.label] }} - - -
- - - - {{ menuChild.label }} - -
-
- -
- - -
- -
- - - - {{ menuChild.label }} - -
- -
- 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 - } - } - } - } -} -- cgit v1.2.3