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

fix graphics

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-05 13:08:42 +01:00
parent cfcc024bfc
commit add8c7cec9
8 changed files with 100 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/+home-page/home-page.component.ts
View File

@@ -29,10 +29,12 @@ export class HomePageComponent {
timeout: 2000}); timeout: 2000});
const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!'); const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
const n3 = this.notificationsService.warn('Warning in DSpace', 'This is a fake alert!'); const n3 = this.notificationsService.warn('Warning in DSpace', 'This is a fake alert!');
const n4 = this.notificationsService.error(this.example); const n4 = this.notificationsService.danger(this.example);
console.log('Notifications pushed'); console.log('Notifications pushed');
console.log(n1); console.log(n1);
console.log(n2); console.log(n2);
console.log(n3);
console.log(n4);
} }
notificationCreated(event) { notificationCreated(event) {

2
src/app/shared/notifications/interfaces/notification.type.ts
View File

@@ -3,7 +3,7 @@ import {EventEmitter} from '@angular/core';
export interface Notification { export interface Notification {
id?: string id?: string
type: string type: string
icon: string icon?: string
title?: any title?: any
content?: any content?: any
override?: any override?: any

6
src/app/shared/notifications/models/notification-type.ts
View File

@@ -1,8 +1,8 @@
export enum NotificationType { export enum NotificationType {
Success = 'success', Success = 'success',
Error = 'error', Error = 'error',
Alert = 'alert', Danger = 'danger',
Info = 'info', Info = 'info',
Warning = 'warn', Warning = 'warning',
Bare = 'bare' // Bare = 'bare'
} }

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

@@ -8,6 +8,7 @@ export interface INotification {
title?: any title?: any
content?: any content?: any
options?: INotificationOptions options?: INotificationOptions
html?: any;
} }
export class Notification implements INotification { export class Notification implements INotification {
@@ -16,6 +17,7 @@ export class Notification implements INotification {
public title: any; public title: any;
public content: any; public content: any;
public options: INotificationOptions; public options: INotificationOptions;
public html?: any;
constructor(id: string, constructor(id: string,
type: NotificationType, type: NotificationType,

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

@@ -1,21 +1,38 @@
<!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>-->
<div class="icon"><i
[ngClass]="{'fa': true,
'fa-check': item.type == 'success',
'fa-times-circle': item.type == 'danger',
'fa-exclamation-triangle': item.type == 'warning',
'fa-info': item.type == 'info'
}"></i></div>
<div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
<div class="alert" role="alert" <div class="alert" role="alert"
[@enterLeave]="item.state" [@enterLeave]="item.state"
(click)="onClick($event)" (click)="onClick($event)"
[class]="theClass" [class]="theClass"
[ngClass]="{ [ngClass]="{
'alert-info': item.type === 'info', 'alert-success': item.type == 'success',
'alert-danger': item.type === 'error', 'alert-info': item.type == 'info',
'alert-warning': item.type === 'warn', 'alert-warning': item.type == 'warning',
'alert-success': item.type === 'success', 'alert-danger': item.type == 'danger',
'bare': item.type === 'bare', 'alert-error': item.type == 'error',
'rtl-mode': rtl, 'rtl-mode': rtl,
'has-icon': item.icon !== 'bare' 'has-icon': item.icon !== 'bare'
}" }"
(mouseenter)="onEnter()" (mouseenter)="onEnter()"
(mouseleave)="onLeave()"> (mouseleave)="onLeave()">
<div *ngIf="!item.html"> <div *ngIf="!item.html">
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle"> <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container> <ng-container *ngTemplateOutlet="title"></ng-container>
</div> </div>
@@ -32,41 +49,24 @@
<div class="sn-content" [innerHTML]="content"></div> <div class="sn-content" [innerHTML]="content"></div>
</ng-template> </ng-template>
<!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>-->
{{icon}}
<div class="icon"><i
[ngClass]="{'fa': true,
'fa-check': icon == 'success',
'fa-times-circle': icon == 'error',
'fa-exclamation-triangle': icon == 'warn',
'fa-info': icon == 'info'
}"></i></div>
</div> </div>
<div *ngIf="item.html"> <div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="item.html"></ng-container>
</div>
<ng-template #regularHtml> <ng-template #regularHtml>
<div class="sn-content" [innerHTML]="item.html"></div> <div class="sn-content" [innerHTML]="item.html"></div>
</ng-template> </ng-template>
<!--<div class="icon" [class.icon-hover]="clickIconToClose" *ngIf="item.icon" [innerHTML]="safeSvg" (click)="onClickIcon($event)"></div>-->
{{icon}}
<div class="icon"><i
[ngClass]="{'fa': true,
'fa-check': icon == 'success',
'fa-times-circle': icon == 'error',
'fa-exclamation-triangle': icon == 'warning',
'fa-info': icon == 'info'
}"></i></div>
</div> </div>
<div class="sn-progress-loader" *ngIf="showProgressBar"> <div class="sn-progress-loader" *ngIf="showProgressBar">
<span [ngStyle]="{'width': progressWidth + '%'}"></span> <span [ngStyle]="{'width': progressWidth + '%'}"></span>
</div> </div>
<div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
</div> </div>

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

@@ -109,16 +109,19 @@
.close { .close {
position: absolute; //position: absolute;
top: 5px; //top: 5px;
right: 5px; //right: 5px;
float: right;
padding-right: 5px;
} }
.icon { .icon {
position: absolute; //position: absolute;
top: 5px; //top: 5px;
left: 5px; //left: 5px;
color: black; float: left;
padding: 5px;
} }
// //
//.icon > fa-times-circle { //.icon > fa-times-circle {

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

@@ -11,8 +11,8 @@ import {
} from '@angular/core'; } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations'; import { animate, state, style, transition, trigger } from '@angular/animations';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Notification } from '../interfaces/notification.type';
import { NotificationsService } from '../notifications.service'; import { NotificationsService } from '../notifications.service';
import { INotification } from '../models/notification.model';
@Component({ @Component({
selector: 'ds-notification', selector: 'ds-notification',
@@ -122,7 +122,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
@Input() public rtl: boolean; @Input() public rtl: boolean;
@Input() public animate: string; @Input() public animate: string;
@Input() public position: number; @Input() public position: number;
@Input() public item: Notification; @Input() public item: INotification;
// Progress bar variables // Progress bar variables
public title: any; public title: any;
@@ -152,13 +152,13 @@ export class NotificationComponent implements OnInit, OnDestroy {
} }
ngOnInit(): void { ngOnInit(): void {
if (this.item.override) { // if (this.item.override) {
this.attachOverrides(); // this.attachOverrides();
} // }
//
if (this.animate) { // if (this.animate) {
this.item.state = this.animate; // this.item.state = this.animate;
} // }
if (this.timeOut !== 0) { if (this.timeOut !== 0) {
this.startTimeOut(); this.startTimeOut();
@@ -168,7 +168,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
this.contentType(this.item.content, 'content'); this.contentType(this.item.content, 'content');
this.contentType(this.item.html, 'html'); this.contentType(this.item.html, 'html');
this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon); // this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
} }
startTimeOut(): void { startTimeOut(): void {
@@ -191,30 +191,30 @@ export class NotificationComponent implements OnInit, OnDestroy {
// } // }
} }
onClick($e: MouseEvent): void { // onClick($e: MouseEvent): void {
this.item.click!.emit($e); // this.item.click!.emit($e);
//
// if (this.clickToClose) { // // if (this.clickToClose) {
// this.remove(); // // this.remove();
// // }
// } // }
}
onClickIcon($e: MouseEvent): void { // onClickIcon($e: MouseEvent): void {
this.item.clickIcon!.emit($e); // this.item.clickIcon!.emit($e);
//
// if (this.clickIconToClose) { // // if (this.clickIconToClose) {
// this.remove(); // // this.remove();
// // }
// } // }
}
// Attach all the overrides // Attach all the overrides
attachOverrides(): void { // attachOverrides(): void {
Object.keys(this.item.override).forEach((a) => { // Object.keys(this.item.override).forEach((a) => {
if (this.hasOwnProperty(a)) { // if (this.hasOwnProperty(a)) {
(this as any)[a] = this.item.override[a]; // (this as any)[a] = this.item.override[a];
} // }
}); // });
} // }
ngOnDestroy(): void { ngOnDestroy(): void {
clearTimeout(this.timer); clearTimeout(this.timer);
@@ -225,7 +225,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
if (this.count++ === this.steps) { if (this.count++ === this.steps) {
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;
@@ -237,14 +237,16 @@ export class NotificationComponent implements OnInit, OnDestroy {
}; };
private remove() { private remove() {
if (this.animate) { // if (this.animate) {
this.item.state = this.animate + 'Out'; // this.item.state = this.animate + 'Out';
setTimeout(() => { // setTimeout(() => {
// this.notificationService.set(this.item, false);
// }, 310);
// } else {
// this.notificationService.set(this.item, false);
// }
this.notificationService.set(this.item, false); this.notificationService.set(this.item, false);
}, 310);
} else {
this.notificationService.set(this.item, false);
}
} }
private contentType(item: any, key: string) { private contentType(item: any, key: string) {

23
src/app/shared/notifications/notifications.service.ts
View File

@@ -3,6 +3,7 @@ import {Subject} from 'rxjs/Subject';
import {NotificationEvent} from './interfaces/notification-event.type'; import {NotificationEvent} from './interfaces/notification-event.type';
import {Notification} from './interfaces/notification.type'; import {Notification} from './interfaces/notification.type';
import {Icons, defaultIcons} from './interfaces/icons'; import {Icons, defaultIcons} from './interfaces/icons';
import { NotificationType } from './models/notification-type';
@Injectable() @Injectable()
export class NotificationsService { export class NotificationsService {
@@ -20,28 +21,28 @@ export class NotificationsService {
}; };
success(title: any = '', content: any = '', override?: any): Notification { success(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'success', icon: this.icons.success, override: override}, true); return this.set({title: title, content: content || '', type: NotificationType.Success, override: override}, true);
} }
error(title: any = '', content: any = '', override?: any): Notification { // error(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'error', icon: this.icons.error, override: override}, true); // return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true);
} // }
alert(title: any = '', content: any = '', override?: any): Notification { danger(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'alert', icon: this.icons.alert, override: override}, true); return this.set({title: title, content: content || '', type: NotificationType.Danger, override: override}, true);
} }
info(title: any = '', content: any = '', override?: any): Notification { info(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'info', icon: this.icons.info, override: override}, true); return this.set({title: title, content: content || '', type: NotificationType.Info, override: override}, true);
} }
warn(title: any = '', content: any = '', override?: any): Notification { warn(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'warn', icon: this.icons.warn, override: override}, true); return this.set({title: title, content: content || '', type: NotificationType.Warning, override: override}, true);
} }
bare(title: any = '', content: any = '', override?: any): Notification { // bare(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true); // return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
} // }
// With type method // With type method
create(title: any = '', content: any = '', type = 'success', override?: any): Notification { create(title: any = '', content: any = '', type = 'success', override?: any): Notification {