aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch/comment/video-comment.component.html
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-12-10 10:40:25 +0100
committerChocobozzz <me@florianbigard.com>2019-12-10 11:02:58 +0100
commitfc641dedd6d984bf49d6b2c20ace4d5ecf25e06f (patch)
treea86f75e71f8f67396ec5fd18a18ee05a74f9f638 /client/src/app/videos/+video-watch/comment/video-comment.component.html
parentcd3d847d63239802553b19f359c290a08fa0850c (diff)
downloadPeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.gz
PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.zst
PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.zip
Improve comment tree UI
Diffstat (limited to 'client/src/app/videos/+video-watch/comment/video-comment.component.html')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html111
1 files changed, 58 insertions, 53 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 6ec35d63b..207be3c7c 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
@@ -1,65 +1,70 @@
1<div class="root-comment"> 1<div class="root-comment">
2 <img 2 <div class="left">
3 *ngIf="!comment.isDeleted" 3 <img
4 class="comment-avatar" 4 *ngIf="!comment.isDeleted"
5 [src]="comment.accountAvatarUrl" 5 class="comment-avatar"
6 alt="Avatar" 6 [src]="comment.accountAvatarUrl"
7 /> 7 alt="Avatar"
8 />
8 9
9 <span 10 <div class="vertical-border"></div>
10 *ngIf="comment.isDeleted" 11 </div>
11 class="comment-avatar"
12 ></span>
13 12
14 <div class="comment"> 13 <div class="right">
15 <ng-container *ngIf="!comment.isDeleted"> 14 <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
16 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
17 15
18 <div class="comment-account-date"> 16 <div class="comment">
19 <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a> 17 <ng-container *ngIf="!comment.isDeleted">
20 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a> 18 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
21 </div>
22 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
23 19
24 <div class="comment-actions"> 20 <div class="comment-account-date">
25 <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> 21 <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a>
26 <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div> 22 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
27 </div> 23 class="comment-date">{{ comment.createdAt | myFromNow }}</a>
28 </ng-container> 24 </div>
25 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
29 26
30 <ng-container *ngIf="comment.isDeleted"> 27 <div class="comment-actions">
31 <div class="comment-account-date"> 28 <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
32 <span class="comment-account" i18n>Deleted</span> 29 <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
33 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a> 30 </div>
34 </div> 31 </ng-container>
35 32
36 <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted"> 33 <ng-container *ngIf="comment.isDeleted">
37 <i i18n>This comment has been deleted</i> 34 <div class="comment-account-date">
38 </div> 35 <span class="comment-account" i18n>Deleted</span>
39 </ng-container> 36 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
37 class="comment-date">{{ comment.createdAt | myFromNow }}</a>
38 </div>
39
40 <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
41 <i i18n>This comment has been deleted</i>
42 </div>
43 </ng-container>
40 44
41 <my-video-comment-add 45 <my-video-comment-add
42 *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id" 46 *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
43 [user]="user" 47 [user]="user"
44 [video]="video" 48 [video]="video"
45 [parentComment]="comment" 49 [parentComment]="comment"
46 [parentComments]="newParentComments" 50 [parentComments]="newParentComments"
47 [focusOnInit]="true" 51 [focusOnInit]="true"
48 (commentCreated)="onCommentReplyCreated($event)" 52 (commentCreated)="onCommentReplyCreated($event)"
49 ></my-video-comment-add> 53 ></my-video-comment-add>
50 54
51 <div *ngIf="commentTree" class="children"> 55 <div *ngIf="commentTree" class="children">
52 <div *ngFor="let commentChild of commentTree.children"> 56 <div *ngFor="let commentChild of commentTree.children">
53 <my-video-comment 57 <my-video-comment
54 [comment]="commentChild.comment" 58 [comment]="commentChild.comment"
55 [video]="video" 59 [video]="video"
56 [inReplyToCommentId]="inReplyToCommentId" 60 [inReplyToCommentId]="inReplyToCommentId"
57 [commentTree]="commentChild" 61 [commentTree]="commentChild"
58 [parentComments]="newParentComments" 62 [parentComments]="newParentComments"
59 (wantedToReply)="onWantToReply($event)" 63 (wantedToReply)="onWantToReply($event)"
60 (wantedToDelete)="onWantToDelete($event)" 64 (wantedToDelete)="onWantToDelete($event)"
61 (resetReply)="onResetReply()" 65 (resetReply)="onResetReply()"
62 ></my-video-comment> 66 ></my-video-comment>
67 </div>
63 </div> 68 </div>
64 </div> 69 </div>
65 </div> 70 </div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-02 04:33:53 +0000