diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index 2de7045be5..407272def7 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -37,7 +37,6 @@
-
@@ -45,9 +44,6 @@
-
-
-
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index f9f0cb3377..9108c412b8 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -12,19 +12,22 @@
left: 20px;
}
-//.simple-notification.error { background: #F44336; }
-//.simple-notification.success { background: #8BC34A; }
-//.simple-notification.alert { background: #ffdb5b; }
-//.simple-notification.info { background: #03A9F4; }
-//.simple-notification.warn { background: #ffdb5b; }
-//
-//.simple-notification.success .sn-progress-loader span { background: #689F38; }
-//.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
-//.simple-notification.alert .sn-progress-loader span { background: #edc242; }
-//.simple-notification.info .sn-progress-loader span { background: #0288D1; }
-//.simple-notification.warn .sn-progress-loader span { background: #edc242; }
-//.simple-notification.bare .sn-progress-loader span { background: #ccc; }
+.sn-progress-loader {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 5px;
+ margin: 0 2px;
+}
-//.simple-notification.warn div .sn-title,
-//.simple-notification.warn div .sn-content,
-//.simple-notification.warn div .sn-html { color: #444; }
+.sn-progress-loader span {
+ float: left;
+ height: 100%;
+ background: black;
+}
+
+.alert-success .sn-progress-loader span { background: green; }
+.alert-danger .sn-progress-loader span { background: red; }
+.alert-info .sn-progress-loader span { background: blue; }
+.alert-warning .sn-progress-loader span { background: orange; }
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index 413a76581b..da0d9948ed 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -19,7 +19,7 @@ import { fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState
import { fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState } from '../../animations/fromRight';
import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft';
import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop';
-import { fadeEnter, fadeInEnter, fadeInState, fadeLeave, fadeOutLeave, fadeOutState } from '../../animations/fade';
+import { fadeInEnter, fadeInState, fadeOutLeave, fadeOutState } from '../../animations/fade';
import { NotificationAnimationsStatus } from '../models/notification-animations-type';
@Component({
@@ -49,11 +49,12 @@ export class NotificationComponent implements OnInit, OnDestroy {
public title: any;
public content: any;
public html: any;
+ public showProgressBar = false;
public titleIsTemplate = false;
public contentIsTemplate = false;
public htmlIsTemplate = false;
- // public progressWidth = 0;
+ public progressWidth = 0;
private stopTime = false;
private timer: any;
@@ -78,6 +79,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
if (this.item.options.timeOut !== 0) {
this.startTimeOut();
+ this.showProgressBar = true;
}
this.contentType(this.item.title, 'title');
@@ -103,9 +105,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));
}