Merge pull request #1403 from swisstopo/feature/viewer-1366-struktur-…

…datenpanel-anpassen

Feature 1366: Struktur Datenpanel anpassen

ui/locales/app.de.json

@@ -62,7 +62,6 @@
   "dtd_cant_upload_kml_error": "Fehler beim Hochladen von KML",
   "dtd_change_order_label": "Anordnen",
   "dtd_clamp_to_ground": "Auf Terrain legen",
-  "dtd_configure_data_btn": "Angezeigte Daten konfigurieren",
   "dtd_displayed_data_label": "Angezeigte Daten",
   "dtd_download_hint": "Herunterladen / Legende",
   "dtd_empty_map_label": "Kein Hintergrund",

ui/locales/app.en.json

@@ -62,7 +62,6 @@
   "dtd_cant_upload_kml_error": "Error while uploading KML",
   "dtd_change_order_label": "Change order",
   "dtd_clamp_to_ground": "Clamp to terrain",
-  "dtd_configure_data_btn": "Configure data displayed",
   "dtd_displayed_data_label": "Data displayed",
   "dtd_download_hint": "Download / Legend",
   "dtd_empty_map_label": "No background",

ui/locales/app.fr.json

@@ -62,7 +62,6 @@
   "dtd_cant_upload_kml_error": "Erreur lors du téléchargement de KML",
   "dtd_change_order_label": "Réarranger",
   "dtd_clamp_to_ground": "Fixation au terrain",
-  "dtd_configure_data_btn": "Configurer les données affichées",
   "dtd_displayed_data_label": "Données affichées",
   "dtd_download_hint": "Télécharger / Légende",
   "dtd_empty_map_label": "Sans arrière-plan",

ui/locales/app.it.json

@@ -62,7 +62,6 @@
   "dtd_cant_upload_kml_error": "Errore nel download di KML",
   "dtd_change_order_label": "Riordinare",
   "dtd_clamp_to_ground": "Morsetto al terreno",
-  "dtd_configure_data_btn": "Configurare i dati visualizzati ",
   "dtd_displayed_data_label": "Dati mostrati",
   "dtd_download_hint": "Scaricare / Scala",
   "dtd_empty_map_label": "Senza sfondo",

ui/package.json

@@ -9,7 +9,7 @@
     "start": "npm run build:static && npm run webpack:serve",
     "build": "npm run build:clean && npm run build:static && npm run build:js",
     "build:clean": "rimraf dist/",
-    "build:static": "concurrently \"npm run build:static:environment\" \"npm run build:static:manuals\" \"npm run build:static:legal\" \"npm run build:static:versions\"",
+    "build:static": "npm run build:static:environment && npm run build:static:manuals && npm run build:static:legal && npm run build:static:versions",
     "build:static:environment": "node scripts/environment.js",
     "build:static:manuals": "node scripts/generate_manuals.js",
     "build:static:legal": "node scripts/legal_md_to_html.js",
@@ -108,6 +108,7 @@
     "source-map-loader": "5.0.0",
     "start-server-and-test": "2.0.8",
     "stream-to-promise": "3.0.0",
+    "style-loader": "^4.0.0",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.6.3",

ui/rollup.config.js

@@ -64,12 +64,12 @@ const config = {
         ],
         [
           '@babel/preset-env', {
-            //debug: true, // disable to get debug information
-            modules: false,
+          //debug: true, // disable to get debug information
+          modules: false,
 
-            useBuiltIns: 'usage', // required to determine list of polyfills according to browserlist
-            corejs: {version: 3, proposals: false},
-          }
+          useBuiltIns: 'usage', // required to determine list of polyfills according to browserlist
+          corejs: {version: 3, proposals: false},
+        }
         ]
       ],
       // exclude: 'node_modules/**'

ui/scripts/extract_versions.js

@@ -3,6 +3,8 @@ import * as path from 'node:path';
 
 import * as util from 'node:util';
 import {exec as execSync} from 'node:child_process';
+import {mkdirSync} from 'fs';
+import {dirname} from 'path';
 const exec = util.promisify(execSync);
 
 const cesiumPackagePath = path.resolve(import.meta.dirname, '../node_modules/cesium/package.json');
@@ -23,6 +25,7 @@ const date = new Intl.DateTimeFormat('en-CA', {
 }).format(now).replace(', ', 'T').replace(' GMT', '');
 
 const versionsFilePath = path.resolve(import.meta.dirname, '../dist/versions.json');
+mkdirSync(dirname(versionsFilePath), {recursive: true});
 writeFileSync(versionsFilePath, JSON.stringify({
   build: date,
   commit_hash: commitHash,

ui/src/components/core/core-button.ts

@@ -0,0 +1,44 @@
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('ngm-core-button')
+export class CoreButton extends LitElement {
+  @property({reflect: true})
+  accessor variant: Variant = 'default';
+
+  @property({type: Boolean, attribute: 'active', reflect: true})
+  accessor isActive: boolean = false;
+
+  readonly render = () => html`
+    <button>
+      <slot></slot>
+    </button>
+  `;
+
+  static readonly styles = css`
+    button {
+      font-family: var(--font);
+      font-size: 14px;
+    }
+
+    :host([variant='text']) button {
+      color: var(--color-highlight--darker);
+
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    :host([variant='text'][active]) button {
+      color: var(--color-action);
+    }
+
+    :host([variant='text']) button:hover {
+      color: var(--color-action--light);
+    }
+  `;
+}
+
+export type Variant =
+  | 'default'
+  | 'text'

ui/src/components/core/core-icon.ts

@@ -0,0 +1,49 @@
+import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('ngm-core-icon')
+export class CoreIcon extends LitElement {
+  @property()
+  accessor icon: IconName | null = null;
+
+  @property({type: Boolean, attribute: 'interactive'})
+  accessor isInteractive: boolean = false;
+
+  readonly render = () => html``;
+
+  static readonly styles = css`
+    :host {
+      display: inline-block;
+
+      --size: var(--icon-size--normal);
+      width: var(--size);
+      height: var(--size);
+      background-color: var(--color-bg-contrast);
+
+      mask: var(--mask, none) no-repeat center;
+      -webkit-mask: var(--mask, none) no-repeat center;
+
+      /* Hide element if no valid icon has been specified. */
+      visibility: hidden;
+    }
+
+    :host([interactive]:hover) {
+      cursor: pointer;
+      background-color: var(--color-action);
+    }
+
+    :host([icon='close']) {
+      visibility: initial;
+      --mask: url('images/i_close.svg');
+    }
+
+    :host([icon='dropdown']) {
+      visibility: initial;
+      --mask: url('images/i_menu-1.svg')
+    }
+  `;
+}
+
+export type IconName =
+  | 'close'
+  | 'dropdown'

ui/src/components/core/index.ts

@@ -0,0 +1,2 @@
+import './core-button';
+import './core-icon';