improve comment form: cancel button and full width

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 cce8455e02edd0c0d3e4699326aa289df6ac719e..3a9977df61ceba36edf259029dbdb2a098a8c32d 100644 (file)
--- 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 @@
     </div>
   </div>
 
-  <div class="submit-comment">
+  <div class="comment-buttons">
+    <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" i18n>
+      Cancel
+    </button>
     <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
-      Post comment
+      Reply
     </button>
   </div>
 </form>

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 5087f71b6da7cb0320a60d6a5a7acd726f57abcf..c04727ba04ab70f3227a7deacf42d43371e5042a 100644 (file)
--- 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 8cdd37680b35cf68cad97d6b18efc3e7dc3c63cd..083509b832b1adc1fdeb10bed3d49a7ab4d19137 100644 (file)
--- 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<VideoCommentCreate>()
+  @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 207be3c7cc53a6dd678b1a3e312bf0385218a6af..80e8cae1d4f26fe0f8da433527141ecf29f89864 100644 (file)
--- 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()"
       ></my-video-comment-add>
 
       <div *ngIf="commentTree" class="children">

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 4cc2fddee6f67a600fa48f71ff81fffdcd8e0801..8d5348af4af28626609fb9063d49a37d97ec0bf5 100644 (file)
--- 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);