From 31516e8f550549fc28ad001a315eff17bf87cb8b Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Wed, 30 Mar 2022 19:18:06 +0300 Subject: [PATCH] [Library & Monitor Dashboard | new-theme]: Applied new theme & redesign changes in notifications & filters offcanvas switcher icons and boxes. 1. offcanvas.css: [NEW] Custom css for custom 'offcanvas' classes. 2. import.css: Import new file offcanvas.css 3. structure.css: Removed custom css for notifications offcanvas. 4. monitor.component.ts: Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#style_switcher" (filters). 5. monitor.component.html: Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes | Small changes in close button, switcher button and message. 6. monitor-dashboard-custom.css: For #filters_switcher_toggle only top is defined here. Now css will be imported by offcanvas.css file. 7. notification-user.component.ts: Updated default value for property 'colorClass' from 'portal-color' to 'uk-text-primary'. 8. notifications-sidebar.component.ts: a. Added property "offcanvasOpen" which is set on UIkit.util.on events for offcavnas "#notifications". b. Added "offcanvas-switcher", "offcanvas", "offcanvas-close" classes c. Small changes in close button, switcher button and font sizes. 9. notifications-sidebar.module.ts: Removed iconsService.registerIcons from constructor. 10. notification-sidebar.component.css: Unnecessary css removed | css updated and moved to new file offcanvas.css. --- .../notification-user.component.ts | 2 +- .../notification-sidebar.component.css | 89 +++---------------- .../notifications-sidebar.component.ts | 72 ++++++++++++--- .../notifications-sidebar.module.ts | 4 +- 4 files changed, 75 insertions(+), 92 deletions(-) diff --git a/notifications/notification-user/notification-user.component.ts b/notifications/notification-user/notification-user.component.ts index 3582eff4..8759db89 100644 --- a/notifications/notification-user/notification-user.component.ts +++ b/notifications/notification-user/notification-user.component.ts @@ -18,7 +18,7 @@ export class NotificationUserComponent implements OnInit{ @Input() public surname: string; @Input() - public colorClass = 'portal-color'; + public colorClass = 'uk-text-primary'; @Input() public outline: boolean = false; public firstLetters: string; diff --git a/notifications/notifications-sidebar/notification-sidebar.component.css b/notifications/notifications-sidebar/notification-sidebar.component.css index cfd33e8c..29063d36 100644 --- a/notifications/notifications-sidebar/notification-sidebar.component.css +++ b/notifications/notifications-sidebar/notification-sidebar.component.css @@ -1,62 +1,5 @@ #notifications-switcher { - top: 250px !important; - position: fixed; - height: 36px; - background-color: var(--portal-main-color); - color: var(--portal-main-contrast); - border-radius: 4px 0 0 4px; - cursor: pointer; - padding: 4px; - box-shadow: -2px 2px 5px rgba(0, 0, 0, .26); - box-sizing: border-box; - right: 0; - z-index: 980; -} - -#notifications-switcher #notifications-count { - position: absolute; - top: 0; - left: 0; - font-size: 10px; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - height: 14px; - border-radius: 50%; - padding: 1px 5px; -} - -#notifications .uk-offcanvas-bar { - background-color: white; - color: #1a1a1a; - font-size: 14px; - top: 100px; - padding: 0; - border: 1px solid var(--portal-main-color); - width: 550px; -} - -#notifications .uk-offcanvas-flip .uk-offcanvas-bar { - right: -550px; -} - -#notifications .uk-offcanvas-bar .text-small { - font-size: 12px; -} - -#notifications .uk-offcanvas-bar h5, #notifications .uk-offcanvas-bar h6 { - color: #1a1a1a; -} - -#notifications button.notification-close, #notifications button.notification-close:focus { - border-radius: 4px; - background-color: #F0F0F0; - color: #76706B; - border: none; - outline: none; -} - -#notifications button.notification-close:hover, #notifications button.notification-close:focus { - color: #1a1a1a; + top: 320px !important; } #notifications .notification-list { @@ -87,30 +30,26 @@ overflow: auto; } -#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link { - color: var(--secondary-color); -} - -#notifications .uk-offcanvas-bar a:hover, #notifications .uk-offcanvas-bar button.uk-button-link:hover { - color: var(--portal-main-color); -} +/*#notifications .uk-offcanvas-bar a, #notifications .uk-offcanvas-bar button.uk-button-link {*/ +/* color: var(--secondary-color);*/ +/*}*/ #notifications .uk-offcanvas-bar button.uk-button-link:disabled { color: var(--secondary-color); opacity: 0.5; } -#notifications .uk-offcanvas-bar .uk-button-secondary { - background-color: var(--secondary-color); - color: #fff; - border: 1px solid transparent; -} +/*#notifications .uk-offcanvas-bar .uk-button-secondary {*/ +/* background-color: var(--secondary-color);*/ +/* color: #fff;*/ +/* border: 1px solid transparent;*/ +/*}*/ -#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover { - background-color: transparent; - color: #4687e6; - border-color: #4687e6; -} +/*#notifications .uk-offcanvas-bar .uk-button-secondary:focus, #notifications .uk-offcanvas-bar .uk-button-secondary:hover {*/ +/* background-color: transparent;*/ +/* color: #4687e6;*/ +/* border-color: #4687e6;*/ +/*}*/ #notifications .uk-offcanvas-bar .uk-button-secondary:disabled { background-color: transparent; diff --git a/notifications/notifications-sidebar/notifications-sidebar.component.ts b/notifications/notifications-sidebar/notifications-sidebar.component.ts index fb3b95b0..797d6437 100644 --- a/notifications/notifications-sidebar/notifications-sidebar.component.ts +++ b/notifications/notifications-sidebar/notifications-sidebar.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core"; +import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core"; import {Notification} from "../notifications"; import {NotificationService} from "../notification.service"; import {Subscription} from "rxjs"; @@ -11,20 +11,38 @@ declare var UIkit; @Component({ selector: 'notification-sidebar', template: ` -
- - +
+ + + + {{unreadCount}}
-
+
+ + + + + + + + + +
- +
-
Notifications
+

