hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-11 20:13:07 +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});
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 n4 = this.notificationsService.error(this.example);
const n4 = this.notificationsService.danger(this.example);
console.log('Notifications pushed');
console.log(n1);
console.log(n2);
console.log(n3);
console.log(n4);
}
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 {
id?: string
type: string
icon: string
icon?: string
title?: any
content?: any
override?: any

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

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

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

@@ -8,6 +8,7 @@ export interface INotification {
title?: any
content?: any
options?: INotificationOptions
html?: any;
}
export class Notification implements INotification {
@@ -16,6 +17,7 @@ export class Notification implements INotification {
public title: any;
public content: any;
public options: INotificationOptions;
public html?: any;
constructor(id: string,
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"
[@enterLeave]="item.state"
(click)="onClick($event)"
[class]="theClass"
[ngClass]="{
'alert-info': item.type === 'info',
'alert-danger': item.type === 'error',
'alert-warning': item.type === 'warn',
'alert-success': item.type === 'success',
'bare': item.type === 'bare',
'alert-success': item.type == 'success',
'alert-info': item.type == 'info',
'alert-warning': item.type == 'warning',
'alert-danger': item.type == 'danger',
'alert-error': item.type == 'error',
'rtl-mode': rtl,
'has-icon': item.icon !== 'bare'
}"
(mouseenter)="onEnter()"
(mouseleave)="onLeave()">
<div *ngIf="!item.html">
<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">
<ng-container *ngTemplateOutlet="title"></ng-container>
</div>
@@ -32,41 +49,24 @@
<div class="sn-content" [innerHTML]="content"></div>
</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 *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
<ng-container *ngTemplateOutlet="item.html"></ng-container>
</div>
<ng-template #regularHtml>
<div class="sn-content" [innerHTML]="item.html"></div>
</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 class="sn-progress-loader" *ngIf="showProgressBar">
<span [ngStyle]="{'width': progressWidth + '%'}"></span>
</div>
<div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
</div>

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

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

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

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

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 {Notification} from './interfaces/notification.type';
import {Icons, defaultIcons} from './interfaces/icons';
import { NotificationType } from './models/notification-type';
@Injectable()
export class NotificationsService {
@@ -20,28 +21,28 @@ export class NotificationsService {
};
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 {
return this.set({title: title, content: content || '', type: 'error', icon: this.icons.error, override: override}, true);
}
// error(title: any = '', content: any = '', override?: any): Notification {
// return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true);
// }
alert(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: 'alert', icon: this.icons.alert, override: override}, true);
danger(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: NotificationType.Danger, override: override}, true);
}
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 {
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 {
return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
}
// bare(title: any = '', content: any = '', override?: any): Notification {
// return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
// }
// With type method
create(title: any = '', content: any = '', type = 'success', override?: any): Notification {