Merge pull request #1402 from swisstopo/feature/viewer-1361-sidebar-u…

…nd-header-anpassen Feature 1361: Sidebar und Header anpassen
swisstopo · Jan 7, 2025 · 3897a96 · 3897a96
2 parents 824ed82 + 4032dd5
commit 3897a96
Show file tree

Hide file tree

Showing 38 changed files with 943 additions and 833 deletions.
diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json
@@ -1,4 +1,9 @@
 {
+  "menu_layers": "Angezeigte Daten",
+  "menu_tools": "Werkzeuge",
+  "menu_share": "Teilen",
+  "menu_projects": "Projekte",
+  "menu_settings": "Einstellungen",
   "app_cancel_btn_label": "Abbrechen",
   "by": "von",
   "cam_configuration_header": "Kamera-Einstellungen",
@@ -92,7 +97,7 @@
   "dtd_zoom_to": "Heranzoomen",
   "duplicate_to_project": "Zu Projekt duplizieren",
   "edit_project": "Projekt bearbeiten",
-  "header_search_placeholder": "Suche...",
+  "header_search_placeholder": "Suche nach...",
   "lsb_cesium_toolbar_label": "Cesium-Toolbar",
   "lsb_debug_tools": "Debugtools",
   "lsb_settings": "Einstellungen",

diff --git a/ui/locales/app.en.json b/ui/locales/app.en.json
@@ -1,4 +1,9 @@
 {
+  "menu_layers": "Angezeigte Daten",
+  "menu_tools": "Werkzeuge",
+  "menu_share": "Teilen",
+  "menu_projects": "Projekte",
+  "menu_settings": "Einstellungen",
   "app_cancel_btn_label": "Cancel",
   "by": "by",
   "cam_configuration_header": "Camera configuration",
@@ -92,7 +97,7 @@
   "dtd_zoom_to": "Zoom to",
   "duplicate_to_project": "Duplicate to my projects",
   "edit_project": "Edit project",
-  "header_search_placeholder": "Search...",
+  "header_search_placeholder": "Search by...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
   "lsb_settings": "Settings",

diff --git a/ui/locales/app.fr.json b/ui/locales/app.fr.json
@@ -1,4 +1,9 @@
 {
+  "menu_layers": "Données Affichées",
+  "menu_tools": "Outils",
+  "menu_share": "Partager",
+  "menu_projects": "Projets",
+  "menu_settings": "Paramètres",
   "app_cancel_btn_label": "Annuler",
   "by": "de",
   "cam_configuration_header": "Configuration de la caméra",
@@ -92,7 +97,7 @@
   "dtd_zoom_to": "Zoom sur",
   "duplicate_to_project": "Dupliquer comme projet",
   "edit_project": "Editer projet",
-  "header_search_placeholder": "Recherche...",
+  "header_search_placeholder": "Recherche par...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
   "lsb_settings": "Paramètres",

diff --git a/ui/locales/app.it.json b/ui/locales/app.it.json
@@ -1,4 +1,9 @@
 {
+  "menu_layers": "Dati Visualizzati",
+  "menu_tools": "Strumenti",
+  "menu_share": "Condividi",
+  "menu_projects": "Progetti",
+  "menu_settings": "Impostazioni",
   "app_cancel_btn_label": "Cancellare",
   "by": "di",
   "cam_configuration_header": "Configurazione della camera",
@@ -92,7 +97,7 @@
   "dtd_zoom_to": "Zoom su",
   "duplicate_to_project": "Duplicare nei progetti",
   "edit_project": "Editare progetto",
-  "header_search_placeholder": "Ricercare...",
+  "header_search_placeholder": "Ricercare per...",
   "lsb_cesium_toolbar_label": "Cesium Toolbar",
   "lsb_debug_tools": "Debug tools",
   "lsb_settings": "Impostazioni",

diff --git a/ui/src/components/search/search-input.ts b/ui/src/components/search/search-input.ts
@@ -79,8 +79,8 @@ export class SearchInput extends LitElementI18n {
       <ul ${ref(this.resultsRef)} @mouseover="${this.handleResultsHovered}"></ul>
     </ga-search>
 
-    <span class="icon is-close" @click="${this.clear}"></span>
-    <span class="icon is-search" @click="${this.toggleActive}"></span>
+    <ngm-icon icon="search" @click="${this.toggleActive}"></ngm-icon>
+    <ngm-icon icon="close" @click="${this.clear}"></ngm-icon>
   `;
 
   protected updated(changedProperties: PropertyValues<this>): void {
@@ -394,9 +394,9 @@ export class SearchInput extends LitElementI18n {
       align-self: center;
       flex: 2;
 
-      --padding-h: 1rem;
-      --padding-v: 1rem;
-      --icon-size: 24px;
+      --padding-h: 12px;
+      --padding-v: 6px;
+      --icon-size: 20px;
     }
 
     :host {
@@ -410,9 +410,9 @@ export class SearchInput extends LitElementI18n {
     @media (width >= 700px) {
       :host {
         position: relative;
-        height: calc(var(--ngm-header-height) - var(--header-padding-v) * 2);
-        min-width: 260px;
-        max-width: 496px;
+        height: 56px;
+        width: 500px;
+        max-width: 500px;
       }
     }
 
@@ -432,10 +432,9 @@ export class SearchInput extends LitElementI18n {
     @media (min-width: 700px) {
       ga-search, :host(:not(.is-active)) ga-search {
         display: flex;
-        min-width: 260px;
-        max-width: 496px;
+        width: 500px;
+        max-width: 500px;
         z-index: auto;
-        margin-left: 100px;
       }
     }
 
@@ -448,40 +447,23 @@ export class SearchInput extends LitElementI18n {
 
       font-family: var(--font);
       font-size: 1rem;
+      line-height: 24px;
+      letter-spacing: calc(1rem * 0.001);
 
       flex: 1;
       width: 100%;
       height: 100%;
-      padding: var(--padding-v) calc(var(--padding-v) * 2 + var(--icon-size)) var(--padding-v) var(--padding-h);
+      padding: var(--padding-v) var(--padding-h) var(--padding-v) calc(var(--padding-h) * 2 + var(--icon-size));
 
-      border: 2px solid transparent;
-      border-radius: 4px;
-    }
-
-    input:hover {
-      background-color: var(--color-bg);
-    }
-
-    input:focus {
-      background-color: var(--color-highlight);
-    }
-
-    input:focus, input:hover {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-color: transparent;
-      border-bottom-color: var(--color-highlight--dark);
+      border: none;
+      border-bottom: 2px solid var(--color-main);
+      border-radius: 6px;
     }
 
     input::placeholder {
       color: var(--color-bg-contrast);
     }
 
-    input:focus::placeholder {
-      color: var(--color-bg-contrast--lighter);
-      opacity: 1;
-    }
-
     input::-webkit-search-decoration,
     input::-webkit-search-cancel-button,
     input::-webkit-search-results-button,
@@ -504,8 +486,8 @@ export class SearchInput extends LitElementI18n {
       text-align: left;
       font-family: var(--font);
       font-size: 1rem;
-      line-height: 1.5rem;
-      letter-spacing: 0.16px;
+      line-height: 24px;
+      letter-spacing: calc(1rem * 0.001);
     }
 
     ul > li {
@@ -545,45 +527,37 @@ export class SearchInput extends LitElementI18n {
     }
 
     /* icon */
-
-    .icon {
+    ngm-icon {
       width: var(--icon-size);
       height: var(--icon-size);
-      mask: var(--icon, none) no-repeat center;
-      -webkit-mask: var(--icon, none) no-repeat center;
 
-      background-color: var(--color-highlight--darker);
+      color: var(--color-bg-contrast);
       position: absolute;
-      right: var(--padding-h);
+      left: var(--padding-h);
       top: 0;
       bottom: 0;
       margin: auto;
       cursor: pointer;
     }
 
-    .icon.is-close {
-      --icon: url('./images/i_close.svg');
+    ngm-icon[icon="close"] {
       right: calc(var(--padding-h) + 54px)
     }
 
-    .icon.is-search {
-      --icon: url('./images/icon_search.svg');
-    }
-
-    :host(.is-active) .icon.is-search {
+    :host(.is-active) ngm-icon[icon="search"] {
       color: var(--color-highlight);
     }
 
-    ga-search:has(input:placeholder-shown) ~ .icon.is-close {
+    ga-search:has(input:placeholder-shown) ~ ngm-icon[icon="close"] {
       display: none;
     }
 
     @media (min-width: 700px) {
-      .icon.is-close {
-        right: var(--padding-h);
+      ngm-icon[icon="close"] {
+        display: none;
       }
 
-      ga-search:has(input:not(:placeholder-shown)) ~ .icon.is-search {
+      ga-search:has(input:not(:placeholder-shown)) ~ ngm-icon[icon="search"] {
         display: none;
       }
     }

diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
@@ -1,13 +1,13 @@
-import {html} from 'lit';
+import {css, html} from 'lit';
 import type {AuthUser} from '../authService';
 import AuthService from '../authService';
 import {LitElementI18n} from '../i18n.js';
 import auth from '../store/auth';
-import {classMap} from 'lit/directives/class-map.js';
 import {customElement, property, state} from 'lit/decorators.js';
 import DashboardStore from '../store/dashboard';
 import {consume} from '@lit/context';
 import {authServiceContext} from '../context';
+import './shared/ngm-icon';
 
 /**
  * Authentication component
@@ -61,16 +61,28 @@ export class NgmAuth extends LitElementI18n {
     this.authService.logout();
   }
 
-  render() {
-    return html`
-      <div class="ngm-user ${classMap({'ngm-active-section': !!this.user})}"
-           @click=${!this.user ? this.login : this.logout}>
-          <div class="ngm-user-icon"></div>
-      </div>`;
-  }
+  readonly render = () => html`
+    <div @click=${this.user ? this.logout : this.login}>
+      <ngm-icon icon="user"></ngm-icon>
+    </div>
+  `;
 
-  createRenderRoot() {
-    // no shadow dom
-    return this;
-  }
+  static readonly styles = css`
+    div {
+      color: var(--color-bg);
+      background-color: var(--color-main);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    ngm-icon {
+      width: 20px;
+      height: 20px;
+    }
+  `;
 }
diff --git a/ui/src/elements/ngm-cursor-information.ts b/ui/src/elements/ngm-cursor-information.ts
@@ -1,4 +1,4 @@
-import {html} from 'lit';
+import {css, html} from 'lit';
 import i18next from 'i18next';
 import {LitElementI18n} from '../i18n.js';
 import type {Viewer} from 'cesium';
@@ -73,23 +73,62 @@ export class NgmCursorInformation extends LitElementI18n {
   render() {
     if (!this.coordinates || this.height === undefined) return '';
     return html`
-        <div class="ngm-nci-position">
-          <label>${i18next.t('camera_position_coordinates_label')}</label>
-          <label class="ngm-nci-value">${this.coordinates[0]}</label>
-          <label class="ngm-nci-value">${this.coordinates[1]}</label>
+      <div class="ngm-nci-position">
+        <label>${i18next.t('camera_position_coordinates_label')}</label>
+        <label class="ngm-nci-value">${this.coordinates[0]}</label>
+        <label class="ngm-nci-value">${this.coordinates[1]}</label>
+      </div>
+      <div class="ngm-nci-height">
+        <div>
+          ${this.showTerrainHeight ? i18next.t('nav_terrain_height_label') : i18next.t('nav_object_height_label')}
         </div>
-        <div class="ngm-nci-height">
-          <div>
-            ${this.showTerrainHeight ? i18next.t('nav_terrain_height_label') : i18next.t('nav_object_height_label')}
-          </div>
-          <div .hidden=${this.height === undefined} class="ngm-nci-value">
-            ${this.height !== undefined && this.integerFormat.format(this.height)} m
-          </div>
+        <div .hidden=${this.height === undefined} class="ngm-nci-value">
+          ${this.height !== undefined && this.integerFormat.format(this.height)} m
         </div>
-      `;
+      </div>
+    `;
   }
 
-  createRenderRoot() {
-    return this;
-  }
+
+  static readonly styles = css`
+    :host {
+      min-width: 0;
+    }
+
+    .ngm-nci-height,
+    .ngm-nci-position {
+      display: none;
+    }
+
+    @media (min-width: 1200px) {
+      :host .ngm-nci-value {
+        font-weight: 600;
+        min-width: 75px;
+      }
+
+      .ngm-nci-position {
+        display: unset;
+        width: 83px;
+        margin-right: 20px;
+      }
+
+      .ngm-nci-height {
+        display: flex;
+        flex-direction: column;
+        white-space: nowrap;
+        margin-right: 10px;
+      }
+
+      :host {
+        flex-wrap: wrap;
+        align-self: center;
+        color: #212529;
+        text-align: left;
+        font: normal normal normal 14px/20px Inter, sans-serif;
+        letter-spacing: 0;
+        min-width: 255px;
+        padding-right:48px
+      }
+    }
+  `;
 }