diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html index 48230d6d80d2274b7aa6e2c4a36cc3c3206fbb22..90651f2170b316367b691763bce8f9dfe73f3252 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 @@ </div> <div ngbDropdownMenu class="dropdown-menu"> - <ng-container *ngFor="let action of actions"> - <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true"> - <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a> + <ng-container *ngFor="let actions of getActions()"> - <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button"> - {{ action.label }} - </span> + <ng-container *ngFor="let action of actions"> + <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true"> + <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a> + + <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button"> + {{ action.label }} + </span> + </ng-container> </ng-container> + + <div class="dropdown-divider"></div> + </ng-container> </div> -</div> \ No newline at end of file +</div> diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index 92c4d1d2c075296759f669f74fc5ed1bdec92e77..a4fcceeee25f5203f1b2f2b6a23563a6c89e7aa7 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 @@ @import '_variables'; @import '_mixins'; +.dropdown-divider:last-child { + display: none; +} + .action-button { @include peertube-button; @@ -52,4 +56,4 @@ width: 100%; } } -} \ No newline at end of file +} diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts index d8026ef41677d555a0ed94e025220c90990a0279..275e2b51ecfbabd82e4816b18c3414f8e9a60dd7 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> = { }) export class ActionDropdownComponent<T> { - @Input() actions: DropdownAction<T>[] = [] + @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = [] @Input() entry: T @Input() placement = 'bottom-left' @Input() buttonSize: 'normal' | 'small' = 'normal' @Input() label: string @Input() theme: 'orange' | 'grey' = 'grey' + + getActions () { + if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions + + return [ this.actions ] + } } 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 4607507402e700937964ec311a9f06df266bfd9e..47967f8e57f9e9ac188ea57b92f72c646086cef3 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 { @Output() userChanged = new EventEmitter() @Output() userDeleted = new EventEmitter() - userActions: DropdownAction<{ user: User, account: Account }>[] = [] + userActions: DropdownAction<{ user: User, account: Account }>[][] = [] constructor ( private authService: AuthService, @@ -264,7 +264,7 @@ export class UserModerationDropdownComponent implements OnChanges { if (this.user && authUser.id === this.user.id) return if (this.user && authUser.hasRight(UserRight.MANAGE_USERS)) { - this.userActions = this.userActions.concat([ + this.userActions.push([ { label: this.i18n('Edit'), linkBuilder: ({ user }) => this.getRouterUserEditLink(user) @@ -294,7 +294,7 @@ export class UserModerationDropdownComponent implements OnChanges { // Actions on accounts/servers if (this.account) { // User actions - this.userActions = this.userActions.concat([ + this.userActions.push([ { label: this.i18n('Mute this account'), isDisplayed: ({ account }: { account: Account }) => account.mutedByUser === false, @@ -317,9 +317,11 @@ export class UserModerationDropdownComponent implements OnChanges { } ]) + let instanceActions: DropdownAction<{ user: User, account: Account }>[] = [] + // Instance actions if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) { - this.userActions = this.userActions.concat([ + instanceActions = instanceActions.concat([ { label: this.i18n('Mute this account by your instance'), isDisplayed: ({ account }: { account: Account }) => account.mutedByInstance === false, @@ -335,7 +337,7 @@ export class UserModerationDropdownComponent implements OnChanges { // Instance actions if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) { - this.userActions = this.userActions.concat([ + instanceActions = instanceActions.concat([ { label: this.i18n('Mute the instance by your instance'), isDisplayed: ({ account }: { account: Account }) => !account.userId && account.mutedServerByInstance === false, @@ -348,6 +350,10 @@ export class UserModerationDropdownComponent implements OnChanges { } ]) } + + if (instanceActions.length !== 0) { + this.userActions.push(instanceActions) + } } } }