diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html index dbec3baff..441c8bc9e 100644 --- a/src/app/pages/portal/portal.component.html +++ b/src/app/pages/portal/portal.component.html @@ -199,7 +199,7 @@ [map]="map" [store]="queryStore" [hasFeatureEmphasisOnSelection]="hasFeatureEmphasisOnSelection" - [@toastPanelOffsetX]="(isMobile() || !isLandscape()) ? undefined : getToastPanelExtent()" + [@toastPanelOffsetX]="toastPanelOffsetX$ | async" [@toastPanelOffsetY]="getToastPanelOffsetY()" [@toastPanelMobileSidenav]="(isMobile() && sidenavOpened) || (isTablet() && isPortrait() && sidenavOpened)" [opened]="toastPanelOpened" diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts index 425ca9437..521d5ccc1 100644 --- a/src/app/pages/portal/portal.component.ts +++ b/src/app/pages/portal/portal.component.ts @@ -7,7 +7,7 @@ import { ElementRef } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; -import { Subscription, of, BehaviorSubject } from 'rxjs'; +import { Subscription, of, BehaviorSubject, combineLatest } from 'rxjs'; import { debounceTime, take, pairwise, skipWhile } from 'rxjs/operators'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import MapBrowserEvent from 'ol/MapBrowserEvent'; @@ -107,6 +107,8 @@ import olFormatGeoJSON from 'ol/format/GeoJSON'; ] }) export class PortalComponent implements OnInit, OnDestroy { + public toastPanelOffsetX$: BehaviorSubject = new BehaviorSubject(undefined); + public sidenavOpened$: BehaviorSubject = new BehaviorSubject(false); public minSearchTermLength = 2; public hasExpansionPanel = false; public hasGeolocateButton = true; @@ -130,7 +132,7 @@ export class PortalComponent implements OnInit, OnDestroy { readonly workspaceMaximize$: BehaviorSubject = new BehaviorSubject( this.storageService.get('workspaceMaximize') as boolean ); - public sidenavOpened = false; + public searchBarTerm = ''; public onSettingsChange$ = new BehaviorSubject(undefined); public termDefinedInUrl = false; @@ -146,6 +148,7 @@ export class PortalComponent implements OnInit, OnDestroy { private context$$: Subscription; private openSidenav$$: Subscription; + private sidenavMediaAndOrientation$$: Subscription; public igoSearchPointerSummaryEnabled: boolean; @@ -168,6 +171,14 @@ export class PortalComponent implements OnInit, OnDestroy { return this.mapState.map; } + get sidenavOpened(): boolean { + return this.sidenavOpened$.value; + } + + set sidenavOpened(value: boolean) { + this.sidenavOpened$.next(value); + } + get auth(): AuthOptions { return this.configService.getConfig('auth') || []; } @@ -441,6 +452,25 @@ export class PortalComponent implements OnInit, OnDestroy { this.menuButtonClass = this.getClassMenuButton(); } ); + + this.sidenavMediaAndOrientation$$ = + combineLatest([ + this.sidenavOpened$, + this.mediaService.media$, + this.mediaService.orientation$] + ).pipe( + debounceTime(50) + ).subscribe((sidenavMediaAndOrientation: [boolean, string, string]) => { + this.computeToastPanelOffsetX(); + }); + } + + computeToastPanelOffsetX() { + if (this.isMobile() || !this.isLandscape()) { + this.toastPanelOffsetX$.next(undefined); + } else { + this.toastPanelOffsetX$.next(this.getToastPanelExtent()); + } } getClassMenuButton() { @@ -534,6 +564,7 @@ export class PortalComponent implements OnInit, OnDestroy { this.activeWidget$$.unsubscribe(); this.openSidenav$$.unsubscribe(); this.workspaceMaximize$$.map(f => f.unsubscribe()); + this.sidenavMediaAndOrientation$$.unsubscribe(); } /**