aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-19 18:08:21 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-19 18:08:21 +0100
commitc5c09c1e5017844027ef77785f2d0406fa6b7039 (patch)
tree0735a01058bcd2ec3d5ae861ba35f21a1974fa93 /client/src/app
parent10475dea7d2343c13014134b33bc75f7c59ac992 (diff)
downloadPeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.tar.gz
PeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.tar.zst
PeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.zip
fix deleted comment layout and its notification display
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/menu/avatar-notification.component.ts7
-rw-r--r--client/src/app/shared/users/user-notification.model.ts1
-rw-r--r--client/src/app/shared/users/user-notifications.component.html68
-rw-r--r--client/src/app/shared/users/user-notifications.component.scss1
-rw-r--r--client/src/app/shared/video/feed.component.html6
-rw-r--r--client/src/app/shared/video/feed.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss3
7 files changed, 72 insertions, 16 deletions
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 680129a48..ff830ac1c 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -65,6 +65,13 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
65 65
66 markAllAsRead () { 66 markAllAsRead () {
67 this.userNotificationService.markAllAsRead() 67 this.userNotificationService.markAllAsRead()
68 .subscribe(
69 () => {
70 this.unreadNotifications = 0
71 },
72
73 err => this.notifier.error(err.message)
74 )
68 } 75 }
69 76
70 private async subscribeToNotifications () { 77 private async subscribeToNotifications () {
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index c3f4bf429..ba29cb462 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -102,6 +102,7 @@ export class UserNotification implements UserNotificationServer {
102 102
103 case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO: 103 case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
104 case UserNotificationType.COMMENT_MENTION: 104 case UserNotificationType.COMMENT_MENTION:
105 if (!this.comment) break
105 this.accountUrl = this.buildAccountUrl(this.comment.account) 106 this.accountUrl = this.buildAccountUrl(this.comment.account)
106 this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ] 107 this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
107 break 108 break
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 9f0ae4337..108122b57 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -5,11 +5,25 @@
5 5
6 <ng-container [ngSwitch]="notification.type"> 6 <ng-container [ngSwitch]="notification.type">
7 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION"> 7 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
8 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" /> 8 <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
9 9
10 <div class="message" i18n> 10 <ng-template #hasVideo>
11 {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> 11 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
12 </div> 12 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.video.channel.avatarUrl" />
13 </a>
14
15 <div class="message" i18n>
16 {{ notification.video.channel.displayName }} published a new video: <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a>
17 </div>
18 </ng-template>
19
20 <ng-template #noVideo>
21 <my-global-icon iconName="alert"></my-global-icon>
22
23 <div class="message" i18n>
24 The notification concerns a video now unavailable
25 </div>
26 </ng-template>
13 </ng-container> 27 </ng-container>
14 28
15 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO"> 29 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
@@ -45,11 +59,25 @@
45 </ng-container> 59 </ng-container>
46 60
47 <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO"> 61 <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
48 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" /> 62 <ng-container *ngIf="notification.comment; then hasComment; else noComment"></ng-container>
49 63
50 <div class="message" i18n> 64 <ng-template #hasComment>
51 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a> 65 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
52 </div> 66 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
67 </a>
68
69 <div class="message" i18n>
70 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
71 </div>
72 </ng-template>
73
74 <ng-template #noComment>
75 <my-global-icon iconName="alert"></my-global-icon>
76
77 <div class="message" i18n>
78 The notification concerns a comment now unavailable
79 </div>
80 </ng-template>
53 </ng-container> 81 </ng-container>
54 82
55 <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED"> 83 <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
@@ -80,12 +108,14 @@
80 <my-global-icon iconName="user-add"></my-global-icon> 108 <my-global-icon iconName="user-add"></my-global-icon>
81 109
82 <div class="message" i18n> 110 <div class="message" i18n>
83 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance 111 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance
84 </div> 112 </div>
85 </ng-container> 113 </ng-container>
86 114
87 <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW"> 115 <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
88 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" /> 116 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
117 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
118 </a>
89 119
90 <div class="message" i18n> 120 <div class="message" i18n>
91 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following 121 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
@@ -96,7 +126,9 @@
96 </ng-container> 126 </ng-container>
97 127
98 <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION"> 128 <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
99 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" /> 129 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
130 <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
131 </a>
100 132
101 <div class="message" i18n> 133 <div class="message" i18n>
102 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a> 134 <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
@@ -119,8 +151,16 @@
119 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a> 151 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
120 </div> 152 </div>
121 </ng-container> 153 </ng-container>
154
155 <ng-container *ngSwitchDefault>
156 <my-global-icon iconName="alert"></my-global-icon>
157
158 <div class="message" i18n>
159 The notification points to a content now unavailable
160 </div>
161 </ng-container>
122 </ng-container> 162 </ng-container>
123 163
124 <div class="from-date">{{ notification.createdAt | myFromNow }}</div> 164 <div [title]="notification.createdAt" class="from-date">{{ notification.createdAt | myFromNow }}</div>
125 </div> 165 </div>
126</div> 166</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index 0c6c70d98..59e1bcc26 100644
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -48,5 +48,6 @@
48 padding-left: 5px; 48 padding-left: 5px;
49 min-width: 70px; 49 min-width: 70px;
50 text-align: right; 50 text-align: right;
51 margin-left: auto;
51 } 52 }
52} 53}
diff --git a/client/src/app/shared/video/feed.component.html b/client/src/app/shared/video/feed.component.html
index f7624ec01..ac0b1f454 100644
--- a/client/src/app/shared/video/feed.component.html
+++ b/client/src/app/shared/video/feed.component.html
@@ -1,4 +1,8 @@
1<div class="video-feed"> 1<div class="video-feed"
2 [ngbTooltip]="'Feeds available'"
3 placement="right auto"
4 container="body"
5>
2 <my-global-icon 6 <my-global-icon
3 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom" 7 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
4 class="icon-syndication" role="button" iconName="syndication" 8 class="icon-syndication" role="button" iconName="syndication"
diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index ed1dc17d3..f39e409a3 100644
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -2,6 +2,8 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.video-feed { 4.video-feed {
5 width: min-content;
6
5 a { 7 a {
6 color: black; 8 color: black;
7 display: block; 9 display: block;
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 d8fd5c5de..c70914f9b 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
@@ -15,7 +15,7 @@
15 width: 2px; 15 width: 2px;
16 height: 100%; 16 height: 100%;
17 background-color: rgba(0, 0, 0, 0.05); 17 background-color: rgba(0, 0, 0, 0.05);
18 margin: 10px 0; 18 margin: 10px calc(1rem + 1px);
19 } 19 }
20 } 20 }
21 21
@@ -106,6 +106,7 @@
106 106
107 &.comment-html-deleted { 107 &.comment-html-deleted {
108 color: $grey-foreground-color; 108 color: $grey-foreground-color;
109 margin-bottom: 1rem;
109 } 110 }
110 } 111 }
111 112