hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-14 21:43:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

flex

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-09 12:53:04 +01:00
parent 21d0b74a77
commit 360784c1bb
4 changed files with 130 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/shared/notifications/models/notification.model.ts
View File

@@ -6,8 +6,8 @@ import { Observable } from 'rxjs/Observable';
export interface INotification {
id: string;
type: NotificationType;
title?: Observable<string>;
content?: Observable<string>;
title?: Observable<string> | string;
content?: Observable<string> | string;
options?: INotificationOptions;
html?: any;
}
@@ -15,15 +15,15 @@ export interface INotification {
export class Notification implements INotification {
public id: string;
public type: NotificationType;
public title: Observable<string>;
public content: Observable<string>;
public title: Observable<string> | string;
public content: Observable<string> | string;
public options: INotificationOptions;
public html: any;
constructor(id: string,
type: NotificationType,
title?: Observable<string>,
content?: Observable<string>,
title?: Observable<string> | string,
content?: Observable<string> | string,
options?: NotificationOptions,
html?: any) {

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

@@ -1,55 +1,118 @@
<div class="alert {{item.type}} alert-dismissible" role="alert"
[@enterLeave]="animate">
<div class="icon"><i
[ngClass]="{'fa fa-2x': true,
'fa-check': item.type == 'alert-success',
'fa-times-circle': item.type == 'alert-danger',
'fa-exclamation-triangle': item.type == 'alert-warning',
'fa-info': item.type == 'alert-info'
}"></i></div>
<button *ngIf="item.options.clickToClose"
(click)="remove()"
type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div *ngIf="!item.html">
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container>
</div>
<ng-template #regularTitle>
<div class="sn-title" [innerHTML]="(title | async)"></div>
</ng-template>
<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<ng-template #regularContent>
<div class="sn-content" [innerHTML]="(content | async)"></div>
</ng-template>
</div>
<div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="html"></ng-container>
</div>
<ng-template #regularHtml>
<div class="sn-content" [innerHTML]="html"></div>
</ng-template>
</div>
<div class="sn-progress-loader" *ngIf="showProgressBar">
<span [ngStyle]="{'width': progressWidth + '%'}"></span>
</div>
<button *ngIf="item.options.clickToClose"
(click)="remove()"
type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="d-flex flex-row">
<div class="d-flex flex-column justify-content-center">
<div class="p-2">
<div class="icon"><i
[ngClass]="{'fa fa-2x': true,
'fa-check': item.type == 'alert-success',
'fa-times-circle': item.type == 'alert-danger',
'fa-exclamation-triangle': item.type == 'alert-warning',
'fa-info': item.type == 'alert-info'
}"></i></div>
</div>
</div>
<div class="d-flex flex-column justify-content-center align-content-stretch">
<div class="p-2" *ngIf="title">
<strong>
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container>
</div>
<ng-template #regularTitle>
<div class="sn-title" [innerHTML]="(title | async)"></div>
</ng-template>
</strong>
</div>
<div class="p-2" *ngIf="content">
<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<ng-template #regularContent>
<div class="sn-content" [innerHTML]="(content | async)"></div>
</ng-template>
</div>
<div class="p-2" *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="html"></ng-container>
</div>
<ng-template #regularHtml>
<div class="sn-content" [innerHTML]="html"></div>
</ng-template>
</div>
</div>
</div>
<!--<div class="icon"><i-->
<!--[ngClass]="{'fa fa-2x': true,-->
<!--'fa-check': item.type == 'alert-success',-->
<!--'fa-times-circle': item.type == 'alert-danger',-->
<!--'fa-exclamation-triangle': item.type == 'alert-warning',-->
<!--'fa-info': item.type == 'alert-info'-->
<!--}"></i></div>-->
<!--<button *ngIf="item.options.clickToClose"-->
<!--(click)="remove()"-->
<!--type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">-->
<!--<span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--<div *ngIf="!item.html">-->
<!--<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">-->
<!--<ng-container *ngTemplateOutlet="title"></ng-container>-->
<!--</div>-->
<!--<ng-template #regularTitle>-->
<!--<div class="sn-title" [innerHTML]="(title | async)"></div>-->
<!--</ng-template>-->
<!--<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">-->
<!--<ng-container *ngTemplateOutlet="content"></ng-container>-->
<!--</div>-->
<!--<ng-template #regularContent>-->
<!--<div class="sn-content" [innerHTML]="(content | async)"></div>-->
<!--</ng-template>-->
<!--</div>-->
<!--<div *ngIf="item.html">-->
<!--<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">-->
<!--<ng-container *ngTemplateOutlet="html"></ng-container>-->
<!--</div>-->
<!--<ng-template #regularHtml>-->
<!--<div class="sn-content" [innerHTML]="html"></div>-->
<!--</ng-template>-->
<!--</div>-->
<!--<div class="sn-progress-loader" *ngIf="showProgressBar">-->
<!--<span [ngStyle]="{'width': progressWidth + '%'}"></span>-->
<!--</div>-->
</div>

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

@@ -1,10 +1,19 @@
.alert-dismissible .close {
top: -13px;
right: -15px;
}
.notificationClose:focus {
outline: none !important;
}
.icon {
float: left;
padding: 5px;
//float: left;
//padding: 5px;
}
.alert-dismissible {
padding: 10px;
}
.sn-title, .sn-content, .sn-html {

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

@@ -127,8 +127,12 @@ export class NotificationComponent implements OnInit, OnDestroy {
private contentType(item: any, key: string) {
if (item instanceof TemplateRef) {
this[key] = item;
} else if (key === 'title' || key === 'content' ) {
this[key] = isNotEmpty(item) ? item : Observable.of('');
} else if (key === 'title' || key === 'content') {
this[key] = isNotEmpty(item) ?
typeof item === 'string' ?
Observable.of(item)
: typeof item === 'object' && isNotEmpty(item.payload) ? Observable.of(item.payload) : null
: null;
} else {
this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
}