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

Full screen modal: Change title and icons size on mobile

This commit is contained in:
Konstantinos Triantafyllou 2023-02-21 15:14:25 +02:00
parent 3b962dc0e5
commit 256f8162e6
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import {
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"; import {HelperFunctions} from "../../HelperFunctions.class";
import {LayoutService} from "../../../dashboard/sharedComponents/sidebar/layout.service";
declare var UIkit; declare var UIkit;
declare var ResizeObserver; declare var ResizeObserver;
@ -24,12 +25,13 @@ declare var ResizeObserver;
<div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle"> <div #header 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"> <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)="backClicked()"> <button class="uk-button uk-button-link" [disabled]="!back" (click)="backClicked()">
<icon name="west" [flex]="true" ratio="3"></icon> <icon name="west" [flex]="true" [ratio]="isMobile?2:3"></icon>
</button> </button>
</div> </div>
<div [class.uk-invisible]="!title" <div [class.uk-invisible]="!title"
class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center"> class="uk-width-expand uk-padding-small uk-padding-remove-vertical uk-flex uk-flex-center">
<h2 class="uk-margin-remove">{{title}}</h2> <h4 *ngIf="isMobile" class="uk-margin-remove">{{title}}</h4>
<h2 *ngIf="!isMobile" class="uk-margin-remove">{{title}}</h2>
</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="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" <button *ngIf="okButton" class="uk-button uk-button-default" [disabled]="okButtonDisabled"
@ -37,7 +39,7 @@ declare var ResizeObserver;
{{okButtonText}} {{okButtonText}}
</button> </button>
<button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()"> <button *ngIf="!okButton" class="uk-close uk-icon" (click)="cancel()">
<icon name="close" ratio="2"></icon> <icon name="close" [ratio]="2"></icon>
</button> </button>
</div> </div>
</div> </div>
@ -64,6 +66,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
title: string; title: string;
okButton: boolean = false; okButton: boolean = false;
okButtonText = 'OK'; okButtonText = 'OK';
isMobile: boolean = false;
@Input() @Input()
okButtonDisabled = false; okButtonDisabled = false;
@Output() @Output()
@ -76,8 +79,9 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
observer: any; observer: any;
headerHeight: number; headerHeight: number;
bodyHeight: number; bodyHeight: number;
private subscriptions: any[] = [];
constructor(private cdr: ChangeDetectorRef) { constructor(private cdr: ChangeDetectorRef, private layoutService: LayoutService) {
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
@ -88,6 +92,9 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
ngOnInit() { ngOnInit() {
FullScreenModalComponent.FS_MODAL_COUNTER++; FullScreenModalComponent.FS_MODAL_COUNTER++;
this.id = 'fs-modal-' + FullScreenModalComponent.FS_MODAL_COUNTER; this.id = 'fs-modal-' + FullScreenModalComponent.FS_MODAL_COUNTER;
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
}))
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -104,7 +111,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
/* Height = Viewport - header - (Body padding) */ /* Height = Viewport - header - (Body padding) */
changeHeight() { changeHeight() {
if(typeof window !== "undefined" && this.header) { if(typeof window !== "undefined" && this.header) {
this.bodyHeight = window.innerHeight - this.header.nativeElement.clientHeight - 80; this.bodyHeight = window.innerHeight - this.header.nativeElement.clientHeight - (this.isMobile?40:80);
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
} }
@ -122,7 +129,11 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
} }
} }
} }
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
})
} }
get isOpen() { get isOpen() {