aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-15 22:44:31 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-15 22:44:31 +0100
commit88adad2d0f42028a116ccc8173f5a62ad306cc32 (patch)
tree7066c14ed2a999bcaebd22599917545b631aa3ae /client/src/app/videos
parentdd4f25eea802fd88ea641d730432b56f562e0861 (diff)
downloadPeerTube-88adad2d0f42028a116ccc8173f5a62ad306cc32.tar.gz
PeerTube-88adad2d0f42028a116ccc8173f5a62ad306cc32.tar.zst
PeerTube-88adad2d0f42028a116ccc8173f5a62ad306cc32.zip
improve comment form: cancel button and full width
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.html7
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.scss17
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.ts5
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html1
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss4
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 @@
16 </div> 16 </div>
17 </div> 17 </div>
18 18
19 <div class="submit-comment"> 19 <div class="comment-buttons">
20 <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" i18n>
21 Cancel
22 </button>
20 <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n> 23 <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
21 Post comment 24 Reply
22 </button> 25 </button>
23 </div> 26 </div>
24</form> 27</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 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 {
30 } 30 }
31} 31}
32 32
33.submit-comment { 33.cancel-button {
34 font-weight: $font-semibold;
35 display: inline-block;
36 padding: 0 10px 0 10px;
37 white-space: nowrap;
38 background: transparent;
39}
40
41.comment-buttons {
34 display: flex; 42 display: flex;
35 justify-content: flex-end; 43 justify-content: flex-end;
36 44
37 button { 45 button {
38 @include peertube-button; 46 @include peertube-button;
39 @include orange-button; 47
48 &:last-child {
49 @include orange-button;
50 }
40 } 51 }
41} 52}
42 53
43@media screen and (max-width: 600px) { 54@media screen and (max-width: 600px) {
44 textarea, .submit-comment button { 55 textarea, .comment-buttons button {
45 font-size: 14px !important; 56 font-size: 14px !important;
46 } 57 }
47 58
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 {
26 @Input() focusOnInit = false 26 @Input() focusOnInit = false
27 27
28 @Output() commentCreated = new EventEmitter<VideoCommentCreate>() 28 @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
29 @Output() cancel = new EventEmitter()
29 30
30 @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal 31 @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
31 @ViewChild('textarea', { static: true }) textareaElement: ElementRef 32 @ViewChild('textarea', { static: true }) textareaElement: ElementRef
@@ -145,4 +146,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
145 return this.videoCommentService 146 return this.videoCommentService
146 .addCommentThread(this.video.id, commentCreate) 147 .addCommentThread(this.video.id, commentCreate)
147 } 148 }
149
150 private cancelCommentReply () {
151 this.cancel.emit(null)
152 }
148} 153}
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 @@
50 [parentComments]="newParentComments" 50 [parentComments]="newParentComments"
51 [focusOnInit]="true" 51 [focusOnInit]="true"
52 (commentCreated)="onCommentReplyCreated($event)" 52 (commentCreated)="onCommentReplyCreated($event)"
53 (cancel)="onResetReply()"
53 ></my-video-comment-add> 54 ></my-video-comment-add>
54 55
55 <div *ngIf="commentTree" class="children"> 56 <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 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 @@
19 } 19 }
20 } 20 }
21 21
22 .right {
23 width: 100%;
24 }
25
22 .comment-avatar { 26 .comment-avatar {
23 @include avatar(36px); 27 @include avatar(36px);
24 28