aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html58
-rw-r--r--client/src/app/menu/menu.component.scss86
2 files changed, 81 insertions, 63 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 5622b3a31..e80e6b803 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,5 +1,5 @@
1<div class="menu-wrapper"> 1<div class="menu-wrapper">
2 <menu> 2 <menu [ngClass]="{ 'logged-in': isLoggedIn }">
3 <div class="top-menu"> 3 <div class="top-menu">
4 <div *ngIf="isLoggedIn" class="logged-in-block"> 4 <div *ngIf="isLoggedIn" class="logged-in-block">
5 <my-avatar-notification [user]="user"></my-avatar-notification> 5 <my-avatar-notification [user]="user"></my-avatar-notification>
@@ -13,20 +13,16 @@
13 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon> 13 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
14 14
15 <div ngbDropdownMenu> 15 <div ngbDropdownMenu>
16 <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item"> 16 <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
17 My public profile 17 <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
18 </a> 18 </a>
19 19
20 <a i18n routerLink="/my-account" class="dropdown-item"> 20 <a routerLink="/my-account" class="dropdown-item">
21 My account 21 <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
22 </a> 22 </a>
23 23
24 <a i18n routerLink="/my-account/videos" class="dropdown-item"> 24 <a (click)="logout($event)" class="dropdown-item" href="#">
25 My videos 25 <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
26 </a>
27
28 <a i18n (click)="logout($event)" class="dropdown-item" href="#">
29 Log out
30 </a> 26 </a>
31 </div> 27 </div>
32 </div> 28 </div>
@@ -37,31 +33,51 @@
37 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a> 33 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
38 </div> 34 </div>
39 35
40 <div class="panel-block"> 36 <div *ngIf="isLoggedIn" class="panel-block">
41 <div i18n class="block-title">Videos</div> 37 <div i18n class="block-title">My library</div>
38
39 <a routerLink="/my-account/videos" routerLinkActive="active">
40 <my-global-icon iconName="videos"></my-global-icon>
41 <ng-container i18n>Videos</ng-container>
42 </a>
43
44 <a routerLink="/my-account/video-playlists" routerLinkActive="active">
45 <my-global-icon iconName="playlists"></my-global-icon>
46 <ng-container i18n>Playlists</ng-container>
47 </a>
42 48
43 <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active"> 49 <a routerLink="/videos/subscriptions" routerLinkActive="active">
44 <span class="icon icon-videos-subscriptions"></span> 50 <my-global-icon iconName="subscriptions"></my-global-icon>
45 <ng-container i18n>Subscriptions</ng-container> 51 <ng-container i18n>Subscriptions</ng-container>
46 </a> 52 </a>
47 53
54 <a routerLink="/my-account/history/videos" routerLinkActive="active">
55 <my-global-icon iconName="history"></my-global-icon>
56 <ng-container i18n>History</ng-container>
57 </a>
58
59 </div>
60
61 <div class="panel-block">
62 <div i18n class="block-title">Videos</div>
63
48 <a routerLink="/videos/overview" routerLinkActive="active"> 64 <a routerLink="/videos/overview" routerLinkActive="active">
49 <span class="icon icon-videos-overview"></span> 65 <my-global-icon iconName="globe"></my-global-icon>
50 <ng-container i18n>Overview</ng-container> 66 <ng-container i18n>Overview</ng-container>
51 </a> 67 </a>
52 68
53 <a routerLink="/videos/trending" routerLinkActive="active"> 69 <a routerLink="/videos/trending" routerLinkActive="active">
54 <span class="icon icon-videos-trending"></span> 70 <my-global-icon iconName="trending"></my-global-icon>
55 <ng-container i18n>Trending</ng-container> 71 <ng-container i18n>Trending</ng-container>
56 </a> 72 </a>
57 73
58 <a routerLink="/videos/recently-added" routerLinkActive="active"> 74 <a routerLink="/videos/recently-added" routerLinkActive="active">
59 <span class="icon icon-videos-recently-added"></span> 75 <my-global-icon iconName="recently-added"></my-global-icon>
60 <ng-container i18n>Recently added</ng-container> 76 <ng-container i18n>Recently added</ng-container>
61 </a> 77 </a>
62 78
63 <a routerLink="/videos/local" routerLinkActive="active"> 79 <a routerLink="/videos/local" routerLinkActive="active">
64 <span class="icon icon-videos-local"></span> 80 <my-global-icon iconName="home"></my-global-icon>
65 <ng-container i18n>Local</ng-container> 81 <ng-container i18n>Local</ng-container>
66 </a> 82 </a>
67 </div> 83 </div>
@@ -70,12 +86,12 @@
70 <div class="block-title" i18n>More</div> 86 <div class="block-title" i18n>More</div>
71 87
72 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> 88 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
73 <span class="icon icon-administration"></span> 89 <my-global-icon iconName="administration"></my-global-icon>
74 <ng-container i18n>Administration</ng-container> 90 <ng-container i18n>Administration</ng-container>
75 </a> 91 </a>
76 92
77 <a routerLink="/about" routerLinkActive="active"> 93 <a routerLink="/about" routerLinkActive="active">
78 <span class="icon icon-about"></span> 94 <my-global-icon iconName="about"></my-global-icon>
79 <ng-container i18n>About</ng-container> 95 <ng-container i18n>About</ng-container>
80 </a> 96 </a>
81 </div> 97 </div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 7b392b599..9241e8059 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -26,6 +26,16 @@ menu {
26 overflow-y: auto; 26 overflow-y: auto;
27 } 27 }
28 28
29 &.logged-in {
30 .panel-block {
31 margin-bottom: 25px;
32 }
33
34 .block-title {
35 margin-bottom: 15px;
36 }
37 }
38
29 .top-menu { 39 .top-menu {
30 flex-grow: 1; 40 flex-grow: 1;
31 width: $menu-width; 41 width: $menu-width;
@@ -37,7 +47,7 @@ menu {
37 display: flex; 47 display: flex;
38 align-items: center; 48 align-items: center;
39 justify-content: center; 49 justify-content: center;
40 margin-bottom: 35px; 50 margin-bottom: 20px;
41 51
42 .logged-in-info { 52 .logged-in-info {
43 @include ellipsis; 53 @include ellipsis;
@@ -74,6 +84,24 @@ menu {
74 border: none; 84 border: none;
75 } 85 }
76 } 86 }
87
88 .dropdown-item {
89 @include dropdown-with-icon-item;
90
91 my-global-icon {
92 @include apply-svg-color(var(--mainForegroundColor));
93
94 width: 22px;
95 height: 22px;
96
97 &[iconName="sign-out"] {
98 position: relative;
99 right: -1px;
100 height: 21px;
101 width: 21px;
102 }
103 }
104 }
77 } 105 }
78 } 106 }
79 107
@@ -134,57 +162,31 @@ menu {
134 background-color: rgba(255, 255, 255, 0.10); 162 background-color: rgba(255, 255, 255, 0.10);
135 } 163 }
136 164
137 .icon { 165 my-global-icon {
138 @include icon(22px); 166 @include apply-svg-color(#808080);
139 167
168 display: flex;
169 width: 22px;
170 height: 22px;
140 margin-right: 18px; 171 margin-right: 18px;
141 172
142 &.icon-videos-subscriptions { 173 &[iconName="playlists"] {
143 position: relative; 174 height: 24px;
144 top: -1px; 175 width: 24px;
145 background-image: url('../../assets/images/menu/subscriptions.svg');
146 }
147
148 &.icon-videos-overview {
149 position: relative;
150 background-image: url('../../assets/images/menu/globe.svg');
151 }
152
153 &.icon-videos-trending {
154 position: relative;
155 top: -1px;
156 background-image: url('../../assets/images/menu/trending.svg');
157 }
158 176
159 &.icon-videos-recently-added { 177 margin-right: 16px;
160 width: 23px;
161 height: 23px;
162 background-image: url('../../assets/images/menu/recently-added.svg');
163 } 178 }
164 179
165 &.icon-videos-local { 180 &[iconName="videos"] {
166 width: 23px;
167 height: 23px;
168
169 position: relative; 181 position: relative;
170 top: -1px; 182 right: -1px;
171
172 background-image: url('../../assets/images/menu/home.svg');
173 }
174
175 &.icon-administration {
176 width: 23px;
177 height: 23px;
178
179 background-image: url('../../assets/images/menu/administration.svg');
180 } 183 }
184 }
181 185
182 &.icon-about { 186 .icon {
183 width: 23px; 187 @include icon(22px);
184 height: 23px;
185 188
186 background-image: url('../../assets/images/menu/about.svg'); 189 margin-right: 18px;
187 }
188 } 190 }
189 } 191 }
190 } 192 }