diff options
author | kimsible <kimsible@users.noreply.github.com> | 2020-08-07 17:49:56 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-14 15:03:38 +0200 |
commit | 45ae994a442dd21ed630bef95d56559f8cc6029c (patch) | |
tree | 1cccbfa1696a4e8aa2f083906f51d1a4f595070d /client/src/app/+videos/+video-watch/comment | |
parent | f63c03fb6ecccb5ac8e0d88917f072339b38ffb5 (diff) | |
download | PeerTube-45ae994a442dd21ed630bef95d56559f8cc6029c.tar.gz PeerTube-45ae994a442dd21ed630bef95d56559f8cc6029c.tar.zst PeerTube-45ae994a442dd21ed630bef95d56559f8cc6029c.zip |
Move delete, delete & redraft actions to options
Diffstat (limited to 'client/src/app/+videos/+video-watch/comment')
3 files changed, 32 insertions, 16 deletions
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 @@ | |||
41 | ></div> | 41 | ></div> |
42 | 42 | ||
43 | <div class="comment-actions"> | 43 | <div class="comment-actions"> |
44 | <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> | 44 | <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> |
45 | <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div> | ||
46 | <div *ngIf="isRedraftableByUser()" (click)="onWantToRedraft()" class="comment-action-redraft" i18n>Delete & re-draft</div> | ||
47 | 45 | ||
48 | <my-user-moderation-dropdown | 46 | <my-user-moderation-dropdown |
49 | [prependActions]="prependModerationActions" | 47 | [prependActions]="prependModerationActions" tabindex=0 |
50 | buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" | 48 | buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto" |
51 | ></my-user-moderation-dropdown> | 49 | ></my-user-moderation-dropdown> |
52 | </div> | 50 | </div> |
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 @@ | |||
118 | display: flex; | 118 | display: flex; |
119 | 119 | ||
120 | ::ng-deep .dropdown-toggle, | 120 | ::ng-deep .dropdown-toggle, |
121 | .comment-action-reply, | 121 | .comment-action-reply { |
122 | .comment-action-delete, | ||
123 | .comment-action-redraft { | ||
124 | color: pvar(--greyForegroundColor); | 122 | color: pvar(--greyForegroundColor); |
125 | cursor: pointer; | 123 | cursor: pointer; |
126 | margin-right: 10px; | 124 | margin-right: 10px; |
127 | 125 | ||
128 | &:hover { | 126 | &:hover, &:active, &:focus, &:focus-visible { |
129 | color: pvar(--mainForegroundColor); | 127 | color: pvar(--mainForegroundColor); |
130 | } | 128 | } |
131 | } | 129 | } |
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 { | |||
115 | return this.comment.account && this.isUserLoggedIn() && this.user.account.id === this.comment.account.id && this.comment.totalReplies === 0 | 115 | return this.comment.account && this.isUserLoggedIn() && this.user.account.id === this.comment.account.id && this.comment.totalReplies === 0 |
116 | } | 116 | } |
117 | 117 | ||
118 | isReportableByUser() { | ||
119 | return this.comment.account && this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id | ||
120 | } | ||
121 | |||
118 | switchToDefaultAvatar ($event: Event) { | 122 | switchToDefaultAvatar ($event: Event) { |
119 | ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() | 123 | ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() |
120 | } | 124 | } |
@@ -146,14 +150,30 @@ export class VideoCommentComponent implements OnInit, OnChanges { | |||
146 | this.comment.account = null | 150 | this.comment.account = null |
147 | } | 151 | } |
148 | 152 | ||
149 | if (this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id) { | 153 | this.prependModerationActions = [] |
150 | this.prependModerationActions = [ | 154 | |
151 | { | 155 | if (this.isReportableByUser()) { |
152 | label: $localize`Report comment`, | 156 | this.prependModerationActions.push({ |
153 | handler: () => this.showReportModal() | 157 | label: $localize`Report comment`, |
154 | } | 158 | handler: () => this.showReportModal() |
155 | ] | 159 | }) |
156 | } else { | 160 | } |
161 | |||
162 | if (this.isRemovableByUser()) { | ||
163 | this.prependModerationActions.push({ | ||
164 | label: $localize`Remove comment`, | ||
165 | handler: () => this.onWantToDelete() | ||
166 | }) | ||
167 | } | ||
168 | |||
169 | if (this.isRedraftableByUser()) { | ||
170 | this.prependModerationActions.push({ | ||
171 | label: $localize`Remove & re-draft comment`, | ||
172 | handler: () => this.onWantToRedraft() | ||
173 | }) | ||
174 | } | ||
175 | |||
176 | if (this.prependModerationActions.length === 0) { | ||
157 | this.prependModerationActions = undefined | 177 | this.prependModerationActions = undefined |
158 | } | 178 | } |
159 | } | 179 | } |