From edf1a4e5204189f7c352c007232c2463158aa6d7 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 27 Dec 2019 10:11:10 +0100 Subject: [PATCH] Add user moderation dropdown to comments --- .../user-moderation-dropdown.component.html | 2 +- .../user-moderation-dropdown.component.ts | 10 +++--- .../comment/video-comment.component.html | 3 ++ .../comment/video-comment.component.scss | 7 ++++ .../comment/video-comment.component.ts | 35 ++++++++++++++++--- 5 files changed, 47 insertions(+), 10 deletions(-) diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.html b/client/src/app/shared/moderation/user-moderation-dropdown.component.html index 7367a7e59..adb672322 100644 --- a/client/src/app/shared/moderation/user-moderation-dropdown.component.html +++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.html @@ -3,6 +3,6 @@ \ No newline at end of file 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 d82dc3d94..89f275a04 100644 --- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts +++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts @@ -21,6 +21,7 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges { @Input() buttonSize: 'normal' | 'small' = 'normal' @Input() placement = 'left' + @Input() label: string @Output() userChanged = new EventEmitter() @Output() userDeleted = new EventEmitter() @@ -36,7 +37,6 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges { private serverService: ServerService, private userService: UserService, private blocklistService: BlocklistService, - private auth: AuthService, private i18n: I18n ) { } @@ -243,20 +243,20 @@ export class UserModerationDropdownComponent implements OnInit, OnChanges { if (this.user && authUser.hasRight(UserRight.MANAGE_USERS) && authUser.canManage(this.user)) { this.userActions.push([ { - label: this.i18n('Edit'), + label: this.i18n('Edit user'), linkBuilder: ({ user }) => this.getRouterUserEditLink(user) }, { - label: this.i18n('Delete'), + label: this.i18n('Delete user'), handler: ({ user }) => this.removeUser(user) }, { - label: this.i18n('Ban'), + label: this.i18n('Ban user'), handler: ({ user }) => this.openBanUserModal(user), isDisplayed: ({ user }) => !user.blocked }, { - label: this.i18n('Unban'), + label: this.i18n('Unban user'), handler: ({ user }) => this.unbanUser(user), isDisplayed: ({ user }) => user.blocked }, diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html index e26100346..d5aacf107 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html @@ -36,6 +36,9 @@
Reply
Delete
+
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index c70914f9b..cebb24c12 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -114,6 +114,7 @@ margin-bottom: 10px; display: flex; + ::ng-deep .dropdown-toggle, .comment-action-reply, .comment-action-delete { color: $grey-foreground-color; @@ -124,6 +125,12 @@ color: var(--mainForegroundColor); } } + + ::ng-deep .action-button { + background-color: transparent; + padding: 0; + font-weight: unset; + } } } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts index b2bf3ee1b..0d48f0a82 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts @@ -1,10 +1,14 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core' -import { UserRight } from '../../../../../../shared/models/users' +import { User, UserRight } from '../../../../../../shared/models/users' import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' -import { AuthService } from '../../../core/auth' -import { Video } from '../../../shared/video/video.model' +import { AuthService } from '@app/core/auth' +import { AccountService } from '@app/shared/account/account.service' +import { Video } from '@app/shared/video/video.model' import { VideoComment } from './video-comment.model' import { MarkdownService } from '@app/shared/renderer' +import { Account } from '@app/shared/account/account.model' +import { Notifier } from '@app/core' +import { UserService } from '@app/shared' @Component({ selector: 'my-video-comment', @@ -28,9 +32,15 @@ export class VideoCommentComponent implements OnInit, OnChanges { sanitizedCommentHTML = '' newParentComments: VideoComment[] = [] + commentAccount: Account + commentUser: User + constructor ( private markdownService: MarkdownService, - private authService: AuthService + private authService: AuthService, + private accountService: AccountService, + private userService: UserService, + private notifier: Notifier ) {} get user () { @@ -90,9 +100,26 @@ export class VideoCommentComponent implements OnInit, OnChanges { ) } + private getUserIfNeeded (account: Account) { + if (!account.userId) return + if (!this.authService.isLoggedIn()) return + + const user = this.authService.getUser() + if (user.hasRight(UserRight.MANAGE_USERS)) { + this.userService.getUser(account.userId) + .subscribe( + user => this.commentUser = user, + + err => this.notifier.error(err.message) + ) + } + } + private async init () { const html = await this.markdownService.textMarkdownToHTML(this.comment.text, true) this.sanitizedCommentHTML = await this.markdownService.processVideoTimestamps(html) this.newParentComments = this.parentComments.concat([ this.comment ]) + this.commentAccount = new Account(this.comment.account) + this.getUserIfNeeded(this.commentAccount) } }