diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2019-12-19 18:08:21 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2019-12-19 18:08:21 +0100 |
commit | c5c09c1e5017844027ef77785f2d0406fa6b7039 (patch) | |
tree | 0735a01058bcd2ec3d5ae861ba35f21a1974fa93 | |
parent | 10475dea7d2343c13014134b33bc75f7c59ac992 (diff) | |
download | PeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.tar.gz PeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.tar.zst PeerTube-c5c09c1e5017844027ef77785f2d0406fa6b7039.zip |
fix deleted comment layout and its notification display
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 | ||