WIP Improve navigation user-dropdown, left-menu, my-account

client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-edit.component.scss

@@ -54,6 +54,8 @@ textarea {
 
 .breadcrumb {
   @include breadcrumb;
+
+  margin-top: 20px;
 }
 
 @media screen and (max-width: $small-view) {

client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.html

@@ -1,5 +1,6 @@
-<h1 class="sr-only" i18n>My channels</h1>
 <div class="video-channels-header">
+  <h1 i18n>My channels</h1>
+
   <a class="create-button" routerLink="create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
     <ng-container i18n>Create video channel</ng-container>

client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.scss

@@ -56,8 +56,15 @@
 }
 
 .video-channels-header {
-  text-align: right;
   margin: 20px 0 50px;
+  display: flex;
+  justify-content: space-between;
+
+  h1 {
+    flex: 1;
+    font-size: 1.5rem;
+    text-align: left;
+  }
 }
 
 ::ng-deep .chartjs-render-monitor {
@@ -113,3 +120,9 @@
     }
   }
 }
+
+@media screen and (max-width: $mobile-view) {
+  .video-channels-header {
+    flex-direction: column;
+  }
+}

client/src/app/+my-account/my-account-history/my-account-history.component.html

@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>History</h1>
+<h1 i18n>My history</h1>
 <div class="top-buttons">
   <div class="history-switch">
     <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch>

client/src/app/+my-account/my-account-history/my-account-history.component.scss

@@ -1,6 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
+h1 {
+  font-size: 1.5rem;
+  text-align: left;
+  margin: 20px 0 50px;
+}
+
 .no-history {
   display: flex;
   justify-content: center;

client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html

@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Subscriptions</h1>
+<h1 class="sr-only" i18n>My subscriptions</h1>
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
 
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">

client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html

@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Imports</h1>
+<h1 i18n>My imports</h1>
 <p-table
   [value]="videoImports" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"

client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.scss

@@ -1,6 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
+h1 {
+  font-size: 1.5rem;
+  text-align: left;
+  margin: 20px 0 50px;
+}
+
 pre {
   font-size: 11px;
 }

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss

@@ -33,4 +33,6 @@ input[type=submit] {
 
 .breadcrumb {
   @include breadcrumb;
+
+  margin-top: 20px;
 }

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html

@@ -1,5 +1,5 @@
 <div class="video-playlists-header">
-  <h1 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
+  <h1 i18n>My playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
 
   <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
 

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss

@@ -47,9 +47,15 @@
   }
 }
 
