aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-03-20 13:53:51 +0100
committerChocobozzz <me@florianbigard.com>2019-03-20 13:53:51 +0100
commita55052c9baf2952795685d3b4e5348c8cb9da70d (patch)
treee967b99fa195b76bd1b1f8473f3861e3d60ea97b /client
parent7e73f07131a6738b299311448ab4491eb532838a (diff)
downloadPeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.tar.gz
PeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.tar.zst
PeerTube-a55052c9baf2952795685d3b4e5348c8cb9da70d.zip
Add my library section in menu
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-account/my-account.component.ts27
-rw-r--r--client/src/app/menu/menu.component.html58
-rw-r--r--client/src/app/menu/menu.component.scss86
-rw-r--r--client/src/app/shared/images/global-icon.component.ts17
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html6
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.scss9
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.ts10
-rw-r--r--client/src/assets/images/global/folder.html10
-rw-r--r--client/src/assets/images/global/history.html11
-rw-r--r--client/src/assets/images/global/playlists.html9
-rw-r--r--client/src/assets/images/global/server.html15
-rw-r--r--client/src/assets/images/global/sign-out.html3
-rw-r--r--client/src/assets/images/global/user.html10
-rw-r--r--client/src/assets/images/global/videos.html14
-rw-r--r--client/src/assets/images/global/videos.svg14
-rw-r--r--client/src/assets/images/menu/about.html (renamed from client/src/assets/images/menu/about.svg)5
-rw-r--r--client/src/assets/images/menu/administration.html (renamed from client/src/assets/images/menu/administration.svg)6
-rw-r--r--client/src/assets/images/menu/globe.html (renamed from client/src/assets/images/menu/globe.svg)6
-rw-r--r--client/src/assets/images/menu/go.html12
-rw-r--r--client/src/assets/images/menu/home.html (renamed from client/src/assets/images/menu/home.svg)6
-rw-r--r--client/src/assets/images/menu/recently-added.html (renamed from client/src/assets/images/menu/recently-added.svg)7
-rw-r--r--client/src/assets/images/menu/subscriptions.html (renamed from client/src/assets/images/menu/subscriptions.svg)15
-rw-r--r--client/src/assets/images/menu/trending.html (renamed from client/src/assets/images/menu/trending.svg)6
-rw-r--r--client/src/assets/images/video/watch-later.html11
-rw-r--r--client/src/sass/include/_mixins.scss16
25 files changed, 265 insertions, 124 deletions
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index f624ff505..d98d06f8e 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -21,23 +21,28 @@ export class MyAccountComponent {
21 children: [ 21 children: [
22 { 22 {
23 label: this.i18n('My channels'), 23 label: this.i18n('My channels'),
24 routerLink: '/my-account/video-channels' 24 routerLink: '/my-account/video-channels',
25 iconName: 'folder'
25 }, 26 },
26 { 27 {
27 label: this.i18n('My videos'), 28 label: this.i18n('My videos'),
28 routerLink: '/my-account/videos' 29 routerLink: '/my-account/videos',
30 iconName: 'videos'
29 }, 31 },
30 { 32 {
31 label: this.i18n('My playlists'), 33 label: this.i18n('My playlists'),
32 routerLink: '/my-account/video-playlists' 34 routerLink: '/my-account/video-playlists',
35 iconName: 'playlists'
33 }, 36 },
34 { 37 {
35 label: this.i18n('My subscriptions'), 38 label: this.i18n('My subscriptions'),
36 routerLink: '/my-account/subscriptions' 39 routerLink: '/my-account/subscriptions',
40 iconName: 'subscriptions'
37 }, 41 },
38 { 42 {
39 label: this.i18n('My history'), 43 label: this.i18n('My history'),
40 routerLink: '/my-account/history/videos' 44 routerLink: '/my-account/history/videos',
45 iconName: 'history'
41 } 46 }
42 ] 47 ]
43 } 48 }
@@ -45,7 +50,8 @@ export class MyAccountComponent {
45 if (this.isVideoImportEnabled()) { 50 if (this.isVideoImportEnabled()) {
46 libraryEntries.children.push({ 51 libraryEntries.children.push({
47 label: 'My imports', 52 label: 'My imports',
48 routerLink: '/my-account/video-imports' 53 routerLink: '/my-account/video-imports',
54 iconName: 'cloud-download'
49 }) 55 })
50 } 56 }
51 57
@@ -54,15 +60,18 @@ export class MyAccountComponent {
54 children: [ 60 children: [
55 { 61 {
56 label: this.i18n('Muted accounts'), 62 label: this.i18n('Muted accounts'),
57 routerLink: '/my-account/blocklist/accounts' 63 routerLink: '/my-account/blocklist/accounts',
64 iconName: 'user'
58 }, 65 },
59 { 66 {
60 label: this.i18n('Muted instances'), 67 label: this.i18n('Muted instances'),
61 routerLink: '/my-account/blocklist/servers' 68 routerLink: '/my-account/blocklist/servers',
69 iconName: 'server'
62 }, 70 },
63 { 71 {
64 label: this.i18n('Ownership changes'), 72 label: this.i18n('Ownership changes'),
65 routerLink: '/my-account/ownership' 73 routerLink: '/my-account/ownership',
74 iconName: 'im-with-her'
66 } 75 }
67 ] 76 ]
68 } 77 }
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 }
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 3fa6fea96..d85f269ea 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -2,6 +2,8 @@ import { Component, ElementRef, Input, OnInit } from '@angular/core'
2 2
3const icons = { 3const icons = {
4 'add': require('../../../assets/images/global/add.html'), 4 'add': require('../../../assets/images/global/add.html'),
5 'user': require('../../../assets/images/global/user.html'),
6 'sign-out': require('../../../assets/images/global/sign-out.html'),
5 'syndication': require('../../../assets/images/global/syndication.html'), 7 'syndication': require('../../../assets/images/global/syndication.html'),
6 'help': require('../../../assets/images/global/help.html'), 8 'help': require('../../../assets/images/global/help.html'),
7 'sparkle': require('../../../assets/images/global/sparkle.html'), 9 'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,12 +13,15 @@ const icons = {
11 'no': require('../../../assets/images/global/no.html'), 13 'no': require('../../../assets/images/global/no.html'),
12 'cloud-download': require('../../../assets/images/global/cloud-download.html'), 14 'cloud-download': require('../../../assets/images/global/cloud-download.html'),
13 'undo': require('../../../assets/images/global/undo.html'), 15 'undo': require('../../../assets/images/global/undo.html'),
16 'history': require('../../../assets/images/global/history.html'),
14 'circle-tick': require('../../../assets/images/global/circle-tick.html'), 17 'circle-tick': require('../../../assets/images/global/circle-tick.html'),
15 'cog': require('../../../assets/images/global/cog.html'), 18 'cog': require('../../../assets/images/global/cog.html'),
16 'download': require('../../../assets/images/global/download.html'), 19 'download': require('../../../assets/images/global/download.html'),
20 'go': require('../../../assets/images/menu/go.html'),
17 'edit': require('../../../assets/images/global/edit.html'), 21 'edit': require('../../../assets/images/global/edit.html'),
18 'im-with-her': require('../../../assets/images/global/im-with-her.html'), 22 'im-with-her': require('../../../assets/images/global/im-with-her.html'),
19 'delete': require('../../../assets/images/global/delete.html'), 23 'delete': require('../../../assets/images/global/delete.html'),
24 'server': require('../../../assets/images/global/server.html'),
20 'cross': require('../../../assets/images/global/cross.html'), 25 'cross': require('../../../assets/images/global/cross.html'),
21 'validate': require('../../../assets/images/global/validate.html'), 26 'validate': require('../../../assets/images/global/validate.html'),
22 'tick': require('../../../assets/images/global/tick.html'), 27 'tick': require('../../../assets/images/global/tick.html'),
@@ -28,7 +33,17 @@ const icons = {
28 'share': require('../../../assets/images/video/share.html'), 33 'share': require('../../../assets/images/video/share.html'),
29 'upload': require('../../../assets/images/video/upload.html'), 34 'upload': require('../../../assets/images/video/upload.html'),
30 'playlist-add': require('../../../assets/images/video/playlist-add.html'), 35 'playlist-add': require('../../../assets/images/video/playlist-add.html'),
31 'play': require('../../../assets/images/global/play.html') 36 'play': require('../../../assets/images/global/play.html'),
37 'playlists': require('../../../assets/images/global/playlists.html'),
38 'about': require('../../../assets/images/menu/about.html'),
39 'globe': require('../../../assets/images/menu/globe.html'),
40 'home': require('../../../assets/images/menu/home.html'),
41 'recently-added': require('../../../assets/images/menu/recently-added.html'),
42 'trending': require('../../../assets/images/menu/trending.html'),
43 'videos': require('../../../assets/images/global/videos.html'),
44 'folder': require('../../../assets/images/global/folder.html'),
45 'administration': require('../../../assets/images/menu/administration.html'),
46 'subscriptions': require('../../../assets/images/menu/subscriptions.html')
32} 47}
33 48
34export type GlobalIconName = keyof typeof icons 49export type GlobalIconName = keyof typeof icons
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'
3import { NavigationEnd, Router } from '@angular/router' 3import { NavigationEnd, Router } from '@angular/router'
4import { Subscription } from 'rxjs' 4import { Subscription } from 'rxjs'
5import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' 5import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
6import { GlobalIconName } from '@app/shared/images/global-icon.component'
6 7
7export type TopMenuDropdownParam = { 8export 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) {
diff --git a/client/src/assets/images/global/folder.html b/client/src/assets/images/global/folder.html
new file mode 100644
index 000000000..8443c15c6
--- /dev/null
+++ b/client/src/assets/images/global/folder.html
@@ -0,0 +1,10 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-708.000000, -115.000000)">
4 <g id="16" transform="translate(708.000000, 115.000000)">
5 <path d="M11.5857864,17 L14.2928932,19.7071068 L14.5857864,20 L15,20 L20.009222,20 C21.1044506,20 22,19.102094 22,18.0014977 L22,6.99850233 C22,5.89626364 21.1085926,5 20.0066023,5 L3.99339768,5 C2.89217541,5 2,5.89385529 2,6.99539757 L2,15.0046024 C2,16.099013 2.89670181,17 3.99754465,17 L11.5857864,17 Z" id="Rectangle-406" stroke="#000000" stroke-width="2" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) "/>
6 <path d="M3,5 C3,4.44771525 3.4454627,4 3.99871095,4 L12.5,4 L10.5,6 L3.99594209,6 C3.44589846,6 3,5.55613518 3,5 L3,5 Z" id="Rectangle-409" fill="#000000"/>
7 </g>
8 </g>
9 </g>
10</svg>
diff --git a/client/src/assets/images/global/history.html b/client/src/assets/images/global/history.html
new file mode 100644
index 000000000..dfb70b598
--- /dev/null
+++ b/client/src/assets/images/global/history.html
@@ -0,0 +1,11 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
3 <g id="Artboard-4" transform="translate(-620.000000, -863.000000)" stroke="#000000" stroke-width="2">
4 <g id="354" transform="translate(620.000000, 863.000000)">
5 <path d="M6.63582585,18.3637479 C8.26452234,19.9925528 10.5146102,21 13,21 L13,21 C17.9705627,21 22,16.9705627 22,12 C22,7.02943725 17.9705627,3 13,3 C8.02943725,3 4,7.02943725 4,12" id="Oval-203"/>
6 <polygon id="Path-282" fill="#000000" points="1.5 11 7.5 11 4.5 14"/>
7 <polyline id="Path-283" points="13 7 13 12 15.5 14.5"/>
8 </g>
9 </g>
10 </g>
11</svg>
diff --git a/client/src/assets/images/global/playlists.html b/client/src/assets/images/global/playlists.html
new file mode 100644
index 000000000..21b05009a
--- /dev/null
+++ b/client/src/assets/images/global/playlists.html
@@ -0,0 +1,9 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-664.000000, -467.000000)" stroke="#000000">
4 <g id="175" transform="translate(664.000000, 467.000000)">
5 <path stoke="#000000" d="M7.5,7 C7.5,6.72427445 7.72568093,6.5 8.00684547,6.5 L19.9931545,6.5 C20.2754761,6.5 20.5,6.72240424 20.5,7 C20.5,7.27572555 20.2743191,7.5 19.9931545,7.5 L8.00684547,7.5 C7.72452386,7.5 7.5,7.27759576 7.5,7 Z M7.5,12 C7.5,11.7242745 7.72568093,11.5 8.00684547,11.5 L19.9931545,11.5 C20.2754761,11.5 20.5,11.7224042 20.5,12 C20.5,12.2757255 20.2743191,12.5 19.9931545,12.5 L8.00684547,12.5 C7.72452386,12.5 7.5,12.2775958 7.5,12 Z M7.5,17 C7.5,16.7242745 7.72568093,16.5 8.00684547,16.5 L19.9931545,16.5 C20.2754761,16.5 20.5,16.7224042 20.5,17 C20.5,17.2757255 20.2743191,17.5 19.9931545,17.5 L8.00684547,17.5 C7.72452386,17.5 7.5,17.2775958 7.5,17 Z M4,7.5 C3.72385763,7.5 3.5,7.27614237 3.5,7 C3.5,6.72385763 3.72385763,6.5 4,6.5 C4.27614237,6.5 4.5,6.72385763 4.5,7 C4.5,7.27614237 4.27614237,7.5 4,7.5 Z M4,12.5 C3.72385763,12.5 3.5,12.2761424 3.5,12 C3.5,11.7238576 3.72385763,11.5 4,11.5 C4.27614237,11.5 4.5,11.7238576 4.5,12 C4.5,12.2761424 4.27614237,12.5 4,12.5 Z M4,17.5 C3.72385763,17.5 3.5,17.2761424 3.5,17 C3.5,16.7238576 3.72385763,16.5 4,16.5 C4.27614237,16.5 4.5,16.7238576 4.5,17 C4.5,17.2761424 4.27614237,17.5 4,17.5 Z" id="Combined-Shape"/>
6 </g>
7 </g>
8 </g>
9</svg>
diff --git a/client/src/assets/images/global/server.html b/client/src/assets/images/global/server.html
new file mode 100644
index 000000000..409026e1a
--- /dev/null
+++ b/client/src/assets/images/global/server.html
@@ -0,0 +1,15 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-796.000000, -643.000000)">
4 <g id="258" transform="translate(796.000000, 643.000000)">
5 <ellipse id="Oval-140" stroke="#000000" stroke-width="2" cx="12" cy="6" rx="9" ry="3"/>
6 <path d="M3,10.5 C3,12.1568542 7.02943725,13.5 12,13.5 L12,13.5 C16.9705627,13.5 21,12.1568542 21,10.5" id="Oval-140" stroke="#000000"/>
7 <path d="M3,14.5 C3,16.1568542 7.02943725,17.5 12,17.5 C16.9705627,17.5 21,16.1568542 21,14.5" id="Oval-140" stroke="#000000"/>
8 <path d="M3,5.98958785 L3,19 C3,20.6568542 7.02943725,22 12,22 C16.9705627,22 21,20.6568542 21,19 L21,5.98958785" id="Oval-140" stroke="#000000" stroke-width="2"/>
9 <circle id="Oval-141" fill="#000000" cx="18.5" cy="10.5" r="1"/>
10 <circle id="Oval-141" fill="#000000" cx="18.5" cy="14.5" r="1"/>
11 <circle id="Oval-141" fill="#000000" cx="18.5" cy="18.5" r="1"/>
12 </g>
13 </g>
14 </g>
15</svg>
diff --git a/client/src/assets/images/global/sign-out.html b/client/src/assets/images/global/sign-out.html
new file mode 100644
index 000000000..4e316dc8b
--- /dev/null
+++ b/client/src/assets/images/global/sign-out.html
@@ -0,0 +1,3 @@
1<svg viewBox="0 0 1536 1536" width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
2 <path fill="#000000" d="M640 1440c0 28 13 96-32 96H288c-159 0-288-129-288-288V544c0-159 129-288 288-288h320c17 0 32 15 32 32 0 28 13 96-32 96H288c-88 0-160 72-160 160v704c0 88 72 160 160 160h288c25 0 64-5 64 32zm928-544c0 17-7 33-19 45l-544 544c-12 12-28 19-45 19-35 0-64-29-64-64v-288H448c-35 0-64-29-64-64V704c0-35 29-64 64-64h448V352c0-35 29-64 64-64 17 0 33 7 45 19l544 544c12 12 19 28 19 45z"/>
3</svg>
diff --git a/client/src/assets/images/global/user.html b/client/src/assets/images/global/user.html
new file mode 100644
index 000000000..c7b9319b6
--- /dev/null
+++ b/client/src/assets/images/global/user.html
@@ -0,0 +1,10 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-532.000000, -159.000000)" stroke="#000000" stroke-width="2">
4 <g id="32" transform="translate(532.000000, 159.000000)">
5 <path d="M2,21 C2,21 1.5,16 7,16 C12.5,16 11.512498,16 17.006249,16 C22.5,16 22.0062485,21 22.0062485,21" id="Path-41" stroke-linecap="round" stroke-linejoin="round"/>
6 <circle id="Oval-40" cx="12" cy="8" r="5"/>
7 </g>
8 </g>
9 </g>
10</svg>
diff --git a/client/src/assets/images/global/videos.html b/client/src/assets/images/global/videos.html
new file mode 100644
index 000000000..6e37f466f
--- /dev/null
+++ b/client/src/assets/images/global/videos.html
@@ -0,0 +1,14 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
4 <g id="187" transform="translate(312.000000, 511.000000)">
5 <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
6
7 <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
8
9 <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
10 <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/assets/images/global/videos.svg b/client/src/assets/images/global/videos.svg
new file mode 100644
index 000000000..6e37f466f
--- /dev/null
+++ b/client/src/assets/images/global/videos.svg
@@ -0,0 +1,14 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3 <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
4 <g id="187" transform="translate(312.000000, 511.000000)">
5 <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
6
7 <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
8
9 <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
10 <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.html
index eac2932a9..bea602aac 100644
--- a/client/src/assets/images/menu/about.svg
+++ b/client/src/assets/images/menu/about.html
@@ -1,11 +1,10 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-400.000000, -247.000000)"> 4 <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
6 <g id="69" transform="translate(400.000000, 247.000000)"> 5 <g id="69" transform="translate(400.000000, 247.000000)">
7 <circle id="Oval-7" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle> 6 <circle id="Oval-7" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
8 <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#808080"></path> 7 <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#000000"></path>
9 </g> 8 </g>
10 </g> 9 </g>
11 </g> 10 </g>
diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.html
index b6da837d2..0dceda082 100644
--- a/client/src/assets/images/menu/administration.svg
+++ b/client/src/assets/images/menu/administration.html
@@ -1,11 +1,7 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>filter</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#808080"> 4 <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#000000">
9 <g id="70" transform="translate(444.000000, 247.000000)"> 5 <g id="70" transform="translate(444.000000, 247.000000)">
10 <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path> 6 <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
11 </g> 7 </g>
diff --git a/client/src/assets/images/menu/globe.svg b/client/src/assets/images/menu/globe.html
index a4b3db9c5..cf8331256 100644
--- a/client/src/assets/images/menu/globe.svg
+++ b/client/src/assets/images/menu/globe.html
@@ -1,11 +1,7 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>globe</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#808080" stroke-width="2"> 4 <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#000000" stroke-width="2">
9 <g id="265" transform="translate(224.000000, 687.000000)"> 5 <g id="265" transform="translate(224.000000, 687.000000)">
10 <circle id="Oval-148" cx="12" cy="12" r="10"></circle> 6 <circle id="Oval-148" cx="12" cy="12" r="10"></circle>
11 <path d="M12,2 L12,22.006249" id="Path-199"></path> 7 <path d="M12,2 L12,22.006249" id="Path-199"></path>
diff --git a/client/src/assets/images/menu/go.html b/client/src/assets/images/menu/go.html
new file mode 100644
index 000000000..b16e794ec
--- /dev/null
+++ b/client/src/assets/images/menu/go.html
@@ -0,0 +1,12 @@
1<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
3 <g id="Artboard-4" transform="translate(-576.000000, -1046.000000)" stroke="#000000" stroke-width="2">
4 <g id="Extras" transform="translate(48.000000, 1046.000000)">
5 <g id="up-right" transform="translate(528.000000, 0.000000)">
6 <path d="M18,6 L5,19" id="Path-58"/>
7 <polyline id="Path-59" stroke-linejoin="round" transform="translate(13.000000, 11.000000) scale(-1, -1) translate(-13.000000, -11.000000) " points="7 5 7 17 19 17"/>
8 </g>
9 </g>
10 </g>
11 </g>
12</svg>
diff --git a/client/src/assets/images/menu/home.svg b/client/src/assets/images/menu/home.html
index bb95e949a..b7b8cb755 100644
--- a/client/src/assets/images/menu/home.svg
+++ b/client/src/assets/images/menu/home.html
@@ -1,11 +1,7 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>home</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
8 <g id="Artboard-4" transform="translate(-620.000000, -159.000000)" stroke="#808080" stroke-width="2"> 4 <g id="Artboard-4" transform="translate(-620.000000, -159.000000)" stroke="#000000" stroke-width="2">
9 <g id="34" transform="translate(620.000000, 159.000000)"> 5 <g id="34" transform="translate(620.000000, 159.000000)">
10 <path d="M1,11 L12,2 C12,2 22.9999989,11.0000005 23,11" id="Path-50"></path> 6 <path d="M1,11 L12,2 C12,2 22.9999989,11.0000005 23,11" id="Path-50"></path>
11 <path d="M3,10 C3,10 3,10.4453982 3,10.9968336 L3,20.0170446 C3,20.5675806 3.43788135,21.0138782 4.00292933,21.0138781 L8.99707067,21.0138779 C9.55097324,21.0138779 10,20.5751284 10,20.0089602 L10,15.0049177 C10,14.449917 10.4433532,14 11.0093689,14 L12.9906311,14 C13.5480902,14 14,14.4387495 14,15.0049177 L14,20.0089602 C14,20.5639609 14.4378817,21.0138779 15.0029302,21.0138779 L19.9970758,21.0138781 C20.5509789,21.0138782 21.000006,20.56848 21.000006,20.0170446 L21.0000057,10" id="Path-51"></path> 7 <path d="M3,10 C3,10 3,10.4453982 3,10.9968336 L3,20.0170446 C3,20.5675806 3.43788135,21.0138782 4.00292933,21.0138781 L8.99707067,21.0138779 C9.55097324,21.0138779 10,20.5751284 10,20.0089602 L10,15.0049177 C10,14.449917 10.4433532,14 11.0093689,14 L12.9906311,14 C13.5480902,14 14,14.4387495 14,15.0049177 L14,20.0089602 C14,20.5639609 14.4378817,21.0138779 15.0029302,21.0138779 L19.9970758,21.0138781 C20.5509789,21.0138782 21.000006,20.56848 21.000006,20.0170446 L21.0000057,10" id="Path-51"></path>
diff --git a/client/src/assets/images/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.html
index 6473837f8..d551bfb69 100644
--- a/client/src/assets/images/menu/recently-added.svg
+++ b/client/src/assets/images/menu/recently-added.html
@@ -1,12 +1,11 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-92.000000, -115.000000)"> 4 <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
6 <g id="2" transform="translate(92.000000, 115.000000)"> 5 <g id="2" transform="translate(92.000000, 115.000000)">
7 <circle id="Oval-1" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle> 6 <circle id="Oval-1" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
8 <rect id="Rectangle-1" fill="#808080" x="11" y="7" width="2" height="10" rx="1"></rect> 7 <rect id="Rectangle-1" fill="#000000" x="11" y="7" width="2" height="10" rx="1"></rect>
9 <rect id="Rectangle-1" fill="#808080" x="7" y="11" width="10" height="2" rx="1"></rect> 8 <rect id="Rectangle-1" fill="#000000" x="7" y="11" width="10" height="2" rx="1"></rect>
10 </g> 9 </g>
11 </g> 10 </g>
12 </g> 11 </g>
diff --git a/client/src/assets/images/menu/subscriptions.svg b/client/src/assets/images/menu/subscriptions.html
index cd6efc54e..08322e520 100644
--- a/client/src/assets/images/menu/subscriptions.svg
+++ b/client/src/assets/images/menu/subscriptions.html
@@ -1,25 +1,22 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>podcasts</title>
5 <desc>Created with Sketch.</desc>
6 <defs> 3 <defs>
7 <linearGradient x1="50%" y1="0%" x2="50%" y2="97.3333865%" id="linearGradient-1"> 4 <linearGradient x1="50%" y1="0%" x2="50%" y2="97.3333865%" id="linearGradient-1">
8 <stop stop-color="#808080" offset="0%"></stop> 5 <stop stop-color="#000000" offset="0%"></stop>
9 <stop stop-color="#808080" stop-opacity="0.247310915" offset="100%"></stop> 6 <stop stop-color="#000000" stop-opacity="0.247310915" offset="100%"></stop>
10 </linearGradient> 7 </linearGradient>
11 <linearGradient x1="50%" y1="0%" x2="50%" y2="97.8635204%" id="linearGradient-2"> 8 <linearGradient x1="50%" y1="0%" x2="50%" y2="97.8635204%" id="linearGradient-2">
12 <stop stop-color="#808080" offset="0%"></stop> 9 <stop stop-color="#000000" offset="0%"></stop>
13 <stop stop-color="#808080" stop-opacity="0.250707654" offset="100%"></stop> 10 <stop stop-color="#000000" stop-opacity="0.250707654" offset="100%"></stop>
14 </linearGradient> 11 </linearGradient>
15 </defs> 12 </defs>
16 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 13 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17 <g id="Artboard-4" transform="translate(-532.000000, -775.000000)"> 14 <g id="Artboard-4" transform="translate(-532.000000, -775.000000)">
18 <g id="312" transform="translate(532.000000, 775.000000)"> 15 <g id="312" transform="translate(532.000000, 775.000000)">
19 <circle id="Oval-169" fill="#808080" cx="12" cy="10" r="3"></circle> 16 <circle id="Oval-169" fill="#000000" cx="12" cy="10" r="3"></circle>
20 <path d="M16.3851456,13.8501206 C17.4222377,12.6991612 18,11.4167199 18,10 C18,6.74089158 15.2591084,4 12,4 C8.74089158,4 6,6.74089158 6,10 C6,11.4186069 6.57916224,12.7027674 7.61838071,13.8540306 C7.80341316,14.0590125 8.11958231,14.0751848 8.32456427,13.8901523 C8.52954623,13.7051199 8.5457185,13.3889507 8.36068606,13.1839688 C7.47616718,12.2040844 7,11.148292 7,10 C7,7.29317633 9.29317633,5 12,5 C14.7068237,5 17,7.29317633 17,10 C17,11.1466944 16.5249958,12.2010466 15.6422459,13.1807178 C15.4573954,13.3858639 15.4738483,13.7020185 15.6789944,13.886869 C15.8841405,14.0717195 16.2002951,14.0552666 16.3851456,13.8501206 Z" id="Oval-169" fill="url(#linearGradient-1)" fill-rule="nonzero"></path> 17 <path d="M16.3851456,13.8501206 C17.4222377,12.6991612 18,11.4167199 18,10 C18,6.74089158 15.2591084,4 12,4 C8.74089158,4 6,6.74089158 6,10 C6,11.4186069 6.57916224,12.7027674 7.61838071,13.8540306 C7.80341316,14.0590125 8.11958231,14.0751848 8.32456427,13.8901523 C8.52954623,13.7051199 8.5457185,13.3889507 8.36068606,13.1839688 C7.47616718,12.2040844 7,11.148292 7,10 C7,7.29317633 9.29317633,5 12,5 C14.7068237,5 17,7.29317633 17,10 C17,11.1466944 16.5249958,12.2010466 15.6422459,13.1807178 C15.4573954,13.3858639 15.4738483,13.7020185 15.6789944,13.886869 C15.8841405,14.0717195 16.2002951,14.0552666 16.3851456,13.8501206 Z" id="Oval-169" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
21 <path d="M17.5678226,18.3077078 C20.3159646,16.4626239 22,13.3733223 22,10 C22,4.4771525 17.5228475,0 12,0 C6.4771525,0 2,4.4771525 2,10 C2,13.3762414 3.68696556,16.4678678 6.43901638,18.3122954 C6.89779529,18.6197696 7.51896613,18.4971129 7.82644029,18.0383339 C8.13391444,17.579555 8.0112577,16.9583842 7.55247879,16.65091 C5.34877306,15.1739839 4,12.7021478 4,10 C4,5.581722 7.581722,2 12,2 C16.418278,2 20,5.581722 20,10 C20,12.699815 18.6535741,15.1697843 16.4529947,16.6472384 C15.9944687,16.9550897 15.8723227,17.5763611 16.180174,18.0348871 C16.4880252,18.4934131 17.1092967,18.6155591 17.5678226,18.3077078 Z" id="Oval-169" fill="url(#linearGradient-2)" fill-rule="nonzero"></path> 18 <path d="M17.5678226,18.3077078 C20.3159646,16.4626239 22,13.3733223 22,10 C22,4.4771525 17.5228475,0 12,0 C6.4771525,0 2,4.4771525 2,10 C2,13.3762414 3.68696556,16.4678678 6.43901638,18.3122954 C6.89779529,18.6197696 7.51896613,18.4971129 7.82644029,18.0383339 C8.13391444,17.579555 8.0112577,16.9583842 7.55247879,16.65091 C5.34877306,15.1739839 4,12.7021478 4,10 C4,5.581722 7.581722,2 12,2 C16.418278,2 20,5.581722 20,10 C20,12.699815 18.6535741,15.1697843 16.4529947,16.6472384 C15.9944687,16.9550897 15.8723227,17.5763611 16.180174,18.0348871 C16.4880252,18.4934131 17.1092967,18.6155591 17.5678226,18.3077078 Z" id="Oval-169" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
22 <path d="M9.32918137,15.9750882 C9.14737952,14.8842771 9.89826062,14 10.9979131,14 L13.0020869,14 C14.1055038,14 14.8534426,14.8793447 14.6708186,15.9750882 L13.6633817,22.0197096 C13.5731485,22.561109 13.0573397,23 12.5010434,23 L11.4989566,23 C10.9472481,23 10.4276519,22.5659113 10.3366183,22.0197096 L9.32918137,15.9750882 Z" id="Rectangle-217" fill="#808080"></path> 19 <path d="M9.32918137,15.9750882 C9.14737952,14.8842771 9.89826062,14 10.9979131,14 L13.0020869,14 C14.1055038,14 14.8534426,14.8793447 14.6708186,15.9750882 L13.6633817,22.0197096 C13.5731485,22.561109 13.0573397,23 12.5010434,23 L11.4989566,23 C10.9472481,23 10.4276519,22.5659113 10.3366183,22.0197096 L9.32918137,15.9750882 Z" id="Rectangle-217" fill="#000000"></path>
23 </g> 20 </g>
24 </g> 21 </g>
25 </g> 22 </g>
diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.html
index ffc65cc04..f1ce11487 100644
--- a/client/src/assets/images/menu/trending.svg
+++ b/client/src/assets/images/menu/trending.html
@@ -1,11 +1,7 @@
1<?xml version="1.0" encoding="UTF-8"?> 1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>graph</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> 3 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
8 <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#808080"> 4 <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#000000">
9 <g id="50" transform="translate(444.000000, 203.000000)"> 5 <g id="50" transform="translate(444.000000, 203.000000)">
10 <polyline id="Path-96" points="3 3 3 21.006249 21.0246733 21.006249"></polyline> 6 <polyline id="Path-96" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
11 <polyline id="Path-101" points="6 18 11 12 14 13 19 7"></polyline> 7 <polyline id="Path-101" points="6 18 11 12 14 13 19 7"></polyline>
diff --git a/client/src/assets/images/video/watch-later.html b/client/src/assets/images/video/watch-later.html
deleted file mode 100644
index 927afebe4..000000000
--- a/client/src/assets/images/video/watch-later.html
+++ /dev/null
@@ -1,11 +0,0 @@
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 80 100"
2 enable-background="new 0 0 80 80" xml:space="preserve"><g><path fill="#000000" d="M33.3,51.5L33.3,51.5c-1.8,0-3.3-1.4-3.3-3.1V37.3c0-1.7,1.5-3.1,3.3-3.1c0.5,0,1,0.1,1.5,0.4l10.7,5.5 c1,0.5,1.6,1.5,1.6,2.7c0,1.2-0.6,2.2-1.7,2.8l-10.6,5.6C34.3,51.3,33.8,51.5,33.3,51.5z M33.3,36.2c-0.6,0-1.3,0.4-1.3,1.1v11.1 c0,0.6,0.7,1.1,1.3,1.1l0,0c0.2,0,0.4,0,0.5-0.1l10.6-5.6c0.4-0.2,0.6-0.6,0.6-1c0-0.2-0.1-0.6-0.5-0.9l-10.7-5.5 C33.6,36.2,33.4,36.2,33.3,36.2z"/></g>
3 <g><path fill="#000000" d="M62.9,65H12.1C10.4,65,9,63.6,9,61.9V22.1c0-1.7,1.4-3.1,3.1-3.1h50.8c1.7,0,3.1,1.4,3.1,3.1v39.8 C66,63.6,64.6,65,62.9,65z M12.1,21c-0.6,0-1.1,0.5-1.1,1.1v39.8c0,0.6,0.5,1.1,1.1,1.1h50.8c0.6,0,1.1-0.5,1.1-1.1V22.1 c0-0.6-0.5-1.1-1.1-1.1H12.1z"/></g>
4 <g><path fill="#000000" d="M63,16h-2c0-1-0.4-1-0.9-1H14.9c-0.5,0-0.9,0-0.9,1h-2c0-2,1.3-3,2.9-3h45.3C61.7,13,63,14,63,16z"/></g>
5 <g><path fill="#000000" d="M58,11h-2c0-1-0.4-1-0.5-1H19.5c-0.1,0-0.5,0-0.5,1h-2c0-2,1.1-3,2.5-3h36.1C56.9,8,58,9,58,11z"/></g>
6 <g><path fill="#000000" d="M68,29v-2c4,0,6.5-2.9,6.5-6.5S72,14,68,14v-2c5,0,8.5,3.8,8.5,8.5S73,29,68,29z"/></g>
7 <g><polygon fill="#000000" points="71.3,18.7 65.6,13 71.3,7.3 72.7,8.7 68.4,13 72.7,17.3 "/></g>
8 <text x="0" y="95" fill="#000000" font-size="5px" font-weight="bold"
9 font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Yaroslav Samoylov</text>
10 <text x="0" y="100" fill="#000000" font-size="5px" font-weight="bold"
11 font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 9b18f6354..37bd404dd 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -63,13 +63,25 @@
63 63
64@mixin apply-svg-color ($color) { 64@mixin apply-svg-color ($color) {
65 /deep/ svg { 65 /deep/ svg {
66 path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"], circle[fill="#000000"], polygon[fill="#000000"] { 66 path[fill="#000000"],
67 g[fill="#000000"],
68 rect[fill="#000000"],
69 circle[fill="#000000"],
70 polygon[fill="#000000"] {
67 fill: $color; 71 fill: $color;
68 } 72 }
69 73
70 path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"], circle[stroke="#000000"], polygon[stroke="#000000"] { 74 path[stroke="#000000"],
75 g[stroke="#000000"],
76 rect[stroke="#000000"],
77 circle[stroke="#000000"],
78 polygon[stroke="#000000"] {
71 stroke: $color; 79 stroke: $color;
72 } 80 }
81
82 stop[stop-color="#000000"] {
83 stop-color: $color;
84 }
73 } 85 }
74} 86}
75 87
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 21:49:45 +0000