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