style adjustment

src/app/app.component.ts

@@ -2,11 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
 import { DomUtils, userAgent } from '@igo2/utils';
-import {
- LanguageService,
- ConfigService,
- MessageService
-} from '@igo2/core';
+import { LanguageService, ConfigService, MessageService } from '@igo2/core';
 import { AuthOptions } from '@igo2/auth';
 import { AnalyticsListenerService } from '@igo2/integration';
 import { PwaService } from './services/pwa.service';
@@ -44,11 +40,15 @@ export class AppComponent implements OnInit {
 
  this.detectOldBrowser();
 
- this.hasHeader = this.configService.getConfig('header.hasHeader') === undefined ? false :
- this.configService.getConfig('header.hasHeader');
+ this.hasHeader =
+ this.configService.getConfig('header.hasHeader') === undefined
+ ? false
+ : this.configService.getConfig('header.hasHeader');
 
- this.hasFooter = this.configService.getConfig('hasFooter') === undefined ? false :
- this.configService.getConfig('hasFooter');
+ this.hasFooter =
+ this.configService.getConfig('hasFooter') === undefined
+ ? false
+ : this.configService.getConfig('hasFooter');
 
  this.setManifest();
  this.installPrompt();
@@ -63,7 +63,7 @@ export class AppComponent implements OnInit {
  this.router.events
  .pipe(
  first((events) => events instanceof NavigationEnd),
- delay(500),
+ delay(500)
  )
  .subscribe(() => {
  this._removeSplashScreen();
@@ -87,45 +87,53 @@ export class AppComponent implements OnInit {
  }
 
  private readTitleConfig() {
- this.languageService.translate.get(this.configService.getConfig('title')).subscribe(title => {
- if (title) {
- this.titleService.setTitle(title);
- this.metaService.addTag({ name: 'title', content: title });
- const splashScreenTitle = this.document.getElementById('splash-screen-title');
- if (splashScreenTitle) {
- splashScreenTitle.innerText = title
+ this.languageService.translate
+ .get(this.configService.getConfig('title'))
+ .subscribe((title) => {
+ if (title) {
+ this.titleService.setTitle(title);
+ this.metaService.addTag({ name: 'title', content: title });
  }
- }
- });
+ });
  }
 
  private setManifest() {
  const appConfig = this.configService.getConfig('app');
  if (appConfig?.install?.enabled) {
- const manifestPath = appConfig.install.manifestPath || 'manifest.webmanifest';
- document.querySelector('#igoManifestByConfig').setAttribute('href', manifestPath);
+ const manifestPath =
+ appConfig.install.manifestPath || 'manifest.webmanifest';
+ document
+ .querySelector('#igoManifestByConfig')
+ .setAttribute('href', manifestPath);
  }
  }
 
  private installPrompt() {
  const appConfig = this.configService.getConfig('app');
  if (appConfig?.install?.enabled && appConfig?.install?.promote) {
  if (userAgent.getOSName() !== 'iOS') {
- window.addEventListener('beforeinstallprompt', (event: any) => {
- event.preventDefault();
- this.promptEvent = event;
- window.addEventListener('click', () => {
- setTimeout(() => {
- this.promptEvent.prompt();
- this.promptEvent = undefined;
- }, 750);
- }, { once: true });
- }, { once: true });
+ window.addEventListener(
+ 'beforeinstallprompt',
+ (event: any) => {
+ event.preventDefault();
+ this.promptEvent = event;
+ window.addEventListener(
+ 'click',
+ () => {
+ setTimeout(() => {
+ this.promptEvent.prompt();
+ this.promptEvent = undefined;
+ }, 750);
+ },
+ { once: true }
+ );
+ },
+ { once: true }
+ );
  }
  }
  }
 
-
  private readDescriptionConfig() {
  const description = this.configService.getConfig('description');
  if (description) {

src/app/app.module.ts

@@ -1,5 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { APP_INITIALIZER, ApplicationRef, Injector, NgModule } from '@angular/core';
+import {
+ APP_INITIALIZER,
+ ApplicationRef,
+ Injector,
+ NgModule
+} from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -26,7 +31,6 @@ import {
  provideStyleListOptions
 } from '@igo2/geo';
 
-
 import { environment } from '../environments/environment';
 import { PortalModule } from './pages';
 import { AppComponent } from './app.component';
@@ -41,6 +45,7 @@ import {
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { concatMap, first } from 'rxjs';
 import { loadTheme } from '@igo2/utils';
+import { DOCUMENT } from '@angular/common';
 
 const DEFAULT_THEME: string = 'blue-theme';
 
@@ -86,11 +91,10 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
  provideOsrmDirectionsSource(),
  provideOptionsApi(),
  provideCadastreSearchSource(),
-
  {
  provide: APP_INITIALIZER,
  useFactory: appInitializerFactory,
- deps: [Injector, ApplicationRef],
+ deps: [Injector, ApplicationRef, DOCUMENT],
  multi: true
  },
  provideStyleListOptions({
@@ -99,34 +103,51 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
  { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: defaultTooltipOptions },
  {
  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
- useValue: { appearance: 'outline' }
- },
+ useValue: { appearance: 'fill' }
+ }
  ],
  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
 
 function appInitializerFactory(
  injector: Injector,
- applicationRef: ApplicationRef
+ applicationRef: ApplicationRef,
+ document: Document
 ) {
  // ensure to have the proper translations loaded once, when the app is stable.
- return () => new Promise<any>((resolve: any) => {
- applicationRef.isStable.pipe(
- first(isStable => isStable === true),
- concatMap(() => {
- const languageService = injector.get(LanguageService);
- const lang = languageService.getLanguage();
- return languageService.translate.getTranslation(lang);
- }))
- .subscribe((translations) => {
- const languageService = injector.get(LanguageService);
- const lang = languageService.getLanguage();
- languageService.translate.setTranslation(lang, translations);
- const configService = injector.get(ConfigService);
- const theme = configService.getConfig('theme') || DEFAULT_THEME;
- loadTheme(document, theme);
- resolve();
- });
- });
+ return () =>
+ new Promise<any>((resolve: any) => {
+ applicationRef.isStable
+ .pipe(
+ first((isStable) => isStable === true),
+ concatMap(() => {
+ const languageService = injector.get(LanguageService);
+ const lang = languageService.getLanguage();
+ return languageService.translate.getTranslation(lang);
+ })
+ )
+ .subscribe((translations) => {
+ const languageService = injector.get(LanguageService);
+ const lang = languageService.getLanguage();
+ languageService.translate.setTranslation(lang, translations);
+
+ const configService = injector.get(ConfigService);
+ const theme = configService.getConfig('theme') || DEFAULT_THEME;
+ loadTheme(document, theme);
+
+ const titleKey = configService.getConfig('title');
+ languageService.translate.get(titleKey).subscribe((title) => {
+ handleSplashScreenTitle(document, title);
+ resolve();
+ });
+ });
+ });
+}
+
+function handleSplashScreenTitle(document: Document, title: string): void {
+ const splashScreenTitle = document.getElementById('splash-screen-title');
+ if (splashScreenTitle) {
+ splashScreenTitle.innerText = title;
+ }
 }

src/app/pages/portal/expansion-panel/expansion-panel-header.component.html

@@ -1,14 +1,21 @@
-<div>
- <div class="app-expansion-panel-trigger-container">
- <button mat-icon-button (click)="onToggleClick()" 
- [matTooltip]="(!expanded ? 'workspace.open' : 'workspace.close') | translate"
- color="primary">
- <mat-icon *ngIf="!expanded" svgIcon="launch"></mat-icon>
- <mat-icon *ngIf="expanded" style="transform: rotate(180deg)" svgIcon="launch"></mat-icon>
- </button>
- </div>
+<div class="app-expansion-panel-trigger-container mat-elevation-z2">
+ <button
+ mat-icon-button
+ (click)="onToggleClick()"
+ [matTooltip]="
+ (!expanded ? 'workspace.open' : 'workspace.close') | translate
+ "
+ color="primary"
+ >
+ <mat-icon *ngIf="!expanded" svgIcon="launch"></mat-icon>
+ <mat-icon
+ *ngIf="expanded"
+ style="transform: rotate(180deg)"
+ svgIcon="launch"
+ ></mat-icon>
+ </button>
+</div>
 
- <div class="app-expansion-panel-content">
- <ng-content></ng-content>
- </div>
+<div class="app-expansion-panel-content">
+ <ng-content></ng-content>
 </div>

src/app/pages/portal/expansion-panel/expansion-panel-header.component.scss

@@ -1,16 +1,22 @@
 @import '../portal.variables';
 
 :host {
- display: block;
- height: $app-expansion-panel-header-height;
  border-bottom: 2px solid aliceblue;
+ display: flex;
+ align-items: center;
+
+ button {
+ width: 40px;
+ height: 40px;
+ padding: 8px;
+ }
 }
 
-:host > div {
+.app-expansion-panel-trigger-container {
  display: flex;
 }
 
-.app-expansion-panel-trigger-container,
 .app-expansion-panel-content {
- display: contents;
+ display: flex;
+ height: 100%;
 }

src/app/pages/portal/expansion-panel/expansion-panel-header.theming.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin density($theme) {
+ $density: mat.get-density-config($theme);
+
+ $theme: map.merge(
+ $theme,
+ (
+ density: $density - 2
+ )
+ );
+
+ app-expansion-panel-header {
+ @include mat.icon-button-density($theme);
+ }
+}

src/app/pages/portal/expansion-panel/expansion-panel.component.scss

@@ -13,25 +13,39 @@
  transition:
  height 200ms cubic-bezier(.4, 0, .2, 1),
  width 200ms cubic-bezier(.4, 0, .2, 1);
-}
 
-.app-expansion-panel-container {
- height: 100%;
- width: 100%;
-}
+ &:not(.app-expansion-panel-expanded) {
+ ::ng-deep {
+ .app-expansion-panel-content {
+ display: none;
+ }
+ }
+ }
 
-:host.app-expansion-panel-expanded {
- height: $app-expansion-panel-height;
- width: 100%;
- z-index: 6;
+ &.app-expansion-panel-expanded {
+  height: $app-expansion-panel-height;
+  width: 100%;
+  z-index: 6;
 
- @include mobile {
- &.footer {
- margin-bottom: 48px;
+ ::ng-deep {
+ .app-expansion-panel-trigger-container {
+ box-shadow: none;
+ }
+ }
+
+ @include mobile {
+ &.footer {
+ margin-bottom: 48px;
+ }
  }
  }
 }
 
+.app-expansion-panel-container {
+ height: 100%;
+ width: 100%;
+}
+
 :host.app-expansion-panel-expanded-maximized {
  height: $app-expansion-panel-height-maximized;
  width: 100%;

src/app/pages/portal/portal-theme.scss

@@ -0,0 +1,5 @@
+@use './expansion-panel/expansion-panel-header.theming' as expansion-panel-header;
+
+@mixin densities($config) {
+ @include expansion-panel-header.density($config);
+}