diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html
index 969c41e779..d015e53850 100644
--- a/src/app/+home-page/home-page.component.html
+++ b/src/app/+home-page/home-page.component.html
@@ -14,6 +14,6 @@
- Simple example
+ Simple Error example
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts
index 7346417e16..44d660ee26 100644
--- a/src/app/+home-page/home-page.component.ts
+++ b/src/app/+home-page/home-page.component.ts
@@ -11,9 +11,10 @@ export class HomePageComponent {
public notificationOptions: Options = {
position: ['top', 'right'],
timeOut: 0,
- lastOnBottom: true,
- clickIconToClose: false,
- showProgressBar: true,
+ animate: 'fromLeft'
+ // lastOnBottom: true,
+ // clickIconToClose: false,
+ // showProgressBar: true,
};
@ViewChild('example') example: TemplateRef;
@@ -24,11 +25,11 @@ export class HomePageComponent {
createNotification() {
const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!',
{
- showProgressBar: false,
animate: 'rotate',
timeout: 2000});
- const n2 = this.notificationsService.error('Error in DSpace', 'This is a fake error!');
- const n3 = this.notificationsService.info(this.example);
+ 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);
console.log('Notifications pushed');
console.log(n1);
console.log(n2);
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b5922e395f..6fb3c3a31e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,13 +2,11 @@
-
Inizio notifiche
-
Fine notifiche
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5069e04892..4fb14f4d75 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -30,10 +30,11 @@ export class AppComponent implements OnInit {
public notificationOptions: Options = {
position: ['top', 'right'],
- timeOut: 5000,
- lastOnBottom: true,
- clickIconToClose: true,
- showProgressBar: true
+ timeOut: 0,
+ animate: 'fromLeft'
+ // lastOnBottom: true,
+ // clickIconToClose: false,
+ // showProgressBar: true,
};
notificationCreated(event) {
diff --git a/src/app/shared/notifications/interfaces/options.type.ts b/src/app/shared/notifications/interfaces/options.type.ts
index 46c4eb9b37..cfd45529cd 100644
--- a/src/app/shared/notifications/interfaces/options.type.ts
+++ b/src/app/shared/notifications/interfaces/options.type.ts
@@ -2,15 +2,15 @@ import {Icons} from './icons';
export interface Options {
timeOut?: number;
- showProgressBar?: boolean;
- pauseOnHover?: boolean;
- lastOnBottom?: boolean;
- clickToClose?: boolean;
- clickIconToClose?: boolean;
+ // showProgressBar?: boolean;
+ // pauseOnHover?: boolean;
+ // lastOnBottom?: boolean;
+ // clickToClose?: boolean;
+ // clickIconToClose?: boolean;
maxLength?: number;
maxStack?: number;
- preventDuplicates?: boolean;
- preventLastDuplicates?: boolean | string;
+ // preventDuplicates?: boolean;
+ // preventLastDuplicates?: boolean | string;
theClass?: string;
rtl?: boolean;
animate?: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale';
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index b77f3657a4..79b75a15e4 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,13 +1,12 @@
-
-
+
+ {{icon}}
+
+
@@ -44,11 +52,21 @@
-
+
+ {{icon}}
+
+
+
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 22ad8c0e2d..c703736f18 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,80 +1,80 @@
-.simple-notification {
- width: 100%;
- padding: 10px 20px;
- box-sizing: border-box;
- position: relative;
- float: left;
- margin-bottom: 10px;
- color: #fff;
- cursor: pointer;
- transition: all 0.5s;
- min-height: 70px;
-}
-
-.simple-notification .sn-title,
-.simple-notification .sn-content,
-.simple-notification .sn-html {
- margin: 0;
-}
-
-.simple-notification .sn-title {
- line-height: 30px;
- font-size: 20px;
-}
-
-.simple-notification .sn-content {
- font-size: 16px;
- line-height: 20px;
-}
-
-.simple-notification.has-icon .sn-title,
-.simple-notification.has-icon .sn-content,
-.simple-notification.has-icon .sn-html {
- padding: 0 50px 0 0;
-}
-
-.simple-notification .icon {
- position: absolute;
- box-sizing: border-box;
- top: 0;
- right: 0;
- width: 70px;
- height: 70px;
- padding: 10px;
-}
-
-.simple-notification .icon.icon-hover:hover {
- opacity: 0.5;
-}
-
-.simple-notification .icon svg {
- fill: #fff;
- width: 100%;
- height: 100%;
-}
-
-.simple-notification .icon svg g {
- fill: #fff;
-}
-
-.simple-notification.rtl-mode.has-icon .sn-title,
-.simple-notification.rtl-mode.has-icon .sn-content,
-.simple-notification.rtl-mode.has-icon .sn-html {
- padding: 0 0 0 50px;
-}
-
-.simple-notification.rtl-mode {
- direction: rtl;
-}
-
-.simple-notification.rtl-mode .sn-content {
- padding: 0 0 0 50px;
-}
-
-.simple-notification.rtl-mode svg {
- left: 0;
- right: auto;
-}
+//.simple-notification {
+// width: 100%;
+// padding: 10px 20px;
+// box-sizing: border-box;
+// position: relative;
+// float: left;
+// margin-bottom: 10px;
+// color: #fff;
+// cursor: pointer;
+// transition: all 0.5s;
+// min-height: 70px;
+//}
+//
+//.simple-notification .sn-title,
+//.simple-notification .sn-content,
+//.simple-notification .sn-html {
+// margin: 0;
+//}
+//
+//.simple-notification .sn-title {
+// line-height: 30px;
+// font-size: 20px;
+//}
+//
+//.simple-notification .sn-content {
+// font-size: 16px;
+// line-height: 20px;
+//}
+//
+//.simple-notification.has-icon .sn-title,
+//.simple-notification.has-icon .sn-content,
+//.simple-notification.has-icon .sn-html {
+// padding: 0 50px 0 0;
+//}
+//
+//.simple-notification {
+// position: absolute;
+// box-sizing: border-box;
+// top: 0;
+// right: 0;
+// width: 70px;
+// height: 70px;
+// padding: 10px;
+//}
+//
+//.simple-notification .icon.icon-hover:hover {
+// opacity: 0.5;
+//}
+//
+//.simple-notification .icon svg {
+// fill: #fff;
+// width: 100%;
+// height: 100%;
+//}
+//
+//.simple-notification .icon svg g {
+// fill: #fff;
+//}
+//
+//.simple-notification.rtl-mode.has-icon .sn-title,
+//.simple-notification.rtl-mode.has-icon .sn-content,
+//.simple-notification.rtl-mode.has-icon .sn-html {
+// padding: 0 0 0 50px;
+//}
+//
+//.simple-notification.rtl-mode {
+// direction: rtl;
+//}
+//
+//.simple-notification.rtl-mode .sn-content {
+// padding: 0 0 0 50px;
+//}
+//
+//.simple-notification.rtl-mode svg {
+// left: 0;
+// right: auto;
+//}
.simple-notification.error { background: #F44336; }
.simple-notification.success { background: #8BC34A; }
@@ -82,18 +82,18 @@
.simple-notification.info { background: #03A9F4; }
.simple-notification.warn { background: #ffdb5b; }
-.simple-notification .sn-progress-loader {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 5px;
-}
-
-.simple-notification .sn-progress-loader span {
- float: left;
- height: 100%;
-}
+//.simple-notification .sn-progress-loader {
+// position: absolute;
+// top: 0;
+// left: 0;
+// width: 100%;
+// height: 5px;
+//}
+//
+//.simple-notification .sn-progress-loader span {
+// float: left;
+// height: 100%;
+//}
.simple-notification.success .sn-progress-loader span { background: #689F38; }
.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
@@ -102,6 +102,42 @@
.simple-notification.warn .sn-progress-loader span { background: #edc242; }
.simple-notification.bare .sn-progress-loader span { background: #ccc; }
-.simple-notification.warn div .sn-title,
-.simple-notification.warn div .sn-content,
-.simple-notification.warn div .sn-html { color: #444; }
+//.simple-notification.warn div .sn-title,
+//.simple-notification.warn div .sn-content,
+//.simple-notification.warn div .sn-html { color: #444; }
+
+
+
+.close {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+
+.icon {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ color: black;
+}
+//
+//.icon > fa-times-circle {
+// color: red;
+//}
+//
+//.icon > fa-exclamation-triangle {
+// color: orange;
+//}
+//
+//.icon > fa-info {
+// color: white;
+//}
+//
+//.icon > fa-check {
+// color: forestgreen;
+//}
+
+.sn-title, .sn-content, .sn-html {
+ position: relative;
+ left: 20px;
+}
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index 461ca2621f..bc215481db 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -113,12 +113,12 @@ import { NotificationsService } from '../notifications.service';
export class NotificationComponent implements OnInit, OnDestroy {
@Input() public timeOut: number;
- @Input() public showProgressBar: boolean;
- @Input() public pauseOnHover: boolean;
- @Input() public clickToClose: boolean;
- @Input() public clickIconToClose: boolean;
- @Input() public maxLength: number;
- @Input() public theClass: string;
+ // @Input() public showProgressBar: boolean;
+ // @Input() public pauseOnHover: boolean;
+ // @Input() public clickToClose: boolean;
+ // @Input() public clickIconToClose: boolean;
+ // @Input() public maxLength: number;
+ // @Input() public theClass: string;
@Input() public rtl: boolean;
@Input() public animate: string;
@Input() public position: number;
@@ -179,32 +179,32 @@ export class NotificationComponent implements OnInit, OnDestroy {
}
onEnter(): void {
- if (this.pauseOnHover) {
- this.stopTime = true;
- }
+ // if (this.pauseOnHover) {
+ // this.stopTime = true;
+ // }
}
onLeave(): void {
- if (this.pauseOnHover) {
- this.stopTime = false;
- this.zone.runOutsideAngular(() => setTimeout(this.instance, (this.speed - this.diff)));
- }
+ // if (this.pauseOnHover) {
+ // this.stopTime = false;
+ // this.zone.runOutsideAngular(() => setTimeout(this.instance, (this.speed - this.diff)));
+ // }
}
onClick($e: MouseEvent): void {
this.item.click!.emit($e);
- if (this.clickToClose) {
- this.remove();
- }
+ // if (this.clickToClose) {
+ // this.remove();
+ // }
}
onClickIcon($e: MouseEvent): void {
this.item.clickIcon!.emit($e);
- if (this.clickIconToClose) {
- this.remove();
- }
+ // if (this.clickIconToClose) {
+ // this.remove();
+ // }
}
// Attach all the overrides
@@ -227,9 +227,9 @@ export class NotificationComponent implements OnInit, OnDestroy {
this.remove();
this.item.timeoutEnd!.emit();
} else if (!this.stopTime) {
- if (this.showProgressBar) {
- this.progressWidth += 100 / this.steps;
- }
+ // if (this.showProgressBar) {
+ // this.progressWidth += 100 / this.steps;
+ // }
this.timer = setTimeout(this.instance, (this.speed - this.diff));
}
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.html b/src/app/shared/notifications/notifications-board/notifications-board.component.html
index 0fa83e3edc..a3f322f049 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.html
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.html
@@ -3,14 +3,15 @@
*ngFor="let a of notifications; let i = index"
[item]="a"
[timeOut]="timeOut"
- [clickToClose]="clickToClose"
- [clickIconToClose]="clickIconToClose"
- [maxLength]="maxLength"
- [showProgressBar]="showProgressBar"
- [pauseOnHover]="pauseOnHover"
- [theClass]="theClass"
[rtl]="rtl"
[animate]="animate"
[position]="i">
+
+
+
+
+
+
+
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.ts b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
index 58a68cf980..3e186f9c45 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.ts
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
@@ -37,12 +37,12 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
// Sent values
public timeOut = 0;
- public maxLength = 0;
- public clickToClose = true;
- public clickIconToClose = false;
- public showProgressBar = true;
- public pauseOnHover = true;
- public theClass = '';
+ // public maxLength = 0;
+ // public clickToClose = true;
+ // public clickIconToClose = false;
+ // public showProgressBar = true;
+ // public pauseOnHover = true;
+ // public theClass = '';
public rtl = false;
public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
@@ -54,7 +54,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
ngOnInit(): void {
// Listen for changes in the service
this.listener = this.service.emitter
- .subscribe((item) => {
+ .subscribe((item) => { // Subscribe a stato di redux
switch (item.command) {
case 'cleanAll':
this.notifications = [];