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,4 +1,4 @@
-import {html} from 'lit';
+import {css, html} from 'lit';
 import type {AuthUser} from '../authService';
 import AuthService from '../authService';
 import {LitElementI18n} from '../i18n.js';
@@ -8,6 +8,7 @@ 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
@@ -21,6 +22,7 @@ export class NgmAuth extends LitElementI18n {
   @state()
   accessor user: AuthUser | null = null;
   private popup: Window | null = null;
+  private readonly icon = 'user';
 
   @consume({context: authServiceContext})
   accessor authService!: AuthService;
@@ -61,16 +63,30 @@ 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})}"
+      <div
            @click=${!this.user ? this.login : this.logout}>
-          <div class="ngm-user-icon"></div>
+          <ngm-icon icon=${this.icon}></ngm-icon>
       </div>`;
   }
 
-  createRenderRoot() {
-    // no shadow dom
-    return this;
-  }
+  // createRenderRoot() {
+  //   // no shadow dom
+  //   return this;
+  // }
 }

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

@@ -1,10 +1,12 @@
-import {html} from 'lit';
+import {css, html} from 'lit';
 import {LitElementI18n} from '../i18n.js';
 import '../toolbox/ngm-toolbox';
 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';
@@ -91,7 +93,7 @@ export class SideBar extends LitElementI18n {
   private zoomedToPosition = false;
   private accordionInited = false;
   private shareListenerAdded = false;
-  private shareDownListener = evt => {
+  private readonly shareDownListener = evt => {
     if (!evt.composedPath().includes(this)) this.activePanel = null;
   };
 
@@ -162,7 +164,7 @@ export class SideBar extends LitElementI18n {
     });
 
     const sliceOptions = getSliceParam();
-    if (sliceOptions && sliceOptions.type && sliceOptions.slicePoints)
+    if (sliceOptions?.type && sliceOptions.slicePoints)
       this.activePanel = 'tools';
   }
 
@@ -174,16 +176,12 @@ 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 = html`<ngm-menu-item icon="layer" title="menu_layers" ?isActive="${this.activePanel === 'data'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('data')}></ngm-menu-item>`;
+    const toolsBtn = html`<ngm-menu-item icon="tools" title="menu_tools" ?isActive="${this.activePanel === 'tools'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('tools')}></ngm-menu-item>`;
+    const projectsBtn = html`<ngm-menu-item icon="projects" title="menu_projects" ?isActive="${this.activePanel === 'dashboard'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('dashboard')}></ngm-menu-item>`;
+    const shareBtn = html`<ngm-menu-item icon="share" title="menu_share" ?isActive="${this.activePanel === 'share'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('share')}></ngm-menu-item>`;
+    const settingsBtn = html`<ngm-menu-item icon="config" title="menu_settings" ?isActive="${this.activePanel === 'settings'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('settings')}></ngm-menu-item>`;
+    const mobileExpandBtn = html`<ngm-menu-item icon="${this.mobileShowAll ? 'view_less' : 'view_all'}" @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 +200,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>
@@ -378,7 +360,7 @@ export class SideBar extends LitElementI18n {
       }
       layer.visible = urlLayer.visible;
       layer.opacity = urlLayer.opacity;
-      layer.wmtsCurrentTime = urlLayer.timestamp || layer.wmtsCurrentTime;
+      layer.wmtsCurrentTime = urlLayer.timestamp ?? layer.wmtsCurrentTime;
       layer.setOpacity && layer.setOpacity(layer.opacity);
       layer.displayed = true;
       layer.setVisibility && layer.setVisibility(layer.visible);
@@ -395,7 +377,7 @@ export class SideBar extends LitElementI18n {
           type: LayerType.tiles3d,
           assetId: Number(assetId),
           ionToken: ionToken,
-          label: ionAsset?.name || assetId,
+          label: ionAsset?.name ?? assetId,
           layer: assetId,
           visible: true,
           displayed: true,
@@ -461,7 +443,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});
             }
           }
@@ -607,12 +589,12 @@ export class SideBar extends LitElementI18n {
       config = searchLayer;
       config.visible = true;
       config.origin = 'layer';
-      config.label = searchLayer.title || searchLayer.label;
+      config.label = searchLayer.title ?? searchLayer.label;
       config.legend = config.type === LayerType.swisstopoWMTS ? config.layer : undefined;
     } else {
       config = {
         type: LayerType.swisstopoWMTS,
-        label: searchLayer.title || searchLayer.label,
+        label: searchLayer.title ?? searchLayer.label,
         layer: searchLayer.layer,
         visible: true,
         displayed: true,
@@ -637,7 +619,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]}`;
+  }
+}

ui/src/elements/shared/ngm-lang-selector.ts

@@ -0,0 +1,61 @@
+import {customElement} from 'lit/decorators.js';
+import {LitElementI18n} from '../../i18n';
+import {css, html} from 'lit';
+import {SUPPORTED_LANGUAGES} from '../../constants';
+import {styleMap} from 'lit/directives/style-map.js';
+import i18next from 'i18next';
+import 'fomantic-ui-css/components/dropdown.js';
+import $ from '../../jquery';
+
+@customElement('ngm-lang-selector')
+export class NgmLangSelector extends LitElementI18n {
+
+  static readonly styles = css`
+    .ngm-lang-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      gap: 12px;
+      width: 85px;
+      font-size: 14px;
+    }
+  `;
+
+  firstUpdated() {
+    this.initializeDropdown();
+  }
+
+  protected updated() {
+    this.initializeDropdown();
+    super.updated();
+  }
+
+  initializeDropdown() {
+    this.querySelectorAll('.ui.dropdown').forEach(elem => $(elem).dropdown({
+      direction: 'downward'
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="ui dropdown ngm-lang-dropdown">
+        <div class="ngm-lang-title">
+          ${i18next.language?.toUpperCase()}
+          <div class="ngm-dropdown-icon"></div>
+          <ngm-icon icon="ngm-dropdown-icon"></ngm-icon>
+        </div>
+        <div class="menu">
+          ${SUPPORTED_LANGUAGES.map(lang => html`
+            <div class="item" @click="${() => i18next.changeLanguage(lang)}" style="padding: 0">
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; gap: 12px; width: 85px; font-size: 14px">
+                <ngm-icon style="${styleMap({'visibility': i18next.language?.toUpperCase() === lang?.toUpperCase() ? 'visible' : 'hidden'})}" icon="checkmark"></ngm-icon>
+                <span>${lang.toUpperCase()}</span>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}