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

@@ -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

@@ -16,6 +16,18 @@ const cesiumSource = 'node_modules/cesium/Source';
 const cesiumWorkers = '../Build/Cesium/Workers';
 const extensions = ['.ts', '.js'];
 
+const postcssPlugins = [
+  inlinesvg(),
+  cssimport({
+    plugins: [
+      postcssurl([
+        {filter: '**/*.+(woff|woff2)', url: (asset) => `fonts/${path.basename(asset.url)}`},
+      ])
+    ]
+  }),
+  autoprefixer()
+];
+
 const config = {
   input: 'src/index.ts',
   output: [{
@@ -27,18 +39,14 @@ const config = {
     postcss({
       minimize: true,
       inject: false,
-      extract: 'index.css',
-      plugins: [
-        inlinesvg(),
-        cssimport({
-          plugins: [
-            postcssurl([
-              {filter: '**/*.+(woff|woff2)', url: (asset) => `fonts/${path.basename(asset.url)}`},
-            ])
-          ]
-        }),
-        autoprefixer()
-      ]
+      extract: false,
+      plugins: postcssPlugins,
+    }),
+    postcss({
+      minimize: true,
+      inject: false,
+      extract: '**/style/index.css',
+      plugins: postcssPlugins,
     }),
     json(),
     resolve({

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';