From a2c3564a31268e4e60f05952aa3731e114ac1e30 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 21 Oct 2021 10:19:42 +0200 Subject: Improve moderation dropdown UX --- client/src/app/+accounts/accounts.component.ts | 10 +- .../shared/comment/video-comment.component.ts | 7 +- .../buttons/action-dropdown.component.html | 4 +- .../buttons/action-dropdown.component.ts | 2 + .../user-moderation-dropdown.component.ts | 252 +++++++++++---------- 5 files changed, 154 insertions(+), 121 deletions(-) diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index e90816c5a..3cb117fcc 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -36,7 +36,7 @@ export class AccountsComponent implements OnInit, OnDestroy { accountDescriptionHTML = '' accountDescriptionExpanded = false - prependModerationActions: DropdownAction[] + prependModerationActions: DropdownAction[] = [] private routeSub: Subscription @@ -151,8 +151,6 @@ export class AccountsComponent implements OnInit, OnDestroy { private async onAccount (account: Account) { this.accountFollowerTitle = $localize`${account.followersCount} direct account followers` - this.prependModerationActions = undefined - this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description) // After the markdown renderer to avoid layout changes @@ -184,6 +182,8 @@ export class AccountsComponent implements OnInit, OnDestroy { } private updateModerationActions () { + this.prependModerationActions = [] + if (!this.authService.isLoggedIn()) return this.authService.userInformationLoaded.subscribe( @@ -192,6 +192,10 @@ export class AccountsComponent implements OnInit, OnDestroy { // It's not our account, we can report it this.prependModerationActions = [ + { + label: $localize`Report`, + isHeader: true + }, { label: $localize`Report this account`, handler: () => this.showReportModal() diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts index 5bbcffe82..cabea7551 100644 --- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts +++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts @@ -197,8 +197,11 @@ export class VideoCommentComponent implements OnInit, OnChanges { }) } - if (this.prependModerationActions.length === 0) { - this.prependModerationActions = undefined + if (this.prependModerationActions.length !== 0) { + this.prependModerationActions.unshift({ + label: $localize`Actions on comment`, + isHeader: true + }) } } diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html index d0487f0b8..c465b6903 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html @@ -13,7 +13,7 @@ - +
@@ -45,7 +45,7 @@ - +
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts index 36d7d6229..67ac6e1aa 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts @@ -9,6 +9,8 @@ export type DropdownAction = { handler?: (a: T) => any linkBuilder?: (a: T) => (string | number)[] isDisplayed?: (a: T) => boolean + + class?: string[] isHeader?: boolean } diff --git a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts index 9f1e1bf9b..1c5240db4 100644 --- a/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts +++ b/client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts @@ -241,139 +241,163 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges { return [ '/admin', 'users', 'update', user.id ] } + private isMyUser (user: User) { + return user && this.authService.getUser().id === user.id + } + + private isMyAccount (account: Account) { + return account && this.authService.getUser().account.id === account.id + } + private buildActions () { this.userActions = [] - if (this.prependActions) { + if (this.prependActions && this.prependActions.length !== 0) { this.userActions = [ this.prependActions ] } - if (this.authService.isLoggedIn()) { - const authUser = this.authService.getUser() + const myAccountModerationActions = this.buildMyAccountModerationActions() + const instanceModerationActions = this.buildInstanceModerationActions() - if (this.user && authUser.id === this.user.id) return + if (myAccountModerationActions.length !== 0) this.userActions.push(myAccountModerationActions) + if (instanceModerationActions.length !== 0) this.userActions.push(instanceModerationActions) + } - if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) { - this.userActions.push([ - { - label: $localize`Edit user`, - description: $localize`Change quota, role, and more.`, - linkBuilder: ({ user }) => this.getRouterUserEditLink(user) - }, - { - label: $localize`Delete user`, - description: $localize`Videos will be deleted, comments will be tombstoned.`, - handler: ({ user }) => this.removeUser(user) - }, - { - label: $localize`Ban`, - description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`, - handler: ({ user }) => this.openBanUserModal(user), - isDisplayed: ({ user }) => !user.blocked - }, - { - label: $localize`Unban user`, - description: $localize`Allow the user to login and create videos/comments again`, - handler: ({ user }) => this.unbanUser(user), - isDisplayed: ({ user }) => user.blocked - }, - { - label: $localize`Set Email as Verified`, - handler: ({ user }) => this.setEmailAsVerified(user), - isDisplayed: ({ user }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false - } - ]) + private buildMyAccountModerationActions () { + if (!this.account || !this.authService.isLoggedIn()) return [] + + const myAccountActions: DropdownAction<{ user: User, account: Account }>[] = [ + { + label: $localize`Personal moderation`, + class: [ 'red' ], + isHeader: true + }, + { + label: $localize`Mute this account`, + description: $localize`Hide any content from that user from you.`, + isDisplayed: ({ account }) => !this.isMyAccount(account) && account.mutedByUser === false, + handler: ({ account }) => this.blockAccountByUser(account) + }, + { + label: $localize`Unmute this account`, + description: $localize`Show back content from that user for you.`, + isDisplayed: ({ account }) => !this.isMyAccount(account) && account.mutedByUser === true, + handler: ({ account }) => this.unblockAccountByUser(account) + }, + { + label: $localize`Mute the instance`, + description: $localize`Hide any content from that instance for you.`, + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, + handler: ({ account }) => this.blockServerByUser(account.host) + }, + { + label: $localize`Unmute the instance`, + description: $localize`Show back content from that instance for you.`, + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, + handler: ({ account }) => this.unblockServerByUser(account.host) + }, + { + label: $localize`Remove comments from your videos`, + description: $localize`Remove comments made by this account on your videos.`, + isDisplayed: ({ account }) => !this.isMyAccount(account), + handler: ({ account }) => this.bulkRemoveCommentsOf({ accountName: account.nameWithHost, scope: 'my-videos' }) } + ] - // Actions on accounts/servers - if (this.account) { - // User actions - this.userActions.push([ - { - label: $localize`Mute this account`, - description: $localize`Hide any content from that user from you.`, - isDisplayed: ({ account }) => account.mutedByUser === false, - handler: ({ account }) => this.blockAccountByUser(account) - }, - { - label: $localize`Unmute this account`, - description: $localize`Show back content from that user for you.`, - isDisplayed: ({ account }) => account.mutedByUser === true, - handler: ({ account }) => this.unblockAccountByUser(account) - }, - { - label: $localize`Mute the instance`, - description: $localize`Hide any content from that instance for you.`, - isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, - handler: ({ account }) => this.blockServerByUser(account.host) - }, - { - label: $localize`Unmute the instance`, - description: $localize`Show back content from that instance for you.`, - isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, - handler: ({ account }) => this.unblockServerByUser(account.host) - }, - { - label: $localize`Remove comments from your videos`, - description: $localize`Remove comments made by this account on your videos.`, - handler: ({ account }) => this.bulkRemoveCommentsOf({ accountName: account.nameWithHost, scope: 'my-videos' }) - } - ]) - - let instanceActions: DropdownAction<{ user: User, account: Account }>[] = [] - - // Instance actions on account blocklists - if (authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) { - instanceActions = instanceActions.concat([ - { - label: $localize`Mute this account by your instance`, - description: $localize`Hide any content from that user from you, your instance and its users.`, - isDisplayed: ({ account }) => account.mutedByInstance === false, - handler: ({ account }) => this.blockAccountByInstance(account) - }, - { - label: $localize`Unmute this account by your instance`, - description: $localize`Show this user's content to the users of this instance again.`, - isDisplayed: ({ account }) => account.mutedByInstance === true, - handler: ({ account }) => this.unblockAccountByInstance(account) - } - ]) + return myAccountActions + } + + private buildInstanceModerationActions () { + if (!this.authService.isLoggedIn()) return [] + + const authUser = this.authService.getUser() + + let instanceActions: DropdownAction<{ user: User, account: Account }>[] = [] + + if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) { + instanceActions = instanceActions.concat([ + { + label: $localize`Edit user`, + description: $localize`Change quota, role, and more.`, + linkBuilder: ({ user }) => this.getRouterUserEditLink(user) + }, + { + label: $localize`Delete user`, + description: $localize`Videos will be deleted, comments will be tombstoned.`, + isDisplayed: ({ user }) => !this.isMyUser(user), + handler: ({ user }) => this.removeUser(user) + }, + { + label: $localize`Ban`, + description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`, + handler: ({ user }) => this.openBanUserModal(user), + isDisplayed: ({ user }) => !this.isMyUser(user) && !user.blocked + }, + { + label: $localize`Unban user`, + description: $localize`Allow the user to login and create videos/comments again`, + handler: ({ user }) => this.unbanUser(user), + isDisplayed: ({ user }) => !this.isMyUser(user) && user.blocked + }, + { + label: $localize`Set Email as Verified`, + handler: ({ user }) => this.setEmailAsVerified(user), + isDisplayed: ({ user }) => this.requiresEmailVerification && !user.blocked && user.emailVerified === false } + ]) + } - // Instance actions on server blocklists - if (authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) { - instanceActions = instanceActions.concat([ - { - label: $localize`Mute the instance by your instance`, - description: $localize`Hide any content from that instance from you, your instance and its users.`, - isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, - handler: ({ account }) => this.blockServerByInstance(account.host) - }, - { - label: $localize`Unmute the instance by your instance`, - description: $localize`Show back content from that instance for you, your instance and its users.`, - isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, - handler: ({ account }) => this.unblockServerByInstance(account.host) - } - ]) + // Instance actions on account blocklists + if (this.account && authUser.hasRight(UserRight.MANAGE_ACCOUNTS_BLOCKLIST)) { + instanceActions = instanceActions.concat([ + { + label: $localize`Mute this account`, + description: $localize`Hide any content from that user from you, your instance and its users.`, + isDisplayed: ({ account }) => !this.isMyAccount(account) && account.mutedByInstance === false, + handler: ({ account }) => this.blockAccountByInstance(account) + }, + { + label: $localize`Unmute this account`, + description: $localize`Show this user's content to the users of this instance again.`, + isDisplayed: ({ account }) => !this.isMyAccount(account) && account.mutedByInstance === true, + handler: ({ account }) => this.unblockAccountByInstance(account) } + ]) + } - if (authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) { - instanceActions = instanceActions.concat([ - { - label: $localize`Remove comments from your instance`, - description: $localize`Remove comments made by this account from your instance.`, - handler: ({ account }) => this.bulkRemoveCommentsOf({ accountName: account.nameWithHost, scope: 'instance' }) - } - ]) + // Instance actions on server blocklists + if (this.account && authUser.hasRight(UserRight.MANAGE_SERVERS_BLOCKLIST)) { + instanceActions = instanceActions.concat([ + { + label: $localize`Mute the instance`, + description: $localize`Hide any content from that instance from you, your instance and its users.`, + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === false, + handler: ({ account }) => this.blockServerByInstance(account.host) + }, + { + label: $localize`Unmute the instance by your instance`, + description: $localize`Show back content from that instance for you, your instance and its users.`, + isDisplayed: ({ account }) => !account.userId && account.mutedServerByInstance === true, + handler: ({ account }) => this.unblockServerByInstance(account.host) } + ]) + } - if (instanceActions.length !== 0) { - this.userActions.push(instanceActions) + if (this.account && authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)) { + instanceActions = instanceActions.concat([ + { + label: $localize`Remove comments from your instance`, + description: $localize`Remove comments made by this account from your instance.`, + isDisplayed: ({ account }) => !this.isMyAccount(account), + handler: ({ account }) => this.bulkRemoveCommentsOf({ accountName: account.nameWithHost, scope: 'instance' }) } - } + ]) } + + if (instanceActions.length === 0) return [] + + return [ { label: $localize`Instance moderation`, isHeader: true }, ...instanceActions ] } } -- cgit v1.2.3