From 032c23d7685d854454317747d0193e909fad2515 Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Tue, 10 Dec 2024 08:14:31 +0100 Subject: [PATCH] Pr fixes --- ui/src/elements/ngm-auth.ts | 22 ++-- ui/src/elements/ngm-cursor-information.ts | 48 +++++++- ui/src/elements/ngm-side-bar.ts | 12 +- 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 | 4 +- ui/src/style/index.css | 1 - ui/src/style/ngm-cursor-information.css | 40 ------- ui/src/style/search.css | 21 ---- 10 files changed, 112 insertions(+), 217 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..528905a9a 100644 --- a/ui/src/elements/ngm-auth.ts +++ b/ui/src/elements/ngm-auth.ts @@ -63,17 +63,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..8ba3a2791 100644 --- a/ui/src/elements/ngm-side-bar.ts +++ b/ui/src/elements/ngm-side-bar.ts @@ -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..20e76c3c5 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()} diff --git a/ui/src/style/index.css b/ui/src/style/index.css index d82c118ec..f5acdb923 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'; 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,