MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix full screen modal base on new UI

This commit is contained in:
Konstantinos Triantafyllou 2022-07-04 11:32:24 +03:00
parent d7f343f317
commit de493c8492
4 changed files with 45 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
deposit/depositFirstPage.component.ts
View File

@ -262,6 +262,6 @@ export class DepositFirstPageComponent {
}
public closeFsModal() {
this.fsModal.close();
this.fsModal.cancel();
}
}

6
utils/modal/alert.ts
View File

@ -7,11 +7,11 @@ declare var UIkit: any;
template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog">
<div class="uk-modal-header uk-text-left uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div class="uk-modal-title" [hidden]=!alertHeader>
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div [class.uk-invisible]="!alertHeader">
<h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div>
<button class="uk-close uk-icon uk-margin-left" (click)='cancel()'>
<button class="uk-close uk-icon uk-margin-left" (click)="cancel()">
<icon name="close" ratio="1.5"></icon>
</button>
</div>

102
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -1,98 +1,76 @@
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";
import {HelperFunctions} from "../../HelperFunctions.class";
declare var UIkit;
@Component({
selector: 'fs-modal',
template: `
<div #modal_full class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large uk-margin-medium-top uk-margin-medium-right" type="button" uk-close></button>
<div class="">
<div class="header">
<ng-content select="[actions]"></ng-content>
</div>
<div class="content">
<ng-content></ng-content>
</div>
</div>
</div>
</div>
<!-- <div class="fs-modal">
<div class="fs-modal-bg" (click)="close()"></div>
<div id="fs-modal" class="fs-modal-dialog">
<div class="header">
<div class="uk-flex-middle uk-grid" uk-grid>
<h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4>
<div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right">
<div>
<ng-content select="[actions]"></ng-content>
</div>
<button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined uk-margin-small-left" [disabled]="cancelButtonDisabled" (click)="close()">{{cancelButtonText}}</button>
<button *ngIf="okButton" class="uk-button uk-button-secondary uk-margin-small-left" [disabled]="okButtonDisabled" (click)="ok()">{{okButtonText}}</button>
</div>
<div #element class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog">
<div class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
<div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
<button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()">
<icon name="west" [flex]="true" ratio="3"></icon>
</button>
</div>
<div [class.uk-invisible]="!title"
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
<h2 class="uk-margin-remove">{{title}}</h2>
</div>
<div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton">
<button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
[class.uk-disabled]="okButtonDisabled" (click)="ok()">
{{okButtonText}}
</button>
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
<icon name="close" ratio="1.5"></icon>
</button>
</div>
</div>
<div class="content">
<ng-content></ng-content>
<div class="uk-modal-body" uk-overflow-auto>
<div class="uk-container uk-height-1-1" [ngClass]="classBody">
<ng-content></ng-content>
</div>
</div>
</div>
</div> -->
</div>
`
})
export class FullScreenModalComponent implements OnInit {
okButtonText = 'OK';
cancelButtonText = 'Cancel';
cancelButton: boolean = false;
export class FullScreenModalComponent {
@Input() id: string = "fs-modal";
@Input() classTitle: string = "uk-background-primary uk-light";
@Input() classBody: string = 'uk-container-large';
back: boolean = false;
title: string;
okButton: boolean = false;
title: string = null;
okButtonText = 'OK';
@Input()
okButtonDisabled = false;
@Input()
cancelButtonDisabled = false;
@Output()
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
opened: boolean = false;
@ViewChild('modal_full') element: ElementRef;
private subscriptions: any[] = [];
private clickedInside: boolean;
@ViewChild('element') element: ElementRef;
constructor(private el: ElementRef) {
this.element = el.nativeElement;
}
ngOnInit() {
if (typeof document !== "undefined") {
this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
if(event.keyCode === 27) {
this.close();
}
}));
}
}
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
get isOpen() {
return this.element && UIkit.modal(this.element.nativeElement).isToggled();
}
open() {
UIkit.modal(this.element.nativeElement).show();
HelperFunctions.scroll();
}
close() {
cancel() {
UIkit.modal(this.element.nativeElement).hide();
HelperFunctions.scroll();
this.cancelEmitter.emit();
}
ok() {
this.close();
this.cancel();
this.okEmitter.emit(true);
}
}

2
utils/notification-handler.ts
View File

@ -4,7 +4,7 @@ export type Status = 'danger' | 'success' | 'warning';
export type Position = 'bottom-right' | 'bottom-left' | 'bottom-center';
export class NotificationHandler {
private static DEFAULT_TIMEOUT: number = 60000;
private static DEFAULT_TIMEOUT: number = 6000;
private static DEFAULT_STATUS: Status = 'success';
private static DEFAULT_POSITION: Position = 'bottom-right';