aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html9
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts4
-rw-r--r--client/src/app/menu/avatar-notification.component.html20
-rw-r--r--client/src/app/menu/avatar-notification.component.scss34
-rw-r--r--client/src/app/menu/avatar-notification.component.ts4
-rw-r--r--client/src/app/shared/images/global-icon.component.ts1
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss1
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts1
8 files changed, 61 insertions, 13 deletions
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index d518b22ec..daf721f03 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -4,9 +4,12 @@
4 Notification preferences 4 Notification preferences
5 </a> 5 </a>
6 6
7 <button (click)="markAllAsRead()" i18n> 7 <button class="btn" [disabled]="!getUnreadNotifications()" (click)="markAllAsRead()">
8 <my-global-icon iconName="circle-tick"></my-global-icon> 8 <my-global-icon *ngIf="getUnreadNotifications()" iconName="inbox-full"></my-global-icon>
9 Mark all as read 9 <span i18n *ngIf="getUnreadNotifications()">Mark all as read</span>
10
11 <my-global-icon *ngIf="!getUnreadNotifications()" iconName="circle-tick"></my-global-icon>
12 <span i18n *ngIf="!getUnreadNotifications()">All read</span>
10 </button> 13 </button>
11</div> 14</div>
12 15
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index 9eca13d0f..156e7713d 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -11,4 +11,8 @@ export class MyAccountNotificationsComponent {
11 markAllAsRead () { 11 markAllAsRead () {
12 this.userNotification.markAllAsRead() 12 this.userNotification.markAllAsRead()
13 } 13 }
14
15 getUnreadNotifications () {
16 return this.userNotification.notifications.filter(n => n.read === false).length
17 }
14} 18}
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index a5ef43d42..1b6e6dcf8 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -12,10 +12,17 @@
12 <div class="notifications-header"> 12 <div class="notifications-header">
13 <div i18n>Notifications</div> 13 <div i18n>Notifications</div>
14 14
15 <a 15 <div>
16 i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog" 16 <button
17 routerLink="/my-account/settings" fragment="notifications" 17 *ngIf="unreadNotifications"
18 ></a> 18 i18n-title title="Mark all as read" class="glyphicon glyphicon-inbox mr-2"
19 (click)="markAllAsRead()"
20 ></button>
21 <a
22 i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
23 routerLink="/my-account/settings" fragment="notifications"
24 ></a>
25 </div>
19 </div> 26 </div>
20 27
21 <div *ngIf="!loaded" class="loader"> 28 <div *ngIf="!loaded" class="loader">
@@ -27,6 +34,9 @@
27 (notificationsLoaded)="onNotificationLoaded()" 34 (notificationsLoaded)="onNotificationLoaded()"
28 ></my-user-notifications> 35 ></my-user-notifications>
29 36
30 <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a> 37 <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications">
38 <my-global-icon class="mr-1" iconName="inbox-full"></my-global-icon>
39 <span i18n>See all your notifications</span>
40 </a>
31 </div> 41 </div>
32</ng-template> 42</ng-template>
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index d0f01fc32..713ac7cb9 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -4,12 +4,12 @@
4::ng-deep { 4::ng-deep {
5 .popover-notifications.popover { 5 .popover-notifications.popover {
6 max-width: none; 6 max-width: none;
7 left: 7px !important;
7 8
8 .popover-body { 9 .popover-body {
9 padding: 0; 10 padding: 0;
10 font-size: 14px; 11 font-size: 14px;
11 font-family: $main-fonts; 12 font-family: $main-fonts;
12 overflow-y: scroll;
13 width: 400px; 13 width: 400px;
14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); 14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
15 15
@@ -24,10 +24,17 @@
24 .content { 24 .content {
25 max-height: 150px; 25 max-height: 150px;
26 transition: max-height 0.15s ease-out; 26 transition: max-height 0.15s ease-out;
27 display: flex;
28 height: 500px;
29 flex-direction: column;
27 30
28 &.loaded { 31 &.loaded {
29 max-height: 500px; 32 max-height: 500px;
30 } 33 }
34
35 & > my-user-notifications:nth-child(2) {
36 overflow-y: auto;
37 }
31 } 38 }
32 39
33 .notifications-header { 40 .notifications-header {
@@ -42,10 +49,19 @@
42 49
43 a { 50 a {
44 @include disable-default-a-behaviour; 51 @include disable-default-a-behaviour;
52 }
53
54 button {
55 @include peertube-button;
56
57 padding: 0;
58 background: transparent;
59 }
45 60
61 a, button {
46 color: rgba(20, 20, 20, 0.5); 62 color: rgba(20, 20, 20, 0.5);
47 63
48 &:hover { 64 &:hover:not(:disabled) {
49 color: rgba(20, 20, 20, 0.8); 65 color: rgba(20, 20, 20, 0.8);
50 } 66 }
51 } 67 }
@@ -58,6 +74,8 @@
58 font-weight: $font-semibold; 74 font-weight: $font-semibold;
59 color: $fg-color; 75 color: $fg-color;
60 padding: 7px 0; 76 padding: 7px 0;
77 margin-top: auto;
78 text-decoration: none;
61 } 79 }
62 } 80 }
63 } 81 }
@@ -100,8 +118,16 @@
100 118
101@media screen and (max-width: $mobile-view) { 119@media screen and (max-width: $mobile-view) {
102 ::ng-deep { 120 ::ng-deep {
103 .popover-notifications.popover .popover-body { 121 .popover-notifications.popover {
104 width: 400px; 122 left: unset !important;
123
124 .arrow {
125 left: calc(2em + 7px);
126 }
127
128 .popover-body {
129 width: 100vw;
130 }
105 } 131 }
106 } 132 }
107} 133}
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 38dbb935b..680129a48 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -63,6 +63,10 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
63 this.loaded = true 63 this.loaded = true
64 } 64 }
65 65
66 markAllAsRead () {
67 this.userNotificationService.markAllAsRead()
68 }
69
66 private async subscribeToNotifications () { 70 private async subscribeToNotifications () {
67 const obs = await this.userNotificationSocket.getMyNotificationsSocket() 71 const obs = await this.userNotificationSocket.getMyNotificationsSocket()
68 72
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 31cfe2666..8a4965926 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -27,6 +27,7 @@ const icons = {
27 'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'), 27 'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'),
28 'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'), 28 'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'),
29 'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'), 29 'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'),
30 'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg'),
30 'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'), 31 'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'),
31 'support': require('!!raw-loader?!../../../assets/images/video/support.svg'), 32 'support': require('!!raw-loader?!../../../assets/images/video/support.svg'),
32 'like': require('!!raw-loader?!../../../assets/images/video/like.svg'), 33 'like': require('!!raw-loader?!../../../assets/images/video/like.svg'),
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 1b5d355f8..180b7c6ad 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -395,6 +395,7 @@ $video-info-margin-left: 44px;
395 395
396 ::ng-deep .other-videos { 396 ::ng-deep .other-videos {
397 padding-left: 15px; 397 padding-left: 15px;
398 min-width: $video-miniature-width;
398 399
399 .title-page { 400 .title-page {
400 margin: 0 !important; 401 margin: 0 !important;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index dbd75b35a..134af751d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -469,7 +469,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
469 this.zone.runOutsideAngular(async () => { 469 this.zone.runOutsideAngular(async () => {
470 this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player) 470 this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
471 this.player.focus() 471 this.player.focus()
472 this.player.bezels()
473 472
474 this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) 473 this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
475 474