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 fdb555d18..8e44d0052 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 @@ -41,12 +41,10 @@ >
-
Reply
-
Delete
-
Delete & re-draft
+
Reply
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 151e3ba3a..61fd24c70 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 @@ -118,14 +118,12 @@ display: flex; ::ng-deep .dropdown-toggle, - .comment-action-reply, - .comment-action-delete, - .comment-action-redraft { + .comment-action-reply { color: pvar(--greyForegroundColor); cursor: pointer; margin-right: 10px; - &:hover { + &:hover, &:active, &:focus, &:focus-visible { color: pvar(--mainForegroundColor); } } 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 507132909..c2964d370 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 @@ -115,6 +115,10 @@ export class VideoCommentComponent implements OnInit, OnChanges { return this.comment.account && this.isUserLoggedIn() && this.user.account.id === this.comment.account.id && this.comment.totalReplies === 0 } + isReportableByUser() { + return this.comment.account && this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id + } + switchToDefaultAvatar ($event: Event) { ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() } @@ -146,14 +150,30 @@ export class VideoCommentComponent implements OnInit, OnChanges { this.comment.account = null } - if (this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id) { - this.prependModerationActions = [ - { - label: $localize`Report comment`, - handler: () => this.showReportModal() - } - ] - } else { + this.prependModerationActions = [] + + if (this.isReportableByUser()) { + this.prependModerationActions.push({ + label: $localize`Report comment`, + handler: () => this.showReportModal() + }) + } + + if (this.isRemovableByUser()) { + this.prependModerationActions.push({ + label: $localize`Remove comment`, + handler: () => this.onWantToDelete() + }) + } + + if (this.isRedraftableByUser()) { + this.prependModerationActions.push({ + label: $localize`Remove & re-draft comment`, + handler: () => this.onWantToRedraft() + }) + } + + if (this.prependModerationActions.length === 0) { this.prependModerationActions = undefined } }