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

[Library & Monitor Dashboard | new-theme]: Small update on notifications & filters offcanvas. 

1. shadow.css: Added variable --shadow-main-dark.
2. offcanvas.css:
   a. Set --offcanvas-shadow: var(--shadow-main-dark);
   b. In class .offcanvas-switcher remove transition (will not be visible when offcanvas is open)
   c. [Bug fix] In class .offcanvas-count increased font size and make background always round, added line-height: 20px.
   d. In rule ".offcanvas .uk-offcanvas-bar" set border-radius to 4px.
3. notification-utils.ts: Full stop added in messages.
4. notification-sidebar.component.css: In rule "#notifications .notification-list ul" set height: calc(100% - 77px).
5. notifications-sidebar.component.ts:
   a. Removed anything related to offcavnas events
   b. Removed commented code
   c. Added in icons visuallyHidden.
6. monitor.component.html:
   a. Removed "open" class when offcanvas is open.
   b. Added in icons visuallyHidden
   c. Added sign in link in filters when user is not logged in
   d. Added uk-text-small class in "Clear".
7. monitor.component.ts:
   a. Removed anything related to offcavnas events
   b. Added method "logIn()".
This commit is contained in:
Konstantina Galouni 2022-04-05 19:55:01 +03:00
parent 362dd1cc80
commit 3af4eabea7
3 changed files with 15 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
notifications/notification-utils.ts
View File

