Add my library section in menu

7 files changed, 138 insertions, 75 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 {
       children: [
         {
           label: this.i18n('My channels'),
-          routerLink: '/my-account/video-channels'
+          routerLink: '/my-account/video-channels',
+          iconName: 'folder'
         },
         {
           label: this.i18n('My videos'),
-          routerLink: '/my-account/videos'
+          routerLink: '/my-account/videos',
+          iconName: 'videos'
         },
         {
           label: this.i18n('My playlists'),
-          routerLink: '/my-account/video-playlists'
+          routerLink: '/my-account/video-playlists',
+          iconName: 'playlists'
         },
         {
           label: this.i18n('My subscriptions'),
-          routerLink: '/my-account/subscriptions'
+          routerLink: '/my-account/subscriptions',
+          iconName: 'subscriptions'
         },
         {
           label: this.i18n('My history'),
-          routerLink: '/my-account/history/videos'
+          routerLink: '/my-account/history/videos',
+          iconName: 'history'
         }
       ]
     }
@@ -45,7 +50,8 @@ export class MyAccountComponent {
     if (this.isVideoImportEnabled()) {
       libraryEntries.children.push({
         label: 'My imports',
-        routerLink: '/my-account/video-imports'
+        routerLink: '/my-account/video-imports',
+        iconName: 'cloud-download'
       })
     }
 
@@ -54,15 +60,18 @@ export class MyAccountComponent {
       children: [
         {
           label: this.i18n('Muted accounts'),
-          routerLink: '/my-account/blocklist/accounts'
+          routerLink: '/my-account/blocklist/accounts',
+          iconName: 'user'
         },
         {
           label: this.i18n('Muted instances'),
-          routerLink: '/my-account/blocklist/servers'
+          routerLink: '/my-account/blocklist/servers',
+          iconName: 'server'
         },
         {
           label: this.i18n('Ownership changes'),
-          routerLink: '/my-account/ownership'
+          routerLink: '/my-account/ownership',
+          iconName: 'im-with-her'
         }
       ]
     }
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 @@
 <div class="menu-wrapper">
-  <menu>
+  <menu [ngClass]="{ 'logged-in': isLoggedIn }">
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
         <my-avatar-notification [user]="user"></my-avatar-notification>
@@ -13,20 +13,16 @@
           <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
 
           <div ngbDropdownMenu>
-            <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
-             My public profile
+            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
+              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account" class="dropdown-item">
-              My account
+            <a routerLink="/my-account" class="dropdown-item">
+              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
             </a>
 
-            <a i18n routerLink="/my-account/videos" class="dropdown-item">
-              My videos
-            </a>
-
-            <a i18n (click)="logout($event)" class="dropdown-item" href="#">
-              Log out
+            <a (click)="logout($event)" class="dropdown-item" href="#">
+              <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
           </div>
         </div>
@@ -37,31 +33,51 @@
         <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
       </div>
 
-      <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+      <div *ngIf="isLoggedIn" class="panel-block">
+        <div i18n class="block-title">My library</div>
+
+        <a routerLink="/my-account/videos" routerLinkActive="active">
+          <my-global-icon iconName="videos"></my-global-icon>
+          <ng-container i18n>Videos</ng-container>
+        </a>
+
+        <a routerLink="/my-account/video-playlists" routerLinkActive="active">
+          <my-global-icon iconName="playlists"></my-global-icon>
+          <ng-container i18n>Playlists</ng-container>
+        </a>
 
-        <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active">
-          <span class="icon icon-videos-subscriptions"></span>
+        <a routerLink="/videos/subscriptions" routerLinkActive="active">
+          <my-global-icon iconName="subscriptions"></my-global-icon>
           <ng-container i18n>Subscriptions</ng-container>
         </a>
 
+        <a routerLink="/my-account/history/videos" routerLinkActive="active">
+          <my-global-icon iconName="history"></my-global-icon>
+          <ng-container i18n>History</ng-container>
+        </a>
+
+      </div>
+
+      <div class="panel-block">
+        <div i18n class="block-title">Videos</div>
+
         <a routerLink="/videos/overview" routerLinkActive="active">
-          <span class="icon icon-videos-overview"></span>
+          <my-global-icon iconName="globe"></my-global-icon>
           <ng-container i18n>Overview</ng-container>
         </a>
 
         <a routerLink="/videos/trending" routerLinkActive="active">
-          <span class="icon icon-videos-trending"></span>
+          <my-global-icon iconName="trending"></my-global-icon>
           <ng-container i18n>Trending</ng-container>
         </a>
 
         <a routerLink="/videos/recently-added" routerLinkActive="active">
-          <span class="icon icon-videos-recently-added"></span>
+          <my-global-icon iconName="recently-added"></my-global-icon>
           <ng-container i18n>Recently added</ng-container>
         </a>
 
         <a routerLink="/videos/local" routerLinkActive="active">
-          <span class="icon icon-videos-local"></span>
+          <my-global-icon iconName="home"></my-global-icon>
           <ng-container i18n>Local</ng-container>
         </a>
       </div>
@@ -70,12 +86,12 @@
         <div class="block-title" i18n>More</div>
 
         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
-          <span class="icon icon-administration"></span>
+          <my-global-icon iconName="administration"></my-global-icon>
           <ng-container i18n>Administration</ng-container>
         </a>
 
         <a routerLink="/about" routerLinkActive="active">
-          <span class="icon icon-about"></span>
+          <my-global-icon iconName="about"></my-global-icon>
           <ng-container i18n>About</ng-container>
         </a>
       </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 {
     overflow-y: auto;
   }
 
+  &.logged-in {
+    .panel-block {
+      margin-bottom: 25px;
+    }
+
+    .block-title {
+      margin-bottom: 15px;
+    }
+  }
+
   .top-menu {
     flex-grow: 1;
     width: $menu-width;
@@ -37,7 +47,7 @@ menu {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 35px;
+    margin-bottom: 20px;
 
     .logged-in-info {
       @include ellipsis;
@@ -74,6 +84,24 @@ menu {
           border: none;
         }
       }
+
+      .dropdown-item {
+        @include dropdown-with-icon-item;
+
+        my-global-icon {
+          @include apply-svg-color(var(--mainForegroundColor));
+
+          width: 22px;
+          height: 22px;
+
+          &[iconName="sign-out"] {
+            position: relative;
+            right: -1px;
+            height: 21px;
+            width: 21px;
+          }
+        }
+      }
     }
   }
 
@@ -134,57 +162,31 @@ menu {
         background-color: rgba(255, 255, 255, 0.10);
       }
 
-      .icon {
-        @include icon(22px);
+      my-global-icon {
+        @include apply-svg-color(#808080);
 
+        display: flex;
+        width: 22px;
+        height: 22px;
         margin-right: 18px;
 
-        &.icon-videos-subscriptions {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/subscriptions.svg');
-        }
-
-        &.icon-videos-overview {
-          position: relative;
-          background-image: url('../../assets/images/menu/globe.svg');
-        }
-
-        &.icon-videos-trending {
-          position: relative;
-          top: -1px;
-          background-image: url('../../assets/images/menu/trending.svg');
-        }
+        &[iconName="playlists"] {
+          height: 24px;
+          width: 24px;
 
-        &.icon-videos-recently-added {
-          width: 23px;
-          height: 23px;
-          background-image: url('../../assets/images/menu/recently-added.svg');
+          margin-right: 16px;
         }
 
-        &.icon-videos-local {
-          width: 23px;
-          height: 23px;
-
+        &[iconName="videos"] {
           position: relative;
-          top: -1px;
-
-          background-image: url('../../assets/images/menu/home.svg');
-        }
-
-        &.icon-administration {
-          width: 23px;
-          height: 23px;
-
-          background-image: url('../../assets/images/menu/administration.svg');
+          right: -1px;
         }
+      }
 
-        &.icon-about  {
-          width: 23px;
-          height: 23px;
+      .icon {
+        @include icon(22px);
 
-          background-image: url('../../assets/images/menu/about.svg');
-        }
+        margin-right: 18px;
       }
     }
   }
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'
 
 const icons = {
   'add': require('../../../assets/images/global/add.html'),
+  'user': require('../../../assets/images/global/user.html'),
+  'sign-out': require('../../../assets/images/global/sign-out.html'),
   'syndication': require('../../../assets/images/global/syndication.html'),
   'help': require('../../../assets/images/global/help.html'),
   'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,12 +13,15 @@ const icons = {
   'no': require('../../../assets/images/global/no.html'),
   'cloud-download': require('../../../assets/images/global/cloud-download.html'),
   'undo': require('../../../assets/images/global/undo.html'),
+  'history': require('../../../assets/images/global/history.html'),
   'circle-tick': require('../../../assets/images/global/circle-tick.html'),
   'cog': require('../../../assets/images/global/cog.html'),
   'download': require('../../../assets/images/global/download.html'),
+  'go': require('../../../assets/images/menu/go.html'),
   'edit': require('../../../assets/images/global/edit.html'),
   'im-with-her': require('../../../assets/images/global/im-with-her.html'),
   'delete': require('../../../assets/images/global/delete.html'),
+  'server': require('../../../assets/images/global/server.html'),
   'cross': require('../../../assets/images/global/cross.html'),
   'validate': require('../../../assets/images/global/validate.html'),
   'tick': require('../../../assets/images/global/tick.html'),
@@ -28,7 +33,17 @@ const icons = {
   'share': require('../../../assets/images/video/share.html'),
   'upload': require('../../../assets/images/video/upload.html'),
   'playlist-add': require('../../../assets/images/video/playlist-add.html'),
-  'play': require('../../../assets/images/global/play.html')
+  'play': require('../../../assets/images/global/play.html'),
+  'playlists': require('../../../assets/images/global/playlists.html'),
+  'about': require('../../../assets/images/menu/about.html'),
+  'globe': require('../../../assets/images/menu/globe.html'),
+  'home': require('../../../assets/images/menu/home.html'),
+  'recently-added': require('../../../assets/images/menu/recently-added.html'),
+  'trending': require('../../../assets/images/menu/trending.html'),
+  'videos': require('../../../assets/images/global/videos.html'),
+  'folder': require('../../../assets/images/global/folder.html'),
+  'administration': require('../../../assets/images/menu/administration.html'),
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html')
 }
 
 export 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 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
       </div>
     </div>
 
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 @@
+@import '_variables';
+@import '_mixins';
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
@@ -16,3 +19,9 @@
 /deep/ .dropdown-menu {
   margin-top: 0 !important;
 }
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}
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'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -11,6 +12,8 @@ export type TopMenuDropdownParam = {
   children?: {
     label: string
     routerLink: string
+
+    iconName?: GlobalIconName
   }[]
 }
 
@@ -23,6 +26,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
   suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
 
   private openedOnHover = false
   private routeSub: Subscription
@@ -35,6 +39,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     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 () {
@@ -48,7 +56,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     // Menu was closed
     dropdown.openChange
             .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
   }
 
   dropdownAnchorClicked (dropdown: NgbDropdown) {