Feature 1361: Sidebar und Header anpassen

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",
@@ -93,7 +98,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",

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",
@@ -93,7 +98,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",

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",
@@ -93,7 +98,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",

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",
@@ -93,7 +98,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",

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,25 @@ export class NgmAuth extends LitElementI18n {
     this.authService.logout();
   }
 
+  static readonly styles = css`
+    ngm-icon {
+      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;
+    }
+  `;
+
   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
+           @click=${this.user ? this.logout : this.login}>
+          <ngm-icon icon='user'></ngm-icon>
       </div>`;
   }
-
-  createRenderRoot() {
-    // no shadow dom
-    return this;
-  }
 }

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';
@@ -26,6 +26,46 @@ export class NgmCursorInformation extends LitElementI18n {
     maximumFractionDigits: 1
   });
 
+  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
+      }
+    }
+  `;
+
   updated() {
     if (this.viewer) {
       if (!this.eventHandler) {
@@ -89,7 +129,7 @@ export class NgmCursorInformation extends LitElementI18n {
       `;
   }
 
-  createRenderRoot() {
-    return this;
-  }
+  // createRenderRoot() {
+  //   return this;
+  // }
 }

ui/src/elements/ngm-side-bar.ts

@@ -5,6 +5,8 @@ import '../layers/ngm-layers';
 import '../layers/ngm-layers-sort';
 import '../layers/ngm-catalog';
 import './dashboard/ngm-dashboard';
+import './sidebar/ngm-menu-item';
+import './shared/ngm-icon';
 import LayersActions from '../layers/LayersActions';
 import {DEFAULT_LAYER_OPACITY, LayerType} from '../constants';
 import defaultLayerTree, {LayerConfig} from '../layertree';
@@ -162,9 +164,15 @@ export class SideBar extends LitElementI18n {
     });
 
     const sliceOptions = getSliceParam();
-    if (sliceOptions && sliceOptions.type && sliceOptions.slicePoints)
+    if (sliceOptions?.type && sliceOptions.slicePoints)
       this.activePanel = 'tools';
   }
+  private createMenuItem(icon: string, title: string, panel: string) {
+    return html`
+      <ngm-menu-item icon=${icon} title=${title} ?isActive=${this.activePanel === panel}
+                               ?isMobile=${this.mobileView} @click=${() => this.togglePanel(panel)}
+      ></ngm-menu-item>`;
+  }
 
   render() {
     if (!this.queryManager) {
@@ -174,16 +182,13 @@ export class SideBar extends LitElementI18n {
     this.queryManager.activeLayers = this.activeLayers
       .filter(config => config.visible && !config.noQuery);
 
-    const shareBtn = html`
-      <div class="ngm-share ${classMap({'ngm-active-section': this.activePanel === 'share'})}"
-           @click=${() => this.togglePanel('share')}>
-        <div class="ngm-share-icon"></div>
-      </div>`;
-    const settingsBtn = html`
-      <div class="ngm-settings ${classMap({'ngm-active-section': this.activePanel === 'settings'})}"
-           @click=${() => this.togglePanel('settings')}>
-        <div class="ngm-settings-icon"></div>
-      </div>`;
+
+    const layerBtn = this.createMenuItem('layer', 'menu_layers', 'data');
+    const toolsBtn = this.createMenuItem('tools', 'menu_tools', 'tools');
+    const projectsBtn = this.createMenuItem('projects', 'menu_projects', 'dashboard');
+    const shareBtn = this.createMenuItem('share', 'menu_share', 'share');
+    const settingsBtn = this.createMenuItem('config', 'menu_settings', 'settings');
+    const mobileExpandBtn = html`<ngm-menu-item icon="${this.mobileShowAll ? 'viewLess' : 'viewAll'}" @click=${() => this.mobileShowAll = !this.mobileShowAll}></ngm-menu-item>`;
     const dataMobileHeader = html`
       <div @click=${() => this.hideDataDisplayed = true}
            class="ngm-data-catalog-label ${classMap({active: this.hideDataDisplayed})}">
@@ -202,31 +207,15 @@ export class SideBar extends LitElementI18n {
         <div></div>
         <div></div>
       </div>
-      <div class="ngm-menu">
-        <div class="ngm-menu-1">
-          <div class="ngm-dashboard ${classMap({'ngm-active-section': this.activePanel === 'dashboard'})}"
-               @click=${() => this.togglePanel('dashboard')}>
-            <div class="ngm-dashboard-icon"></div>
-          </div>
-          <div class="ngm-data ${classMap({'ngm-active-section': this.activePanel === 'data'})}"
-               @click=${() => this.togglePanel('data')}>
-            <div class="ngm-data-icon"></div>
-          </div>
-          <div class="ngm-tools ${classMap({'ngm-active-section': this.activePanel === 'tools'})}"
-               @click=${() => this.togglePanel('tools', false)}>
-            <div class="ngm-tools-icon"></div>
-          </div>
+      <div class="ngm-menu" >
+        <div class="ngm-menu-top">
+          ${layerBtn}
+          ${toolsBtn}
           ${!this.mobileView ? shareBtn : ''}
-          <div .hidden=${!this.mobileView}
-               class="ngm-mob-menu-toggle"
-               @click=${() => this.mobileShowAll = !this.mobileShowAll}>
-            <div class="${classMap({
-      'ngm-view-all-icon': !this.mobileShowAll,
-      'ngm-view-less-icon': this.mobileShowAll
-    })}"></div>
-          </div>
+          ${projectsBtn}
+          ${this.mobileView ? mobileExpandBtn : ''}
         </div>
-        <div .hidden=${this.mobileView} class="ngm-menu-2">
+        <div ?hidden="${this.mobileView}" class="ngm-menu-top">
           ${settingsBtn}
         </div>
       </div>
@@ -461,7 +450,7 @@ export class SideBar extends LitElementI18n {
         if (panelElement) {
           for (let i = 0; i < panelElement.childElementCount; i++) {
             const element = panelElement.children.item(i);
-            if (element && element.classList.contains('accordion')) {
+            if (element?.classList.contains('accordion')) {
               $(element).accordion({duration: 150});
             }
           }
@@ -637,7 +626,7 @@ export class SideBar extends LitElementI18n {
     if (zoomToPosition) {
       let altitude = 0, cartesianPosition: Cartesian3 | undefined, windowPosition: Cartesian2 | undefined;
       const updateValues = () => {
-        altitude = this.viewer!.scene.globe.getHeight(this.viewer!.scene.camera.positionCartographic) || 0;
+        altitude = this.viewer!.scene.globe.getHeight(this.viewer!.scene.camera.positionCartographic) ?? 0;
         cartesianPosition = Cartesian3.fromDegrees(zoomToPosition.longitude, zoomToPosition.latitude, zoomToPosition.height + altitude);
         windowPosition = this.viewer!.scene.cartesianToCanvasCoordinates(cartesianPosition);
       };

ui/src/elements/shared/ngm-icon.ts

@@ -0,0 +1,13 @@
+import {customElement, property} from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {IconKey, icons} from '../../icons/icons';
+
+@customElement('ngm-icon')
+export class Icon extends LitElement {
+  @property()
+  accessor icon: IconKey = 'config';
+
+  render() {
+    return html`${icons[this.icon]}`;
+  }
+}