Notifications

@@ -45,7 +63,7 @@ declare var UIkit;
- {{getDate(notification.date)}} + {{getDate(notification.date)}}
@@ -58,13 +76,13 @@ declare var UIkit; -
{{notification.title}}
+

{{notification.title}}

{{notification.name + ' ' + notification.surname}}
- + {{notification.date | date:'medium'}} ({{getDate(notification.date)}})
@@ -88,8 +106,10 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy { public service: string; public notification: Notification; private subscriptions: any[] = []; - - constructor(private notificationService: NotificationService) { + public notificationsOpen: boolean = false; + // public notificationsStatus: string = "closed"; + + constructor(private notificationService: NotificationService, private cdr: ChangeDetectorRef) { } ngOnInit() { @@ -103,6 +123,31 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy { pos: 'bottom-right' }); })); + + UIkit.util.on('#notifications', 'beforeshow', () => { + // do something + console.log("notifications beforeshow..."); + this.notificationsOpen = true; + this.cdr.detectChanges(); + // self.notificationsStatus = "opening"; + + }); + + // UIkit.util.on('#notifications', 'shown', function () { + // // do something + // console.log("notifications open"); + // self.notificationsStatus = "open"; + // + // }); + + UIkit.util.on('#notifications', 'beforehide', () => { + // do something + console.log("notifications beforehide..."); + this.notificationsOpen = false; + this.cdr.detectChanges(); + + // self.notificationsStatus = "closing"; + }); } ngOnDestroy() { @@ -111,6 +156,7 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy { subscription.unsubscribe(); } }) + // UIkit.util.$destroy(); } get unreadCount(): number { diff --git a/notifications/notifications-sidebar/notifications-sidebar.module.ts b/notifications/notifications-sidebar/notifications-sidebar.module.ts index caef44f5..98aa7f83 100644 --- a/notifications/notifications-sidebar/notifications-sidebar.module.ts +++ b/notifications/notifications-sidebar/notifications-sidebar.module.ts @@ -14,7 +14,5 @@ import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module"; exports: [NotificationsSidebarComponent] }) export class NotificationsSidebarModule { - constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([mail, close, bullet, arrow_left]); - } + constructor() {} }