MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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.
This commit is contained in:
Konstantina Galouni 2022-03-30 19:18:06 +03:00
parent d26f56e260
commit 31516e8f55
4 changed files with 75 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
notifications/notification-user/notification-user.component.ts
View File

@ -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;

89
notifications/notifications-sidebar/notification-sidebar.component.css
View File

@ -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;

72
notifications/notifications-sidebar/notifications-sidebar.component.ts
View File

@ -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: `
<div id="notifications-switcher" uk-toggle href="#notifications">
<icon name="mail"></icon>
<span [class.uk-hidden]="unreadCount === 0" id="notifications-count">
<div id="notifications-switcher" uk-toggle href="#notifications"
class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle"
[class.open]="notificationsOpen">
<!-- [ngClass]="notificationsStatus">-->
<icon name="mail" ratio="1.5" customClass="uk-text-primary-gradient" visuallyHidden="Notifications"></icon>
<span [class.uk-hidden]="unreadCount === 0" id="notifications-count" class="offcanvas-count">
{{unreadCount}}
</span>
</div>
<div id="notifications" uk-offcanvas="flip: true; bg-close: false;">
<div id="notifications" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<!-- <div #test id="notifications-switcher-inner" uk-toggle href="#notifications" -->
<!-- class="open uk-flex uk-flex-center uk-flex-middle uk-animation-fade" [ngClass]="notificationsStatus">-->
<!--&lt;!&ndash; uk-animation-fade"&ndash;&gt;-->
<!--&lt;!&ndash; [class.uk-animation-fast]="!notificationsOpen" [class.uk-animation-reverse]="!notificationsOpen">&ndash;&gt;-->
<!-- <icon name="mail" ratio="1.5"></icon>-->
<!-- &lt;!&ndash; <span [class.uk-hidden]="unreadCount === 0" id="notifications-count">&ndash;&gt;-->
<!-- &lt;!&ndash; {{unreadCount}}&ndash;&gt;-->
<!-- &lt;!&ndash; </span>&ndash;&gt;-->
<!-- </div>-->
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close notification-close" type="button">
<icon name="close"></icon>
<!-- <button class="uk-offcanvas-close offcanvas-close" type="button">-->
<!-- <icon name="close" ratio="1.5"></icon>-->
<!-- </button>-->
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5"></icon>
</button>
<ng-template [ngIf]="!notification">
<div class="notification-list uk-position-relative">
<h5 class="uk-text-bold">Notifications</h5>
<h4>Notifications</h4>
<div class="uk-flex uk-flex-right@m uk-flex-center uk-padding uk-padding-remove-vertical">
<button [disabled]="unreadCount === 0" (click)="readAll()" class="uk-button uk-button-link">Mark As Read ({{unreadCount}})</button>
</div>
@ -45,7 +63,7 @@ declare var UIkit;
<icon *ngIf="!notification.read" name="bullet" ratio="0.6"></icon>
</div>
</div>
<span class="uk-text-secondary text-small">{{getDate(notification.date)}}</span>
<span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
</div>
</div>
</li>
@ -58,13 +76,13 @@ declare var UIkit;
<span class="uk-text-secondary clickable" (click)="back($event)">
<icon ratio="1.5" name="arrow_left"></icon>
</span>
<h5 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h5>
<h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4>
</div>
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>
<div class="uk-margin-left">
{{notification.name + ' ' + notification.surname}}<br>
<span style="opacity: 0.8;" class="text-small uk-margin-small-top">
<span style="opacity: 0.8;" class="uk-text-small uk-margin-small-top">
{{notification.date | date:'medium'}} ({{getDate(notification.date)}})
</span>
</div>
@ -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 {

4
notifications/notifications-sidebar/notifications-sidebar.module.ts
View File

@ -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() {}
}