@ -3,12 +3,12 @@ import {HelperFunctions} from "../utils/HelperFunctions.class";
import {Composer} from "../utils/email/composer"; import {Composer} from "../utils/email/composer";
export class NotificationUtils { export class NotificationUtils {
public static IMPORT_INDICATORS: Notification = new Notification('IMPORT', ['monitor'], 'User ((__user__)) has imported new indicators in ((__stakeholder__)) profile', 'section') public static IMPORT_INDICATORS: Notification = new Notification('IMPORT', ['monitor'], 'User ((__user__)) has imported new indicators in ((__stakeholder__)) profile.', 'section')
public static CREATE_STAKEHOLDER: Notification = new Notification('CREATE', ['monitor'], 'User ((__user__)) has created a new profile', 'stakeholder') public static CREATE_STAKEHOLDER: Notification = new Notification('CREATE', ['monitor'], 'User ((__user__)) has created a new profile.', 'stakeholder')
public static EDIT_STAKEHOLDER: Notification = new Notification('EDIT', ['monitor'], 'User ((__user__)) has updated ((__stakeholder__)) profile', 'stakeholder') public static EDIT_STAKEHOLDER: Notification = new Notification('EDIT', ['monitor'], 'User ((__user__)) has updated ((__stakeholder__)) profile.', 'stakeholder')
public static CREATE_INDICATOR: Notification = new Notification('CREATE', ['monitor'], 'User ((__user__)) has created a new indicator in ((__stakeholder__)) profile', 'indicator'); public static CREATE_INDICATOR: Notification = new Notification('CREATE', ['monitor'], 'User ((__user__)) has created a new indicator in ((__stakeholder__)) profile.', 'indicator');
public static EDIT_INDICATOR: Notification = new Notification('EDIT', ['monitor'], 'User ((__user__)) has updated an indicator in ((__stakeholder__)) profile', 'indicator'); public static EDIT_INDICATOR: Notification = new Notification('EDIT', ['monitor'], 'User ((__user__)) has updated an indicator in ((__stakeholder__)) profile.', 'indicator');
public static DELETE_INDICATOR: Notification = new Notification('DELETE', ['monitor'], 'User ((__user__)) has deleted an indicator in ((__stakeholder__)) profile', 'indicator'); public static DELETE_INDICATOR: Notification = new Notification('DELETE', ['monitor'], 'User ((__user__)) has deleted an indicator in ((__stakeholder__)) profile.', 'indicator');
public static INVITE_MONITOR_MANAGER: Notification = new Notification('INVITE_MANAGER', ['monitor'], null, 'user'); public static INVITE_MONITOR_MANAGER: Notification = new Notification('INVITE_MANAGER', ['monitor'], null, 'user');
public static INVITE_MONITOR_MEMBER: Notification = new Notification('INVITE_MEMBER', ['monitor'], null, 'user'); public static INVITE_MONITOR_MEMBER: Notification = new Notification('INVITE_MEMBER', ['monitor'], null, 'user');

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

@ -14,7 +14,7 @@
#notifications .notification-list ul { #notifications .notification-list ul {
overflow: auto; overflow: auto;
padding: 10px 45px 10px 0; padding: 10px 45px 10px 0;
height: calc(100% - 66px); height: calc(100% - 77px);
} }
#notifications .notification-list ul > li:nth-child(n+2){ #notifications .notification-list ul > li:nth-child(n+2){

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

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core"; import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core";
import {Notification} from "../notifications"; import {Notification} from "../notifications";
import {NotificationService} from "../notification.service"; import {NotificationService} from "../notification.service";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
@ -11,33 +11,16 @@ declare var UIkit;
@Component({ @Component({
selector: 'notification-sidebar', selector: 'notification-sidebar',
template: ` template: `
<div id="notifications-switcher" uk-toggle href="#notifications" <div id="notifications-switcher" uk-toggle href="#notifications" class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle">
class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle" <icon name="mail" ratio="1.5" customClass="uk-text-primary-gradient" flex="true" visuallyHidden="Notifications"></icon>
[class.open]="notificationsOpen"> <span [class.uk-hidden]="unreadCount === 0" id="notifications-count" class="offcanvas-count uk-flex uk-flex-middle uk-flex-center">
<!-- [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}} {{unreadCount}}
</span> </span>
</div> </div>
<div id="notifications" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;"> <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"> <div class="uk-offcanvas-bar">
<!-- <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"> <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
<icon name="close" ratio="1.5"></icon> <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button> </button>
<ng-template [ngIf]="!notification"> <ng-template [ngIf]="!notification">
@ -60,7 +43,7 @@ declare var UIkit;
</p> </p>
</div> </div>
<div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary"> <div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">
<icon *ngIf="!notification.read" name="bullet" ratio="0.6"></icon> <icon *ngIf="!notification.read" name="bullet" ratio="0.6" visuallyHidden="unread"></icon>
</div> </div>
</div> </div>
<span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span> <span class="uk-text-secondary uk-text-small">{{getDate(notification.date)}}</span>
@ -74,7 +57,7 @@ declare var UIkit;
<div *ngIf="notification" class="notification"> <div *ngIf="notification" class="notification">
<div class="uk-flex uk-flex-middle uk-margin-medium-bottom"> <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">
<span class="uk-text-secondary clickable" (click)="back($event)"> <span class="uk-text-secondary clickable" (click)="back($event)">
<icon ratio="1.5" name="arrow_left"></icon> <icon ratio="1.5" name="arrow_left" visuallyHidden="back"></icon>
</span> </span>
<h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4> <h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4>
</div> </div>
@ -106,10 +89,8 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
public service: string; public service: string;
public notification: Notification; public notification: Notification;
private subscriptions: any[] = []; private subscriptions: any[] = [];
public notificationsOpen: boolean = false;
// public notificationsStatus: string = "closed";
constructor(private notificationService: NotificationService, private cdr: ChangeDetectorRef) { constructor(private notificationService: NotificationService) {
} }
ngOnInit() { ngOnInit() {
@ -123,31 +104,6 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
pos: 'bottom-right' 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() { ngOnDestroy() {
@ -156,7 +112,6 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
subscription.unsubscribe(); subscription.unsubscribe();
} }
}) })
// UIkit.util.$destroy();
} }
get unreadCount(): number { get unreadCount(): number {