aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-28 12:41:04 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-28 12:41:04 +0100
commitc62a34d36bf498cb81c6611e58079535325b92d8 (patch)
tree30f86d683a85141041c286d0ed952806478d7764
parent5b0413ddaa7949a6a44512a8281c5a23466599ae (diff)
downloadPeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.tar.gz
PeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.tar.zst
PeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.zip
Better spacing beetween comments
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html4
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.ts1
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html37
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss2
4 files changed, 24 insertions, 20 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 d5aacf107..4753641bd 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
@@ -11,7 +11,7 @@
11 <div class="vertical-border"></div> 11 <div class="vertical-border"></div>
12 </div> 12 </div>
13 13
14 <div class="right"> 14 <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
15 <span *ngIf="comment.isDeleted" class="comment-avatar"></span> 15 <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
16 16
17 <div class="comment"> 17 <div class="comment">
@@ -81,5 +81,7 @@
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84
85 <ng-content></ng-content>
84 </div> 86 </div>
85</div> 87</div>
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 0d48f0a82..8c376d654 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,6 +22,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
22 @Input() commentTree: VideoCommentThreadTree 22 @Input() commentTree: VideoCommentThreadTree
23 @Input() inReplyToCommentId: number 23 @Input() inReplyToCommentId: number
24 @Input() highlightedComment = false 24 @Input() highlightedComment = false
25 @Input() firstInThread = false
25 26
26 @Output() wantedToDelete = new EventEmitter<VideoComment>() 27 @Output() wantedToDelete = new EventEmitter<VideoComment>()
27 @Output() wantedToReply = new EventEmitter<VideoComment>() 28 @Output() wantedToReply = new EventEmitter<VideoComment>()
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 8f5c583d3..e25efc3ee 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
@@ -46,6 +46,7 @@
46 [inReplyToCommentId]="inReplyToCommentId" 46 [inReplyToCommentId]="inReplyToCommentId"
47 [commentTree]="threadComments[highlightedThread.id]" 47 [commentTree]="threadComments[highlightedThread.id]"
48 [highlightedComment]="true" 48 [highlightedComment]="true"
49 [firstInThread]="true"
49 (wantedToReply)="onWantedToReply($event)" 50 (wantedToReply)="onWantedToReply($event)"
50 (wantedToDelete)="onWantedToDelete($event)" 51 (wantedToDelete)="onWantedToDelete($event)"
51 (threadCreated)="onThreadCreated($event)" 52 (threadCreated)="onThreadCreated($event)"
@@ -54,36 +55,38 @@
54 ></my-video-comment> 55 ></my-video-comment>
55 </div> 56 </div>
56 57
57 <div *ngFor="let comment of comments"> 58 <div *ngFor="let comment of comments; index as i">
58 <my-video-comment 59 <my-video-comment
59 *ngIf="!highlightedThread || comment.id !== highlightedThread.id" 60 *ngIf="!highlightedThread || comment.id !== highlightedThread.id"
60 [comment]="comment" 61 [comment]="comment"
61 [video]="video" 62 [video]="video"
62 [inReplyToCommentId]="inReplyToCommentId" 63 [inReplyToCommentId]="inReplyToCommentId"
63 [commentTree]="threadComments[comment.id]" 64 [commentTree]="threadComments[comment.id]"
65 [firstInThread]="i + 1 !== comments.length"
64 (wantedToReply)="onWantedToReply($event)" 66 (wantedToReply)="onWantedToReply($event)"
65 (wantedToDelete)="onWantedToDelete($event)" 67 (wantedToDelete)="onWantedToDelete($event)"
66 (threadCreated)="onThreadCreated($event)" 68 (threadCreated)="onThreadCreated($event)"
67 (resetReply)="onResetReply()" 69 (resetReply)="onResetReply()"
68 (timestampClicked)="handleTimestampClicked($event)" 70 (timestampClicked)="handleTimestampClicked($event)"
69 ></my-video-comment> 71 >
70 72 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
71 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies"> 73 <span class="glyphicon glyphicon-menu-down"></span>
72 <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span> 74
73 75 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
74 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> 76 <ng-template #hasAuthorComments>
75 <ng-template #hasAuthorComments> 77 <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
76 <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n> 78 View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others
77 View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others 79 </ng-container>
78 </ng-container> 80 <ng-template i18n #onlyAuthorComments>
79 <ng-template i18n #onlyAuthorComments> 81 View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }}
80 View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} 82 </ng-template>
81 </ng-template> 83 </ng-template>
82 </ng-template> 84 <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
83 <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template> 85
86 <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
87 </div>
88 </my-video-comment>
84 89
85 <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader>
86 </div>
87 </div> 90 </div>
88 </div> 91 </div>
89 </ng-template> 92 </ng-template>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 600bc1cee..f95ff5aba 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -9,8 +9,6 @@
9 font-weight: $font-semibold; 9 font-weight: $font-semibold;
10 font-size: 15px; 10 font-size: 15px;
11 cursor: pointer; 11 cursor: pointer;
12 margin-left: 46px;
13 margin-bottom: 10px;
14} 12}
15 13
16.glyphicon, .comment-thread-loading { 14.glyphicon, .comment-thread-loading {