Move delete, delete & redraft actions to options

This commit is contained in:
kimsible 2020-08-07 17:49:56 +02:00 committed by Chocobozzz
parent f63c03fb6e
commit 45ae994a44
3 changed files with 32 additions and 16 deletions

View File

@ -41,12 +41,10 @@
></div> ></div>
<div class="comment-actions"> <div class="comment-actions">
<div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
<div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
<div *ngIf="isRedraftableByUser()" (click)="onWantToRedraft()" class="comment-action-redraft" i18n>Delete & re-draft</div>
<my-user-moderation-dropdown <my-user-moderation-dropdown
[prependActions]="prependModerationActions" [prependActions]="prependModerationActions" tabindex=0
buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
></my-user-moderation-dropdown> ></my-user-moderation-dropdown>
</div> </div>

View File

@ -118,14 +118,12 @@
display: flex; display: flex;
::ng-deep .dropdown-toggle, ::ng-deep .dropdown-toggle,
.comment-action-reply, .comment-action-reply {
.comment-action-delete,
.comment-action-redraft {
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
&:hover { &:hover, &:active, &:focus, &:focus-visible {
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
} }

View File

@ -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 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) { switchToDefaultAvatar ($event: Event) {
($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
} }
@ -146,14 +150,30 @@ export class VideoCommentComponent implements OnInit, OnChanges {
this.comment.account = null this.comment.account = null
} }
if (this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id) { this.prependModerationActions = []
this.prependModerationActions = [
{ if (this.isReportableByUser()) {
label: $localize`Report comment`, this.prependModerationActions.push({
handler: () => this.showReportModal() label: $localize`Report comment`,
} handler: () => this.showReportModal()
] })
} else { }
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 this.prependModerationActions = undefined
} }
} }