diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json index 6d2be36a6..18a1dfa86 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", @@ -93,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 5ad4cc796..91be8a473 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", @@ -93,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 acaf7fae2..45207269c 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", @@ -93,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 85c97cb3c..3e57714c9 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", @@ -93,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..bc7f0cb6d 100644 --- a/ui/src/elements/ngm-auth.ts +++ b/ui/src/elements/ngm-auth.ts @@ -1,13 +1,13 @@ -import {html} from 'lit'; +import {css, html} from 'lit'; import type {AuthUser} from '../authService'; import AuthService from '../authService'; import {LitElementI18n} from '../i18n.js'; import auth from '../store/auth'; -import {classMap} from 'lit/directives/class-map.js'; import {customElement, property, state} from 'lit/decorators.js'; import DashboardStore from '../store/dashboard'; import {consume} from '@lit/context'; import {authServiceContext} from '../context'; +import './shared/ngm-icon'; /** * Authentication component @@ -61,16 +61,25 @@ 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; - } } 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 5e80d2e40..ae81d25aa 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -5,6 +5,8 @@ import '../layers/ngm-layers'; 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'; @@ -162,9 +164,15 @@ export class SideBar extends LitElementI18n { }); const sliceOptions = getSliceParam(); - if (sliceOptions && sliceOptions.type && sliceOptions.slicePoints) + if (sliceOptions?.type && sliceOptions.slicePoints) this.activePanel = 'tools'; } + private createMenuItem(icon: string, title: string, panel: string) { + return html` + this.togglePanel(panel)} + >`; + } render() { if (!this.queryManager) { @@ -174,16 +182,13 @@ 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 = 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 mobileExpandBtn = html` this.mobileShowAll = !this.mobileShowAll}>`; const dataMobileHeader = html`
this.hideDataDisplayed = true} class="ngm-data-catalog-label ${classMap({active: this.hideDataDisplayed})}"> @@ -202,31 +207,15 @@ export class SideBar extends LitElementI18n {
-
-
-
this.togglePanel('dashboard')}> -
-
-
this.togglePanel('data')}> -
-
-
this.togglePanel('tools', false)}> -
-
+
+
+ ${layerBtn} + ${toolsBtn} ${!this.mobileView ? shareBtn : ''} -
this.mobileShowAll = !this.mobileShowAll}> -
-
+ ${projectsBtn} + ${this.mobileView ? mobileExpandBtn : ''}
-
+
${settingsBtn}
@@ -461,7 +450,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}); } } @@ -637,7 +626,7 @@ export class SideBar extends LitElementI18n { if (zoomToPosition) { let altitude = 0, cartesianPosition: Cartesian3 | undefined, windowPosition: Cartesian2 | undefined; const updateValues = () => { - altitude = this.viewer!.scene.globe.getHeight(this.viewer!.scene.camera.positionCartographic) || 0; + altitude = this.viewer!.scene.globe.getHeight(this.viewer!.scene.camera.positionCartographic) ?? 0; cartesianPosition = Cartesian3.fromDegrees(zoomToPosition.longitude, zoomToPosition.latitude, zoomToPosition.height + altitude); windowPosition = this.viewer!.scene.cartesianToCanvasCoordinates(cartesianPosition); }; diff --git a/ui/src/elements/shared/ngm-icon.ts b/ui/src/elements/shared/ngm-icon.ts new file mode 100644 index 000000000..70679d28d --- /dev/null +++ b/ui/src/elements/shared/ngm-icon.ts @@ -0,0 +1,13 @@ +import {customElement, property} from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {IconKey, icons} from '../../icons/icons'; + +@customElement('ngm-icon') +export class Icon extends LitElement { + @property() + accessor icon: IconKey = 'config'; + + render() { + return html`${icons[this.icon]}`; + } +} diff --git a/ui/src/elements/sidebar/ngm-menu-item.ts b/ui/src/elements/sidebar/ngm-menu-item.ts new file mode 100644 index 000000000..c66a458e1 --- /dev/null +++ b/ui/src/elements/sidebar/ngm-menu-item.ts @@ -0,0 +1,119 @@ +import {customElement, property} from 'lit/decorators.js'; +import {LitElementI18n} from '../../i18n.js'; +import {css, html} from 'lit'; +import {classMap} from 'lit/directives/class-map.js'; +import {IconKey} from '../../icons/icons'; +import i18next from 'i18next'; +import '../shared/ngm-icon'; + + +@customElement('ngm-menu-item') +export class MenuItem extends LitElementI18n { + @property({type: String}) + accessor title: string = ''; + @property() + accessor icon: IconKey = 'config'; + @property({type: Boolean, attribute: 'isactive', reflect: true}) + accessor isActive: boolean = false; + @property({type: Boolean}) + accessor isMobile: boolean = false; + + static readonly styles = css` + :host { + position: relative; + width: 68px; + height: 58px; + display: flex; + justify-content: center; + align-items: center; + color: var(--color-main); + padding-inline: 5px; + z-index: 10; + } + + :host > .container { + position: relative; + text-decoration: none; + width: 100%; + height: 100%; + cursor: pointer; + } + + .container .box { + position: absolute; + width: 58px; + min-width: 58px; + left: 0; + top: 9px; + height: 40px; + display: flex; + justify-content: flex-start; + align-items: center; + border-radius: 4px; + background-color: transparent; + color: var(--color-main); + transition: ease-out 100ms; + transition-property: color, background-color; + } + + .container .box > .icon { + display: flex; + justify-content: center; + align-items: center; + min-width: 58px; + height: 40px; + color: var(--color-main); + } + + .container .box > .title { + transform: scaleX(0); + transition: ease-out 100ms; + transition-property: transform; + transform-origin: left; + } + + .container:hover .box { + background-color: var(--color-main); + color: var(--color-bg); + width: unset; + white-space: nowrap; + } + + .container:hover .box > .title { + transform: scaleX(1); + } + + .container:hover .box .icon { + color: var(--color-bg); + } + + @media (min-width: 599px) { + .container:hover .box { + padding-right: 22px; + } + } + + :host([isactive]) .container .box { + background-color: var(--color-active); + } + + :host([isactive]) .container .box .icon { + color: var(--color-bg); + } + `; + + render() { + return html` +
+
+
+ +
+
+ ${i18next.t(this.title)} +
+
+
+ `; + } +} 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_config.ts b/ui/src/icons/i_config.ts new file mode 100644 index 000000000..e91ad3ea5 --- /dev/null +++ b/ui/src/icons/i_config.ts @@ -0,0 +1,8 @@ +import {html} from 'lit'; + +export const configIcon = html` + + +`; + + diff --git a/ui/src/icons/i_layer.ts b/ui/src/icons/i_layer.ts new file mode 100644 index 000000000..b21e6223b --- /dev/null +++ b/ui/src/icons/i_layer.ts @@ -0,0 +1,5 @@ +import {html} from 'lit'; + +export const layerIcon = html` + +`; diff --git a/ui/src/icons/i_menu.ts b/ui/src/icons/i_menu.ts new file mode 100644 index 000000000..22b91d676 --- /dev/null +++ b/ui/src/icons/i_menu.ts @@ -0,0 +1,5 @@ +import {html} from 'lit'; + +export const projectsIcon = html` + +`; diff --git a/ui/src/icons/i_share.ts b/ui/src/icons/i_share.ts new file mode 100644 index 000000000..f01d623cf --- /dev/null +++ b/ui/src/icons/i_share.ts @@ -0,0 +1,5 @@ +import {html} from 'lit'; + +export const shareIcon = html` + +`; diff --git a/ui/src/icons/i_tools.ts b/ui/src/icons/i_tools.ts new file mode 100644 index 000000000..64f14c77b --- /dev/null +++ b/ui/src/icons/i_tools.ts @@ -0,0 +1,5 @@ +import {html} from 'lit'; + +export const toolsIcon = html` + +`; diff --git a/ui/src/icons/i_user.ts b/ui/src/icons/i_user.ts new file mode 100644 index 000000000..368e0a5bb --- /dev/null +++ b/ui/src/icons/i_user.ts @@ -0,0 +1,7 @@ +import {html} from 'lit'; + +export const userIcon = html` + + + +`; diff --git a/ui/src/images/i_view_all.svg b/ui/src/icons/i_view_all.ts similarity index 75% rename from ui/src/images/i_view_all.svg rename to ui/src/icons/i_view_all.ts index 462e1658f..22b01bdb2 100644 --- a/ui/src/images/i_view_all.svg +++ b/ui/src/icons/i_view_all.ts @@ -1,4 +1,6 @@ - - - - +import {html} from 'lit'; + +export const viewAllIcon = html` + + +`; diff --git a/ui/src/images/i_view_less.svg b/ui/src/icons/i_view_less.ts similarity index 71% rename from ui/src/images/i_view_less.svg rename to ui/src/icons/i_view_less.ts index 9243f0daa..a7b4fb731 100644 --- a/ui/src/images/i_view_less.svg +++ b/ui/src/icons/i_view_less.ts @@ -1,4 +1,6 @@ - - - - +import {html} from 'lit'; + +export const viewLessIcon = html` + + +`; diff --git a/ui/src/icons/icons.ts b/ui/src/icons/icons.ts new file mode 100644 index 000000000..a73137d87 --- /dev/null +++ b/ui/src/icons/icons.ts @@ -0,0 +1,23 @@ +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'; +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, + viewAll: viewAllIcon, + viewLess: viewLessIcon, +}; + +export type IconKey = keyof typeof icons; diff --git a/ui/src/images/i_config.svg b/ui/src/images/i_config.svg deleted file mode 100644 index 80c21976c..000000000 --- a/ui/src/images/i_config.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/images/i_layer.svg b/ui/src/images/i_layer.svg deleted file mode 100644 index 239346727..000000000 --- a/ui/src/images/i_layer.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/images/i_menu.svg b/ui/src/images/i_menu.svg deleted file mode 100644 index b3770918e..000000000 --- a/ui/src/images/i_menu.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/images/i_share.svg b/ui/src/images/i_share.svg deleted file mode 100644 index c26a36047..000000000 --- a/ui/src/images/i_share.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/images/i_tools.svg b/ui/src/images/i_tools.svg deleted file mode 100644 index 89c7636f1..000000000 --- a/ui/src/images/i_tools.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/images/i_user.svg b/ui/src/images/i_user.svg deleted file mode 100644 index dfa5bb37a..000000000 --- a/ui/src/images/i_user.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts index ceb696737..19dc37b40 100644 --- a/ui/src/ngm-app.ts +++ b/ui/src/ngm-app.ts @@ -20,7 +20,7 @@ import './elements/ngm-coordinate-popup'; import './elements/ngm-ion-modal'; import './elements/ngm-wmts-date-picker'; import 'fomantic-ui-css/components/dropdown'; - +import './elements/shared/ngm-icon'; import '@geoblocks/cesium-view-cube'; import {COGNITO_VARIABLES, DEFAULT_VIEW, SUPPORTED_LANGUAGES} from './constants'; @@ -60,6 +60,7 @@ import $ from 'jquery'; import {clientConfigContext} from './context'; import {consume} from '@lit/context'; import {ClientConfig} from './api/client-config'; +import {styleMap} from "lit/directives/style-map.js"; const SKIP_STEP2_TIMEOUT = 5000; @@ -430,17 +431,24 @@ 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/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/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index c048e708d..fbbfd4942 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -2,99 +2,72 @@ 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 { +.ngm-menu-mobile { display: flex; - flex-direction: column; align-items: center; - text-align: center; -} - - -.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 { - margin-top: 24px; -} - -.ngm-menu-2 { - margin-bottom: 40px; -} - -.ngm-menu-1 > div, -.ngm-menu-2 > div { - margin-bottom: 28px; - cursor: pointer; + bottom: var(--ngm-bottom-menu-height); + width: 100%; + height: 56px; + position: absolute; + z-index: 9999; + justify-content: center; + background-color: white; } -.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: #030303; -} - -.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); -} +.ngm-menu { + position: absolute; + bottom: 0; + width: 100%; + height: 56px; + display: flex; + justify-content: center; -.ngm-menu-1 > div:hover, -.ngm-menu-2 > div:hover, -.ngm-menu-mobile > div:hover { - color: var(--ngm-interaction-hover); + .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 { @@ -122,27 +95,30 @@ 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; + justify-content: space-between; + gap: 10px; + margin-top: 14px; } -.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-label-btn { + margin-left: auto; + font: normal normal 500 14px/20px Inter, sans-serif; + letter-spacing: 0; + color: var(--ngm-interaction); + opacity: 1; + margin-right: 17px; + cursor: pointer; } -.ngm-menu-1 > div.ngm-active-section, -.ngm-menu-2 > div.ngm-active-section { +.ngm-label-btn.active { color: var(--ngm-interaction-active); } -.ngm-side-bar-panel.ngm-layer-catalog { - z-index: 5; +.ngm-label-btn:hover { + color: var(--ngm-interaction-hover); } .ngm-background-label.ui.header { @@ -155,22 +131,13 @@ ngm-side-bar { margin-left: 5px; } -.ngm-label-btn { - margin-left: auto; - font: normal normal 500 14px/20px Inter, sans-serif; - letter-spacing: 0; - color: var(--ngm-interaction); - opacity: 1; - margin-right: 17px; - cursor: pointer; -} - -.ngm-label-btn.active { - color: var(--ngm-interaction-active); -} - -.ngm-label-btn:hover { - color: var(--ngm-interaction-hover); +.ngm-panel-content { + display: flex; + flex-direction: column; + margin-top: 9px; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 40px; } .ngm-configure-data { @@ -178,77 +145,58 @@ 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-data-catalog-label { + margin-right: 10px; +} - .ngm-menu, - .ngm-menu-mobile { - width: 100%; - height: var(--ngm-bottom-menu-height); - position: absolute; - z-index: 9999; - bottom: 0; - justify-content: center; - } +.ngm-data-catalog-label.active { + color: var(--ngm-interaction-active); +} - .ngm-menu-1 { - align-items: start; - margin: 0; - } +@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-1 > div, - .ngm-menu-mobile > div { - margin-bottom: 0; - width: 68px; + .ngm-menu-top { + flex-direction: column; + } } - .ngm-menu-mobile > div:first-child, - .ngm-menu-1 > div:first-child { - margin-left: 12px; + .ngm-side-bar-panel { + width: 250px; + margin-left: var(--ngm-left-side-bar-width); + height: calc(100vh - var(--ngm-header-height)); } - .ngm-menu-mobile { - display: flex; - flex-direction: row; - align-items: start; - bottom: var(--ngm-bottom-menu-height); - height: 62px; + .ngm-side-bar-panel.ngm-large-panel { + width: calc(100vw - 144px); } - .ngm-menu-mobile > div { - margin-top: 10px; + .ngm-side-bar-panel.ngm-share-panel { + width: 436px; } - .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-extension-panel { + left: 250px; + width: 528px; } - .ngm-side-bar-panel .ngm-panel-content { - max-height: calc(100vh - (var(--ngm-header-height-mobile) + var(--ngm-bottom-menu-height) + 34px)); - } - - .ngm-side-bar-panel.ngm-large-panel { - width: calc(100vw - 64px); - } - - .ngm-side-bar-panel.ngm-share-panel { - width: 100% + max-height: unset; } +} - .ngm-menu-1 > div > div:nth-child(1), - .ngm-menu-mobile > div > div:nth-child(1) { - margin-bottom: 1px; - background-color: #030303; - height: 24px; +@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; margin-top: 12px; @@ -264,27 +212,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; @@ -308,9 +240,3 @@ ngm-side-bar { } } -@media (max-width: 350px) { - .ngm-menu-1 > div, - .ngm-menu-mobile > div { - width: 60px; - } -} diff --git a/ui/src/style/search.css b/ui/src/style/search.css index 25219df63..9070455e1 100644 --- a/ui/src/style/search.css +++ b/ui/src/style/search.css @@ -11,29 +11,10 @@ ga-search.ui.input > input { background: #f1f3f5; color: #000000; font-size: 16px; - border: 2px solid transparent; - border-radius: 4px; -} - -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; + border: none; + border-radius: 6px; + border-bottom: 2px solid #337083; + padding-left: 48px !important; } ga-search.ui.input > input::-webkit-search-decoration, @@ -47,7 +28,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); } 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; +} 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