Pr fixes

swisstopo · Dec 17, 2024 · 3c6be15 · 3c6be15
1 parent e205457
commit 3c6be15
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 220 deletions.
diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
@@ -3,7 +3,6 @@ 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';
@@ -63,17 +62,17 @@ export class NgmAuth extends LitElementI18n {
   }
 
   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;
-  }
+    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() {

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';
@@ -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;
+  // }
 }
diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
@@ -1,4 +1,4 @@
-import {css, html} from 'lit';
+import {html} from 'lit';
 import {LitElementI18n} from '../i18n.js';
 import '../toolbox/ngm-toolbox';
 import '../layers/ngm-layers';
@@ -168,7 +168,10 @@ export class SideBar extends LitElementI18n {
       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('data')}></ngm-menu-item>`;
+    return html`
+      <ngm-menu-item icon=${icon} title=${title} ?isActive=${this.activePanel === panel}
+                               ?isMobile=${this.mobileView} @click=${() => this.togglePanel(panel)}
+      ></ngm-menu-item>`;
   }
 
   render() {
@@ -185,12 +188,7 @@ export class SideBar extends LitElementI18n {
     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 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 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})}">

diff --git a/ui/src/elements/shared/ngm-lang-selector.ts b/ui/src/elements/shared/ngm-lang-selector.ts
diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts
@@ -13,17 +13,12 @@ export class MenuItem extends LitElementI18n {
   accessor title: string = '';
   @property()
   accessor icon: IconKey = 'config';
-  @property({type: Boolean})
+  @property({type: Boolean, attribute: 'isactive', reflect: true})
   accessor isActive: boolean = false;
   @property({type: Boolean})
   accessor isMobile: boolean = false;
 
-  constructor() {
-    super();
-  }
-
   static readonly styles = css`
-
     :host {
       position: relative;
       width: 68px;
@@ -36,98 +31,85 @@ export class MenuItem extends LitElementI18n {
       z-index: 10;
     }
 
-    :host > .container,
-    :host > .container:active {
+    :host > .container {
       position: relative;
       text-decoration: none;
       width: 100%;
       height: 100%;
       cursor: pointer;
     }
 
-    .container {
-      .box > .icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 58px;
-        height: 40px;
-
-        transition: ease-out 100ms;
-        transition-property: color, background-color;
-      }
-
-      .box {
-        position: absolute;
-        width: 58px;
-        min-width: 58px;
-        left: 0;
-        top: 9px;
-        height: 40px;
-
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        border-radius: 4px;
-
-        transition: ease-out 100ms;
-        transition-property: color;
-        background-color: transparent;
-        color: var(--color-main);
+    .container .box {
+      position: absolute;
+      width: 58px;
+      min-width: 58px;
+      left: 0;
+      top: 9px;
+      height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-radius: 4px;
+      background-color: transparent;
+      color: var(--color-main);
+      transition: ease-out 100ms;
+      transition-property: color, background-color;
+    }
 
-        .icon {
-          color: var(--color-main);
-        }
+    .container .box > .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 58px;
+      height: 40px;
+      color: var(--color-main);
+    }
 
-        & > .title {
-          transform: scaleX(0);
-          transition: ease-out 100ms;
-          transition-property: transform;
-          transform-origin: left;
-        }
-      }
+    .container .box > .title {
+      transform: scaleX(0);
+      transition: ease-out 100ms;
+      transition-property: transform;
+      transform-origin: left;
     }
 
     .container:hover .box {
-        background-color: var(--color-main);
-        color: var(--color-bg);
-        width: unset;
-        white-space: nowrap;
+      background-color: var(--color-main);
+      color: var(--color-bg);
+      width: unset;
+      white-space: nowrap;
+    }
 
-        & > .title {
-          transform: scaleX(1);
-        }
+    .container:hover .box > .title {
+      transform: scaleX(1);
+    }
 
-        .icon {
-          color: var(--color-bg);
-        }
-      }
+    .container:hover .box .icon {
+      color: var(--color-bg);
+    }
 
-    @media (min-height: 629px) and (min-width: 599px)  {
+    @media (min-width: 599px) {
       .container:hover .box {
         padding-right: 22px;
       }
     }
 
-    .container .isActive {
+    :host([isactive]) .container .box {
       background-color: var(--color-active);
-
-      .icon {
-        color: var(--color-bg);
-      }
     }
 
+    :host([isactive]) .container .box .icon {
+      color: var(--color-bg);
+    }
   `;
 
   render() {
     return html`
-      <div class="container ">
+      <div class="container">
         <div class="box ${classMap({'isActive': this.isActive})}">
           <div class="icon">
             <ngm-icon icon=${this.icon}></ngm-icon>
           </div>
-          <div class="title" translate ?hidden="${this.isMobile}">
+          <div class="title" ?hidden="${this.isMobile}">
             ${i18next.t(this.title)}
           </div>
         </div>

diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts
@@ -16,8 +16,8 @@ export const icons = {
   tools: toolsIcon,
   share: shareIcon,
   user: userIcon,
-  view_all: viewAllIcon,
-  view_less: viewLessIcon,
+  viewAll: viewAllIcon,
+  viewLess: viewLessIcon,
 };
 
 export type IconKey = keyof typeof icons;
diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
@@ -22,7 +22,6 @@ import './elements/ngm-wmts-date-picker';
 import 'fomantic-ui-css/components/dropdown';
 import './elements/shared/ngm-icon';
 import '@geoblocks/cesium-view-cube';
-import './elements/shared/ngm-lang-selector';
 
 import {COGNITO_VARIABLES, DEFAULT_VIEW, SUPPORTED_LANGUAGES} from './constants';
 
@@ -432,8 +431,7 @@ export class NgmApp extends LitElementI18n {
         <div
           class="ngm-search-icon-mobile ngm-search-icon visible-mobile ${classMap({'active': this.showMobileSearch})}"
           @click="${() => this.showMobileSearch = !this.showMobileSearch}"></div>
-        <ngm-cursor-information class="hidden-mobile" .viewer="${this.viewer}" style="padding-right:48px"></ngm-cursor-information>
-<!--       <ngm-lang-selector></ngm-lang-selector>-->
+        <ngm-cursor-information class="hidden-mobile" .viewer="${this.viewer}" ></ngm-cursor-information>
         <div class="ui dropdown ngm-lang-dropdown">
             <div class="ngm-lang-title">
               ${i18next.language?.toUpperCase()}
@@ -444,7 +442,7 @@ export class NgmApp extends LitElementI18n {
           <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">
+                <div class="ngm-lang-item">
                   <ngm-icon style="${styleMap({'visibility': i18next.language?.toUpperCase() === lang?.toUpperCase() ? 'visible' : 'hidden'})}" icon="checkmark"></ngm-icon>
                   <span>${lang.toUpperCase()}</span>
                 </div>