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 @@ Notification preferences - 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 { markAllAsRead () { this.userNotification.markAllAsRead() } + + getUnreadNotifications () { + return this.userNotification.notifications.filter(n => n.read === false).length + } } 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 @@
Notifications
- +
+ + +
@@ -27,6 +34,9 @@ (notificationsLoaded)="onNotificationLoaded()" > - See all your notifications + + + See all your notifications +
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 @@ ::ng-deep { .popover-notifications.popover { max-width: none; + left: 7px !important; .popover-body { padding: 0; font-size: 14px; font-family: $main-fonts; - overflow-y: scroll; width: 400px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); @@ -24,10 +24,17 @@ .content { max-height: 150px; transition: max-height 0.15s ease-out; + display: flex; + height: 500px; + flex-direction: column; &.loaded { max-height: 500px; } + + & > my-user-notifications:nth-child(2) { + overflow-y: auto; + } } .notifications-header { @@ -42,10 +49,19 @@ a { @include disable-default-a-behaviour; + } + + button { + @include peertube-button; + + padding: 0; + background: transparent; + } + a, button { color: rgba(20, 20, 20, 0.5); - &:hover { + &:hover:not(:disabled) { color: rgba(20, 20, 20, 0.8); } } @@ -58,6 +74,8 @@ font-weight: $font-semibold; color: $fg-color; padding: 7px 0; + margin-top: auto; + text-decoration: none; } } } @@ -100,8 +118,16 @@ @media screen and (max-width: $mobile-view) { ::ng-deep { - .popover-notifications.popover .popover-body { - width: 400px; + .popover-notifications.popover { + left: unset !important; + + .arrow { + left: calc(2em + 7px); + } + + .popover-body { + width: 100vw; + } } } } 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 { this.loaded = true } + markAllAsRead () { + this.userNotificationService.markAllAsRead() + } + private async subscribeToNotifications () { const obs = await this.userNotificationSocket.getMyNotificationsSocket() 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 = { 'validate': require('!!raw-loader?!../../../assets/images/global/validate.svg'), 'tick': require('!!raw-loader?!../../../assets/images/global/tick.svg'), 'repeat': require('!!raw-loader?!../../../assets/images/global/repeat.svg'), + 'inbox-full': require('!!raw-loader?!../../../assets/images/global/inbox-full.svg'), 'dislike': require('!!raw-loader?!../../../assets/images/video/dislike.svg'), 'support': require('!!raw-loader?!../../../assets/images/video/support.svg'), '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; ::ng-deep .other-videos { padding-left: 15px; + min-width: $video-miniature-width; .title-page { 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 { this.zone.runOutsideAngular(async () => { this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player) this.player.focus() - this.player.bezels() this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) 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 @@ + + + + + + + + + + + + + + + \ 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 { self.addContextMenu(mode, player, options.common.embedUrl) + player.bezels() + return res(player) }) })