Use dropdown in my account -> "my library"

3 files changed, 64 insertions, 8 deletions

diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b79e61bef..b602fd69f 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -2,13 +2,22 @@
   <div class="sub-menu">
     <a i18n routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
 
-    <a i18n routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My channels</a>
+    <div ngbDropdown class="my-library">
+      <span role="button" class="title-page" [ngClass]="{ active: libraryLabel !== '' }" ngbDropdownToggle>
+        <ng-container i18n>My library</ng-container>
+        <ng-container *ngIf="libraryLabel"> - {{ libraryLabel }}</ng-container>
+      </span>
 
-    <a i18n routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
+      <div ngbDropdownMenu>
+        <a class="dropdown-item" i18n routerLink="/my-account/video-channels">My channels</a>
 
-    <a i18n routerLink="/my-account/subscriptions" routerLinkActive="active" class="title-page">My subscriptions</a>
+        <a class="dropdown-item" i18n routerLink="/my-account/videos">My videos</a>
 
-    <a *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My imports</a>
+        <a class="dropdown-item" i18n routerLink="/my-account/subscriptions">My subscriptions</a>
+
+        <a class="dropdown-item" *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports">My imports</a>
+      </div>
+    </div>
 
     <a i18n routerLink="/my-account/ownership" routerLinkActive="active" class="title-page">Ownership changes</a>
   </div>
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
new file mode 100644
index 000000000..20b2639b5
--- /dev/null
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -0,0 +1,14 @@
+.my-library {
+  span[role=button] {
+    cursor: pointer;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+/deep/ .dropdown-toggle::after {
+  position: relative;
+  top: 2px;
+}
\ No newline at end of file
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index 6e29cdd83..548f6a1c0 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -1,17 +1,50 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { ServerService } from '@app/core'
+import { NavigationStart, Router } from '@angular/router'
+import { filter } from 'rxjs/operators'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-my-account',
-  templateUrl: './my-account.component.html'
+  templateUrl: './my-account.component.html',
+  styleUrls: [ './my-account.component.scss' ]
 })
-export class MyAccountComponent {
+export class MyAccountComponent implements OnInit {
+
+  libraryLabel = ''
 
   constructor (
-    private serverService: ServerService
+    private serverService: ServerService,
+    private router: Router,
+    private i18n: I18n
   ) {}
 
+  ngOnInit () {
+    console.log(this.router.url)
+    this.updateLibraryLabel(this.router.url)
+
+    this.router.events
+        .pipe(filter(event => event instanceof NavigationStart))
+        .subscribe((event: NavigationStart) => this.updateLibraryLabel(event.url))
+  }
+
   isVideoImportEnabled () {
     return this.serverService.getConfig().import.videos.http.enabled
   }
+
+  private updateLibraryLabel (url: string) {
+    const [ path ] = url.split('?')
+
+    if (path === '/my-account/video-channels') {
+      this.libraryLabel = this.i18n('Channels')
+    } else if (path === '/my-account/videos') {
+      this.libraryLabel = this.i18n('Videos')
+    } else if (path === '/my-account/subscriptions') {
+      this.libraryLabel = this.i18n('Subscriptions')
+    } else if (path === '/my-account/video-imports') {
+      this.libraryLabel = this.i18n('Video imports')
+    } else {
+      this.libraryLabel = ''
+    }
+  }
 }