Fix header suffix style

swisstopo · Jan 7, 2025 · 44b1bb9 · 44b1bb9
1 parent df3f2c3
commit 44b1bb9
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 8 deletions.
diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
@@ -62,14 +62,13 @@ export class NgmAuth extends LitElementI18n {
   }
 
   readonly render = () => html`
-    <div
-       @click=${this.user ? this.logout : this.login}>
+    <div @click=${this.user ? this.logout : this.login}>
       <ngm-icon icon="user"></ngm-icon>
     </div>
   `;
 
   static readonly styles = css`
-    ngm-icon {
+    div {
       color: var(--color-bg);
       background-color: var(--color-main);
       width: 36px;
@@ -80,5 +79,10 @@ export class NgmAuth extends LitElementI18n {
       align-items: center;
       cursor: pointer;
     }
+
+    ngm-icon {
+      width: 20px;
+      height: 20px;
+    }
   `;
 }
diff --git a/ui/src/icons/i_close.ts b/ui/src/icons/i_close.ts
@@ -2,6 +2,6 @@ import {html} from 'lit';
 
 export const closeIcon = html`
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.71008 18.2898L18.2898 5.71009M18.2899 18.2898L5.71014 5.71008" stroke="#1C2834" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M5.71008 18.2898L18.2898 5.71009M18.2899 18.2898L5.71014 5.71008" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
   </svg>
 `;
diff --git a/ui/src/icons/i_dropdown.ts b/ui/src/icons/i_dropdown.ts
@@ -0,0 +1,7 @@
+import {html} from 'lit';
+
+export const dropdownIcon = html`
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 9.5L12 16.5L19 9.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts
@@ -9,11 +9,13 @@ import {userIcon} from './i_user';
 import {checkmarkIcon} from './i_checkmark';
 import {searchIcon} from './i_search';
 import {closeIcon} from './i_close';
+import {dropdownIcon} from './i_dropdown';
 
 export const icons = {
   checkmark: checkmarkIcon,
   close: closeIcon,
   config: configIcon,
+  dropdown: dropdownIcon,
   layer: layerIcon,
   projects: projectsIcon,
   search: searchIcon,

diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
@@ -1,5 +1,5 @@
 import {LitElementI18n} from './i18n';
-import {css, html, PropertyValues} from 'lit';
+import {html, PropertyValues} from 'lit';
 import './elements/ngm-side-bar';
 import './elements/ngm-full-screen-view';
 import './elements/ngm-object-information';
@@ -250,6 +250,8 @@ export class NgmApp extends LitElementI18n {
   }
 
   async firstUpdated() {
+    this.querySelectorAll('.menu').forEach((it) => $(it).dropdown());
+
     setTimeout(() => this.determinateLoading = true, 3000);
     setupI18n();
     rewriteParams();
@@ -429,7 +431,7 @@ export class NgmApp extends LitElementI18n {
           <div class="ui dropdown ngm-lang-dropdown">
           <div class="ngm-lang-title">
             ${i18next.language?.toUpperCase()}
-            <div class="ngm-dropdown-icon"></div>
+            <ngm-icon icon="dropdown" />
           </div>
           <div class="menu">
             ${SUPPORTED_LANGUAGES.map(lang => html`

diff --git a/ui/src/style/header.css b/ui/src/style/header.css
@@ -80,6 +80,7 @@ header .ngm-header-suffix {
   max-width: var(--suffix-width);
   display: flex;
   align-items: center;
+  gap: 8px;
 }
 
 @media (min-width: 700px) {

diff --git a/ui/src/style/index.css b/ui/src/style/index.css
@@ -205,12 +205,25 @@ cesium-view-cube {
 
 .ngm-lang-dropdown {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  margin-right: 20px;
+  gap: 6px;
+  width: 69px;
+
+  padding: 8px 12px;
+  border-radius: 4px;
   color: var(--color-main);
 }
 
+.ngm-lang-dropdown:hover {
+  background-color: var(--color-hovered);
+  color: var(--color-main--dark);
+}
+
+.ngm-lang-dropdown.active ngm-icon[icon="dropdown"] {
+  transform: rotate(180deg);
+}
+
 .ngm-lang-title {
   display: flex;
   justify-content: center;
@@ -226,13 +239,24 @@ cesium-view-cube {
   gap: 12px;
   width: 85px;
   font-size: 14px;
+  font: var(--font);
+  line-height: 20px;
+  letter-spacing: calc(14px * 0.0025);
+}
+
+.ngm-lang-item:hover {
+  background-color: var(--color-pressed);
 }
 
 .ngm-lang-title .ngm-dropdown-icon {
   background-color: var(--ngm-interaction);
   transform: rotate(90deg);
 }
 
+.ui.dropdown .menu .ngm-lang-dropdown.active.item {
+  font-weight: 500;
+}
+
 .ngm-lang-dropdown.active .ngm-lang-title .ngm-dropdown-icon {
   transform: rotate(-90deg);
 }

diff --git a/ui/src/styles/index.css b/ui/src/styles/index.css
@@ -11,6 +11,11 @@
     --color-highlight--darker: #0B7285;
 
     --color-main: #337083;
+    --color-main--dark: #2F4356;
+
+    --color-hovered: #D6E2E6;
+    --color-pressed: #DFE4E9;
+
     --color-active: #607D52;
 
     --color-action: #a83526;