-@media screen and (max-width: $small-view) {
+@media screen and (max-width: #{breakpoint(lg)}) {
   .video-playlists-header {
     text-align: center;
+    align-items: center;
+    flex-direction: column;
+
+    input[type=text] {
+      margin-bottom: 12px;
+    }
   }
 
   .video-playlist {
@@ -72,21 +78,18 @@
   }
 }
 
-@media only screen and (min-width: $mobile-view) and (max-width: $small-view) {
+@media only screen and (min-width: $mobile-view) and (max-width: #{breakpoint(lg)}) {
   .video-playlists-header {
-    input[type=text] {
+    input[type=text], a {
       width: 42% !important;
     }
   }
 }
 
 @media screen and (max-width: $mobile-view) {
   .video-playlists-header {
-    flex-direction: column;
-
-    input[type=text] {
+    input[type=text], a {
       width: 100% !important;
-      margin-bottom: 12px;
     }
   }
 }

client/src/app/+my-account/my-account-videos/my-account-videos.component.html

@@ -1,9 +1,7 @@
 <div class="videos-header">
-  <h1 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
+  <h1 i18n>My videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h1>
 
   <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
-
-  <div class="fake-element"></div>
 </div>
 
 <my-videos-selection

client/src/app/+my-account/my-account-videos/my-account-videos.component.scss

@@ -6,8 +6,7 @@
   justify-content: space-between;
   margin: 20px 0 50px;
 
-  h1,
-  .fake-element {
+  h1 {
     flex: 1;
     font-size: 1.5rem;
   }

client/src/app/+my-account/my-account.component.html

@@ -1,5 +1,5 @@
 <div class="row">
-  <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
+  <my-top-menu-dropdown *ngIf="routeExistsInMenuEntries()" [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5">
     <router-outlet></router-outlet>

client/src/app/+my-account/my-account.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core'
-import { ServerService } from '@app/core'
+import { Router } from '@angular/router'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig } from '@shared/models'
 import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
@@ -12,59 +11,14 @@ import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdo
 export class MyAccountComponent implements OnInit {
   menuEntries: TopMenuDropdownParam[] = []
 
-  private serverConfig: ServerConfig
-
-  constructor (
-    private serverService: ServerService,
+  constructor(
+    private router: Router,
     private i18n: I18n
   ) { }
 
   ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
-    this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
-
-    const libraryEntries: TopMenuDropdownParam = {
-      label: this.i18n('My library'),
-      children: [
-        {
-          label: this.i18n('My channels'),
-          routerLink: '/my-account/video-channels',
-          iconName: 'channel'
-        },
-        {
-          label: this.i18n('My videos'),
-          routerLink: '/my-account/videos',
-          iconName: 'videos'
-        },
-        {
-          label: this.i18n('My playlists'),
-          routerLink: '/my-account/video-playlists',
-          iconName: 'playlists'
-        },
-        {
-          label: this.i18n('My subscriptions'),
-          routerLink: '/my-account/subscriptions',
-          iconName: 'inbox-full'
-        },
-        {
-          label: this.i18n('My history'),
-          routerLink: '/my-account/history/videos',
-          iconName: 'history'
-        }
-      ]
-    }
-
-    if (this.isVideoImportEnabled()) {
-      libraryEntries.children.push({
-        label: 'My imports',
-        routerLink: '/my-account/video-imports',
-        iconName: 'cloud-download'
-      })
-    }
-
-    const miscEntries: TopMenuDropdownParam = {
-      label: this.i18n('Misc'),
+    const blocklistEntries: TopMenuDropdownParam = {
+      label: this.i18n('My blocklist'),
       children: [
         {
           label: this.i18n('Muted accounts'),
@@ -75,11 +29,6 @@ export class MyAccountComponent implements OnInit {
           label: this.i18n('Muted servers'),
           routerLink: '/my-account/blocklist/servers',
           iconName: 'server'
-        },
-        {
-          label: this.i18n('Ownership changes'),
-          routerLink: '/my-account/ownership',
-          iconName: 'ownership-change'
         }
       ]
     }
@@ -93,15 +42,35 @@ export class MyAccountComponent implements OnInit {
         label: this.i18n('My notifications'),
         routerLink: '/my-account/notifications'
       },
-      libraryEntries,
-      miscEntries
+      {
+        label: this.i18n('My subscriptions'),
+        routerLink: '/my-account/subscriptions',
+      },
+      {
+        label: this.i18n('My ownership changes'),
+        routerLink: '/my-account/ownership',
+      },
+      blocklistEntries
     ]
   }
 
-  isVideoImportEnabled () {
-    const importConfig = this.serverConfig.import.videos
+  get menuEntriesRouterLinks (): string[] {
+    let routerLinks: string[] = []
+
+    for (const menuEntry of this.menuEntries) {
+      if (menuEntry.routerLink) {
+        routerLinks = [...routerLinks, menuEntry.routerLink]
+      }
 
-    return importConfig.http.enabled || importConfig.torrent.enabled
+      if (menuEntry.children) {
+        routerLinks = [...routerLinks, ...menuEntry.children.map(child => child.routerLink)]
+      }
+    }
+
+    return routerLinks
   }
 
+  routeExistsInMenuEntries () {
+    return this.menuEntriesRouterLinks.includes(this.router.url)
+  }
 }

client/src/app/menu/menu.component.html

@@ -21,16 +21,6 @@
 
             <div class="dropdown-divider"></div>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
-              <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Account settings</ng-container>
-            </a>
-
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/video-channels">
-              <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
-            </a>
-
-            <div class="dropdown-divider"></div>
-
             <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()">
               <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
               <ng-container i18n>Interface: {{ language }}</ng-container>
@@ -56,16 +46,8 @@
               <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
             </a>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
-              <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon> <ng-container i18n>More account settings</ng-container>
-            </a>
-
             <div class="dropdown-divider"></div>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openHotkeysCheatSheet()">
-              <i class="icon icon-shortcuts" aria-hidden="true"></i> <ng-container i18n>Keyboard shortcuts</ng-container>
-            </a>
-
             <a ngbDropdownItem ngbDropdownToggle (click)="logout($event)" class="dropdown-item" href="#">
               <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon> <ng-container i18n>Log out</ng-container>
             </a>
@@ -79,7 +61,12 @@
       </div>
 
       <div *ngIf="isLoggedIn" class="panel-block">
-        <div i18n class="block-title">MY LIBRARY</div>
+        <div i18n class="block-title">MY ACCOUNT</div>
+
+        <a routerLink="/my-account/video-channels" routerLinkActive="active">
+          <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+          <ng-container i18n>Channels</ng-container>
+        </a>
 
         <a routerLink="/my-account/videos" routerLinkActive="active">
           <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
@@ -91,21 +78,30 @@
           <ng-container i18n>Playlists</ng-container>
         </a>
 
-        <a routerLink="/videos/subscriptions" routerLinkActive="active">
-          <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
-          <ng-container i18n>Subscriptions</ng-container>
-        </a>
-
         <a routerLink="/my-account/history/videos" routerLinkActive="active">
           <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
           <ng-container i18n>History</ng-container>
         </a>
 
+        <a *ngIf="isVideoImportEnabled()" routerLink="/my-account/video-imports" routerLinkActive="active">
+          <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
+          <ng-container i18n>Imports</ng-container>
+        </a>
+
+        <a routerLink="/my-account" routerLinkActive="active">
+          <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon>
+          <ng-container i18n>More settings</ng-container>
+        </a>
       </div>
 
       <div class="panel-block">
         <div i18n class="block-title">VIDEOS</div>
 
+        <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active">
+          <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
+          <ng-container i18n>Subscriptions</ng-container>
+        </a>
+
         <a routerLink="/videos/overview" routerLinkActive="active">
           <my-global-icon iconName="globe" aria-hidden="true"></my-global-icon>
           <ng-container i18n>Discover</ng-container>

client/src/app/menu/menu.component.ts

@@ -181,6 +181,12 @@ export class MenuComponent implements OnInit {
     return this.languages.find(lang => lang.id === localeId).label
   }
 
+  isVideoImportEnabled () {
+    const importConfig = this.serverConfig.import.videos
+
+    return importConfig.http.enabled || importConfig.torrent.enabled
+  }
+
   private buildUserLanguages () {
     if (!this.user) {
       this.videoLanguages = []