aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-11-21 17:05:31 +0100
committerChocobozzz <me@florianbigard.com>2018-11-21 17:05:31 +0100
commitf97c91f7ec4afc26ab790fbefa63d11b3060f40f (patch)
treed7548e28e0bb645cc0bdbc4620f868303444a194
parent9fa0ea41aaa511bed3aa179dacc312fad6170c21 (diff)
downloadPeerTube-f97c91f7ec4afc26ab790fbefa63d11b3060f40f.tar.gz
PeerTube-f97c91f7ec4afc26ab790fbefa63d11b3060f40f.tar.zst
PeerTube-f97c91f7ec4afc26ab790fbefa63d11b3060f40f.zip
Add separators in user moderation dropdown
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html20
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss6
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.ts8
-rw-r--r--client/src/app/shared/moderation/user-moderation-dropdown.component.ts16
4 files changed, 36 insertions, 14 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 48230d6d8..90651f217 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -8,14 +8,20 @@
8 </div> 8 </div>
9 9
10 <div ngbDropdownMenu class="dropdown-menu"> 10 <div ngbDropdownMenu class="dropdown-menu">
11 <ng-container *ngFor="let action of actions"> 11 <ng-container *ngFor="let actions of getActions()">
12 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
13 <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
14 12
15 <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button"> 13 <ng-container *ngFor="let action of actions">
16 {{ action.label }} 14 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
17 </span> 15 <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
16
17 <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
18 {{ action.label }}
19 </span>
20 </ng-container>
18 </ng-container> 21 </ng-container>
22
23 <div class="dropdown-divider"></div>
24
19 </ng-container> 25 </ng-container>
20 </div> 26 </div>
21</div> \ No newline at end of file 27</div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 92c4d1d2c..a4fcceeee 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -1,6 +1,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.dropdown-divider:last-child {
5 display: none;
6}
7
4.action-button { 8.action-button {
5 @include peertube-button; 9 @include peertube-button;
6 10
@@ -52,4 +56,4 @@
52 width: 100%; 56 width: 100%;
53 } 57 }
54 } 58 }
55} \ No newline at end of file 59}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index d8026ef41..275e2b51e 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -14,10 +14,16 @@ export type DropdownAction<T> = {
14}) 14})
15 15
16export class ActionDropdownComponent<T> { 16export class ActionDropdownComponent<T> {
17 @Input() actions: DropdownAction<T>[] = [] 17 @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
18 @Input() entry: T 18 @Input() entry: T
19 @Input() placement = 'bottom-left' 19 @Input() placement = 'bottom-left'
20 @Input() buttonSize: 'normal' | 'small' = 'normal' 20 @Input() buttonSize: 'normal' | 'small' = 'normal'
21 @Input() label: string 21 @Input() label: string
22 @Input() theme: 'orange' | 'grey' = 'grey' 22 @Input() theme: 'orange' | 'grey' = 'grey'
23
24 getActions () {
25 if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
26
27 return [ this.actions ]
28 }
23} 29}
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 460750740..47967f8e5 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -26,7 +26,7 @@ export class UserModerationDropdownComponent implements OnChanges {
26 @Output() userChanged = new EventEmitter() 26 @Output() userChanged = new EventEmitter()
27 @Output() userDeleted = new EventEmitter() 27 @Output() userDeleted = new EventEmitter()
28 28
29 userActions: DropdownAction<{ user: User, account: Account }>[] = [] 29 userActions: DropdownAction<{ user: User, account: Account }>[][] = []
30 30
31 constructor ( 31 constructor (
32 private authService: AuthService, 32 private authService: AuthService,
@@ -264,7 +264,7 @@ export class UserModerationDropdownComponent implements OnChanges {
264 if (this.user && authUser.id === this.user.id) return 264 if (this.user && authUser.id === this.user.id) return
265 265
266 if (this.user && authUser.hasRight(UserRight.MANAGE_USERS)) { 266 if (this.user && authUser.hasRight(UserRight.MANAGE_USERS)) {
267 this.userActions = this.userActions.concat([ 267 this.userActions.push([
268 { 268 {
269 label: this.i18n('Edit'), 269 label: this.i18n('Edit'),
270 linkBuilder: ({ user }) => this.getRouterUserEditLink(user) 270 linkBuilder: ({ user }) => this.getRouterUserEditLink(user)
@@ -294,7 +294,7 @@ export class UserModerationDropdownComponent implements OnChanges {
294 // Actions on accounts/servers 294 // Actions on accounts/servers
295 if (this.account) { 295 if (this.account) {
296 // User actions 296 // User actions
297 this.userActions = this.userActions.concat([ 297 this.userActions.push([
298 { 298 {
299 label: this.i18n('Mute this account'), 299 label: this.i18n('Mute this account'),
300 isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false, 300 isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false,
@@ -317,9 +317,11 @@ export class UserModerationDropdownComponent implements OnChanges {
317 } 317 }
318 ]) 318 ])
319 319
320 let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
321
320 // Instance actions 322 // Instance actions
321 if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) { 323 if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) {
322 this.userActions = this.userActions.concat([ 324 instanceActions = instanceActions.concat([
323 { 325 {
324 label: this.i18n('Mute this account by your instance'), 326 label: this.i18n('Mute this account by your instance'),
325 isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false, 327 isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false,
@@ -335,7 +337,7 @@ export class UserModerationDropdownComponent implements OnChanges {
335 337
336 // Instance actions 338 // Instance actions
337 if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) { 339 if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) {
338 this.userActions = this.userActions.concat([ 340 instanceActions = instanceActions.concat([
339 { 341 {
340 label: this.i18n('Mute the instance by your instance'), 342 label: this.i18n('Mute the instance by your instance'),
341 isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false, 343 isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false,
@@ -348,6 +350,10 @@ export class UserModerationDropdownComponent implements OnChanges {
348 } 350 }
349 ]) 351 ])
350 } 352 }
353
354 if (instanceActions.length !== 0) {
355 this.userActions.push(instanceActions)
356 }
351 } 357 }
352 } 358 }
353 } 359 }