forks/peertube
1
0
Fork 0
Code Releases Activity

Improve moderation dropdown UX

Browse source
This commit is contained in:
Chocobozzz 2021-10-21 10:19:42 +02:00
parent 5196817c5d
commit a2c3564a31
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 158 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/src/app/+accounts/accounts.component.ts
View file

@ -36,7 +36,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
accountDescriptionHTML = ''
accountDescriptionExpanded = false
prependModerationActions: DropdownAction<any>[]
prependModerationActions: DropdownAction<any>[] = []
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()

7
client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
View file

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

4
client/src/app/shared/shared-main/buttons/action-dropdown.component.html
View file

@ -13,7 +13,7 @@
<ng-container *ngFor="let actions of getActions()">
<ng-container *ngFor="let action of actions">
<ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
<div [ngClass]="action.class" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
<ng-template #templateActionLabel let-action>
<my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
@ -45,7 +45,7 @@
<ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
</h6>
</ng-container>
</div>
</ng-container>
<div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>

2
client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
View file

@ -9,6 +9,8 @@ export type DropdownAction<T> = {
handler?: (a: T) => any
linkBuilder?: (a: T) => (string | number)[]
isDisplayed?: (a: T) => boolean
class?: string[]
isHeader?: boolean
}

260
client/src/app/shared/shared-moderation/user-moderation-dropdown.component.ts
View file

@ -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' })
}
])
return myAccountActions
}
let instanceActions: DropdownAction<{ user: User, account: Account }>[] = []
private buildInstanceModerationActions () {
if (!this.authService.isLoggedIn()) return []
// 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)
}
])
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)
}
])
}
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' })
}
])
}
if (instanceActions.length !== 0) {
this.userActions.push(instanceActions)
}
}
])
}
// 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)
}
])
}
// 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 (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 ]
}
}