simplify navigation within most admin menus

pull/2937/head
Rigel Kent 2020-07-02 09:00:17 +02:00 committed by Chocobozzz
parent c7b836303c
commit 0a4cb95c98
15 changed files with 77 additions and 70 deletions

View File

@ -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>

View File

@ -0,0 +1,3 @@
my-top-menu-dropdown {
flex-grow: 1;
}

View File

@ -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)
}

View File

@ -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>

View File

@ -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>

View File

@ -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)
}
}

View File

@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
import { ServerService } from '@app/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { ServerConfig } from '@shared/models'
import { TopMenuDropdownParam } from './top-menu-dropdown.component'
import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
@Component({
selector: 'my-my-account',

View File

@ -33,7 +33,6 @@ import { MyAccountVideoPlaylistsComponent } from './my-account-video-playlists/m
import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
import { VideoChangeOwnershipComponent } from './my-account-videos/video-change-ownership/video-change-ownership.component'
import { MyAccountComponent } from './my-account.component'
import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
@NgModule({
imports: [
@ -79,8 +78,6 @@ import { TopMenuDropdownComponent } from './top-menu-dropdown.component'
MyAccountVideoPlaylistUpdateComponent,
MyAccountVideoPlaylistsComponent,
MyAccountVideoPlaylistElementsComponent,
TopMenuDropdownComponent
],
exports: [

View File

@ -34,6 +34,7 @@ const icons = {
'delete': require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
'inbox-full': require('!!raw-loader?!../../../assets/images/feather/inbox-full.svg').default,
'sign-out': require('!!raw-loader?!../../../assets/images/feather/log-out.svg').default,
'sign-in': require('!!raw-loader?!../../../assets/images/feather/log-in.svg').default,
'download': require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
'ownership-change': require('!!raw-loader?!../../../assets/images/feather/share.svg').default,
'share': require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,

View File

@ -1,2 +1,3 @@
export * from './help.component'
export * from './list-overflow.component'
export * from './top-menu-dropdown.component'

View File

@ -25,7 +25,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
import { DateToggleComponent } from './date'
import { FeedComponent } from './feeds'
import { LoaderComponent, SmallLoaderComponent } from './loaders'
import { HelpComponent, ListOverflowComponent } from './misc'
import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc'
import { UserHistoryService, UserNotificationsComponent, UserNotificationService } from './users'
import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
import { VideoCaptionService } from './video-caption'
@ -81,10 +81,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
HelpComponent,
ListOverflowComponent,
TopMenuDropdownComponent,
UserNotificationsComponent,
FeedComponent
],
exports: [
@ -131,10 +130,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
HelpComponent,
ListOverflowComponent,
TopMenuDropdownComponent,
UserNotificationsComponent,
FeedComponent
UserNotificationsComponent
],
providers: [

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>

After

Width:  |  Height:  |  Size: 368 B