Skip to content
Snippets Groups Projects
Commit 821e1b60 authored by Andrea Chiapparelli - 4Science's avatar Andrea Chiapparelli - 4Science
Browse files

notification progressbar

parent 98c24bf1
Branches
Tags
No related merge requests found
......@@ -37,7 +37,6 @@
</div>
<div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="html"></ng-container>
</div>
......@@ -45,9 +44,6 @@
<ng-template #regularHtml>
<div class="sn-content" [innerHTML]="html"></div>
</ng-template>
</div>
<div class="sn-progress-loader" *ngIf="showProgressBar">
......
......@@ -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;
}
.sn-progress-loader span {
float: left;
height: 100%;
background: black;
}
//.simple-notification.warn div .sn-title,
//.simple-notification.warn div .sn-content,
//.simple-notification.warn div .sn-html { color: #444; }
.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; }
......@@ -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));
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment