aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-main
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-07-23 15:09:15 +0200
committerGitHub <noreply@github.com>2020-07-23 15:09:15 +0200
commited5bb517266c80904c44bf44a335f1003f5aa277 (patch)
tree80671a21fb8c13ab47a65f01b64222a3a1e96a47 /client/src/app/shared/shared-main
parent345b4a22a8432cfd8c9c9f24634821d58c215b9a (diff)
downloadPeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.tar.gz
PeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.tar.zst
PeerTube-ed5bb517266c80904c44bf44a335f1003f5aa277.zip
Improve navigation sub-menu and tabs effects (#2971)
* Improve nav border and colors on active and non-active * Remove margin-top effect on active nav * Use opacity / bold instead of color change on nav * Remove dropdown items label in sub-menu and add a class active * Position sub-menu to fixed * Autoclose dropdown sub-menu only on outside click * Remove open dropdown on hover in sub-menu * Show reusable h1 for dropdown item in sub-menu * Put reusable sub-menu h1 styles to mixins * Add icons to sub-menu dropdown-item h1 * Make all the sub-menu accessible with focus Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Diffstat (limited to 'client/src/app/shared/shared-main')
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html16
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss6
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts23
3 files changed, 15 insertions, 30 deletions
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index aeaceb662..c737b40c7 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -4,26 +4,28 @@
4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a> 4 <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
5 5
6 <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" 6 <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
7 #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)"> 7 #dropdown="ngbDropdown" autoClose="outside">
8 <span 8 <span
9 *ngIf="isInSmallView" 9 *ngIf="isInSmallView"
10 tabindex=0
10 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" 11 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
11 (click)="openModal(id)" role="button" class="title-page title-page-settings"> 12 (click)="openModal(id)" (keydown.enter)="openModal(id)"
13 role="button" class="title-page title-page-settings">
12 <ng-container i18n>{{ menuEntry.label }}</ng-container> 14 <ng-container i18n>{{ menuEntry.label }}</ng-container>
13 <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
14 </span> 15 </span>
15 16
16 <span 17 <span
17 *ngIf="!isInSmallView" 18 *ngIf="!isInSmallView"
18 (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor 19 tabindex=0
19 (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings" 20 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
21 (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
22 role="button" class="title-page title-page-settings"
20 > 23 >
21 <ng-container i18n>{{ menuEntry.label }}</ng-container> 24 <ng-container i18n>{{ menuEntry.label }}</ng-container>
22 <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
23 </span> 25 </span>
24 26
25 <div ngbDropdownMenu> 27 <div ngbDropdownMenu>
26 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink"> 28 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }" [routerLink]="menuChild.routerLink">
27 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon> 29 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
28 30
29 {{ menuChild.label }} 31 {{ menuChild.label }}
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
index 84dd7dce3..655c38489 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
@@ -1,6 +1,12 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4:host {
5 display: block;
6 height: $sub-menu-height;
7 margin-bottom: $sub-menu-margin-bottom;
8}
9
4.parent-entry { 10.parent-entry {
5 span[role=button] { 11 span[role=button] {
6 cursor: pointer; 12 cursor: pointer;
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
index 5909db0b5..66f8f7e55 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -33,7 +33,6 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
33 isModalOpened = false 33 isModalOpened = false
34 currentMenuEntryIndex: number 34 currentMenuEntryIndex: number
35 35
36 private openedOnHover = false
37 private routeSub: Subscription 36 private routeSub: Subscription
38 37
39 constructor ( 38 constructor (
@@ -68,32 +67,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
68 if (this.routeSub) this.routeSub.unsubscribe() 67 if (this.routeSub) this.routeSub.unsubscribe()
69 } 68 }
70 69
71 openDropdownOnHover (dropdown: NgbDropdown) {
72 this.openedOnHover = true
73 dropdown.open()
74
75 // Menu was closed
76 dropdown.openChange
77 .pipe(take(1))
78 .subscribe(() => this.openedOnHover = false)
79 }
80
81 dropdownAnchorClicked (dropdown: NgbDropdown) { 70 dropdownAnchorClicked (dropdown: NgbDropdown) {
82 if (this.openedOnHover) {
83 this.openedOnHover = false
84 return
85 }
86
87 return dropdown.toggle() 71 return dropdown.toggle()
88 } 72 }
89 73
90 closeDropdownIfHovered (dropdown: NgbDropdown) {
91 if (this.openedOnHover === false) return
92
93 dropdown.close()
94 this.openedOnHover = false
95 }
96
97 openModal (index: number) { 74 openModal (index: number) {
98 this.currentMenuEntryIndex = index 75 this.currentMenuEntryIndex = index
99 this.isModalOpened = true 76 this.isModalOpened = true