diff options
author | Chocobozzz <me@florianbigard.com> | 2019-03-20 13:53:51 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-03-20 13:53:51 +0100 |
commit | a55052c9baf2952795685d3b4e5348c8cb9da70d (patch) | |
tree | e967b99fa195b76bd1b1f8473f3861e3d60ea97b /client/src/app/shared/menu | |
parent | 7e73f07131a6738b299311448ab4491eb532838a (diff) | |
download | PeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.tar.gz PeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.tar.zst PeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.zip |
Add my library section in menu
Diffstat (limited to 'client/src/app/shared/menu')
3 files changed, 23 insertions, 2 deletions
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html index d3c896019..8d58fa1db 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.html +++ b/client/src/app/shared/menu/top-menu-dropdown.component.html | |||
@@ -13,7 +13,11 @@ | |||
13 | </span> | 13 | </span> |
14 | 14 | ||
15 | <div ngbDropdownMenu> | 15 | <div ngbDropdownMenu> |
16 | <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a> | 16 | <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink"> |
17 | <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon> | ||
18 | |||
19 | {{ menuChild.label }} | ||
20 | </a> | ||
17 | </div> | 21 | </div> |
18 | </div> | 22 | </div> |
19 | 23 | ||
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss index 77159532f..d7c7de957 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.scss +++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss | |||
@@ -1,3 +1,6 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
1 | .parent-entry { | 4 | .parent-entry { |
2 | span[role=button] { | 5 | span[role=button] { |
3 | cursor: pointer; | 6 | cursor: pointer; |
@@ -16,3 +19,9 @@ | |||
16 | /deep/ .dropdown-menu { | 19 | /deep/ .dropdown-menu { |
17 | margin-top: 0 !important; | 20 | margin-top: 0 !important; |
18 | } | 21 | } |
22 | |||
23 | .icon { | ||
24 | @include dropdown-with-icon-item; | ||
25 | |||
26 | top: -1px; | ||
27 | } | ||
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 e859c30dd..e951ea236 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.ts +++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts | |||
@@ -3,6 +3,7 @@ import { filter, take } from 'rxjs/operators' | |||
3 | import { NavigationEnd, Router } from '@angular/router' | 3 | import { NavigationEnd, Router } from '@angular/router' |
4 | import { Subscription } from 'rxjs' | 4 | import { Subscription } from 'rxjs' |
5 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | 5 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' |
6 | import { GlobalIconName } from '@app/shared/images/global-icon.component' | ||
6 | 7 | ||
7 | export type TopMenuDropdownParam = { | 8 | export type TopMenuDropdownParam = { |
8 | label: string | 9 | label: string |
@@ -11,6 +12,8 @@ export type TopMenuDropdownParam = { | |||
11 | children?: { | 12 | children?: { |
12 | label: string | 13 | label: string |
13 | routerLink: string | 14 | routerLink: string |
15 | |||
16 | iconName?: GlobalIconName | ||
14 | }[] | 17 | }[] |
15 | } | 18 | } |
16 | 19 | ||
@@ -23,6 +26,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { | |||
23 | @Input() menuEntries: TopMenuDropdownParam[] = [] | 26 | @Input() menuEntries: TopMenuDropdownParam[] = [] |
24 | 27 | ||
25 | suffixLabels: { [ parentLabel: string ]: string } | 28 | suffixLabels: { [ parentLabel: string ]: string } |
29 | hasIcons = false | ||
26 | 30 | ||
27 | private openedOnHover = false | 31 | private openedOnHover = false |
28 | private routeSub: Subscription | 32 | private routeSub: Subscription |
@@ -35,6 +39,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { | |||
35 | this.routeSub = this.router.events | 39 | this.routeSub = this.router.events |
36 | .pipe(filter(event => event instanceof NavigationEnd)) | 40 | .pipe(filter(event => event instanceof NavigationEnd)) |
37 | .subscribe(() => this.updateChildLabels(window.location.pathname)) | 41 | .subscribe(() => this.updateChildLabels(window.location.pathname)) |
42 | |||
43 | this.hasIcons = this.menuEntries.some( | ||
44 | e => e.children && e.children.some(c => !!c.iconName) | ||
45 | ) | ||
38 | } | 46 | } |
39 | 47 | ||
40 | ngOnDestroy () { | 48 | ngOnDestroy () { |
@@ -48,7 +56,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { | |||
48 | // Menu was closed | 56 | // Menu was closed |
49 | dropdown.openChange | 57 | dropdown.openChange |
50 | .pipe(take(1)) | 58 | .pipe(take(1)) |
51 | .subscribe(e => this.openedOnHover = false) | 59 | .subscribe(() => this.openedOnHover = false) |
52 | } | 60 | } |
53 | 61 | ||
54 | dropdownAnchorClicked (dropdown: NgbDropdown) { | 62 | dropdownAnchorClicked (dropdown: NgbDropdown) { |