aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-19 14:51:35 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-19 14:53:01 +0100
commit10475dea7d2343c13014134b33bc75f7c59ac992 (patch)
tree2dd02dd49997e83b14d732b4fdcdd3def06c5d4d /client
parentdddc8b1fe0c875f41c88f395b0d55cfea69add2c (diff)
downloadPeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.tar.gz
PeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.tar.zst
PeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.zip
improve notification popup interactivity: read all, layout, position
fixes #1730
Diffstat (limited to 'client')
-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
-rw-r--r--client/src/assets/images/global/inbox-full.svg15
-rw-r--r--client/src/assets/player/peertube-player-manager.ts2
10 files changed, 78 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
diff --git a/client/src/assets/images/global/inbox-full.svg b/client/src/assets/images/global/inbox-full.svg
new file mode 100644
index 000000000..949f761fc
--- /dev/null
+++ b/client/src/assets/images/global/inbox-full.svg
@@ -0,0 +1,15 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-356.000000, -1046.000000)">
6 <g id="Extras" transform="translate(48.000000, 1046.000000)">
7 <g id="inbox-full" transform="translate(308.000000, 0.000000)">
8 <path d="M7.41604369,14 L3,14 L2,14 L2,15 L2,20.009222 C2,21.1033032 2.89446021,22 3.99339768,22 L20.0066023,22 C21.1067838,22 22,21.1092551 22,20.009222 L22,15 L22,14 L21,14 L16.5839563,14 L15.9295922,14 L15.6676034,14.5996284 C15.0357833,16.0457106 13.6054999,17 12,17 C10.3945001,17 8.96421673,16.0457106 8.33239655,14.5996284 L8.07040776,14 L7.41604369,14 Z" id="Front" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
9 <path d="M2,15.5000001 L2,13.0001355 L5.63085938,3.9134128 C5.83473011,3.40319837 6.44341249,2.98958785 7.00723108,2.98958785 L17.0497215,2.98958785 C17.6059998,2.98958785 18.223735,3.40698372 18.4260932,3.91341276 L22.0569525,13.000135 L22,15" id="Back" stroke="#333333" stroke-width="2" stroke-linejoin="round"></path>
10 <path d="M6,9 L18,9 L18,10 L6,10 L6,9 Z M5,11 L19,11 L19,12 L5,12 L5,11 Z M7,7 L17,7 L17,8 L7,8 L7,7 Z M8,5 L16,5 L16,6 L8,6 L8,5 Z" id="Combined-Shape" fill="#333333"></path>
11 </g>
12 </g>
13 </g>
14 </g>
15</svg> \ No newline at end of file
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 27aa360e6..276f9ec59 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -129,6 +129,8 @@ export class PeertubePlayerManager {
129 129
130 self.addContextMenu(mode, player, options.common.embedUrl) 130 self.addContextMenu(mode, player, options.common.embedUrl)
131 131
132 player.bezels()
133
132 return res(player) 134 return res(player)
133 }) 135 })
134 }) 136 })