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>
<div *ngIf="item.html"> <div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml"> <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="html"></ng-container> <ng-container *ngTemplateOutlet="html"></ng-container>
</div> </div>
@@ -45,9 +44,6 @@
<ng-template #regularHtml> <ng-template #regularHtml>
<div class="sn-content" [innerHTML]="html"></div> <div class="sn-content" [innerHTML]="html"></div>
</ng-template> </ng-template>
</div> </div>
<div class="sn-progress-loader" *ngIf="showProgressBar"> <div class="sn-progress-loader" *ngIf="showProgressBar">

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

@@ -12,19 +12,22 @@
left: 20px; left: 20px;
} }
//.simple-notification.error { background: #F44336; } .sn-progress-loader {
//.simple-notification.success { background: #8BC34A; } position: absolute;
//.simple-notification.alert { background: #ffdb5b; } top: 0;
//.simple-notification.info { background: #03A9F4; } left: 0;
//.simple-notification.warn { background: #ffdb5b; } width: 100%;
// height: 5px;
//.simple-notification.success .sn-progress-loader span { background: #689F38; } margin: 0 2px;
//.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; }
//.simple-notification.warn div .sn-title, .sn-progress-loader span {
//.simple-notification.warn div .sn-content, float: left;
//.simple-notification.warn div .sn-html { color: #444; } 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 { fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState } from '../../animations/fromRight';
import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft'; import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft';
import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop'; 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'; import { NotificationAnimationsStatus } from '../models/notification-animations-type';
@Component({ @Component({
@@ -49,11 +49,12 @@ export class NotificationComponent implements OnInit, OnDestroy {
public title: any; public title: any;
public content: any; public content: any;
public html: any; public html: any;
public showProgressBar = false;
public titleIsTemplate = false; public titleIsTemplate = false;
public contentIsTemplate = false; public contentIsTemplate = false;
public htmlIsTemplate = false; public htmlIsTemplate = false;
// public progressWidth = 0; public progressWidth = 0;
private stopTime = false; private stopTime = false;
private timer: any; private timer: any;
@@ -78,6 +79,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
if (this.item.options.timeOut !== 0) { if (this.item.options.timeOut !== 0) {
this.startTimeOut(); this.startTimeOut();
this.showProgressBar = true;
} }
this.contentType(this.item.title, 'title'); this.contentType(this.item.title, 'title');
@@ -103,9 +105,9 @@ export class NotificationComponent implements OnInit, OnDestroy {
this.remove(); this.remove();
// this.item.timeoutEnd!.emit(); // this.item.timeoutEnd!.emit();
} else if (!this.stopTime) { } else if (!this.stopTime) {
// if (this.showProgressBar) { if (this.showProgressBar) {
// this.progressWidth += 100 / this.steps; this.progressWidth += 100 / this.steps;
// } }
this.timer = setTimeout(this.instance, (this.speed - this.diff)); this.timer = setTimeout(this.instance, (this.speed - this.diff));
} }