Styles refactoring

CHANGELOG.md

@@ -22,7 +22,12 @@
 
 ### Features
 
-* **app:** upgrade igo2-lib ([1d22610](https://github.com/infra-geo-ouverte/igo2/commit/1d2261044f5a054e8aa400e9c67a8739052ee94c))
+* **app:** upgrade igo2-lib ([a8ed9cd](https://github.com/infra-geo-ouverte/igo2/commit/a8ed9cdb51c3f4eba0705535923cce18ec35a859))
+
+
+### Reverts
+
+* Revert "chore(cadastre): delete cadastre provider" ([84b5393](https://github.com/infra-geo-ouverte/igo2/commit/84b53932faa3051d6a5ec901cfa8e65bcd43c777))
 
 
 

angular.json

@@ -42,6 +42,11 @@
                 "input": "./node_modules/@igo2/core/assets/",
                 "output": "./assets/igo2/core/"
               },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@igo2/core/theming/prebuilt-themes",
+                "output": "./assets/igo2/core/theming/prebuilt-themes"
+              },
               {
                 "glob": "**/*",
                 "input": "./node_modules/@igo2/geo/assets/",

package.json

@@ -9,13 +9,13 @@
   "license": "LiLiQ-R",
   "scripts": {
     "ng": "ng",
-    "start": "gulp watch:locale | ng serve --host 0.0.0.0 --port 4201 --proxy-config proxy.conf.json",
+    "start": "ng serve --host 0.0.0.0 --port 4201 --proxy-config proxy.conf.json",
     "start-pwa": "ng build --configuration pwa --output-path ./dist/pwa && npm run serve.pwa",
     "build": "ng build",
     "lint": "ng lint",
     "lint.fix": "ng lint --fix",
     "e2e": "ng e2e --port 4300",
-    "postinstall": "ngcc --tsconfig src/tsconfig.app.json && gulp copyLocaleFromLib",
+    "postinstall": "ngcc --tsconfig src/tsconfig.app.json && npm run copyLocaleToDemo",
     "build.prod": "ng build --configuration production",
     "build.github": "ng build --configuration=github --output-path ./dist/ghpages --base-href /igo2/",
     "build.pwa": "ng build --configuration pwa --output-path ./dist/pwa",
@@ -24,6 +24,7 @@
     "doc": "compodoc -p src/tsconfig.app.json -s --port 4220",
     "build.doc": "compodoc -p src/tsconfig.app.json",
     "serve.doc": "compodoc -s --port 4220",
+    "copyLocaleToDemo": "ts-node scripts/src/locale-copy-from-igo2-core.ts",
     "coverage": "npm run build.coverage && npm run serve.coverage",
     "build.coverage": "ng test --code-coverage --watch=false",
     "serve.coverage": "http-server ./coverage/ --port=4210 --no-browser",
@@ -81,6 +82,7 @@
     "hammerjs": "^2.0.8",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.5.31",
     "jszip": "^3.10.1",
     "jwt-decode": "^2.2.0",
     "moment": "^2.29.4",
@@ -107,9 +109,9 @@
     "@angular-eslint/eslint-plugin-template": "14.1.2",
     "@angular-eslint/schematics": "14.1.2",
     "@angular-eslint/template-parser": "14.1.2",
-    "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/cli": "^14.2.10",
     "@angular/compiler-cli": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@compodoc/compodoc": "^1.1.19",
@@ -124,10 +126,6 @@
     "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.21.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "gulp": "^4.0.0",
-    "gulp-babel": "^8.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-replace": "^1.1.3",
     "http-server": "^13.1.0",
     "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",

scripts/src/locale-copy-from-igo2-core.ts

@@ -0,0 +1,26 @@
+
+import { readdir } from 'fs/promises';
+import { copyFile } from '../src/utils/file-system.utils';
+import path from 'path';
+
+const srcPath = 'node_modules/@igo2/core/locale';
+const distPath = 'src/locale/libs_locale';
+
+
+(async () => {
+
+  await copyLocales();
+})();
+
+async function copyLocales(): Promise<void> {
+
+  const files = await readdir(srcPath);
+  const localeFiles = files.filter((filePath) =>
+    !filePath.includes('.core.')
+  );
+  for (const localeFile of localeFiles) {
+    const input = path.join(srcPath, localeFile);
+    const output = path.join(distPath, localeFile);
+    await copyFile(input, output);
+  }
+}

scripts/src/utils/file-system.utils.ts

@@ -0,0 +1,63 @@
+import { existsSync } from 'fs';
+import {
+  copyFile as fsCopyFile,
+  mkdir,
+  readFile,
+  writeFile
+} from 'fs/promises';
+import { normalize, sep } from 'path';
+
+const BUFFER_ENCODING: BufferEncoding = 'utf-8';
+
+export async function readFileContent<T>(path: string): Promise<T> {
+  const body = await readFile(path, BUFFER_ENCODING);
+  return JSON.parse(body) as T;
+}
+
+export async function createFile(
+  fileName: string,
+  dest: string,
+  body: string
+): Promise<void> {
+  const path = `${dest}/${fileName}`;
+  try {
+    await writeFile(path, body, BUFFER_ENCODING);
+  } catch (err: any) {
+    if (err.code === 'ENOENT') {
+      await createFolderRecursively(dest);
+      await writeFile(path, body, BUFFER_ENCODING);
+    }
+  }
+}
+
+export async function copyFile(src: string, dest: string): Promise<void> {
+  try {
+    await fsCopyFile(src, dest);
+  } catch (err: any) {
+    if (err.code === 'ENOENT') {
+      await createPreviousFolder(dest);
+      await fsCopyFile(src, dest);
+    }
+  }
+}
+
+export async function createFolderRecursively(dest: string): Promise<void> {
+  try {
+    await mkdir(dest);
+  } catch (err: any) {
+    if (err.code === 'ENOENT') {
+      await createPreviousFolder(dest);
+      await createFolderRecursively(dest);
+    }
+  }
+}
+
+async function createPreviousFolder(dest: string): Promise<void> {
+  const folders = normalize(dest).split(sep);
+  folders.pop();
+  await createFolderRecursively(folders.join(sep));
+}
+
+export function pathExist(path: string): boolean {
+  return existsSync(path);
+}

scripts/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["es2022"],
+    "module": "NodeNext",
+    "target": "es2022",
+    "rootDir": "./src",
+    "baseUrl": "./",
+
+    "isolatedModules": true,
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node"
+  },
+  "exclude": ["node_modules"]
+}

src/app/app.component.scss

@@ -1,4 +1,4 @@
-@import '../../node_modules/@igo2/core/style/partial/core.variables';
+@import '@igo2/core/style/partial/core.variables';
 
 :host {
   font-family: Roboto, 'Helvetica Neue', sans-serif;

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import { Component, Renderer2 } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { Title, Meta } from '@angular/platform-browser';
-import { userAgent } from '@igo2/utils';
+import { DomUtils, userAgent } from '@igo2/utils';
 import {
   LanguageService,
   ConfigService,
@@ -9,54 +10,91 @@ import {
 import { AuthOptions } from '@igo2/auth';
 import { AnalyticsListenerService } from '@igo2/integration';
 import { PwaService } from './services/pwa.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { delay, first } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   public authConfig: AuthOptions;
-  private themeClass = 'blue-theme';
   public hasHeader = true;
   public hasFooter = true;
   private promptEvent: any;
+
   constructor(
+    @Inject(DOCUMENT) private document: Document,
     protected languageService: LanguageService,
     private configService: ConfigService,
     private analyticsListenerService: AnalyticsListenerService,
-    private renderer: Renderer2,
     private titleService: Title,
     private metaService: Meta,
     private messageService: MessageService,
-    private pwaService: PwaService
+    private pwaService: PwaService,
+    private router: Router
   ) {
     this.authConfig = this.configService.getConfig('auth');
 
     this.readTitleConfig();
-    this.readThemeConfig();
     this.readDescriptionConfig();
 
     this.analyticsListenerService.listen();
 
     this.detectOldBrowser();
 
     this.hasHeader = this.configService.getConfig('header.hasHeader') === undefined ? false :
-    this.configService.getConfig('header.hasHeader');
+      this.configService.getConfig('header.hasHeader');
 
     this.hasFooter = this.configService.getConfig('hasFooter') === undefined ? false :
-    this.configService.getConfig('hasFooter');
+      this.configService.getConfig('hasFooter');
 
     this.setManifest();
     this.installPrompt();
     this.pwaService.checkForUpdates();
   }
 
+  ngOnInit(): void {
+    this.handleSplashScreen();
+  }
+
+  private handleSplashScreen(): void {
+    this.router.events
+      .pipe(
+        first((events) => events instanceof NavigationEnd),
+        delay(500),
+      )
+      .subscribe(() => {
+        this._removeSplashScreen();
+      });
+  }
+
+  private _removeSplashScreen(): void {
+    const intro = this.document.getElementById('splash-screen');
+    if (!intro) {
+      return;
+    }
+    intro.classList.add('is-destroying');
+
+    const destroyingAnimationTime = 300;
+    const stylesheet = this.document.getElementById('splash-screen-stylesheet');
+
+    setTimeout(() => {
+      DomUtils.remove(intro);
+      DomUtils.remove(stylesheet);
+    }, destroyingAnimationTime);
+  }
+
   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;
+        }
       }
     });
   }
@@ -88,13 +126,6 @@ export class AppComponent {
   }
 
 
-  private readThemeConfig() {
-    const theme = this.configService.getConfig('theme') || this.themeClass;
-    if (theme) {
-      this.renderer.addClass(document.body, theme);
-    }
-  }
-
   private readDescriptionConfig() {
     const description = this.configService.getConfig('description');
     if (description) {

src/app/app.module.ts

@@ -7,7 +7,8 @@ import {
   IgoMessageModule,
   IgoGestureModule,
   RouteService,
-  LanguageService
+  LanguageService,
+  ConfigService
 } from '@igo2/core';
 import { IgoSpinnerModule, IgoStopPropagationModule } from '@igo2/common';
 import { IgoAuthModule } from '@igo2/auth';
@@ -35,6 +36,9 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 
 import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
 import { concatMap, first } from 'rxjs';
+import { loadTheme } from '@igo2/utils';
+
+const DEFAULT_THEME: string = 'blue-theme';
 
 export const defaultTooltipOptions: MatTooltipDefaultOptions = {
   showDelay: 500,
@@ -99,7 +103,7 @@ function appInitializerFactory(
   injector: Injector,
   applicationRef: ApplicationRef
 ) {
-  // ensure to have the proper translations loaded once, whe the app is stable.
+  // 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),
@@ -112,6 +116,9 @@ function appInitializerFactory(
         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();
       });
   });

src/app/pages/portal/portal.variables.scss

@@ -1,4 +1,4 @@
-@import '../node_modules/@igo2/core/style/partial/media';
+@import '@igo2/core/style/partial/media';
 @import 'variables';
 
 $app-footer-height: 48px;