simplify navigation within most admin menus

6 files changed, 69 insertions, 60 deletions

diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 76d297c52..3999252be 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,11 +1,5 @@
 <div class="row">
-  <div class="sub-menu">
-    <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ item.label }}</a>
-    </ng-template>
-
-    <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
-  </div>
+  <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content">
     <router-outlet></router-outlet>
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
new file mode 100644
index 000000000..ef8965c3f
--- /dev/null
+++ b/client/src/app/+admin/admin.component.scss
@@ -0,0 +1,3 @@
+my-top-menu-dropdown {
+  flex-grow: 1;
+}
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index e47c7a8f4..c1c160ad1 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -3,12 +3,15 @@ import { AuthService } from '@app/core'
 import { ListOverflowItem } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRight } from '@shared/models'
+import { TopMenuDropdownParam } from '@app/shared/shared-main/misc/top-menu-dropdown.component'
 
 @Component({
-  templateUrl: './admin.component.html'
+  templateUrl: './admin.component.html',
+  styleUrls: [ './admin.component.scss' ]
 })
 export class AdminComponent implements OnInit {
   items: ListOverflowItem[] = []
+  menuEntries: TopMenuDropdownParam[] = []
 
   constructor (
     private auth: AuthService,
@@ -16,12 +19,58 @@ export class AdminComponent implements OnInit {
   ) {}
 
   ngOnInit () {
-    if (this.hasUsersRight()) this.items.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
-    if (this.hasServerFollowRight()) this.items.push({ label: this.i18n('Follows & redundancies'), routerLink: '/admin/follows' })
-    if (this.hasVideoAbusesRight() || this.hasVideoBlocklistRight()) this.items.push({ label: this.i18n('Moderation'), routerLink: '/admin/moderation' })
-    if (this.hasConfigRight()) this.items.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
-    if (this.hasPluginsRight()) this.items.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
-    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.items.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+    const federationItems: TopMenuDropdownParam = {
+      label: this.i18n('Federation'),
+      children: [
+        {
+          label: this.i18n('Instances you follow'),
+          routerLink: '/admin/follows/following-list',
+          iconName: 'sign-out'
+        },
+        {
+          label: this.i18n('Instances following you'),
+          routerLink: '/admin/follows/followers-list',
+          iconName: 'sign-in'
+        },
+        {
+          label: this.i18n('Video redundancies'),
+          routerLink: '/admin/follows/video-redundancies-list',
+          iconName: 'videos'
+        }
+      ]
+    }
+
+    const moderationItems: TopMenuDropdownParam = {
+      label: this.i18n('Moderation'),
+      children: []
+    }
+    if (this.hasVideoAbusesRight()) moderationItems.children.push({
+      label: this.i18n('Video reports'),
+      routerLink: '/admin/moderation/video-abuses/list',
+      iconName: 'flag'
+    })
+    if (this.hasVideoBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Video blocks'),
+      routerLink: '/admin/moderation/video-blocks/list',
+      iconName: 'cross'
+    })
+    if (this.hasAccountsBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Muted accounts'),
+      routerLink: '/admin/moderation/blocklist/accounts',
+      iconName: 'user'
+    })
+    if (this.hasServersBlocklistRight()) moderationItems.children.push({
+      label: this.i18n('Muted servers'),
+      routerLink: '/admin/moderation/blocklist/servers',
+      iconName: 'server'
+    })
+
+    if (this.hasUsersRight()) this.menuEntries.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    if (this.hasServerFollowRight()) this.menuEntries.push(federationItems)
+    if (this.hasVideoAbusesRight() || this.hasVideoBlocklistRight()) this.menuEntries.push(moderationItems)
+    if (this.hasConfigRight()) this.menuEntries.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+    if (this.hasPluginsRight()) this.menuEntries.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.menuEntries.push({ label: this.i18n('System'), routerLink: '/admin/system' })
   }
 
   hasUsersRight () {
@@ -40,6 +89,14 @@ export class AdminComponent implements OnInit {
     return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
   }
 
+  hasAccountsBlocklistRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)
+  }
+
+  hasServersBlocklistRight () {
+    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)
+  }
+
   hasConfigRight () {
     return this.auth.getUser().hasRight(UserRight.MANAGE_CONFIGURATION)
   }
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 8c3129394..0680b43f9 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,13 +1 @@
-<div class="admin-sub-header">
-  <h1 i18n class="form-sub-title">Follows & redundancies</h1>
-
-  <div class="admin-sub-nav">
-    <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
-
-    <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
-
-    <a i18n routerLink="video-redundancies-list" routerLinkActive="active">Video redundancies</a>
-  </div>
-</div>
-
 <router-outlet></router-outlet>
diff --git a/client/src/app/+admin/moderation/moderation.component.html b/client/src/app/+admin/moderation/moderation.component.html
index 7bab63c33..90c6b6463 100644
--- a/client/src/app/+admin/moderation/moderation.component.html
+++ b/client/src/app/+admin/moderation/moderation.component.html
@@ -1,15 +1 @@
-<div class="admin-sub-header">
-  <h1 i18n class="form-sub-title">Moderation</h1>
-
-  <div class="admin-sub-nav">
-    <a *ngIf="hasVideoAbusesRight()" i18n routerLink="video-abuses/list" routerLinkActive="active">Video reports</a>
-
-    <a *ngIf="hasVideoBlocklistRight()" i18n routerLink="video-blocks/list" routerLinkActive="active">Video blocks</a>
-
-    <a *ngIf="hasAccountsBlocklistRight()" i18n routerLink="blocklist/accounts" routerLinkActive="active">Muted accounts</a>
-
-    <a *ngIf="hasServersBlocklistRight()" i18n routerLink="blocklist/servers" routerLinkActive="active">Muted servers</a>
-  </div>
-</div>
-
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/client/src/app/+admin/moderation/moderation.component.ts b/client/src/app/+admin/moderation/moderation.component.ts
index 806f9d100..b0f5eb224 100644
--- a/client/src/app/+admin/moderation/moderation.component.ts
+++ b/client/src/app/+admin/moderation/moderation.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService, ServerService } from '@app/core'
-import { UserRight } from '@shared/models'
+import { ServerService } from '@app/core'
 
 @Component({
   templateUrl: './moderation.component.html',
@@ -10,29 +9,11 @@ export class ModerationComponent implements OnInit {
   autoBlockVideosEnabled = false
 
   constructor (
-    private auth: AuthService,
     private serverService: ServerService
   ) { }
 
   ngOnInit (): void {
     this.serverService.getConfig()
       .subscribe(config => this.autoBlockVideosEnabled = config.autoBlacklist.videos.ofUsers.enabled)
-
-  }
-
-  hasVideoAbusesRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES)
-  }
-
-  hasVideoBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST)
-  }
-
-  hasAccountsBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)
-  }
-
-  hasServersBlocklistRight () {
-    return this.auth.getUser().hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)
   }
 }