From add8c7cec91c7f3412251442f21c413831ee137f Mon Sep 17 00:00:00 2001
From: Andrea Chiapparelli - 4Science <andrea.chiapparelli@gmail.com>
Date: Mon, 5 Mar 2018 13:08:42 +0100
Subject: [PATCH] fix graphics
---
src/app/+home-page/home-page.component.ts | 4 +-
.../interfaces/notification.type.ts | 2 +-
.../notifications/models/notification-type.ts | 6 +-
.../models/notification.model.ts | 2 +
.../notification/notification.component.html | 54 ++++++------
.../notification/notification.component.scss | 17 ++--
.../notification/notification.component.ts | 84 ++++++++++---------
.../notifications/notifications.service.ts | 23 ++---
8 files changed, 101 insertions(+), 91 deletions(-)
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts
index 44d660ee26..0d66d4e503 100644
--- a/src/app/+home-page/home-page.component.ts
+++ b/src/app/+home-page/home-page.component.ts
@@ -29,10 +29,12 @@ export class HomePageComponent {
timeout: 2000});
const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
const n3 = this.notificationsService.warn('Warning in DSpace', 'This is a fake alert!');
- const n4 = this.notificationsService.error(this.example);
+ const n4 = this.notificationsService.danger(this.example);
console.log('Notifications pushed');
console.log(n1);
console.log(n2);
+ console.log(n3);
+ console.log(n4);
}
notificationCreated(event) {
diff --git a/src/app/shared/notifications/interfaces/notification.type.ts b/src/app/shared/notifications/interfaces/notification.type.ts
index a6cdc890da..eb69260cbf 100644
--- a/src/app/shared/notifications/interfaces/notification.type.ts
+++ b/src/app/shared/notifications/interfaces/notification.type.ts
@@ -3,7 +3,7 @@ import {EventEmitter} from '@angular/core';
export interface Notification {
id?: string
type: string
- icon: string
+ icon?: string
title?: any
content?: any
override?: any
diff --git a/src/app/shared/notifications/models/notification-type.ts b/src/app/shared/notifications/models/notification-type.ts
index 43680d6933..b21696ab1f 100644
--- a/src/app/shared/notifications/models/notification-type.ts
+++ b/src/app/shared/notifications/models/notification-type.ts
@@ -1,8 +1,8 @@
export enum NotificationType {
Success = 'success',
Error = 'error',
- Alert = 'alert',
+ Danger = 'danger',
Info = 'info',
- Warning = 'warn',
- Bare = 'bare'
+ Warning = 'warning',
+ // Bare = 'bare'
}
diff --git a/src/app/shared/notifications/models/notification.model.ts b/src/app/shared/notifications/models/notification.model.ts
index b909b8ef26..f7293f0e36 100644
--- a/src/app/shared/notifications/models/notification.model.ts
+++ b/src/app/shared/notifications/models/notification.model.ts
@@ -8,6 +8,7 @@ export interface INotification {
title?: any
content?: any
options?: INotificationOptions
+ html?: any;
}
export class Notification implements INotification {
@@ -16,6 +17,7 @@ export class Notification implements INotification {
public title: any;
public content: any;
public options: INotificationOptions;
+ public html?: any;
constructor(id: string,
type: NotificationType,
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index 79b75a15e4..977a1298b1 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,21 +1,38 @@
+<!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>-->
+<div class="icon"><i
+ [ngClass]="{'fa': true,
+ 'fa-check': item.type == 'success',
+ 'fa-times-circle': item.type == 'danger',
+ 'fa-exclamation-triangle': item.type == 'warning',
+ 'fa-info': item.type == 'info'
+ }"></i></div>
+
+<div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
+
+
<div class="alert" role="alert"
[@enterLeave]="item.state"
(click)="onClick($event)"
[class]="theClass"
[ngClass]="{
- 'alert-info': item.type === 'info',
- 'alert-danger': item.type === 'error',
- 'alert-warning': item.type === 'warn',
- 'alert-success': item.type === 'success',
- 'bare': item.type === 'bare',
+ 'alert-success': item.type == 'success',
+ 'alert-info': item.type == 'info',
+ 'alert-warning': item.type == 'warning',
+ 'alert-danger': item.type == 'danger',
+ 'alert-error': item.type == 'error',
'rtl-mode': rtl,
'has-icon': item.icon !== 'bare'
}"
(mouseenter)="onEnter()"
(mouseleave)="onLeave()">
+
+
+
+
<div *ngIf="!item.html">
+
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container>
</div>
@@ -32,41 +49,24 @@
<div class="sn-content" [innerHTML]="content"></div>
</ng-template>
- <!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>-->
- {{icon}}
- <div class="icon"><i
- [ngClass]="{'fa': true,
- 'fa-check': icon == 'success',
- 'fa-times-circle': icon == 'error',
- 'fa-exclamation-triangle': icon == 'warn',
- 'fa-info': icon == 'info'
- }"></i></div>
+
</div>
+
<div *ngIf="item.html">
- <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
- <ng-container *ngTemplateOutlet="item.html"></ng-container>
- </div>
+
<ng-template #regularHtml>
<div class="sn-content" [innerHTML]="item.html"></div>
</ng-template>
- <!--<div class="icon" [class.icon-hover]="clickIconToClose" *ngIf="item.icon" [innerHTML]="safeSvg" (click)="onClickIcon($event)"></div>-->
- {{icon}}
- <div class="icon"><i
- [ngClass]="{'fa': true,
- 'fa-check': icon == 'success',
- 'fa-times-circle': icon == 'error',
- 'fa-exclamation-triangle': icon == 'warning',
- 'fa-info': icon == 'info'
- }"></i></div>
+
</div>
<div class="sn-progress-loader" *ngIf="showProgressBar">
<span [ngStyle]="{'width': progressWidth + '%'}"></span>
</div>
- <div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
+
</div>
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index c703736f18..80acc733ad 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -109,16 +109,19 @@
.close {
- position: absolute;
- top: 5px;
- right: 5px;
+ //position: absolute;
+ //top: 5px;
+ //right: 5px;
+ float: right;
+ padding-right: 5px;
}
.icon {
- position: absolute;
- top: 5px;
- left: 5px;
- color: black;
+ //position: absolute;
+ //top: 5px;
+ //left: 5px;
+ float: left;
+ padding: 5px;
}
//
//.icon > fa-times-circle {
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index bc215481db..fa8f44f5e6 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -11,8 +11,8 @@ import {
} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Notification } from '../interfaces/notification.type';
import { NotificationsService } from '../notifications.service';
+import { INotification } from '../models/notification.model';
@Component({
selector: 'ds-notification',
@@ -122,7 +122,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
@Input() public rtl: boolean;
@Input() public animate: string;
@Input() public position: number;
- @Input() public item: Notification;
+ @Input() public item: INotification;
// Progress bar variables
public title: any;
@@ -152,13 +152,13 @@ export class NotificationComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
- if (this.item.override) {
- this.attachOverrides();
- }
-
- if (this.animate) {
- this.item.state = this.animate;
- }
+ // if (this.item.override) {
+ // this.attachOverrides();
+ // }
+ //
+ // if (this.animate) {
+ // this.item.state = this.animate;
+ // }
if (this.timeOut !== 0) {
this.startTimeOut();
@@ -168,7 +168,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
this.contentType(this.item.content, 'content');
this.contentType(this.item.html, 'html');
- this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
+ // this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
}
startTimeOut(): void {
@@ -191,30 +191,30 @@ export class NotificationComponent implements OnInit, OnDestroy {
// }
}
- onClick($e: MouseEvent): void {
- this.item.click!.emit($e);
-
- // if (this.clickToClose) {
- // this.remove();
- // }
- }
-
- onClickIcon($e: MouseEvent): void {
- this.item.clickIcon!.emit($e);
-
- // if (this.clickIconToClose) {
- // this.remove();
- // }
- }
+ // onClick($e: MouseEvent): void {
+ // this.item.click!.emit($e);
+ //
+ // // if (this.clickToClose) {
+ // // this.remove();
+ // // }
+ // }
+
+ // onClickIcon($e: MouseEvent): void {
+ // this.item.clickIcon!.emit($e);
+ //
+ // // if (this.clickIconToClose) {
+ // // this.remove();
+ // // }
+ // }
// Attach all the overrides
- attachOverrides(): void {
- Object.keys(this.item.override).forEach((a) => {
- if (this.hasOwnProperty(a)) {
- (this as any)[a] = this.item.override[a];
- }
- });
- }
+ // attachOverrides(): void {
+ // Object.keys(this.item.override).forEach((a) => {
+ // if (this.hasOwnProperty(a)) {
+ // (this as any)[a] = this.item.override[a];
+ // }
+ // });
+ // }
ngOnDestroy(): void {
clearTimeout(this.timer);
@@ -225,7 +225,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
if (this.count++ === this.steps) {
this.remove();
- this.item.timeoutEnd!.emit();
+ // this.item.timeoutEnd!.emit();
} else if (!this.stopTime) {
// if (this.showProgressBar) {
// this.progressWidth += 100 / this.steps;
@@ -237,14 +237,16 @@ export class NotificationComponent implements OnInit, OnDestroy {
};
private remove() {
- if (this.animate) {
- this.item.state = this.animate + 'Out';
- setTimeout(() => {
- this.notificationService.set(this.item, false);
- }, 310);
- } else {
- this.notificationService.set(this.item, false);
- }
+ // if (this.animate) {
+ // this.item.state = this.animate + 'Out';
+ // setTimeout(() => {
+ // this.notificationService.set(this.item, false);
+ // }, 310);
+ // } else {
+ // this.notificationService.set(this.item, false);
+ // }
+
+ this.notificationService.set(this.item, false);
}
private contentType(item: any, key: string) {
diff --git a/src/app/shared/notifications/notifications.service.ts b/src/app/shared/notifications/notifications.service.ts
index 6a7974a052..de40aff7cf 100644
--- a/src/app/shared/notifications/notifications.service.ts
+++ b/src/app/shared/notifications/notifications.service.ts
@@ -3,6 +3,7 @@ import {Subject} from 'rxjs/Subject';
import {NotificationEvent} from './interfaces/notification-event.type';
import {Notification} from './interfaces/notification.type';
import {Icons, defaultIcons} from './interfaces/icons';
+import { NotificationType } from './models/notification-type';
@Injectable()
export class NotificationsService {
@@ -20,28 +21,28 @@ export class NotificationsService {
};
success(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'success', icon: this.icons.success, override: override}, true);
+ return this.set({title: title, content: content || '', type: NotificationType.Success, override: override}, true);
}
- error(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'error', icon: this.icons.error, override: override}, true);
- }
+ // error(title: any = '', content: any = '', override?: any): Notification {
+ // return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true);
+ // }
- alert(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'alert', icon: this.icons.alert, override: override}, true);
+ danger(title: any = '', content: any = '', override?: any): Notification {
+ return this.set({title: title, content: content || '', type: NotificationType.Danger, override: override}, true);
}
info(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'info', icon: this.icons.info, override: override}, true);
+ return this.set({title: title, content: content || '', type: NotificationType.Info, override: override}, true);
}
warn(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'warn', icon: this.icons.warn, override: override}, true);
+ return this.set({title: title, content: content || '', type: NotificationType.Warning, override: override}, true);
}
- bare(title: any = '', content: any = '', override?: any): Notification {
- return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
- }
+ // bare(title: any = '', content: any = '', override?: any): Notification {
+ // return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
+ // }
// With type method
create(title: any = '', content: any = '', type = 'success', override?: any): Notification {
--
GitLab