aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-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
3 files changed, 49 insertions, 9 deletions
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