From f27b68ed68b409fb59ccfd292f69e5b5b0df84f0 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Thu, 28 Nov 2024 15:27:28 +0100 Subject: [PATCH 01/14] Feature: New sidebar first draft --- ui/src/elements/ngm-side-bar.ts | 29 +- ui/src/elements/sidebar/ngm-menu-item.ts | 128 ++++ ui/src/images/i_config.svg | 8 +- ui/src/images/i_layer.svg | 4 - ui/src/images/i_layer.ts | 5 + ui/src/images/i_menu.svg | 7 +- ui/src/images/i_share.svg | 5 +- ui/src/images/i_tools.svg | 7 +- ui/src/style/icons.css | 743 +++++++++++------------ ui/src/style/ngm-side-bar.css | 3 +- ui/src/style/variables.css | 26 +- 11 files changed, 544 insertions(+), 421 deletions(-) create mode 100644 ui/src/elements/sidebar/ngm-menu-item.ts delete mode 100644 ui/src/images/i_layer.svg create mode 100644 ui/src/images/i_layer.ts diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index bcfb5b0f3..e9484d14a 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -5,6 +5,7 @@ import '../layers/ngm-layers'; import '../layers/ngm-layers-sort'; import '../layers/ngm-catalog'; import './dashboard/ngm-dashboard'; +import './sidebar/ngm-menu-item'; import LayersActions from '../layers/LayersActions'; import {DEFAULT_LAYER_OPACITY, LayerType} from '../constants'; import defaultLayerTree, {LayerConfig} from '../layertree'; @@ -91,7 +92,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 +163,7 @@ export class SideBar extends LitElementI18n { }); const sliceOptions = getSliceParam(); - if (sliceOptions && sliceOptions.type && sliceOptions.slicePoints) + if (sliceOptions?.type && sliceOptions.slicePoints) this.activePanel = 'tools'; } @@ -203,11 +204,11 @@ export class SideBar extends LitElementI18n {
+ this.togglePanel('data')} + > +
-
this.togglePanel('dashboard')}> -
-
this.togglePanel('data')}>
@@ -217,6 +218,10 @@ export class SideBar extends LitElementI18n {
${!this.mobileView ? shareBtn : ''} +
this.togglePanel('dashboard')}> +
+
this.mobileShowAll = !this.mobileShowAll}> @@ -378,7 +383,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 +400,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 +466,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 +612,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 +642,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..ba1626a79 --- /dev/null +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -0,0 +1,128 @@ +import {customElement, property} from 'lit/decorators.js'; +import {LitElementI18n} from '../../i18n.js'; +import {css, html} from 'lit'; +import {layerIcon} from "../../images/i_layer"; +import {classMap} from "lit/directives/class-map.js"; + +const ICON_BASE_PATH = '../../images/'; + +@customElement('ngm-menu-item') +export class CustomElement extends LitElementI18n { + @property({type: String}) + accessor title: string = ''; + @property({type: String}) + accessor icon: string = ''; + @property({type: Boolean}) + accessor isActive: boolean = false; + + constructor() { + super(); + } + + static readonly styles = css` + + :host { + position: relative; + width: 100%; + height: 58px; + display: flex; + justify-content: center; + align-items: center; + color: #295969; + padding-inline: 5px; + } + + :host > .container, + :host > .container:active { + 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: #295969; + + .icon svg { + fill: #295969; + } + + & > .title { + transform: scaleX(0); + + transition: ease-out 100ms; + transition-property: transform; + transform-origin: left; + } + } + } + + .container:hover .box { + background-color: #295969; + color: white; + width: unset; + + & > .title { + transform: scaleX(1); + } + + .icon svg { + fill: white; + } + } + + .container .isActive { + background-color: #607D52; + + .icon svg { + fill: white; + } + } + + `; + + render() { + return html` +
+
+
+ ${layerIcon} +
+
+ ${this.title} +
+
+
+ `; + } +} diff --git a/ui/src/images/i_config.svg b/ui/src/images/i_config.svg index 80c21976c..97f43ff4b 100644 --- a/ui/src/images/i_config.svg +++ b/ui/src/images/i_config.svg @@ -1,4 +1,4 @@ - - - - + + + + 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_layer.ts b/ui/src/images/i_layer.ts new file mode 100644 index 000000000..51aaefdc0 --- /dev/null +++ b/ui/src/images/i_layer.ts @@ -0,0 +1,5 @@ +import {html} from 'lit'; + +export const layerIcon = html` + +`; diff --git a/ui/src/images/i_menu.svg b/ui/src/images/i_menu.svg index b3770918e..3d07b38c2 100644 --- a/ui/src/images/i_menu.svg +++ b/ui/src/images/i_menu.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/ui/src/images/i_share.svg b/ui/src/images/i_share.svg index c26a36047..cc9e195aa 100644 --- a/ui/src/images/i_share.svg +++ b/ui/src/images/i_share.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/ui/src/images/i_tools.svg b/ui/src/images/i_tools.svg index 89c7636f1..229d09bcc 100644 --- a/ui/src/images/i_tools.svg +++ b/ui/src/images/i_tools.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/ui/src/style/icons.css b/ui/src/style/icons.css index 0b90643d6..1eafde1af 100644 --- a/ui/src/style/icons.css +++ b/ui/src/style/icons.css @@ -1,375 +1,368 @@ -.ngm-icon.disabled { - cursor: default; - pointer-events: none; - opacity: 0.45; -} - -.ngm-search-icon { - mask: url('./images/icon_search.svg') no-repeat center; - -webkit-mask: url('./images/icon_search.svg') no-repeat center; -} - -.ngm-close-icon { - mask: url('./images/i_close.svg') no-repeat center; - -webkit-mask: url('./images/i_close.svg') no-repeat center; -} - -.ngm-dashboard-icon { - width: 20px; - height: 14px; - mask: url('./images/i_menu.svg') no-repeat center; - -webkit-mask: url('./images/i_menu.svg') no-repeat center; -} - -.ngm-data-icon { - width: 24px; - height: 20px; - mask: url('./images/i_layer.svg') no-repeat center; - -webkit-mask: url('./images/i_layer.svg') no-repeat center; -} - -.ngm-tools-icon { - width: 22px; - height: 22px; - mask: url('./images/i_tools.svg') no-repeat center; - -webkit-mask: url('./images/i_tools.svg') no-repeat center; -} - -.ngm-share-icon { - width: 22px; - height: 22px; - mask: url('./images/i_share.svg') no-repeat center; - -webkit-mask: url('./images/i_share.svg') no-repeat center; -} - -.ngm-user-icon { - width: 18px; - height: 18px; - mask: url('./images/i_user.svg') no-repeat center; - -webkit-mask: url('./images/i_user.svg') no-repeat center; -} - -.ngm-settings-icon { - width: 20px; - height: 20px; - mask: url('./images/i_config.svg') no-repeat center; - -webkit-mask: url('./images/i_config.svg') no-repeat center; -} - -.ngm-zoom-p-icon { - width: 24px; - height: 24px; - mask: url('./images/i_zoom_plus.svg') no-repeat center; - -webkit-mask: url('./images/i_zoom_plus.svg') no-repeat center; -} - -.ngm-zoom-o-icon { - width: 24px; - height: 24px; - mask: url('./images/i_zoom_origin.svg') no-repeat center; - -webkit-mask: url('./images/i_zoom_origin.svg') no-repeat center; -} - -.ngm-zoom-m-icon { - width: 24px; - height: 24px; - mask: url('./images/i_zoom_minus.svg') no-repeat center; - -webkit-mask: url('./images/i_zoom_minus.svg') no-repeat center; -} - -.ngm-map-icon { - width: 24px; - height: 24px; - mask: url('./images/i_switzerland.svg') no-repeat center; - -webkit-mask: url('./images/i_switzerland.svg') no-repeat center; -} - -.ngm-cam-icon { - width: 24px; - height: 14px; - mask: url('./images/i_cam.svg') no-repeat center; - -webkit-mask: url('./images/i_cam.svg') no-repeat center; -} - -.ngm-cam-behind-icon { - width: 24px; - height: 24px; - mask: url('./images/i_cam_behind.svg') no-repeat center; - -webkit-mask: url('./images/i_cam_behind.svg') no-repeat center; -} - -.ngm-cam-h-icon { - width: 24px; - height: 24px; - mask: url('./images/i_cam_height.svg') no-repeat center; - -webkit-mask: url('./images/i_cam_height.svg') no-repeat center; -} - -.ngm-cam-d-icon { - width: 24px; - height: 24px; - mask: url('./images/i_cam_angle.svg') no-repeat center; - -webkit-mask: url('./images/i_cam_angle.svg') no-repeat center; -} - -.ngm-cam-t-icon { - width: 24px; - height: 22px; - mask: url('./images/i_cam_tilt.svg') no-repeat center; - -webkit-mask: url('./images/i_cam_tilt.svg') no-repeat center; -} - -.ngm-dropdown-icon { - width: 24px; - height: 24px; - mask: url('./images/i_menu-1.svg') no-repeat center; - -webkit-mask: url('./images/i_menu-1.svg') no-repeat center; -} - -.ngm-visible-icon { - width: 24px; - height: 24px; - mask: url('./images/i_visible.svg') no-repeat center; - -webkit-mask: url('./images/i_visible.svg') no-repeat center; -} - -.ngm-invisible-icon { - width: 24px; - height: 24px; - mask: url('./images/i_invisible.svg') no-repeat center; - -webkit-mask: url('./images/i_invisible.svg') no-repeat center; -} - -.ngm-zoom-plus-icon { - width: 20px; - height: 20px; - mask: url('./images/i_heranzoomen.svg') no-repeat center; - -webkit-mask: url('./images/i_heranzoomen.svg') no-repeat center; -} - -.ngm-delete-icon { - width: 24px; - height: 24px; - mask: url('./images/i_delete.svg') no-repeat center; - -webkit-mask: url('./images/i_delete.svg') no-repeat center; -} - -.ngm-coords-icon { - width: 22px; - height: 24px; - mask: url('./images/i_coordinates.svg') no-repeat center; - -webkit-mask: url('./images/i_coordinates.svg') no-repeat center; -} - -.ngm-vector-icon { - width: 24px; - height: 24px; - mask: url('./images/i_vector.svg') no-repeat center; - -webkit-mask: url('./images/i_vector.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-line-draw-icon { - width: 24px; - height: 24px; - mask: url('./images/i_line_draw.svg') no-repeat center; - -webkit-mask: url('./images/i_line_draw.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-polygon-draw-icon { - width: 24px; - height: 24px; - mask: url('./images/i_polygon_draw.svg') no-repeat center; - -webkit-mask: url('./images/i_polygon_draw.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-point-draw-icon { - width: 24px; - height: 24px; - mask: url('./images/i_point_draw.svg') no-repeat center; - -webkit-mask: url('./images/i_point_draw.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-rectangle-draw-icon { - width: 24px; - height: 24px; - mask: url('./images/i_rectangle_draw.svg') no-repeat center; - -webkit-mask: url('./images/i_rectangle_draw.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-file-upload-icon { - width: 24px; - height: 24px; - mask: url('./images/i_kml_gpx_upload.svg') no-repeat center; - -webkit-mask: url('./images/i_kml_gpx_upload.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-file-download-icon { - width: 24px; - height: 24px; - mask: url('./images/i_download_kml.svg') no-repeat center; - -webkit-mask: url('./images/i_download_kml.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-action-menu-icon { - width: 24px; - height: 24px; - mask: url('./images/i_action_menu.svg') no-repeat center; - -webkit-mask: url('./images/i_action_menu.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-slicing-icon { - width: 24px; - height: 24px; - mask: url('./images/i_slicing.svg') no-repeat center; - -webkit-mask: url('./images/i_slicing.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-in-box-icon { - width: 24px; - height: 24px; - mask: url('./images/i_box_inside.svg') no-repeat center; - -webkit-mask: url('./images/i_box_inside.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-out-box-icon { - width: 24px; - height: 24px; - mask: url('./images/i_box_outside.svg') no-repeat center; - -webkit-mask: url('./images/i_box_outside.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-back-icon { - width: 24px; - height: 24px; - mask: url('./images/i_back.svg') no-repeat center; - -webkit-mask: url('./images/i_back.svg') no-repeat center; - background-color: #000000; -} - -.ngm-slice-left-icon { - width: 24px; - height: 24px; - mask: url('./images/i_slice_left.svg') no-repeat center; - -webkit-mask: url('./images/i_slice_left.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-slice-right-icon { - width: 24px; - height: 24px; - mask: url('./images/i_slice_right.svg') no-repeat center; - -webkit-mask: url('./images/i_slice_right.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-upload-icon { - width: 24px; - height: 24px; - mask: url('./images/i_upload.svg') no-repeat center; - -webkit-mask: url('./images/i_upload.svg') no-repeat center; -} - -.ngm-extrusion-icon { - width: 20px; - height: 24px; - mask: url('./images/i_extrusion.svg') no-repeat center; - -webkit-mask: url('./images/i_extrusion.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-edit-icon { - width: 24px; - height: 24px; - mask: url('./images/i_edit.svg') no-repeat center; - -webkit-mask: url('./images/i_edit.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-download-icon { - width: 24px; - height: 24px; - mask: url('./images/i_download.svg') no-repeat center; - -webkit-mask: url('./images/i_download.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-screenshot-icon { - width: 18px; - height: 18px; - mask: url('./images/i_screenshot.svg') no-repeat center; - -webkit-mask: url('./images/i_screenshot.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-gst-icon { - width: 24px; - height: 24px; - mask: url('./images/i_query_3d_models.svg') no-repeat center; - -webkit-mask: url('./images/i_query_3d_models.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-play-last-icon { - width: 24px; - height: 24px; - mask: url('./images/i_play_the_last.svg') no-repeat center; - -webkit-mask: url('./images/i_play_the_last.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-play-icon { - width: 24px; - height: 24px; - mask: url('./images/i_play.svg') no-repeat center; - -webkit-mask: url('./images/i_play.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-view-all-icon { - width: 24px; - height: 24px; - mask: url('./images/i_view_all.svg') no-repeat center; - -webkit-mask: url('./images/i_view_all.svg') no-repeat center; -} - -.ngm-view-less-icon { - width: 24px; - height: 24px; - mask: url('./images/i_view_less.svg') no-repeat center; - -webkit-mask: url('./images/i_view_less.svg') no-repeat center; -} - -.ngm-profile-icon { - width: 24px; - height: 24px; - mask: url('./images/i_terrain.svg') no-repeat center; - -webkit-mask: url('./images/i_terrain.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-save-icon { - width: 24px; - height: 24px; - mask: url('./images/i_save.svg') no-repeat center; - -webkit-mask: url('./images/i_save.svg') no-repeat center; - background-color: var(--ngm-interaction); -} - -.ngm-copy-icon { - width: 24px; - height: 24px; - mask: url('./images/i_copy.svg') no-repeat center; - -webkit-mask: url('./images/i_copy.svg') no-repeat center; - background-color: var(--ngm-interaction); -} +.ngm-icon.disabled { + cursor: default; + pointer-events: none; + opacity: 0.45; +} + +.ngm-search-icon { + mask: url('./images/icon_search.svg') no-repeat center; + -webkit-mask: url('./images/icon_search.svg') no-repeat center; +} + +.ngm-close-icon { + mask: url('./images/i_close.svg') no-repeat center; + -webkit-mask: url('./images/i_close.svg') no-repeat center; +} + +.ngm-dashboard-icon { + width: 24px; + height: 24px; + mask: url('./images/i_menu.svg') no-repeat center; + -webkit-mask: url('./images/i_menu.svg') no-repeat center; +} + +.ngm-tools-icon { + width: 24px; + height: 24px; + mask: url('./images/i_tools.svg') no-repeat center; + -webkit-mask: url('./images/i_tools.svg') no-repeat center; +} + +.ngm-share-icon { + width: 24px; + height: 24px; + mask: url('./images/i_share.svg') no-repeat center; + -webkit-mask: url('./images/i_share.svg') no-repeat center; +} + +.ngm-user-icon { + width: 18px; + height: 18px; + mask: url('./images/i_user.svg') no-repeat center; + -webkit-mask: url('./images/i_user.svg') no-repeat center; +} + +.ngm-settings-icon { + width: 24px; + height: 24px; + mask: url('./images/i_config.svg') no-repeat center; + -webkit-mask: url('./images/i_config.svg') no-repeat center; +} + +.ngm-zoom-p-icon { + width: 24px; + height: 24px; + mask: url('./images/i_zoom_plus.svg') no-repeat center; + -webkit-mask: url('./images/i_zoom_plus.svg') no-repeat center; +} + +.ngm-zoom-o-icon { + width: 24px; + height: 24px; + mask: url('./images/i_zoom_origin.svg') no-repeat center; + -webkit-mask: url('./images/i_zoom_origin.svg') no-repeat center; +} + +.ngm-zoom-m-icon { + width: 24px; + height: 24px; + mask: url('./images/i_zoom_minus.svg') no-repeat center; + -webkit-mask: url('./images/i_zoom_minus.svg') no-repeat center; +} + +.ngm-map-icon { + width: 24px; + height: 24px; + mask: url('./images/i_switzerland.svg') no-repeat center; + -webkit-mask: url('./images/i_switzerland.svg') no-repeat center; +} + +.ngm-cam-icon { + width: 24px; + height: 14px; + mask: url('./images/i_cam.svg') no-repeat center; + -webkit-mask: url('./images/i_cam.svg') no-repeat center; +} + +.ngm-cam-behind-icon { + width: 24px; + height: 24px; + mask: url('./images/i_cam_behind.svg') no-repeat center; + -webkit-mask: url('./images/i_cam_behind.svg') no-repeat center; +} + +.ngm-cam-h-icon { + width: 24px; + height: 24px; + mask: url('./images/i_cam_height.svg') no-repeat center; + -webkit-mask: url('./images/i_cam_height.svg') no-repeat center; +} + +.ngm-cam-d-icon { + width: 24px; + height: 24px; + mask: url('./images/i_cam_angle.svg') no-repeat center; + -webkit-mask: url('./images/i_cam_angle.svg') no-repeat center; +} + +.ngm-cam-t-icon { + width: 24px; + height: 22px; + mask: url('./images/i_cam_tilt.svg') no-repeat center; + -webkit-mask: url('./images/i_cam_tilt.svg') no-repeat center; +} + +.ngm-dropdown-icon { + width: 24px; + height: 24px; + mask: url('./images/i_menu-1.svg') no-repeat center; + -webkit-mask: url('./images/i_menu-1.svg') no-repeat center; +} + +.ngm-visible-icon { + width: 24px; + height: 24px; + mask: url('./images/i_visible.svg') no-repeat center; + -webkit-mask: url('./images/i_visible.svg') no-repeat center; +} + +.ngm-invisible-icon { + width: 24px; + height: 24px; + mask: url('./images/i_invisible.svg') no-repeat center; + -webkit-mask: url('./images/i_invisible.svg') no-repeat center; +} + +.ngm-zoom-plus-icon { + width: 20px; + height: 20px; + mask: url('./images/i_heranzoomen.svg') no-repeat center; + -webkit-mask: url('./images/i_heranzoomen.svg') no-repeat center; +} + +.ngm-delete-icon { + width: 24px; + height: 24px; + mask: url('./images/i_delete.svg') no-repeat center; + -webkit-mask: url('./images/i_delete.svg') no-repeat center; +} + +.ngm-coords-icon { + width: 22px; + height: 24px; + mask: url('./images/i_coordinates.svg') no-repeat center; + -webkit-mask: url('./images/i_coordinates.svg') no-repeat center; +} + +.ngm-vector-icon { + width: 24px; + height: 24px; + mask: url('./images/i_vector.svg') no-repeat center; + -webkit-mask: url('./images/i_vector.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-line-draw-icon { + width: 24px; + height: 24px; + mask: url('./images/i_line_draw.svg') no-repeat center; + -webkit-mask: url('./images/i_line_draw.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-polygon-draw-icon { + width: 24px; + height: 24px; + mask: url('./images/i_polygon_draw.svg') no-repeat center; + -webkit-mask: url('./images/i_polygon_draw.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-point-draw-icon { + width: 24px; + height: 24px; + mask: url('./images/i_point_draw.svg') no-repeat center; + -webkit-mask: url('./images/i_point_draw.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-rectangle-draw-icon { + width: 24px; + height: 24px; + mask: url('./images/i_rectangle_draw.svg') no-repeat center; + -webkit-mask: url('./images/i_rectangle_draw.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-file-upload-icon { + width: 24px; + height: 24px; + mask: url('./images/i_kml_gpx_upload.svg') no-repeat center; + -webkit-mask: url('./images/i_kml_gpx_upload.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-file-download-icon { + width: 24px; + height: 24px; + mask: url('./images/i_download_kml.svg') no-repeat center; + -webkit-mask: url('./images/i_download_kml.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-action-menu-icon { + width: 24px; + height: 24px; + mask: url('./images/i_action_menu.svg') no-repeat center; + -webkit-mask: url('./images/i_action_menu.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-slicing-icon { + width: 24px; + height: 24px; + mask: url('./images/i_slicing.svg') no-repeat center; + -webkit-mask: url('./images/i_slicing.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-in-box-icon { + width: 24px; + height: 24px; + mask: url('./images/i_box_inside.svg') no-repeat center; + -webkit-mask: url('./images/i_box_inside.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-out-box-icon { + width: 24px; + height: 24px; + mask: url('./images/i_box_outside.svg') no-repeat center; + -webkit-mask: url('./images/i_box_outside.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-back-icon { + width: 24px; + height: 24px; + mask: url('./images/i_back.svg') no-repeat center; + -webkit-mask: url('./images/i_back.svg') no-repeat center; + background-color: #000000; +} + +.ngm-slice-left-icon { + width: 24px; + height: 24px; + mask: url('./images/i_slice_left.svg') no-repeat center; + -webkit-mask: url('./images/i_slice_left.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-slice-right-icon { + width: 24px; + height: 24px; + mask: url('./images/i_slice_right.svg') no-repeat center; + -webkit-mask: url('./images/i_slice_right.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-upload-icon { + width: 24px; + height: 24px; + mask: url('./images/i_upload.svg') no-repeat center; + -webkit-mask: url('./images/i_upload.svg') no-repeat center; +} + +.ngm-extrusion-icon { + width: 20px; + height: 24px; + mask: url('./images/i_extrusion.svg') no-repeat center; + -webkit-mask: url('./images/i_extrusion.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-edit-icon { + width: 24px; + height: 24px; + mask: url('./images/i_edit.svg') no-repeat center; + -webkit-mask: url('./images/i_edit.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-download-icon { + width: 24px; + height: 24px; + mask: url('./images/i_download.svg') no-repeat center; + -webkit-mask: url('./images/i_download.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-screenshot-icon { + width: 18px; + height: 18px; + mask: url('./images/i_screenshot.svg') no-repeat center; + -webkit-mask: url('./images/i_screenshot.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-gst-icon { + width: 24px; + height: 24px; + mask: url('./images/i_query_3d_models.svg') no-repeat center; + -webkit-mask: url('./images/i_query_3d_models.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-play-last-icon { + width: 24px; + height: 24px; + mask: url('./images/i_play_the_last.svg') no-repeat center; + -webkit-mask: url('./images/i_play_the_last.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-play-icon { + width: 24px; + height: 24px; + mask: url('./images/i_play.svg') no-repeat center; + -webkit-mask: url('./images/i_play.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-view-all-icon { + width: 24px; + height: 24px; + mask: url('./images/i_view_all.svg') no-repeat center; + -webkit-mask: url('./images/i_view_all.svg') no-repeat center; +} + +.ngm-view-less-icon { + width: 24px; + height: 24px; + mask: url('./images/i_view_less.svg') no-repeat center; + -webkit-mask: url('./images/i_view_less.svg') no-repeat center; +} + +.ngm-profile-icon { + width: 24px; + height: 24px; + mask: url('./images/i_terrain.svg') no-repeat center; + -webkit-mask: url('./images/i_terrain.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-save-icon { + width: 24px; + height: 24px; + mask: url('./images/i_save.svg') no-repeat center; + -webkit-mask: url('./images/i_save.svg') no-repeat center; + background-color: var(--ngm-interaction); +} + +.ngm-copy-icon { + width: 24px; + height: 24px; + mask: url('./images/i_copy.svg') no-repeat center; + -webkit-mask: url('./images/i_copy.svg') no-repeat center; + background-color: var(--ngm-interaction); +} diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index c048e708d..c2fead7c2 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -35,7 +35,6 @@ ngm-side-bar { .ngm-menu-1 > div, .ngm-menu-2 > div { - margin-bottom: 28px; cursor: pointer; } @@ -46,7 +45,7 @@ ngm-side-bar { .ngm-menu-1 > div > div:nth-child(1), .ngm-menu-2 > div > div:nth-child(1), .ngm-menu-mobile > div > div:nth-child(1) { - background-color: #030303; + background-color: #337083; } .ngm-menu-1 > div:hover > div:nth-child(1), diff --git a/ui/src/style/variables.css b/ui/src/style/variables.css index a1d685572..9ded405e7 100644 --- a/ui/src/style/variables.css +++ b/ui/src/style/variables.css @@ -1,13 +1,13 @@ -:root { - --ngm-interaction: #0B7285; - --ngm-interaction-active: #B9271A; - --ngm-interaction-hover: #FF0000; - --ngm-action-hover: #A83526; - --ngm-hover: #C5F6FA; - --ngm-warning: #C92A2A; - --ngm-header-height: 88px; - --ngm-header-height-mobile: 48px; - --ngm-bottom-menu-height: 56px; - --ngm-panel-header-height: 34px; - --ngm-left-side-bar-width: 56px; -} +:root { + --ngm-interaction: #0B7285; + --ngm-interaction-active: #B9271A; + --ngm-interaction-hover: #FF0000; + --ngm-action-hover: #A83526; + --ngm-hover: #C5F6FA; + --ngm-warning: #C92A2A; + --ngm-header-height: 88px; + --ngm-header-height-mobile: 48px; + --ngm-bottom-menu-height: 56px; + --ngm-panel-header-height: 34px; + --ngm-left-side-bar-width: 80px; +} From 7015a2a584e93e6836207398c7c3e90a55d15348 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 08:33:15 +0100 Subject: [PATCH 02/14] Feature: New sidebar fx icon display --- ui/src/elements/ngm-side-bar.ts | 57 ++++++++++--------- ui/src/elements/sidebar/ngm-menu-item.ts | 19 ++++--- .../i_config.svg => icons/i_config.ts} | 12 ++-- ui/src/{images => icons}/i_layer.ts | 2 +- ui/src/{images/i_menu.svg => icons/i_menu.ts} | 8 ++- .../{images/i_share.svg => icons/i_share.ts} | 8 ++- .../{images/i_tools.svg => icons/i_tools.ts} | 8 ++- ui/src/icons/icons.ts | 15 +++++ ui/src/style/icons.css | 28 --------- ui/src/style/ngm-side-bar.css | 4 -- 10 files changed, 78 insertions(+), 83 deletions(-) rename ui/src/{images/i_config.svg => icons/i_config.ts} (87%) rename ui/src/{images => icons}/i_layer.ts (97%) rename ui/src/{images/i_menu.svg => icons/i_menu.ts} (77%) rename ui/src/{images/i_share.svg => icons/i_share.ts} (59%) rename ui/src/{images/i_tools.svg => icons/i_tools.ts} (79%) create mode 100644 ui/src/icons/icons.ts diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index e9484d14a..42126c40e 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -176,15 +176,13 @@ export class SideBar extends LitElementI18n { .filter(config => config.visible && !config.noQuery); const shareBtn = html` - `; + this.togglePanel('share')} + >`; const settingsBtn = html` -
this.togglePanel('settings')}> -
-
`; + this.togglePanel('settings')} + >`; const dataMobileHeader = html`
this.hideDataDisplayed = true} class="ngm-data-catalog-label ${classMap({active: this.hideDataDisplayed})}"> @@ -204,36 +202,39 @@ export class SideBar extends LitElementI18n {
- + this.togglePanel('data')} > - -
-
this.togglePanel('data')}> -
-
-
this.togglePanel('tools', false)}> -
-
- ${!this.mobileView ? shareBtn : ''} -
this.togglePanel('dashboard')}> -
-
+ this.togglePanel('tools')} + > + this.togglePanel('dashboard')} + > + ${!this.mobileView ? shareBtn : ''}
this.mobileShowAll = !this.mobileShowAll}>
+ 'ngm-view-all-icon': !this.mobileShowAll, + 'ngm-view-less-icon': this.mobileShowAll + })}"> +
-
+
${settingsBtn}
+ + + +
+ +
+
+ +
.container, @@ -74,7 +74,7 @@ export class CustomElement extends LitElementI18n { color: #295969; .icon svg { - fill: #295969; + color: #295969; } & > .title { @@ -97,7 +97,7 @@ export class CustomElement extends LitElementI18n { } .icon svg { - fill: white; + color: white; } } @@ -105,18 +105,19 @@ export class CustomElement extends LitElementI18n { background-color: #607D52; .icon svg { - fill: white; + color: white; } } `; render() { + const icon = icons[this.icon]; return html`
- ${layerIcon} + ${icon}
${this.title} diff --git a/ui/src/images/i_config.svg b/ui/src/icons/i_config.ts similarity index 87% rename from ui/src/images/i_config.svg rename to ui/src/icons/i_config.ts index 97f43ff4b..e91ad3ea5 100644 --- a/ui/src/images/i_config.svg +++ b/ui/src/icons/i_config.ts @@ -1,4 +1,8 @@ - - - - +import {html} from 'lit'; + +export const configIcon = html` + + +`; + + diff --git a/ui/src/images/i_layer.ts b/ui/src/icons/i_layer.ts similarity index 97% rename from ui/src/images/i_layer.ts rename to ui/src/icons/i_layer.ts index 51aaefdc0..b21e6223b 100644 --- a/ui/src/images/i_layer.ts +++ b/ui/src/icons/i_layer.ts @@ -1,5 +1,5 @@ import {html} from 'lit'; -export const layerIcon = html` +export const layerIcon = html` `; diff --git a/ui/src/images/i_menu.svg b/ui/src/icons/i_menu.ts similarity index 77% rename from ui/src/images/i_menu.svg rename to ui/src/icons/i_menu.ts index 3d07b38c2..22b91d676 100644 --- a/ui/src/images/i_menu.svg +++ b/ui/src/icons/i_menu.ts @@ -1,3 +1,5 @@ - - - +import {html} from 'lit'; + +export const projectsIcon = html` + +`; diff --git a/ui/src/images/i_share.svg b/ui/src/icons/i_share.ts similarity index 59% rename from ui/src/images/i_share.svg rename to ui/src/icons/i_share.ts index cc9e195aa..f01d623cf 100644 --- a/ui/src/images/i_share.svg +++ b/ui/src/icons/i_share.ts @@ -1,3 +1,5 @@ - - - +import {html} from 'lit'; + +export const shareIcon = html` + +`; diff --git a/ui/src/images/i_tools.svg b/ui/src/icons/i_tools.ts similarity index 79% rename from ui/src/images/i_tools.svg rename to ui/src/icons/i_tools.ts index 229d09bcc..64f14c77b 100644 --- a/ui/src/images/i_tools.svg +++ b/ui/src/icons/i_tools.ts @@ -1,3 +1,5 @@ - - - +import {html} from 'lit'; + +export const toolsIcon = html` + +`; diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts new file mode 100644 index 000000000..abe76fd51 --- /dev/null +++ b/ui/src/icons/icons.ts @@ -0,0 +1,15 @@ +import {layerIcon} from './i_layer'; +import {toolsIcon} from './i_tools'; +import {shareIcon} from './i_share'; +import {projectsIcon} from './i_menu'; +import {configIcon} from './i_config'; + +export const icons = { + config: configIcon, + layer: layerIcon, + projects: projectsIcon, + tools: toolsIcon, + share: shareIcon, +}; + +export type IconKey = keyof typeof icons; diff --git a/ui/src/style/icons.css b/ui/src/style/icons.css index 1eafde1af..2aabf07e5 100644 --- a/ui/src/style/icons.css +++ b/ui/src/style/icons.css @@ -14,27 +14,6 @@ -webkit-mask: url('./images/i_close.svg') no-repeat center; } -.ngm-dashboard-icon { - width: 24px; - height: 24px; - mask: url('./images/i_menu.svg') no-repeat center; - -webkit-mask: url('./images/i_menu.svg') no-repeat center; -} - -.ngm-tools-icon { - width: 24px; - height: 24px; - mask: url('./images/i_tools.svg') no-repeat center; - -webkit-mask: url('./images/i_tools.svg') no-repeat center; -} - -.ngm-share-icon { - width: 24px; - height: 24px; - mask: url('./images/i_share.svg') no-repeat center; - -webkit-mask: url('./images/i_share.svg') no-repeat center; -} - .ngm-user-icon { width: 18px; height: 18px; @@ -42,13 +21,6 @@ -webkit-mask: url('./images/i_user.svg') no-repeat center; } -.ngm-settings-icon { - width: 24px; - height: 24px; - mask: url('./images/i_config.svg') no-repeat center; - -webkit-mask: url('./images/i_config.svg') no-repeat center; -} - .ngm-zoom-p-icon { width: 24px; height: 24px; diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index c2fead7c2..029462711 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -19,10 +19,6 @@ ngm-side-bar { .ngm-menu, .ngm-menu-mobile { width: var(--ngm-left-side-bar-width); - justify-content: space-between; - font: normal normal normal 12px/15px Inter, sans-serif; - color: #222529; - background-color: #FFFFFF; } .ngm-menu-1 { From 176e41d5fc2e875e8755bdc9cb4a688419878b9e Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 08:55:55 +0100 Subject: [PATCH 03/14] Feature: New sidebar update styles --- ui/src/elements/ngm-side-bar.ts | 35 +++++++++--------------- ui/src/elements/sidebar/ngm-menu-item.ts | 1 + ui/src/style/ngm-side-bar.css | 10 ++++++- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index 42126c40e..ce4bbdd36 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -201,18 +201,18 @@ export class SideBar extends LitElementI18n {
-
-
- this.togglePanel('data')} - > - this.togglePanel('tools')} - > - this.togglePanel('dashboard')} - > - ${!this.mobileView ? shareBtn : ''} +
+
+ this.togglePanel('data')}> + + this.togglePanel('tools')}> + + this.togglePanel('dashboard')}> + + ${!this.mobileView ? shareBtn : ''}
this.mobileShowAll = !this.mobileShowAll}> @@ -223,18 +223,9 @@ export class SideBar extends LitElementI18n {
-
+
${settingsBtn}
- - - -
- -
-
- -
Date: Fri, 29 Nov 2024 09:10:50 +0100 Subject: [PATCH 04/14] Feature: New sidebar add translations --- ui/locales/app.de.json | 5 +++++ ui/locales/app.en.json | 5 +++++ ui/locales/app.fr.json | 5 +++++ ui/locales/app.it.json | 5 +++++ ui/src/elements/ngm-side-bar.ts | 12 ++++++------ ui/src/elements/sidebar/ngm-menu-item.ts | 4 +++- 6 files changed, 29 insertions(+), 7 deletions(-) diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json index 6d2be36a6..e7681e4a3 100644 --- a/ui/locales/app.de.json +++ b/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", diff --git a/ui/locales/app.en.json b/ui/locales/app.en.json index 5ad4cc796..e7b360871 100644 --- a/ui/locales/app.en.json +++ b/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", diff --git a/ui/locales/app.fr.json b/ui/locales/app.fr.json index acaf7fae2..a030cc695 100644 --- a/ui/locales/app.fr.json +++ b/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", diff --git a/ui/locales/app.it.json b/ui/locales/app.it.json index 85c97cb3c..df340272e 100644 --- a/ui/locales/app.it.json +++ b/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", diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index ce4bbdd36..f41538d97 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -176,11 +176,11 @@ export class SideBar extends LitElementI18n { .filter(config => config.visible && !config.noQuery); const shareBtn = html` - this.togglePanel('share')} >`; const settingsBtn = html` - this.togglePanel('settings')} >`; const dataMobileHeader = html` @@ -203,16 +203,16 @@ export class SideBar extends LitElementI18n {
- this.togglePanel('data')}> - this.togglePanel('tools')}> - this.togglePanel('dashboard')}> - ${!this.mobileView ? shareBtn : ''}
this.mobileShowAll = !this.mobileShowAll}> diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index 59e3e2de3..f2d5a1227 100644 --- a/ui/src/elements/sidebar/ngm-menu-item.ts +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -3,6 +3,7 @@ import {LitElementI18n} from '../../i18n.js'; import {css, html} from 'lit'; import {classMap} from 'lit/directives/class-map.js'; import {IconKey, icons} from '../../icons/icons'; +import i18next from "i18next"; @customElement('ngm-menu-item') @@ -92,6 +93,7 @@ export class CustomElement extends LitElementI18n { background-color: #295969; color: white; width: unset; + white-space: nowrap; & > .title { transform: scaleX(1); @@ -121,7 +123,7 @@ export class CustomElement extends LitElementI18n { ${icon}
- ${this.title} + ${i18next.t(this.title)}
From d1e696cc07bd2876c034ae7df082216b7fe901b8 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 09:13:52 +0100 Subject: [PATCH 05/14] Feature: New sidebar fix padding --- ui/src/elements/sidebar/ngm-menu-item.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index f2d5a1227..0c14e8041 100644 --- a/ui/src/elements/sidebar/ngm-menu-item.ts +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -62,7 +62,6 @@ export class CustomElement extends LitElementI18n { left: 0; top: 9px; height: 40px; - padding-right: 22px; display: flex; justify-content: flex-start; @@ -94,6 +93,8 @@ export class CustomElement extends LitElementI18n { color: white; width: unset; white-space: nowrap; + padding-right: 22px; + & > .title { transform: scaleX(1); From c1f58d448c86313797b4a0d19188b813f603e3dc Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 10:51:48 +0100 Subject: [PATCH 06/14] Feature: New sidebar cleanup --- ui/src/elements/ngm-side-bar.ts | 14 ++++++++++---- ui/src/elements/shared/ngm-icon.ts | 14 ++++++++++++++ ui/src/elements/sidebar/ngm-menu-item.ts | 23 +++++++++++------------ ui/src/style/ngm-side-bar.css | 2 -- 4 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 ui/src/elements/shared/ngm-icon.ts diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index f41538d97..c89b45d3d 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -1,4 +1,4 @@ -import {html} from 'lit'; +import {css, html} from 'lit'; import {LitElementI18n} from '../i18n.js'; import '../toolbox/ngm-toolbox'; import '../layers/ngm-layers'; @@ -166,6 +166,12 @@ export class SideBar extends LitElementI18n { if (sliceOptions?.type && sliceOptions.slicePoints) this.activePanel = 'tools'; } + // static readonly styles = css` + // .mobile { + // width: 100%; + // display: flex; + // justify-content: space-between; + // }`; render() { if (!this.queryManager) { @@ -203,14 +209,14 @@ export class SideBar extends LitElementI18n {
- this.togglePanel('data')}> - this.togglePanel('tools')}> ${!this.mobileView ? shareBtn : ''} - this.togglePanel('dashboard')}>
.icon { display: flex; justify-content: center; @@ -74,13 +76,12 @@ export class CustomElement extends LitElementI18n { background-color: transparent; color: #295969; - .icon svg { + .icon { color: #295969; } & > .title { transform: scaleX(0); - transition: ease-out 100ms; transition-property: transform; transform-origin: left; @@ -95,12 +96,11 @@ export class CustomElement extends LitElementI18n { white-space: nowrap; padding-right: 22px; - & > .title { transform: scaleX(1); } - .icon svg { + .icon { color: white; } } @@ -108,7 +108,7 @@ export class CustomElement extends LitElementI18n { .container .isActive { background-color: #607D52; - .icon svg { + .icon { color: white; } } @@ -116,14 +116,13 @@ export class CustomElement extends LitElementI18n { `; render() { - const icon = icons[this.icon]; return html`
- ${icon} +
-
+
${i18next.t(this.title)}
diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index 00f14a9c5..e488244b0 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -20,8 +20,6 @@ ngm-side-bar { display: flex; justify-content: space-between; flex-direction: column; - align-items: center; - text-align: center; padding: 12px 6px } From 185c81dca15ca3f3ed55de1690f7ff90ed55fef3 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 14:55:42 +0100 Subject: [PATCH 07/14] Feature: New sidebar fix mobile view --- ui/src/elements/ngm-side-bar.ts | 43 ++---- ui/src/elements/shared/ngm-icon.ts | 3 +- ui/src/elements/sidebar/ngm-menu-item.ts | 2 +- .../i_view_all.svg => icons/i_view_all.ts} | 10 +- .../i_view_less.svg => icons/i_view_less.ts} | 10 +- ui/src/icons/icons.ts | 4 + ui/src/layers/ngm-catalog-container.ts | 13 ++ ui/src/style/icons.css | 14 -- ui/src/style/ngm-side-bar.css | 130 +++++------------- 9 files changed, 83 insertions(+), 146 deletions(-) rename ui/src/{images/i_view_all.svg => icons/i_view_all.ts} (75%) rename ui/src/{images/i_view_less.svg => icons/i_view_less.ts} (71%) create mode 100644 ui/src/layers/ngm-catalog-container.ts diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index c89b45d3d..17c5150e8 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -6,6 +6,7 @@ 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'; @@ -181,14 +182,12 @@ export class SideBar extends LitElementI18n { this.queryManager.activeLayers = this.activeLayers .filter(config => config.visible && !config.noQuery); - const shareBtn = html` - this.togglePanel('share')} - >`; - const settingsBtn = html` - this.togglePanel('settings')} - >`; + const layerBtn = html` this.togglePanel('data')}>`; + const toolsBtn = html` this.togglePanel('tools')}>`; + const projectsBtn = html` this.togglePanel('dashboard')}>`; + const shareBtn = html` this.togglePanel('share')}>`; + const settingsBtn = html` this.togglePanel('settings')}>`; + const mobileExpandBtn = html` this.mobileShowAll = !this.mobileShowAll}>`; const dataMobileHeader = html`
this.hideDataDisplayed = true} class="ngm-data-catalog-label ${classMap({active: this.hideDataDisplayed})}"> @@ -207,29 +206,15 @@ export class SideBar extends LitElementI18n {
-
-
- this.togglePanel('data')}> - - this.togglePanel('tools')}> - +
+
+ ${layerBtn} + ${toolsBtn} ${!this.mobileView ? shareBtn : ''} - this.togglePanel('dashboard')}> - -
this.mobileShowAll = !this.mobileShowAll}> -
-
-
+ ${projectsBtn} + ${this.mobileView ? mobileExpandBtn : ''}
-
+
${settingsBtn}
diff --git a/ui/src/elements/shared/ngm-icon.ts b/ui/src/elements/shared/ngm-icon.ts index 40f45f327..70679d28d 100644 --- a/ui/src/elements/shared/ngm-icon.ts +++ b/ui/src/elements/shared/ngm-icon.ts @@ -8,7 +8,6 @@ export class Icon extends LitElement { accessor icon: IconKey = 'config'; render() { - const icon = icons[this.icon]; - return html`${icon}`; + return html`${icons[this.icon]}`; } } diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index c4a0c942c..952eab1cb 100644 --- a/ui/src/elements/sidebar/ngm-menu-item.ts +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -26,7 +26,7 @@ export class MenuItem extends LitElementI18n { :host { position: relative; - width: 100%; + width: 68px; height: 58px; display: flex; justify-content: center; 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 index abe76fd51..e2e64f03a 100644 --- a/ui/src/icons/icons.ts +++ b/ui/src/icons/icons.ts @@ -3,6 +3,8 @@ import {toolsIcon} from './i_tools'; import {shareIcon} from './i_share'; import {projectsIcon} from './i_menu'; import {configIcon} from './i_config'; +import {viewAllIcon} from './i_view_all'; +import {viewLessIcon} from './i_view_less'; export const icons = { config: configIcon, @@ -10,6 +12,8 @@ export const icons = { projects: projectsIcon, tools: toolsIcon, share: shareIcon, + view_all: viewAllIcon, + view_less: viewLessIcon }; export type IconKey = keyof typeof icons; diff --git a/ui/src/layers/ngm-catalog-container.ts b/ui/src/layers/ngm-catalog-container.ts new file mode 100644 index 000000000..d38660d6e --- /dev/null +++ b/ui/src/layers/ngm-catalog-container.ts @@ -0,0 +1,13 @@ +import {customElement} from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import './ngm-catalog'; + +@customElement('ngm-icon') +export class Icon extends LitElement { + + + render() { + + return html``; + } +} diff --git a/ui/src/style/icons.css b/ui/src/style/icons.css index 2aabf07e5..b2692688b 100644 --- a/ui/src/style/icons.css +++ b/ui/src/style/icons.css @@ -301,20 +301,6 @@ background-color: var(--ngm-interaction); } -.ngm-view-all-icon { - width: 24px; - height: 24px; - mask: url('./images/i_view_all.svg') no-repeat center; - -webkit-mask: url('./images/i_view_all.svg') no-repeat center; -} - -.ngm-view-less-icon { - width: 24px; - height: 24px; - mask: url('./images/i_view_less.svg') no-repeat center; - -webkit-mask: url('./images/i_view_less.svg') no-repeat center; -} - .ngm-profile-icon { width: 24px; height: 24px; diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index e488244b0..4ea917a4a 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -2,64 +2,51 @@ ngm-side-bar { display: flex; } -.ngm-menu, -.ngm-menu-mobile, -.ngm-menu-1, -.ngm-menu-2, -.ngm-menu-1 > div, -.ngm-menu-2 > div, -.ngm-menu-mobile > div { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -.ngm-menu-test { - width: var(--ngm-left-side-bar-width); +.ngm-menu-new { + position: absolute; + bottom: 0; + width: 100%; + height: 56px; display: flex; justify-content: space-between; - flex-direction: column; - padding: 12px 6px -} + flex-direction: row; + padding: 12px 6px; -.ngm-menu-mobile { - width: var(--ngm-left-side-bar-width); -} - -.ngm-menu-1 { - margin-top: 24px; -} + .ngm-menu-new-top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; -.ngm-menu-2 { - margin-bottom: 40px; + } } -.ngm-menu-1 > div, -.ngm-menu-2 > div { - cursor: pointer; +.ngm-menu-mobile { + background-color: white; + flex-direction: row; } -.ngm-menu-2 > .ngm-settings { +.ngm-menu-mobile > div { margin-bottom: 0; + width: 68px; } -.ngm-menu-1 > div > div:nth-child(1), -.ngm-menu-2 > div > div:nth-child(1), -.ngm-menu-mobile > div > div:nth-child(1) { - background-color: #337083; -} - -.ngm-menu-1 > div:hover > div:nth-child(1), -.ngm-menu-2 > div:hover > div:nth-child(1), -.ngm-menu-mobile > div:hover > div:nth-child(1) { - background-color: var(--ngm-interaction-hover); -} +@media (min-height: 629px) and (min-width: 599px) { + .ngm-menu-new { + position: relative; + bottom: unset; + height: 100%; + width: var(--ngm-left-side-bar-width); + display: flex; + justify-content: space-between; + flex-direction: column; + padding: 12px 6px; -.ngm-menu-1 > div:hover, -.ngm-menu-2 > div:hover, -.ngm-menu-mobile > div:hover { - color: var(--ngm-interaction-hover); + .ngm-menu-new-top { + display: flex; + flex-direction: column; + } + } } .ngm-side-bar-panel { @@ -132,15 +119,6 @@ ngm-side-bar { padding-bottom: 40px; } -.ngm-menu-1 > div.ngm-active-section > div:nth-child(1), -.ngm-menu-2 > div.ngm-active-section > div:nth-child(1) { - background-color: var(--ngm-interaction-active); -} - -.ngm-menu-1 > div.ngm-active-section, -.ngm-menu-2 > div.ngm-active-section { - color: var(--ngm-interaction-active); -} .ngm-side-bar-panel.ngm-layer-catalog { z-index: 5; @@ -179,51 +157,21 @@ ngm-side-bar { margin-top: 9px; } -@media (max-height: 629px), (max-width: 599px) { - .ngm-menu, - .ngm-menu-1, - .ngm-menu-2 { - flex-direction: row; - align-items: center; - justify-content: start; - } - - .ngm-menu, - .ngm-menu-mobile { - width: 100%; - height: var(--ngm-bottom-menu-height); - position: absolute; - z-index: 9999; - bottom: 0; - justify-content: center; - } - .ngm-menu-1 { - align-items: start; - margin: 0; - } +@media (max-height: 629px), (max-width: 599px) { - .ngm-menu-1 > div, - .ngm-menu-mobile > div { - margin-bottom: 0; - width: 68px; - } - .ngm-menu-mobile > div:first-child, - .ngm-menu-1 > div:first-child { - margin-left: 12px; - } .ngm-menu-mobile { display: flex; flex-direction: row; align-items: start; bottom: var(--ngm-bottom-menu-height); + width: 100%; height: 62px; - } - - .ngm-menu-mobile > div { - margin-top: 10px; + position: absolute; + z-index: 9999; + justify-content: center; } .ngm-side-bar-panel { @@ -243,7 +191,6 @@ ngm-side-bar { width: 100% } - .ngm-menu-1 > div > div:nth-child(1), .ngm-menu-mobile > div > div:nth-child(1) { margin-bottom: 1px; background-color: #030303; @@ -310,7 +257,6 @@ ngm-side-bar { } @media (max-width: 350px) { - .ngm-menu-1 > div, .ngm-menu-mobile > div { width: 60px; } From f36f01e21c7f7bcbb2ee1f028f1de0618b4f94c5 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Fri, 29 Nov 2024 15:59:46 +0100 Subject: [PATCH 08/14] Feature: New sidebar refactor css --- ui/src/elements/ngm-side-bar.ts | 6 +- ui/src/elements/sidebar/ngm-menu-item.ts | 7 +- ui/src/style/ngm-side-bar.css | 193 ++++++++++------------- 3 files changed, 94 insertions(+), 112 deletions(-) diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index 17c5150e8..e4b29d9f3 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -206,15 +206,15 @@ export class SideBar extends LitElementI18n {
-
-
+
+
${layerBtn} ${toolsBtn} ${!this.mobileView ? shareBtn : ''} ${projectsBtn} ${this.mobileView ? mobileExpandBtn : ''}
-
+
${settingsBtn}
diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index 952eab1cb..2cae45d76 100644 --- a/ui/src/elements/sidebar/ngm-menu-item.ts +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -94,7 +94,6 @@ export class MenuItem extends LitElementI18n { color: white; width: unset; white-space: nowrap; - padding-right: 22px; & > .title { transform: scaleX(1); @@ -105,6 +104,12 @@ export class MenuItem extends LitElementI18n { } } + @media (min-height: 629px) and (min-width: 599px) { + .container:hover .box { + padding-right: 22px; + } + } + .container .isActive { background-color: #607D52; diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index 4ea917a4a..54bdd07ce 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -2,28 +2,16 @@ ngm-side-bar { display: flex; } -.ngm-menu-new { - position: absolute; - bottom: 0; +.ngm-menu-mobile { + display: flex; + align-items: center; + bottom: var(--ngm-bottom-menu-height); width: 100%; height: 56px; - display: flex; - justify-content: space-between; - flex-direction: row; - padding: 12px 6px; - - .ngm-menu-new-top { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - } -} - -.ngm-menu-mobile { + position: absolute; + z-index: 9999; + justify-content: center; background-color: white; - flex-direction: row; } .ngm-menu-mobile > div { @@ -31,58 +19,54 @@ ngm-side-bar { width: 68px; } -@media (min-height: 629px) and (min-width: 599px) { - .ngm-menu-new { - position: relative; - bottom: unset; - height: 100%; - width: var(--ngm-left-side-bar-width); - display: flex; - justify-content: space-between; - flex-direction: column; - padding: 12px 6px; +.ngm-menu { + position: absolute; + bottom: 0; + width: 100%; + height: 56px; + display: flex; - .ngm-menu-new-top { - display: flex; - flex-direction: column; - } + .ngm-menu-top { + display: flex; + align-items: center; + justify-content: center; } } .ngm-side-bar-panel { - width: 250px; - height: calc(100vh - var(--ngm-header-height)); + width: 100%; + height: calc(100% - (var(--ngm-header-height-mobile) + var(--ngm-bottom-menu-height))); max-width: 1028px; background-color: #F1F3F5; box-shadow: 4px 0 4px #00000029; padding: 10px; position: absolute; - margin-left: var(--ngm-left-side-bar-width); + margin-left: 0; z-index: 5; display: flex; flex-direction: column; overflow-y: auto; } -.inner-toolbar-settings { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 10px; - margin-top: 14px; -} - .ngm-side-bar-panel.ngm-large-panel { - width: calc(100vw - 144px); + width: 100%; } .ngm-side-bar-panel.ngm-share-panel { - width: 436px; + width: 100% } .ngm-side-bar-panel.ngm-extension-panel { - width: 528px; - left: 250px; + width: 100%; + left: 0; +} + +.ngm-side-bar-panel.ngm-layer-catalog { + z-index: 5; +} + +.ngm-side-bar-panel .ngm-panel-content { + max-height: calc(100vh - (var(--ngm-header-height-mobile) + var(--ngm-bottom-menu-height) + 34px)); } .ngm-panel-header { @@ -110,28 +94,12 @@ ngm-side-bar { cursor: pointer; } -.ngm-panel-content { +.inner-toolbar-settings { display: flex; flex-direction: column; - margin-top: 9px; - overflow-y: auto; - overflow-x: hidden; - padding-bottom: 40px; -} - - -.ngm-side-bar-panel.ngm-layer-catalog { - z-index: 5; -} - -.ngm-background-label.ui.header { - display: flex; - height: 24px; - margin-bottom: 6px; -} - -.ngm-background-label > .ui.mini.loader { - margin-left: 5px; + justify-content: space-between; + gap: 10px; + margin-top: 14px; } .ngm-label-btn { @@ -152,51 +120,76 @@ ngm-side-bar { color: var(--ngm-interaction-hover); } +.ngm-background-label.ui.header { + display: flex; + height: 24px; + margin-bottom: 6px; +} + +.ngm-background-label > .ui.mini.loader { + margin-left: 5px; +} + +.ngm-panel-content { + display: flex; + flex-direction: column; + margin-top: 9px; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 40px; +} + .ngm-configure-data { margin-right: 5px; margin-top: 9px; } +.ngm-data-catalog-label { + margin-right: 10px; +} -@media (max-height: 629px), (max-width: 599px) { - +.ngm-data-catalog-label.active { + color: var(--ngm-interaction-active); +} +@media (min-height: 629px) and (min-width: 599px) { + .ngm-menu { + position: relative; + height: 100%; + width: var(--ngm-left-side-bar-width); + justify-content: space-between; + flex-direction: column; + padding: 12px 6px; - .ngm-menu-mobile { - display: flex; - flex-direction: row; - align-items: start; - bottom: var(--ngm-bottom-menu-height); - width: 100%; - height: 62px; - position: absolute; - z-index: 9999; - justify-content: center; + .ngm-menu-top { + flex-direction: column; + } } .ngm-side-bar-panel { - margin-left: 0; - height: calc(100% - (var(--ngm-header-height-mobile) + var(--ngm-bottom-menu-height))); - } - - .ngm-side-bar-panel .ngm-panel-content { - max-height: calc(100vh - (var(--ngm-header-height-mobile) + var(--ngm-bottom-menu-height) + 34px)); + width: 250px; + margin-left: var(--ngm-left-side-bar-width); + height: calc(100vh - var(--ngm-header-height)); } .ngm-side-bar-panel.ngm-large-panel { - width: calc(100vw - 64px); + width: calc(100vw - 144px); } .ngm-side-bar-panel.ngm-share-panel { - width: 100% + width: 436px; } - .ngm-menu-mobile > div > div:nth-child(1) { - margin-bottom: 1px; - background-color: #030303; - height: 24px; + .ngm-side-bar-panel.ngm-extension-panel { + left: 250px; + width: 528px; + } + .ngm-side-bar-panel .ngm-panel-content { + max-height: unset; } +} +@media (max-height: 629px), (max-width: 599px) { .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information .ngm-proj-description { margin-left: 0; margin-top: 12px; @@ -212,27 +205,11 @@ ngm-side-bar { margin-bottom: 12px; } - .ngm-side-bar-panel.ngm-side-bar-panel, - .ngm-side-bar-panel.ngm-large-panel { - width: 100%; - } - .ngm-side-bar-panel.ngm-share-panel, .ngm-side-bar-panel.ngm-large-panel { overflow: auto; } - .ngm-side-bar-panel.ngm-extension-panel { - left: 0; - } - - .ngm-data-catalog-label { - margin-right: 10px; - } - - .ngm-data-catalog-label.active { - color: var(--ngm-interaction-active); - } ngm-map-configuration .base-map-labels { display: flex; From ffd0685b53f7c34c3648da50f1c4855a5400f6ab Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Mon, 2 Dec 2024 13:39:28 +0100 Subject: [PATCH 09/14] Feature: New sidebar refactor css --- ui/src/elements/ngm-side-bar.ts | 3 +++ ui/src/style/ngm-side-bar.css | 11 ++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index e4b29d9f3..1792cefeb 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -97,6 +97,9 @@ export class SideBar extends LitElementI18n { if (!evt.composedPath().includes(this)) this.activePanel = null; }; + static readonly styles = css` + ` + constructor() { super(); MainStore.viewer.subscribe(viewer => this.viewer = viewer); diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index 54bdd07ce..220d13d89 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -189,6 +189,12 @@ ngm-side-bar { } } +@media (max-width: 350px) { + .ngm-menu-mobile > div { + width: 60px; + } +} + @media (max-height: 629px), (max-width: 599px) { .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information .ngm-proj-description { margin-left: 0; @@ -233,8 +239,3 @@ ngm-side-bar { } } -@media (max-width: 350px) { - .ngm-menu-mobile > div { - width: 60px; - } -} From 61c74f1f6fd8dcaa9a3a18b8a01d8a739c0e4cf5 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Thu, 5 Dec 2024 10:23:22 +0100 Subject: [PATCH 10/14] Cleanup --- ui/src/elements/ngm-side-bar.ts | 13 ++----------- ui/src/layers/ngm-catalog-container.ts | 13 ------------- ui/src/style/ngm-side-bar.css | 1 + 3 files changed, 3 insertions(+), 24 deletions(-) delete mode 100644 ui/src/layers/ngm-catalog-container.ts diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index 1792cefeb..e03d51360 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -97,9 +97,6 @@ export class SideBar extends LitElementI18n { if (!evt.composedPath().includes(this)) this.activePanel = null; }; - static readonly styles = css` - ` - constructor() { super(); MainStore.viewer.subscribe(viewer => this.viewer = viewer); @@ -170,12 +167,6 @@ export class SideBar extends LitElementI18n { if (sliceOptions?.type && sliceOptions.slicePoints) this.activePanel = 'tools'; } - // static readonly styles = css` - // .mobile { - // width: 100%; - // display: flex; - // justify-content: space-between; - // }`; render() { if (!this.queryManager) { @@ -210,14 +201,14 @@ export class SideBar extends LitElementI18n {
-
+
${layerBtn} ${toolsBtn} ${!this.mobileView ? shareBtn : ''} ${projectsBtn} ${this.mobileView ? mobileExpandBtn : ''}
-
+
${settingsBtn}
diff --git a/ui/src/layers/ngm-catalog-container.ts b/ui/src/layers/ngm-catalog-container.ts deleted file mode 100644 index d38660d6e..000000000 --- a/ui/src/layers/ngm-catalog-container.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {customElement} from 'lit/decorators.js'; -import {html, LitElement} from 'lit'; -import './ngm-catalog'; - -@customElement('ngm-icon') -export class Icon extends LitElement { - - - render() { - - return html``; - } -} diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index 220d13d89..fbbfd4942 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -25,6 +25,7 @@ ngm-side-bar { width: 100%; height: 56px; display: flex; + justify-content: center; .ngm-menu-top { display: flex; From a3c2ac2ddb52920f2e70f3f1f9c754282db17392 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Thu, 5 Dec 2024 10:34:46 +0100 Subject: [PATCH 11/14] Add colors to globals css variables --- ui/src/elements/sidebar/ngm-menu-item.ts | 16 ++++++++-------- ui/src/style/index.css | 1 + ui/src/styles/index.css | 20 ++++++++++++++++++++ 3 files changed, 29 insertions(+), 8 deletions(-) create mode 100644 ui/src/styles/index.css diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index 2cae45d76..fa0cb6044 100644 --- a/ui/src/elements/sidebar/ngm-menu-item.ts +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -31,7 +31,7 @@ export class MenuItem extends LitElementI18n { display: flex; justify-content: center; align-items: center; - color: #295969; + color: var(--color-main); padding-inline: 5px; z-index: 10; } @@ -74,10 +74,10 @@ export class MenuItem extends LitElementI18n { transition: ease-out 100ms; transition-property: color; background-color: transparent; - color: #295969; + color: var(--color-main); .icon { - color: #295969; + color: var(--color-main); } & > .title { @@ -90,8 +90,8 @@ export class MenuItem extends LitElementI18n { } .container:hover .box { - background-color: #295969; - color: white; + background-color: var(--color-main); + color: var(--color-bg); width: unset; white-space: nowrap; @@ -100,7 +100,7 @@ export class MenuItem extends LitElementI18n { } .icon { - color: white; + color: var(--color-bg); } } @@ -111,10 +111,10 @@ export class MenuItem extends LitElementI18n { } .container .isActive { - background-color: #607D52; + background-color: var(--color-active); .icon { - color: white; + color: var(--color-bg); } } diff --git a/ui/src/style/index.css b/ui/src/style/index.css index 0b1d3af8e..4b214e351 100644 --- a/ui/src/style/index.css +++ b/ui/src/style/index.css @@ -63,6 +63,7 @@ @import 'ngm-coordinate-popup.css'; @import 'ngm-ion-modal.css'; @import 'ngm-info-table.css'; +@import '../styles/index.css'; * { scrollbar-color: light; diff --git a/ui/src/styles/index.css b/ui/src/styles/index.css new file mode 100644 index 000000000..36b093c28 --- /dev/null +++ b/ui/src/styles/index.css @@ -0,0 +1,20 @@ +:root { + --color-bg: #ffffff; + --color-bg--dark: #f1f3f5; + + --color-bg-contrast: #000; + --color-bg-contrast--light: #212529; + --color-bg-contrast--lighter: #656363; + + --color-highlight: #C5F6FA; + --color-highlight--dark: #66D9E8; + --color-highlight--darker: #0B7285; + + --color-main: #295969; + --color-active: #607D52; + + --font: 'Inter', sans-serif; + + font-family: var(--font); + font-size: 16px; +} \ No newline at end of file From 302daf208bb195614f5c0b420f271fbebe385ad9 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Thu, 5 Dec 2024 15:02:26 +0100 Subject: [PATCH 12/14] Work on header --- ui/locales/app.de.json | 2 +- ui/locales/app.en.json | 2 +- ui/locales/app.fr.json | 2 +- ui/locales/app.it.json | 2 +- ui/src/elements/ngm-auth.ts | 30 +++++++--- ui/src/elements/shared/ngm-lang-selector.ts | 61 +++++++++++++++++++++ ui/src/icons/i_checkmark.ts | 8 +++ ui/src/icons/i_user.ts | 7 +++ ui/src/icons/icons.ts | 6 +- ui/src/images/i_user.svg | 4 -- ui/src/ngm-app.ts | 24 +++++--- ui/src/style/header.css | 2 +- ui/src/style/icons.css | 7 --- ui/src/style/index.css | 44 +-------------- ui/src/style/search.css | 42 +++++++------- 15 files changed, 150 insertions(+), 93 deletions(-) create mode 100644 ui/src/elements/shared/ngm-lang-selector.ts create mode 100644 ui/src/icons/i_checkmark.ts create mode 100644 ui/src/icons/i_user.ts delete mode 100644 ui/src/images/i_user.svg diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json index e7681e4a3..18a1dfa86 100644 --- a/ui/locales/app.de.json +++ b/ui/locales/app.de.json @@ -98,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", diff --git a/ui/locales/app.en.json b/ui/locales/app.en.json index e7b360871..91be8a473 100644 --- a/ui/locales/app.en.json +++ b/ui/locales/app.en.json @@ -98,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", diff --git a/ui/locales/app.fr.json b/ui/locales/app.fr.json index a030cc695..45207269c 100644 --- a/ui/locales/app.fr.json +++ b/ui/locales/app.fr.json @@ -98,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", diff --git a/ui/locales/app.it.json b/ui/locales/app.it.json index df340272e..3e57714c9 100644 --- a/ui/locales/app.it.json +++ b/ui/locales/app.it.json @@ -98,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", diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts index d5726ac93..5d362e28a 100644 --- a/ui/src/elements/ngm-auth.ts +++ b/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` -
-
+
`; } - createRenderRoot() { - // no shadow dom - return this; - } + // createRenderRoot() { + // // no shadow dom + // return this; + // } } diff --git a/ui/src/elements/shared/ngm-lang-selector.ts b/ui/src/elements/shared/ngm-lang-selector.ts new file mode 100644 index 000000000..8eadef603 --- /dev/null +++ b/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` +
+
+ ${i18next.language?.toUpperCase()} +
+ +
+
+ ${SUPPORTED_LANGUAGES.map(lang => html` +
+
+ + ${lang.toUpperCase()} +
+
+ `)} +
+
+ `; + } +} 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_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/icons/icons.ts b/ui/src/icons/icons.ts index e2e64f03a..6b8cfd91c 100644 --- a/ui/src/icons/icons.ts +++ b/ui/src/icons/icons.ts @@ -5,15 +5,19 @@ import {projectsIcon} from './i_menu'; 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'; export const icons = { + checkmark: checkmarkIcon, config: configIcon, layer: layerIcon, projects: projectsIcon, tools: toolsIcon, share: shareIcon, + user: userIcon, view_all: viewAllIcon, - view_less: viewLessIcon + view_less: viewLessIcon, }; export type IconKey = keyof typeof icons; 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 d8b104de5..c9b6e3a4a 100644 --- a/ui/src/ngm-app.ts +++ b/ui/src/ngm-app.ts @@ -20,8 +20,9 @@ import './elements/ngm-coordinate-popup'; import './elements/ngm-ion-modal'; import './elements/ngm-wmts-date-picker'; import 'fomantic-ui-css/components/dropdown.js'; - +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'; @@ -60,6 +61,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; @@ -430,17 +432,25 @@ export class NgmApp extends LitElementI18n {
- + +
${i18next.language?.toUpperCase()}
+ +
-
- ${SUPPORTED_LANGUAGES.map(lang => html` -
${lang.toUpperCase()}
- `)} -
+
+ ${SUPPORTED_LANGUAGES.map(lang => html` +
+
+ + ${lang.toUpperCase()} +
+
+ `)} +
.ngm-user { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -ngm-auth > a { - cursor: pointer; -} - -ngm-auth .ngm-user-icon { - margin-bottom: 5px; - background-color: #030303; -} - -ngm-auth:hover .ngm-user-icon { - background-color: var(--ngm-interaction-hover); -} - -ngm-auth:hover { - color: var(--ngm-interaction-hover); -} - -ngm-auth .ngm-active-section > div:nth-child(1) { - background-color: var(--ngm-interaction-active); -} - -ngm-auth .ngm-active-section { - color: var(--ngm-interaction-active); -} - ngm-gst-interaction > .ui.tiny.icon.buttons { display: flex; } diff --git a/ui/src/style/search.css b/ui/src/style/search.css index 25219df63..ff8a64cf3 100644 --- a/ui/src/style/search.css +++ b/ui/src/style/search.css @@ -11,30 +11,32 @@ ga-search.ui.input > input { background: #f1f3f5; color: #000000; font-size: 16px; - border: 2px solid transparent; - border-radius: 4px; + border: none; + border-radius: 6px; + border-bottom: 2px solid #337083; + padding-left: 48px !important; } -ga-search.ui.input > input:hover { - background-color: #ffffff -} +/*ga-search.ui.input > input:hover {*/ +/* background-color: #ffffff*/ +/*}*/ -ga-search.ui.input > input:focus { - background-color: var(--ngm-hover); -} +/*ga-search.ui.input > input:focus {*/ +/* background-color: var(--ngm-hover);*/ +/*}*/ -ga-search.ui.input > input:focus, -ga-search.ui.input > input:hover { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-color: transparent; - border-bottom-color: #66D9E8; -} +/*ga-search.ui.input > input:focus,*/ +/*ga-search.ui.input > input:hover {*/ +/* border-bottom-right-radius: 0;*/ +/* border-bottom-left-radius: 0;*/ +/* border-color: transparent;*/ +/* border-bottom-color: #66D9E8;*/ +/*}*/ -ga-search.ui.input > input:focus, -ga-search.ui.input > input::placeholder { - color: #000000; -} +/*ga-search.ui.input > input:focus,*/ +/*ga-search.ui.input > input::placeholder {*/ +/* color: #000000;*/ +/*}*/ ga-search.ui.input > input::-webkit-search-decoration, ga-search.ui.input > input::-webkit-search-cancel-button, @@ -47,7 +49,7 @@ ga-search.ui.input > input::-webkit-search-results-decoration { width: 30px; height: 100%; position: absolute; - right: 12px; + left: 12px; color: #66D9E8; background-color: var(--ngm-interaction); } From fa22d34b93c61677e9aa086a3227237e6e585519 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Mon, 9 Dec 2024 15:47:10 +0100 Subject: [PATCH 13/14] Pr fixes --- ui/src/elements/ngm-auth.ts | 10 ++-------- ui/src/elements/ngm-side-bar.ts | 19 ++++++++++++++----- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts index 5d362e28a..9bf874ca7 100644 --- a/ui/src/elements/ngm-auth.ts +++ b/ui/src/elements/ngm-auth.ts @@ -22,7 +22,6 @@ 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; @@ -80,13 +79,8 @@ export class NgmAuth extends LitElementI18n { render() { return html`
- + @click=${this.user ? this.logout : this.login}> +
`; } - - // createRenderRoot() { - // // no shadow dom - // return this; - // } } diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts index e03d51360..1d1d99e46 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -167,6 +167,9 @@ export class SideBar extends LitElementI18n { if (sliceOptions?.type && sliceOptions.slicePoints) this.activePanel = 'tools'; } + private createMenuItem(icon: string, title: string, panel: string) { + return html` this.togglePanel('data')}>`; + } render() { if (!this.queryManager) { @@ -176,11 +179,17 @@ export class SideBar extends LitElementI18n { this.queryManager.activeLayers = this.activeLayers .filter(config => config.visible && !config.noQuery); - const layerBtn = html` this.togglePanel('data')}>`; - const toolsBtn = html` this.togglePanel('tools')}>`; - const projectsBtn = html` this.togglePanel('dashboard')}>`; - const shareBtn = html` this.togglePanel('share')}>`; - const settingsBtn = html` this.togglePanel('settings')}>`; + + const layerBtn = this.createMenuItem('layer', 'menu_layers', 'data'); + const toolsBtn = this.createMenuItem('tools', 'menu_tools', 'tools'); + 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` this.togglePanel('data')}>`; + // const toolsBtn = html` this.togglePanel('tools')}>`; + // const projectsBtn = html` this.togglePanel('dashboard')}>`; + // const shareBtn = html` this.togglePanel('share')}>`; + // const settingsBtn = html` this.togglePanel('settings')}>`; const mobileExpandBtn = html` this.mobileShowAll = !this.mobileShowAll}>`; const dataMobileHeader = html`
this.hideDataDisplayed = true} From 3c6be157ca32d69feb49f9e3d961e0676250846d Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Tue, 10 Dec 2024 08:14:31 +0100 Subject: [PATCH 14/14] Pr fixes --- ui/src/elements/ngm-auth.ts | 23 ++-- ui/src/elements/ngm-cursor-information.ts | 48 +++++++- ui/src/elements/ngm-side-bar.ts | 14 +-- ui/src/elements/shared/ngm-lang-selector.ts | 61 ---------- ui/src/elements/sidebar/ngm-menu-item.ts | 116 +++++++++----------- ui/src/icons/icons.ts | 4 +- ui/src/ngm-app.ts | 6 +- ui/src/style/index.css | 11 +- ui/src/style/ngm-cursor-information.css | 40 ------- ui/src/style/search.css | 21 ---- 10 files changed, 124 insertions(+), 220 deletions(-) delete mode 100644 ui/src/elements/shared/ngm-lang-selector.ts delete mode 100644 ui/src/style/ngm-cursor-information.css diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts index 9bf874ca7..bc7f0cb6d 100644 --- 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 index ec909c66c..ce5bb77f8 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'; @@ -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 index 1f2c66151..ae81d25aa 100644 --- 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` this.togglePanel('data')}>`; + return html` + this.togglePanel(panel)} + >`; } 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` this.togglePanel('data')}>`; - // const toolsBtn = html` this.togglePanel('tools')}>`; - // const projectsBtn = html` this.togglePanel('dashboard')}>`; - // const shareBtn = html` this.togglePanel('share')}>`; - // const settingsBtn = html` this.togglePanel('settings')}>`; - const mobileExpandBtn = html` this.mobileShowAll = !this.mobileShowAll}>`; + const mobileExpandBtn = html` this.mobileShowAll = !this.mobileShowAll}>`; const dataMobileHeader = html`
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 deleted file mode 100644 index 8eadef603..000000000 --- a/ui/src/elements/shared/ngm-lang-selector.ts +++ /dev/null @@ -1,61 +0,0 @@ -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` -
-
- ${i18next.language?.toUpperCase()} -
- -
-
- ${SUPPORTED_LANGUAGES.map(lang => html` -
-
- - ${lang.toUpperCase()} -
-
- `)} -
-
- `; - } -} diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts index fa0cb6044..c66a458e1 100644 --- 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,8 +31,7 @@ export class MenuItem extends LitElementI18n { z-index: 10; } - :host > .container, - :host > .container:active { + :host > .container { position: relative; text-decoration: none; width: 100%; @@ -45,89 +39,77 @@ export class MenuItem extends LitElementI18n { 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` -
+
-
+
${i18next.t(this.title)}
diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts index 6b8cfd91c..a73137d87 100644 --- 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 index 77906e8d6..19dc37b40 100644 --- 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 {
- - +
${i18next.language?.toUpperCase()} @@ -444,7 +442,7 @@ export class NgmApp extends LitElementI18n {
${SUPPORTED_LANGUAGES.map(lang => html`
-
+
${lang.toUpperCase()}
diff --git a/ui/src/style/index.css b/ui/src/style/index.css index d82c118ec..ea6e9b1ed 100644 --- a/ui/src/style/index.css +++ b/ui/src/style/index.css @@ -36,7 +36,6 @@ @import 'keyboard-navigation.css'; @import 'layers.css'; @import 'ngm-map-configuration.css'; -@import 'ngm-cursor-information.css'; @import 'ngm-point-edit.css'; @import 'ngm-position-edit.css'; @import 'ngm-map-chooser.css'; @@ -217,6 +216,16 @@ cesium-view-cube { gap: 6px; } +.ngm-lang-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + gap: 12px; + width: 85px; + font-size: 14px; +} + .ngm-lang-title .ngm-dropdown-icon { background-color: var(--ngm-interaction); transform: rotate(90deg); diff --git a/ui/src/style/ngm-cursor-information.css b/ui/src/style/ngm-cursor-information.css deleted file mode 100644 index 4f54e5b8e..000000000 --- a/ui/src/style/ngm-cursor-information.css +++ /dev/null @@ -1,40 +0,0 @@ -ngm-cursor-information { - 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; -} - -ngm-cursor-information .ngm-nci-value { - font-weight: 600; - min-width: 75px; -} - -.ngm-nci-position { - width: 83px; - margin-right: 20px; -} - -.ngm-nci-height { - display: flex; - flex-direction: column; - white-space: nowrap; - margin-right: 10px; -} - -ngm-cursor-information > img { - width: 24px; -} - -@media (max-width: 1193px) { - .ngm-nci-height, - .ngm-nci-position { - display: none; - } - ngm-cursor-information { - min-width: 0; - } -} diff --git a/ui/src/style/search.css b/ui/src/style/search.css index ff8a64cf3..9070455e1 100644 --- a/ui/src/style/search.css +++ b/ui/src/style/search.css @@ -17,27 +17,6 @@ ga-search.ui.input > input { padding-left: 48px !important; } -/*ga-search.ui.input > input:hover {*/ -/* background-color: #ffffff*/ -/*}*/ - -/*ga-search.ui.input > input:focus {*/ -/* background-color: var(--ngm-hover);*/ -/*}*/ - -/*ga-search.ui.input > input:focus,*/ -/*ga-search.ui.input > input:hover {*/ -/* border-bottom-right-radius: 0;*/ -/* border-bottom-left-radius: 0;*/ -/* border-color: transparent;*/ -/* border-bottom-color: #66D9E8;*/ -/*}*/ - -/*ga-search.ui.input > input:focus,*/ -/*ga-search.ui.input > input::placeholder {*/ -/* color: #000000;*/ -/*}*/ - ga-search.ui.input > input::-webkit-search-decoration, ga-search.ui.input > input::-webkit-search-cancel-button, ga-search.ui.input > input::-webkit-search-results-button,