From 88adad2d0f42028a116ccc8173f5a62ad306cc32 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 15 Dec 2019 22:44:31 +0100 Subject: improve comment form: cancel button and full width --- .../comment/video-comment-add.component.html | 7 +++++-- .../comment/video-comment-add.component.scss | 17 ++++++++++++++--- .../+video-watch/comment/video-comment-add.component.ts | 5 +++++ .../+video-watch/comment/video-comment.component.html | 1 + .../+video-watch/comment/video-comment.component.scss | 4 ++++ 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html index cce8455e0..3a9977df6 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html @@ -16,9 +16,12 @@ -
+
+
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 5087f71b6..c04727ba0 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 @@ -30,18 +30,29 @@ form { } } -.submit-comment { +.cancel-button { + font-weight: $font-semibold; + display: inline-block; + padding: 0 10px 0 10px; + white-space: nowrap; + background: transparent; +} + +.comment-buttons { display: flex; justify-content: flex-end; button { @include peertube-button; - @include orange-button; + + &:last-child { + @include orange-button; + } } } @media screen and (max-width: 600px) { - textarea, .submit-comment button { + textarea, .comment-buttons button { font-size: 14px !important; } 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 8cdd37680..083509b83 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 @@ -26,6 +26,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { @Input() focusOnInit = false @Output() commentCreated = new EventEmitter() + @Output() cancel = new EventEmitter() @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal @ViewChild('textarea', { static: true }) textareaElement: ElementRef @@ -145,4 +146,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { return this.videoCommentService .addCommentThread(this.video.id, commentCreate) } + + private cancelCommentReply () { + this.cancel.emit(null) + } } 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 207be3c7c..80e8cae1d 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 @@ -50,6 +50,7 @@ [parentComments]="newParentComments" [focusOnInit]="true" (commentCreated)="onCommentReplyCreated($event)" + (cancel)="onResetReply()" >
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 4cc2fddee..8d5348af4 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 @@ -19,6 +19,10 @@ } } + .right { + width: 100%; + } + .comment-avatar { @include avatar(36px); -- cgit v1.2.3