From b28e4e5e080646ec67363cb0a16c9bd97ccffb35 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Feb 2019 10:16:04 +0100 Subject: [PATCH] Add user notification animation --- .../user-notification-socket.service.ts | 1 - .../menu/avatar-notification.component.html | 31 ++++++++----- .../menu/avatar-notification.component.scss | 20 ++++++++- .../app/menu/avatar-notification.component.ts | 9 ++++ .../src/app/shared/misc/loader.component.html | 9 +++- .../src/app/shared/misc/loader.component.scss | 45 +++++++++++++++++++ .../src/app/shared/misc/loader.component.ts | 3 +- .../shared/misc/small-loader.component.html | 3 ++ .../app/shared/misc/small-loader.component.ts | 11 +++++ client/src/app/shared/shared.module.ts | 3 ++ .../users/user-notifications.component.ts | 6 ++- .../comment/video-comments.component.html | 2 +- .../+video-watch/video-watch.component.html | 2 +- 13 files changed, 124 insertions(+), 21 deletions(-) create mode 100644 client/src/app/shared/misc/loader.component.scss create mode 100644 client/src/app/shared/misc/small-loader.component.html create mode 100644 client/src/app/shared/misc/small-loader.component.ts diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts index 29337d3a7..493f03e35 100644 --- a/client/src/app/core/notification/user-notification-socket.service.ts +++ b/client/src/app/core/notification/user-notification-socket.service.ts @@ -2,7 +2,6 @@ import { Injectable } from '@angular/core' import { environment } from '../../../environments/environment' import { UserNotification as UserNotificationServer } from '../../../../../shared' import { Subject } from 'rxjs' -import * as io from 'socket.io-client' import { AuthService } from '../auth' export type NotificationEvent = 'new' | 'read' | 'read-all' diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html index 4ef3f0e89..a5ef43d42 100644 --- a/client/src/app/menu/avatar-notification.component.html +++ b/client/src/app/menu/avatar-notification.component.html @@ -1,6 +1,6 @@
{{ unreadNotifications }}
@@ -8,16 +8,25 @@
-
-
Notifications
+
+
+
Notifications
- + +
+ +
+ +
+ + + + 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 e785db788..201668b6e 100644 --- a/client/src/app/menu/avatar-notification.component.scss +++ b/client/src/app/menu/avatar-notification.component.scss @@ -9,11 +9,27 @@ padding: 0; font-size: 14px; font-family: $main-fonts; - overflow-y: auto; - max-height: 500px; + overflow-y: scroll; width: 400px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); + .loader { + display: flex; + align-items: center; + justify-content: center; + + padding: 5px 0; + } + + .content { + max-height: 150px; + transition: max-height 0.15s ease-out; + + &.loaded { + max-height: 500px; + } + } + .notifications-header { display: flex; justify-content: space-between; diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts index 878c5c88c..a77a001ca 100644 --- a/client/src/app/menu/avatar-notification.component.ts +++ b/client/src/app/menu/avatar-notification.component.ts @@ -17,6 +17,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { @Input() user: User unreadNotifications = 0 + loaded = false private notificationSub: Subscription private routeSub: Subscription @@ -54,6 +55,14 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy { this.popover.close() } + onPopoverHidden () { + this.loaded = false + } + + onNotificationLoaded () { + this.loaded = true + } + private async subscribeToNotifications () { const obs = await this.userNotificationSocket.getMyNotificationsSocket() diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html index 38d06950e..b8b7ad343 100644 --- a/client/src/app/shared/misc/loader.component.html +++ b/client/src/app/shared/misc/loader.component.html @@ -1,3 +1,8 @@ -
-
+
+
+
+
+
+
+
diff --git a/client/src/app/shared/misc/loader.component.scss b/client/src/app/shared/misc/loader.component.scss new file mode 100644 index 000000000..ddb64f07a --- /dev/null +++ b/client/src/app/shared/misc/loader.component.scss @@ -0,0 +1,45 @@ +@import '_variables'; +@import '_mixins'; + +// Thanks to https://loading.io/css/ (CC0 License) + +.lds-ring { + display: inline-block; + position: relative; + width: 50px; + height: 50px; +} + +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 44px; + height: 44px; + margin: 6px; + border: 4px solid; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: #999999 transparent transparent transparent; +} + +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} + +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} + +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} + +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts index f37d70c85..e3b1eea3a 100644 --- a/client/src/app/shared/misc/loader.component.ts +++ b/client/src/app/shared/misc/loader.component.ts @@ -2,10 +2,9 @@ import { Component, Input } from '@angular/core' @Component({ selector: 'my-loader', - styleUrls: [ ], + styleUrls: [ './loader.component.scss' ], templateUrl: './loader.component.html' }) - export class LoaderComponent { @Input() loading: boolean } diff --git a/client/src/app/shared/misc/small-loader.component.html b/client/src/app/shared/misc/small-loader.component.html new file mode 100644 index 000000000..5a7cea738 --- /dev/null +++ b/client/src/app/shared/misc/small-loader.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/client/src/app/shared/misc/small-loader.component.ts b/client/src/app/shared/misc/small-loader.component.ts new file mode 100644 index 000000000..191877f14 --- /dev/null +++ b/client/src/app/shared/misc/small-loader.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' + +@Component({ + selector: 'my-small-loader', + styleUrls: [ ], + templateUrl: './small-loader.component.html' +}) + +export class SmallLoaderComponent { + @Input() loading: boolean +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 6f8625c7e..1c4e3df1a 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -69,6 +69,7 @@ import { InstanceService } from '@app/shared/instance/instance.service' import { HtmlRendererService, LinkifierService, MarkdownService } from '@app/shared/renderer' import { ConfirmComponent } from '@app/shared/confirm/confirm.component' import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' +import { SmallLoaderComponent } from '@app/shared/misc/small-loader.component' @NgModule({ imports: [ @@ -90,6 +91,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' declarations: [ LoaderComponent, + SmallLoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, FeedComponent, @@ -135,6 +137,7 @@ import { GlobalIconComponent } from '@app/shared/icons/global-icon.component' KeysPipe, LoaderComponent, + SmallLoaderComponent, VideoThumbnailComponent, VideoMiniatureComponent, FeedComponent, diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts index b5f9fd399..ce43b604a 100644 --- a/client/src/app/shared/users/user-notifications.component.ts +++ b/client/src/app/shared/users/user-notifications.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core' +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { UserNotificationType } from '../../../../../shared' import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model' @@ -15,6 +15,8 @@ export class UserNotificationsComponent implements OnInit { @Input() infiniteScroll = true @Input() itemsPerPage = 20 + @Output() notificationsLoaded = new EventEmitter() + notifications: UserNotification[] = [] // So we can access it in the template @@ -43,6 +45,8 @@ export class UserNotificationsComponent implements OnInit { result => { this.notifications = this.notifications.concat(result.data) this.componentPagination.totalItems = result.total + + this.notificationsLoaded.emit() }, err => this.notifier.error(err.message) diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html index 44016d8ad..7b941454a 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html @@ -54,7 +54,7 @@ View all {{ comment.totalReplies }} replies - +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 6e18ab6a6..fffcc1275 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -146,7 +146,7 @@
Show more - +