From f63c03fb6ecccb5ac8e0d88917f072339b38ffb5 Mon Sep 17 00:00:00 2001 From: kimsible Date: Fri, 7 Aug 2020 14:03:28 +0200 Subject: Add delete & re-draft for comments without replies --- .../comment/video-comment-add.component.scss | 1 + .../comment/video-comment-add.component.ts | 30 ++++++++++++++++++---- .../comment/video-comment.component.html | 4 +++ .../comment/video-comment.component.scss | 3 ++- .../comment/video-comment.component.ts | 15 ++++++++++- .../comment/video-comments.component.html | 5 ++++ .../comment/video-comments.component.ts | 25 +++++++++++++++--- 7 files changed, 73 insertions(+), 10 deletions(-) (limited to 'client') diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index b3725ab94..d8f851baf 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss @@ -22,6 +22,7 @@ form { textarea { @include peertube-textarea(100%, 60px); + @include button-focus(pvar(--mainColorLightest)); &:focus::placeholder { opacity: 0; diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts index d79efbb49..c1ddc0695 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts @@ -1,5 +1,5 @@ import { Observable } from 'rxjs' -import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' +import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' import { Router } from '@angular/router' import { Notifier, User } from '@app/core' import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms' @@ -13,12 +13,13 @@ import { VideoCommentCreate } from '@shared/models' templateUrl: './video-comment-add.component.html', styleUrls: ['./video-comment-add.component.scss'] }) -export class VideoCommentAddComponent extends FormReactive implements OnInit { +export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit { @Input() user: User @Input() video: Video @Input() parentComment: VideoComment @Input() parentComments: VideoComment[] @Input() focusOnInit = false + @Input() textValue?: string @Output() commentCreated = new EventEmitter() @Output() cancel = new EventEmitter() @@ -45,8 +46,9 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { }) if (this.user) { - if (this.focusOnInit === true) { - this.textareaElement.nativeElement.focus() + if (this.textValue) { + this.patchTextValue(this.textValue, this.focusOnInit) + return } if (this.parentComment) { @@ -57,11 +59,17 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { const mentionsSet = new Set(mentions) const mentionsText = Array.from(mentionsSet).join(' ') + ' ' - this.form.patchValue({ text: mentionsText }) + this.patchTextValue(mentionsText, this.focusOnInit) } } } + ngOnChanges (changes: SimpleChanges) { + if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) { + this.patchTextValue(changes.textValue.currentValue, true) + } + } + onValidKey () { this.check() if (!this.form.valid) return @@ -145,4 +153,16 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { return this.videoCommentService .addCommentThread(this.video.id, commentCreate) } + + private patchTextValue (text: string, focus: boolean) { + setTimeout(() => { + if (focus) { + this.textareaElement.nativeElement.focus() + } + + this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' }) + }) + + this.form.patchValue({ text }) + } } 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 aa6d45789..fdb555d18 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 @@ -43,6 +43,7 @@
Reply
Delete
+
Delete & re-draft
@@ -84,8 +86,10 @@ [parentComments]="newParentComments" (wantedToReply)="onWantToReply($event)" (wantedToDelete)="onWantToDelete($event)" + (wantedToRedraft)="onWantToRedraft($event)" (resetReply)="onResetReply()" (timestampClicked)="handleTimestampClicked($event)" + [redraftValue]="redraftValue" >
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 e7ef79561..151e3ba3a 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 @@ -119,7 +119,8 @@ ::ng-deep .dropdown-toggle, .comment-action-reply, - .comment-action-delete { + .comment-action-delete, + .comment-action-redraft { color: pvar(--greyForegroundColor); cursor: pointer; margin-right: 10px; 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 a84e91fd3..507132909 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 @@ -22,9 +22,11 @@ export class VideoCommentComponent implements OnInit, OnChanges { @Input() inReplyToCommentId: number @Input() highlightedComment = false @Input() firstInThread = false + @Input() redraftValue?: string - @Output() wantedToDelete = new EventEmitter() @Output() wantedToReply = new EventEmitter() + @Output() wantedToDelete = new EventEmitter() + @Output() wantedToRedraft = new EventEmitter() @Output() threadCreated = new EventEmitter() @Output() resetReply = new EventEmitter() @Output() timestampClicked = new EventEmitter() @@ -70,7 +72,10 @@ export class VideoCommentComponent implements OnInit, OnChanges { comment: createdComment, children: [] }) + this.resetReply.emit() + + delete this.redraftValue } onWantToReply (comment?: VideoComment) { @@ -81,6 +86,10 @@ export class VideoCommentComponent implements OnInit, OnChanges { this.wantedToDelete.emit(comment || this.comment) } + onWantToRedraft (comment?: VideoComment) { + this.wantedToRedraft.emit(comment || this.comment) + } + isUserLoggedIn () { return this.authService.isLoggedIn() } @@ -102,6 +111,10 @@ export class VideoCommentComponent implements OnInit, OnChanges { ) } + isRedraftableByUser () { + return this.comment.account && this.isUserLoggedIn() && this.user.account.id === this.comment.account.id && this.comment.totalReplies === 0 + } + switchToDefaultAvatar ($event: Event) { ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() } diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/comment/video-comments.component.html index dd1d43560..1bc0885a4 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.html +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.html @@ -27,6 +27,7 @@ [video]="video" [user]="user" (commentCreated)="onCommentThreadCreated($event)" + [textValue]="commentThreadRedraftValue" >
No comments.
@@ -50,9 +51,11 @@ [firstInThread]="true" (wantedToReply)="onWantedToReply($event)" (wantedToDelete)="onWantedToDelete($event)" + (wantedToRedraft)="onWantedToRedraft($event)" (threadCreated)="onThreadCreated($event)" (resetReply)="onResetReply()" (timestampClicked)="handleTimestampClicked($event)" + [redraftValue]="commentReplyRedraftValue" > @@ -66,9 +69,11 @@ [firstInThread]="i + 1 !== comments.length" (wantedToReply)="onWantedToReply($event)" (wantedToDelete)="onWantedToDelete($event)" + (wantedToRedraft)="onWantedToRedraft($event)" (threadCreated)="onThreadCreated($event)" (resetReply)="onResetReply()" (timestampClicked)="handleTimestampClicked($event)" + [redraftValue]="commentReplyRedraftValue" >
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts index 517844ab2..8080afd8d 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts @@ -27,6 +27,8 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { totalItems: null } inReplyToCommentId: number + commentReplyRedraftValue: string + commentThreadRedraftValue: string threadComments: { [ id: number ]: VideoCommentThreadTree } = {} threadLoading: { [ id: number ]: boolean } = {} @@ -131,6 +133,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { onCommentThreadCreated (comment: VideoComment) { this.comments.unshift(comment) + delete this.commentThreadRedraftValue } onWantedToReply (comment: VideoComment) { @@ -139,6 +142,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { onResetReply () { this.inReplyToCommentId = undefined + delete this.commentReplyRedraftValue } onThreadCreated (commentTree: VideoCommentThreadTree) { @@ -156,9 +160,7 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.timestampClicked.emit(timestamp) } - async onWantedToDelete (commentToDelete: VideoComment) { - let message = 'Do you really want to delete this comment?' - + async onWantedToDelete (commentToDelete: VideoComment, message = 'Do you really want to delete this comment?'): Promise { if (commentToDelete.isLocal || this.video.isLocal) { message += $localize` The deletion will be sent to remote instances so they can reflect the change.` } else { @@ -183,6 +185,23 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { err => this.notifier.error(err.message) ) + + return true + } + + async onWantedToRedraft(commentToRedraft: VideoComment) { + const confirm = await this.onWantedToDelete(commentToRedraft, 'Do you really want to delete and re-draft this comment?') + + if (confirm) { + this.inReplyToCommentId = commentToRedraft.inReplyToCommentId + + if (commentToRedraft.threadId === commentToRedraft.id) { + this.commentThreadRedraftValue = commentToRedraft.text + } else { + this.commentReplyRedraftValue = commentToRedraft.text + } + + } } isUserLoggedIn () { -- cgit v1.2.3