hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-15 05:53:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

notification progressbar

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-07 13:03:22 +01:00
parent 98c24bf190
commit 821e1b6063
3 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/shared/notifications/notification/notification.component.html
View File

@@ -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">

33
src/app/shared/notifications/notification/notification.component.scss
View File

@@ -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; }

12
src/app/shared/notifications/notification/notification.component.ts
View File

@@ -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));
}