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() { public closeFsModal() {
this.fsModal.close(); this.fsModal.cancel();
} }
} }

6
utils/modal/alert.ts
View File

@ -7,11 +7,11 @@ declare var UIkit: any;
template: ` template: `
<div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #modal-container"> <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-dialog">
<div class="uk-modal-header uk-text-left uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle"> <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
<div class="uk-modal-title" [hidden]=!alertHeader> <div [class.uk-invisible]="!alertHeader">
<h5 class="uk-margin-remove">{{alertTitle}}</h5> <h5 class="uk-margin-remove">{{alertTitle}}</h5>
</div> </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> <icon name="close" ratio="1.5"></icon>
</button> </button>
</div> </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 {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs'; import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators"; import {delay} from "rxjs/operators";
import {HelperFunctions} from "../../HelperFunctions.class";
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'fs-modal', selector: 'fs-modal',
template: ` template: `
<div #modal_full class="uk-modal-full" uk-modal> <div #element class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
<div class="uk-modal-dialog"> <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="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
<div class=""> <div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
<div class="header"> <button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()">
<ng-content select="[actions]"></ng-content> <icon name="west" [flex]="true" ratio="3"></icon>
</div> </button>
<div class="content"> </div>
<ng-content></ng-content> <div [class.uk-invisible]="!title"
</div> class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
</div> <h2 class="uk-margin-remove">{{title}}</h2>
</div> </div>
</div> <div class="uk-width-medium@l uk-width-auto uk-flex" [class.uk-flex-center]="okButton" [class.uk-flex-right]="!okButton">
<!-- <div class="fs-modal"> <button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
<div class="fs-modal-bg" (click)="close()"></div> [class.uk-disabled]="okButtonDisabled" (click)="ok()">
<div id="fs-modal" class="fs-modal-dialog"> {{okButtonText}}
<div class="header"> </button>
<div class="uk-flex-middle uk-grid" uk-grid> <button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
<h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4> <icon name="close" ratio="1.5"></icon>
<div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right"> </button>
<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> </div>
</div> </div>
<div class="content"> <div class="uk-modal-body" uk-overflow-auto>
<ng-content></ng-content> <div class="uk-container uk-height-1-1" [ngClass]="classBody">
<ng-content></ng-content>
</div>
</div> </div>
</div> </div>
</div> --> </div>
` `
}) })
export class FullScreenModalComponent implements OnInit { export class FullScreenModalComponent {
okButtonText = 'OK'; @Input() id: string = "fs-modal";
cancelButtonText = 'Cancel'; @Input() classTitle: string = "uk-background-primary uk-light";
cancelButton: boolean = false; @Input() classBody: string = 'uk-container-large';
back: boolean = false;
title: string;
okButton: boolean = false; okButton: boolean = false;
title: string = null; okButtonText = 'OK';
@Input() @Input()
okButtonDisabled = false; okButtonDisabled = false;
@Input()
cancelButtonDisabled = false;
@Output() @Output()
okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() @Output()
cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>(); cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
opened: boolean = false; @ViewChild('element') element: ElementRef;
@ViewChild('modal_full') element: ElementRef;
private subscriptions: any[] = [];
private clickedInside: boolean;
constructor(private el: ElementRef) { get isOpen() {
this.element = el.nativeElement; return this.element && UIkit.modal(this.element.nativeElement).isToggled();
}
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();
}
})
} }
open() { open() {
UIkit.modal(this.element.nativeElement).show(); UIkit.modal(this.element.nativeElement).show();
HelperFunctions.scroll();
} }
close() { cancel() {
UIkit.modal(this.element.nativeElement).hide(); UIkit.modal(this.element.nativeElement).hide();
HelperFunctions.scroll();
this.cancelEmitter.emit(); this.cancelEmitter.emit();
} }
ok() { ok() {
this.close(); this.cancel();
this.okEmitter.emit(true); 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 type Position = 'bottom-right' | 'bottom-left' | 'bottom-center';
export class NotificationHandler { export class NotificationHandler {
private static DEFAULT_TIMEOUT: number = 60000; private static DEFAULT_TIMEOUT: number = 6000;
private static DEFAULT_STATUS: Status = 'success'; private static DEFAULT_STATUS: Status = 'success';
private static DEFAULT_POSITION: Position = 'bottom-right'; private static DEFAULT_POSITION: Position = 'bottom-right';