-
-
- `;
-
- private readonly renderLayers = () => html`
-
-
-
-
-
- ${i18next.t('dtd_background_map_label')}
-
-
-
- ${this.isReordering ? i18next.t('dtd_finish_ordering_label') : i18next.t('dtd_change_order_label')}
-
- ${this.isReordering
- ? this.renderSortableLayers()
- : this.renderLayers()}
- ${i18next.t('dtd_user_content_label')}
-
- ${i18next.t('dtd_background_map_label')}
-
- ${this.globeQueueLength}
-
-
-
+
+
+ `;
+
+ private readonly renderLayers = () => html`
+
+
+ ${i18next.t('dtd_background_map_label')}
+
+
+
+ ${this.isReordering ? i18next.t('dtd_finish_ordering_label') : i18next.t('dtd_change_order_label')}
+
+ ${this.isReordering
+ ? this.renderSortableLayers()
+ : this.renderLayers()}
+
+ ${i18next.t('dtd_background_map_label')}
+
+ ${this.globeQueueLength}
+
+
+
+ ${this.renderTabButton(Tab.Catalog)}
+ ${this.renderTabSeparator(Tab.Catalog, Tab.Upload)}
+ ${this.renderTabButton(Tab.Upload)}
+ ${this.renderTabSeparator(Tab.Upload, Tab.Options)}
+ ${this.renderTabButton(Tab.Options)}
+
+
+ ${this.renderCatalog()}
+
+
+
+
+
+ `;
+
+ readonly renderTabButton = (tab: Tab) => html`
+
+ `;
+
+ readonly renderTabSeparator = (a: Tab, b: Tab) => html`
+
+ `;
+
+ private readonly renderCatalog = () => html`
+
+
+
+
+ `;
+
+ static readonly styles = css`
+ ${unsafeCSS(fomanticTransitionCss)}
+ ${unsafeCSS(iconsCss)}
+ ${unsafeCSS(layersCss.replaceAll('ngm-layers-item', ':host'))}
+ ${unsafeCSS(sliderCss)}
+ `;
+}
diff --git a/ui/src/components/layer/upload/layer-upload-kml.ts b/ui/src/components/layer/upload/layer-upload-kml.ts
new file mode 100644
index 000000000..852092ac5
--- /dev/null
+++ b/ui/src/components/layer/upload/layer-upload-kml.ts
@@ -0,0 +1,159 @@
+import {css, html, unsafeCSS} from 'lit';
+import {customElement, property, query, state} from 'lit/decorators.js';
+import i18next from 'i18next';
+import $ from 'jquery';
+import {classMap} from 'lit-html/directives/class-map.js';
+import {LitElementI18n} from '../../../i18n';
+import {showBannerError, showSnackbarInfo} from '../../../notifications';
+import fomanticButtonCss from 'fomantic-ui-css/components/button.css';
+import fomanticLoaderCss from 'fomantic-ui-css/components/loader.css';
+import '../../core';
+
+@customElement('ngm-layer-upload-kml')
+export default class NgmLayerUploadKml extends LitElementI18n {
+ @property({type: Object})
+ accessor toastPlaceholder!: HTMLElement;
+
+ @property({type: Number})
+ accessor maxFileSize: number | null = null;
+
+ @state()
+ private accessor isLoading = false;
+
+ @state()
+ private accessor isClampingToGround = true;
+
+ @query('.ngm-upload-kml')
+ private accessor uploadKmlInput!: HTMLInputElement;
+
+ private handleDrop(event: DragEvent): void {
+ event.preventDefault();
+ (event.target as HTMLElement).classList.remove('active');
+ for (const file of event.dataTransfer!.files) {
+ this.uploadKml(file);
+ }
+ }
+
+ private uploadKml(file: File): void {
+ if (!file) {
+ showSnackbarInfo(i18next.t('dtd_no_file_to_upload_warn'));
+ return;
+ }
+ if (!file.name.toLowerCase().endsWith('kml')) {
+ showBannerError(this.toastPlaceholder, i18next.t('dtd_file_not_kml'));
+ return;
+ }
+ if (this.isFileTooLarge(file)) {
+ showBannerError(this.toastPlaceholder, `${i18next.t('dtd_max_size_exceeded_warn')} ${this.maxFileSize}MB`);
+ return;
+ }
+ this.isLoading = true;
+ try {
+ this.dispatchEvent(new CustomEvent
@@ -53,10 +60,12 @@ export class NgmProjectAssetsSection extends LitElementI18n {
${this.viewMode ? '' : html`
-
@@ -86,4 +95,4 @@ export class NgmProjectAssetsSection extends LitElementI18n {
return this;
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
index d5726ac93..e8aef4bb6 100644
--- a/ui/src/elements/ngm-auth.ts
+++ b/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 '../components/core';
/**
* Authentication component
@@ -61,16 +61,29 @@ export class NgmAuth extends LitElementI18n {
this.authService.logout();
}
- render() {
- 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`
-
-
-
`;
- }
+ 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-core-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`
-
-
-
-
+
-
+
+
+
+
+
+ evt.target).value)), 250);
- private prevExaggeration: number = 1;
constructor() {
super();
MainStore.viewer.subscribe(viewer => {
this.viewer = viewer;
- this.exaggeration = this.viewer?.scene.verticalExaggeration || 1;
- this.prevExaggeration = this.exaggeration;
- this.viewer?.dataSources.dataSourceAdded.addEventListener((_collection: DataSourceCollection, dataSource: DataSource | CustomDataSource) => {
- if (MainStore.uploadedKmlNames.includes(dataSource.name)) {
- const exaggeration = this.hideExaggeration ? 1 : this.exaggeration;
- updateExaggerationForKmlDataSource(dataSource, exaggeration, 1);
- }
- });
});
MainStore.mapChooser.subscribe(chooser => {
this.mapChooser = chooser;
@@ -97,29 +82,6 @@ export class NgmMapConfiguration extends LitElementI18n {
this.requestUpdate();
}
- updateExaggerationForKmls() {
- const exaggeration = this.hideExaggeration ? 1 : this.exaggeration;
- MainStore.uploadedKmlNames.forEach(name => {
- const dataSource = this.viewer?.dataSources.getByName(name)[0];
- updateExaggerationForKmlDataSource(dataSource, exaggeration, this.prevExaggeration);
- });
- this.prevExaggeration = exaggeration;
- this.viewer?.scene.requestRender();
- }
-
- updateExaggeration(evt: InputEvent) {
- if (this.viewer) {
- if (this.hideExaggeration) {
- this.hideExaggeration = false;
- }
- this.exaggeration = Number((evt.target).value);
- this.viewer.scene.verticalExaggeration = this.exaggeration;
- // workaround for billboards positioning
- setTimeout(() => this.viewer!.scene.requestRender(), 500);
- setExaggeration(this.exaggeration);
- NavToolsStore.exaggerationChanged.next(this.exaggeration);
- }
- }
render() {
return html`
@@ -153,36 +115,6 @@ export class NgmMapConfiguration extends LitElementI18n {
+ ${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-map-configuration.ts b/ui/src/elements/ngm-map-configuration.ts
index 0bd72df6e..8afc1785a 100644
--- a/ui/src/elements/ngm-map-configuration.ts
+++ b/ui/src/elements/ngm-map-configuration.ts
@@ -4,16 +4,14 @@ import i18next from 'i18next';
import {LitElementI18n} from '../i18n.js';
import {classMap} from 'lit-html/directives/class-map.js';
import './ngm-map-chooser';
-import {getMapOpacityParam, setExaggeration, syncMapOpacityParam} from '../permalink';
+import {getMapOpacityParam, syncMapOpacityParam} from '../permalink';
import MainStore from '../store/main';
import {
- CustomDataSource, DataSource, DataSourceCollection,
+
Viewer
} from 'cesium';
import type MapChooser from '../MapChooser.js';
import {debounce} from '../utils';
-import {updateExaggerationForKmlDataSource} from '../cesiumutils';
-import NavToolsStore from '../store/navTools';
@customElement('ngm-map-configuration')
export class NgmMapConfiguration extends LitElementI18n {
@@ -24,29 +22,16 @@ export class NgmMapConfiguration extends LitElementI18n {
@state()
accessor opacity: number = getMapOpacityParam();
@state()
- accessor exaggeration: number = 1;
- @state()
- accessor hideExaggeration = false;
- @state()
accessor baseMapId = 'ch.swisstopo.pixelkarte-grau';
@query('ngm-map-chooser')
accessor mapChooserElement;
private readonly debouncedOpacityUpdate = debounce((evt: Event) => this.updateOpacity(Number((
- ${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
- `;
+
-
-
-
`;
}
diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
index 2358a7a63..77b0c3aa5 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 '../components/core';
import '../components/navigation/navigation-layer-panel';
import LayersActions from '../layers/LayersActions';
import {DEFAULT_LAYER_OPACITY, LayerType} from '../constants';
@@ -46,7 +48,7 @@ import type QueryManager from '../query/QueryManager';
import DashboardStore from '../store/dashboard';
import {getAssets} from '../api-ion';
-import {LayerEvent, LayersUpdateEvent} from '../components/layers/layers-display';
+import {LayerEvent, LayersUpdateEvent} from '../components/layer/layer-display';
export type SearchLayer =
| SearchLayerWithLayer
@@ -87,7 +89,7 @@ export class SideBar extends LitElementI18n {
// TODO change this back to `null`
@state()
- accessor activePanel: string | null = null;
+ accessor activePanel: string | null = 'data';
@state()
accessor showHeader = false;
@state()
@@ -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.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/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts
new file mode 100644
index 000000000..2e60d90dc
--- /dev/null
+++ b/ui/src/elements/sidebar/ngm-menu-item.ts
@@ -0,0 +1,118 @@
+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 '../../components/core';
+
+@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_kml_upload.ts b/ui/src/icons/i_kml_upload.ts
new file mode 100644
index 000000000..13d688460
--- /dev/null
+++ b/ui/src/icons/i_kml_upload.ts
@@ -0,0 +1,10 @@
+import {html} from 'lit';
+
+export const kmlUploadIcon = 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..a0d00664c
--- /dev/null
+++ b/ui/src/icons/icons.ts
@@ -0,0 +1,31 @@
+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 {kmlUploadIcon} from './i_kml_upload';
+import {searchIcon} from './i_search';
+import {closeIcon} from './i_close';
+import {dropdownIcon} from './i_dropdown';
+
+export const icons = {
+ checkmark: checkmarkIcon,
+ close: closeIcon,
+ config: configIcon,
+ kmlUpload: kmlUploadIcon,
+ 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/layers/ngm-layers-upload.ts b/ui/src/layers/ngm-layers-upload.ts
index b55d8cc39..5263b4a11 100644
--- a/ui/src/layers/ngm-layers-upload.ts
+++ b/ui/src/layers/ngm-layers-upload.ts
@@ -6,7 +6,7 @@ import {showBannerError, showSnackbarInfo} from '../notifications';
import $ from 'jquery';
import {classMap} from 'lit-html/directives/class-map.js';
-@customElement('ngm-layers-upload')
+@customElement('ngm-layers-upload-action')
export default class LayersUpload extends LitElementI18n {
@property({type: Object})
accessor toastPlaceholder!: HTMLElement;
diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
index 7c82c81f7..09cceb0a1 100644
--- a/ui/src/ngm-app.ts
+++ b/ui/src/ngm-app.ts
@@ -20,8 +20,9 @@ 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 '@geoblocks/cesium-view-cube';
+import './components/core';
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()}
-
+