From de493c84923348f8289d4e507c04cfec80c30d69 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 4 Jul 2022 11:32:24 +0300 Subject: [PATCH] Fix full screen modal base on new UI --- deposit/depositFirstPage.component.ts | 2 +- utils/modal/alert.ts | 6 +- .../full-screen-modal.component.ts | 102 +++++++----------- utils/notification-handler.ts | 2 +- 4 files changed, 45 insertions(+), 67 deletions(-) diff --git a/deposit/depositFirstPage.component.ts b/deposit/depositFirstPage.component.ts index 3c2bacad..71d2b912 100644 --- a/deposit/depositFirstPage.component.ts +++ b/deposit/depositFirstPage.component.ts @@ -262,6 +262,6 @@ export class DepositFirstPageComponent { } public closeFsModal() { - this.fsModal.close(); + this.fsModal.cancel(); } } diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts index 23dae80d..7e325f05 100644 --- a/utils/modal/alert.ts +++ b/utils/modal/alert.ts @@ -7,11 +7,11 @@ declare var UIkit: any; template: `
-
-
+
+
{{alertTitle}}
-
diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts index a3ec4fc0..c5555c6e 100644 --- a/utils/modal/full-screen-modal/full-screen-modal.component.ts +++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts @@ -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: ` -
-
- -
-
- -
-
- -
-
-
-
- +
` }) -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 = new EventEmitter(); @Output() cancelEmitter: EventEmitter = new EventEmitter(); - 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); } } diff --git a/utils/notification-handler.ts b/utils/notification-handler.ts index ee9a175a..968e824c 100644 --- a/utils/notification-handler.ts +++ b/utils/notification-handler.ts @@ -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';