-
-
`;
- }
+ readonly render = () => html`
+
+
+ `;
- 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
index ec909c66c..3419f6102 100644
--- 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`
-
-
-
-
+
+
+
+
+
+
+ this.togglePanel(panel)}
+ >
+ `;
+
render() {
if (!this.queryManager) {
return '';
@@ -193,16 +205,17 @@ export class SideBar extends LitElementI18n {
this.queryManager.activeLayers = this.activeLayers
.filter(config => config.visible && !config.noQuery);
- const shareBtn = html`
- this.mobileShowAll = !this.mobileShowAll}
+ > `;
return html`
-
+ ${this.showTerrainHeight ? i18next.t('nav_terrain_height_label') : i18next.t('nav_object_height_label')}
-
-
+ `;
}
- 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
+ }
+ }
+ `;
}
diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
index 2358a7a63..56c36bf6e 100644
--- a/ui/src/elements/ngm-side-bar.ts
+++ b/ui/src/elements/ngm-side-bar.ts
@@ -4,6 +4,8 @@ import '../toolbox/ngm-toolbox';
import '../layers/ngm-layers';
import '../layers/ngm-layers-sort';
import './dashboard/ngm-dashboard';
+import './sidebar/ngm-menu-item';
+import './shared/ngm-icon';
import '../components/navigation/navigation-layer-panel';
import LayersActions from '../layers/LayersActions';
import {DEFAULT_LAYER_OPACITY, LayerType} from '../constants';
@@ -181,10 +183,20 @@ export class SideBar extends LitElementI18n {
});
const sliceOptions = getSliceParam();
- if (sliceOptions && sliceOptions.type && sliceOptions.slicePoints)
+ if (sliceOptions?.type && sliceOptions.slicePoints)
this.activePanel = 'tools';
}
+ private readonly renderMenuItem = (icon: string, title: string, panel: string) => html`
+
- ${this.showTerrainHeight ? i18next.t('nav_terrain_height_label') : i18next.t('nav_object_height_label')}
-
-
- ${this.height !== undefined && this.integerFormat.format(this.height)} m
-
+
+ ${this.height !== undefined && this.integerFormat.format(this.height)} m
- `;
+ this.togglePanel('share')}>
-
-
`;
- const settingsBtn = html`
- this.togglePanel('settings')}>
-
-
`;
+
+ const layerBtn = this.renderMenuItem('layer', 'menu_layers', 'data');
+ const toolsBtn = this.renderMenuItem('tools', 'menu_tools', 'tools');
+ const projectsBtn = this.renderMenuItem('projects', 'menu_projects', 'dashboard');
+ const shareBtn = this.renderMenuItem('share', 'menu_share', 'share');
+ const settingsBtn = this.renderMenuItem('config', 'menu_settings', 'settings');
+ const mobileExpandBtn = html`
+
-
-
this.togglePanel('dashboard')}>
-
-
- this.togglePanel('data')}>
-
-
- this.togglePanel('tools', false)}>
-
-
+
+
-
@@ -300,7 +297,6 @@ export class SideBar extends LitElementI18n {
return;
}
this.activePanel = panelName;
- // if (this.activePanel === 'data' && !this.mobileView) this.hideDataDisplayed = false;
}
async syncActiveLayers() {
@@ -417,7 +413,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});
}
}
@@ -559,7 +555,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);
};
diff --git a/ui/src/elements/shared/ngm-icon.ts b/ui/src/elements/shared/ngm-icon.ts
new file mode 100644
index 000000000..f369a816e
--- /dev/null
+++ b/ui/src/elements/shared/ngm-icon.ts
@@ -0,0 +1,25 @@
+import {customElement, property} from 'lit/decorators.js';
+import {css, 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]}`;
+ }
+
+ static readonly styles = css`
+ :host {
+ width: 24px;
+ height: 24px;
+ }
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ `;
+}
diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts
new file mode 100644
index 000000000..c66a458e1
--- /dev/null
+++ b/ui/src/elements/sidebar/ngm-menu-item.ts
@@ -0,0 +1,119 @@
+import {customElement, property} from 'lit/decorators.js';
+import {LitElementI18n} from '../../i18n.js';
+import {css, html} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
+import {IconKey} from '../../icons/icons';
+import i18next from 'i18next';
+import '../shared/ngm-icon';
+
+
+@customElement('ngm-menu-item')
+export class MenuItem extends LitElementI18n {
+ @property({type: String})
+ accessor title: string = '';
+ @property()
+ accessor icon: IconKey = 'config';
+ @property({type: Boolean, attribute: 'isactive', reflect: true})
+ accessor isActive: boolean = false;
+ @property({type: Boolean})
+ accessor isMobile: boolean = false;
+
+ static readonly styles = css`
+ :host {
+ position: relative;
+ width: 68px;
+ height: 58px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--color-main);
+ padding-inline: 5px;
+ z-index: 10;
+ }
+
+ :host > .container {
+ position: relative;
+ text-decoration: none;
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ }
+
+ .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;
+ }
+
+ .container .box > .icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 58px;
+ height: 40px;
+ color: var(--color-main);
+ }
+
+ .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;
+ }
+
+ .container:hover .box > .title {
+ transform: scaleX(1);
+ }
+
+ .container:hover .box .icon {
+ color: var(--color-bg);
+ }
+
+ @media (min-width: 599px) {
+ .container:hover .box {
+ padding-right: 22px;
+ }
+ }
+
+ :host([isactive]) .container .box {
+ background-color: var(--color-active);
+ }
+
+ :host([isactive]) .container .box .icon {
+ color: var(--color-bg);
+ }
+ `;
+
+ render() {
+ return html`
+
-
- 
- 
-
+
+ `;
+ }
+}
diff --git a/ui/src/icons/i_checkmark.ts b/ui/src/icons/i_checkmark.ts
new file mode 100644
index 000000000..b11fd9adb
--- /dev/null
+++ b/ui/src/icons/i_checkmark.ts
@@ -0,0 +1,8 @@
+import {html} from 'lit';
+
+export const checkmarkIcon = html`
+`;
diff --git a/ui/src/icons/i_close.ts b/ui/src/icons/i_close.ts
new file mode 100644
index 000000000..a0cb0d77f
--- /dev/null
+++ b/ui/src/icons/i_close.ts
@@ -0,0 +1,7 @@
+import {html} from 'lit';
+
+export const closeIcon = html`
+
+`;
diff --git a/ui/src/icons/i_config.ts b/ui/src/icons/i_config.ts
new file mode 100644
index 000000000..e91ad3ea5
--- /dev/null
+++ b/ui/src/icons/i_config.ts
@@ -0,0 +1,8 @@
+import {html} from 'lit';
+
+export const configIcon = html``;
+
+
diff --git a/ui/src/icons/i_dropdown.ts b/ui/src/icons/i_dropdown.ts
new file mode 100644
index 000000000..70a32a9a2
--- /dev/null
+++ b/ui/src/icons/i_dropdown.ts
@@ -0,0 +1,7 @@
+import {html} from 'lit';
+
+export const dropdownIcon = html`
+
+`;
diff --git a/ui/src/icons/i_layer.ts b/ui/src/icons/i_layer.ts
new file mode 100644
index 000000000..b21e6223b
--- /dev/null
+++ b/ui/src/icons/i_layer.ts
@@ -0,0 +1,5 @@
+import {html} from 'lit';
+
+export const layerIcon = html``;
diff --git a/ui/src/icons/i_projects.ts b/ui/src/icons/i_projects.ts
new file mode 100644
index 000000000..22b91d676
--- /dev/null
+++ b/ui/src/icons/i_projects.ts
@@ -0,0 +1,5 @@
+import {html} from 'lit';
+
+export const projectsIcon = html``;
diff --git a/ui/src/icons/i_search.ts b/ui/src/icons/i_search.ts
new file mode 100644
index 000000000..e0b59d40b
--- /dev/null
+++ b/ui/src/icons/i_search.ts
@@ -0,0 +1,7 @@
+import {html} from 'lit';
+
+export const searchIcon = html`
+
+`;
diff --git a/ui/src/icons/i_share.ts b/ui/src/icons/i_share.ts
new file mode 100644
index 000000000..f01d623cf
--- /dev/null
+++ b/ui/src/icons/i_share.ts
@@ -0,0 +1,5 @@
+import {html} from 'lit';
+
+export const shareIcon = html``;
diff --git a/ui/src/icons/i_tools.ts b/ui/src/icons/i_tools.ts
new file mode 100644
index 000000000..64f14c77b
--- /dev/null
+++ b/ui/src/icons/i_tools.ts
@@ -0,0 +1,5 @@
+import {html} from 'lit';
+
+export const toolsIcon = html``;
diff --git a/ui/src/icons/i_user.ts b/ui/src/icons/i_user.ts
new file mode 100644
index 000000000..368e0a5bb
--- /dev/null
+++ b/ui/src/icons/i_user.ts
@@ -0,0 +1,7 @@
+import {html} from 'lit';
+
+export const userIcon = html`
+`;
diff --git a/ui/src/images/i_view_all.svg b/ui/src/icons/i_view_all.ts
similarity index 75%
rename from ui/src/images/i_view_all.svg
rename to ui/src/icons/i_view_all.ts
index 462e1658f..22b01bdb2 100644
--- a/ui/src/images/i_view_all.svg
+++ b/ui/src/icons/i_view_all.ts
@@ -1,4 +1,6 @@
-
+import {html} from 'lit';
+
+export const viewAllIcon = html``;
diff --git a/ui/src/images/i_view_less.svg b/ui/src/icons/i_view_less.ts
similarity index 71%
rename from ui/src/images/i_view_less.svg
rename to ui/src/icons/i_view_less.ts
index 9243f0daa..a7b4fb731 100644
--- a/ui/src/images/i_view_less.svg
+++ b/ui/src/icons/i_view_less.ts
@@ -1,4 +1,6 @@
-
+import {html} from 'lit';
+
+export const viewLessIcon = html``;
diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts
new file mode 100644
index 000000000..cab424ad2
--- /dev/null
+++ b/ui/src/icons/icons.ts
@@ -0,0 +1,29 @@
+import {layerIcon} from './i_layer';
+import {toolsIcon} from './i_tools';
+import {shareIcon} from './i_share';
+import {projectsIcon} from './i_projects';
+import {configIcon} from './i_config';
+import {viewAllIcon} from './i_view_all';
+import {viewLessIcon} from './i_view_less';
+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,
+ share: shareIcon,
+ tools: toolsIcon,
+ user: userIcon,
+ viewAll: viewAllIcon,
+ viewLess: viewLessIcon,
+};
+
+export type IconKey = keyof typeof icons;
diff --git a/ui/src/images/i_config.svg b/ui/src/images/i_config.svg
deleted file mode 100644
index 80c21976c..000000000
--- a/ui/src/images/i_config.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/images/i_layer.svg b/ui/src/images/i_layer.svg
deleted file mode 100644
index 239346727..000000000
--- a/ui/src/images/i_layer.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/images/i_menu.svg b/ui/src/images/i_menu.svg
deleted file mode 100644
index b3770918e..000000000
--- a/ui/src/images/i_menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/images/i_share.svg b/ui/src/images/i_share.svg
deleted file mode 100644
index c26a36047..000000000
--- a/ui/src/images/i_share.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/images/i_tools.svg b/ui/src/images/i_tools.svg
deleted file mode 100644
index 89c7636f1..000000000
--- a/ui/src/images/i_tools.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/images/i_user.svg b/ui/src/images/i_user.svg
deleted file mode 100644
index dfa5bb37a..000000000
--- a/ui/src/images/i_user.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
index 7c82c81f7..6b824260d 100644
--- a/ui/src/ngm-app.ts
+++ b/ui/src/ngm-app.ts
@@ -20,7 +20,8 @@ import './elements/ngm-ion-modal';
import './elements/ngm-wmts-date-picker';
import './components/search/search-input';
import 'fomantic-ui-css/components/dropdown';
-
+import 'fomantic-ui-css/components/dropdown.js';
+import './elements/shared/ngm-icon';
import '@geoblocks/cesium-view-cube';
import {COGNITO_VARIABLES, DEFAULT_VIEW, SUPPORTED_LANGUAGES} from './constants';
@@ -59,6 +60,7 @@ import $ from 'jquery';
import {clientConfigContext} from './context';
import {consume} from '@lit/context';
import {ClientConfig} from './api/client-config';
+import {styleMap} from 'lit/directives/style-map.js';
const SKIP_STEP2_TIMEOUT = 5000;
@@ -248,6 +250,8 @@ export class NgmApp extends LitElementI18n {
}
async firstUpdated() {
+ this.querySelectorAll('.menu').forEach((it) => $(it).dropdown());
+
setTimeout(() => this.determinateLoading = true, 3000);
setupI18n();
rewriteParams();
@@ -411,25 +415,32 @@ export class NgmApp extends LitElementI18n {
render() {
return html`
+
+
+
+
+ ${i18next.t(this.title)}
+
+
-
- swissgeol
-
-
+
+
+
+
+
+ swissgeol
+
+
${i18next.language?.toUpperCase()}
-
+