From 78d874c961a1236a100bfc698b1d6d42c06d3f4b Mon Sep 17 00:00:00 2001 From: till_schuetze Date: Mon, 25 Nov 2024 09:19:22 +0100 Subject: [PATCH] Fix: sonar cloud quick fixes --- api/src/database.rs | 1 - ui/Dockerfile | 34 +- ui/index.html | 3 +- .../earthquakeVisualizer.js | 196 ++-- ui/src/elements/dashboard/ngm-dashboard.ts | 2 +- ui/src/elements/ngm-layer-legend.ts | 129 ++- ui/src/elements/ngm-minimap.ts | 302 +++--- ui/src/elements/ngm-object-information.ts | 233 +++-- ui/src/elements/ngm-share-link.ts | 172 ++-- ui/src/ngm-app.ts | 2 +- ui/src/query/SwisstopoIdentify.ts | 87 +- ui/src/search.js | 342 ++++--- ui/src/style/index.css | 6 +- ui/src/style/layers.css | 497 +++++----- ui/src/style/ngm-action-list-item.css | 186 ++-- ui/src/style/ngm-cam-configuration.css | 4 +- ui/src/style/ngm-checkbox.css | 150 +-- ui/src/style/ngm-cursor-information.css | 80 +- ui/src/style/ngm-dashboard.css | 928 +++++++++--------- ui/src/style/ngm-geometry-info.css | 420 ++++---- ui/src/style/ngm-input.css | 210 ++-- ui/src/style/ngm-layer-legend.css | 119 +-- ui/src/style/ngm-point-edit.css | 42 +- ui/src/style/ngm-share-link.css | 118 +-- ui/src/style/ngm-side-bar.css | 633 ++++++------ ui/src/style/ngm-toolbox.css | 430 ++++---- ui/src/style/search.css | 248 ++--- ui/src/toolbox/ngm-geometry-info.ts | 498 +++++----- ui/webpack.config.js | 309 +++--- 29 files changed, 3178 insertions(+), 3203 deletions(-) diff --git a/api/src/database.rs b/api/src/database.rs index c7b430be7..e08de3737 100644 --- a/api/src/database.rs +++ b/api/src/database.rs @@ -1,4 +1,3 @@ -use serde::Serialize; use sqlx::{ postgres::{PgConnectOptions, PgPoolOptions}, Connection, Executor, PgConnection, PgPool, diff --git a/ui/Dockerfile b/ui/Dockerfile index c39659765..22bc454f4 100644 --- a/ui/Dockerfile +++ b/ui/Dockerfile @@ -1,18 +1,16 @@ -FROM node:22-alpine as build - -WORKDIR /app -COPY . . - -RUN npm install --ignore-scripts -RUN npm run build --omit=dev - - - -FROM nginx:alpine - -WORKDIR /usr/share/nginx/html -COPY --from=build /app/dist/ /usr/share/nginx/html - -EXPOSE 80 - -CMD ["nginx", "-g", "daemon off;"] +FROM node:22-alpine AS build + +WORKDIR /app +COPY . . + +RUN npm install --ignore-scripts && npm run build --omit=dev + + +FROM nginx:alpine + +WORKDIR /usr/share/nginx/html +COPY --from=build /app/dist/ /usr/share/nginx/html + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/ui/index.html b/ui/index.html index 70527e6b9..fcabf5c82 100644 --- a/ui/index.html +++ b/ui/index.html @@ -3,13 +3,14 @@ + swissgeol + - swissgeol diff --git a/ui/src/earthquakeVisualization/earthquakeVisualizer.js b/ui/src/earthquakeVisualization/earthquakeVisualizer.js index b11258725..1fc201324 100644 --- a/ui/src/earthquakeVisualization/earthquakeVisualizer.js +++ b/ui/src/earthquakeVisualization/earthquakeVisualizer.js @@ -1,99 +1,97 @@ -import { - Cartographic, - Cartesian3, - CustomDataSource, - HeadingPitchRange, - Math as CMath, - BoundingSphere, - Rectangle, - -} from 'cesium'; -import {EARTHQUAKE_SPHERE_SIZE_COEF, getColorFromTime, parseEarthquakeData} from './helpers'; -import {LayerType} from '../constants'; - -export default class EarthquakeVisualizer { - /** - * @param {import('cesium/Source/Widgets/Viewer/Viewer').default} viewer - * @param {Object} config - */ - constructor(viewer, config) { - this.viewer = viewer; - this.config = config; - this.earthquakeDataSource = new CustomDataSource(LayerType.earthquakes); - this.viewer.dataSources.add(this.earthquakeDataSource); - this.boundingSphere = null; - this.boundingRectangle = new Rectangle( - Number.POSITIVE_INFINITY, - Number.POSITIVE_INFINITY, - Number.NEGATIVE_INFINITY, - Number.NEGATIVE_INFINITY - ); - this.maximumHeight = 0; - this.earthquakeDataSource.entities.collectionChanged.addEventListener(() => { - this.viewer.scene.requestRender(); - }); - } - - async showEarthquakes() { - const response = await fetch(this.config.downloadUrl); - const text = await response.text(); - parseEarthquakeData(text).map(data => { - const size = Number(data.Magnitude.split(' ')[0]) * EARTHQUAKE_SPHERE_SIZE_COEF; - const depthMeters = Number(data.Depthkm.split(' ')[0]) * 1000; // convert km to m - const longitude = Number(data.Longitude); - const latitude = Number(data.Latitude); - delete data.Longitude; - delete data.Latitude; - const position = Cartesian3.fromDegrees(longitude, latitude, -depthMeters); - const posCart = Cartographic.fromCartesian(position); - const altitude = this.viewer.scene.globe.getHeight(posCart) || 0; - posCart.height = posCart.height + altitude; - Cartographic.toCartesian(posCart, undefined, position); - const cameraDistance = size * 4; - const zoomHeadingPitchRange = new HeadingPitchRange(0, CMath.toRadians(25), cameraDistance); - data['Details'] = this.config.detailsUrl; - this.boundingRectangle.west = Math.min(CMath.toRadians(longitude), this.boundingRectangle.west); - this.boundingRectangle.south = Math.min(CMath.toRadians(latitude), this.boundingRectangle.south); - this.boundingRectangle.east = Math.max(CMath.toRadians(longitude), this.boundingRectangle.east); - this.boundingRectangle.north = Math.max(CMath.toRadians(latitude), this.boundingRectangle.north); - this.maximumHeight = Math.max(this.maximumHeight, depthMeters * 2); - return this.earthquakeDataSource.entities.add({ - position: position, - ellipsoid: { - radii: new Cartesian3(size, size, size), - material: getColorFromTime(data.Time), - }, - properties: { - ...data, - propsOrder: this.config.propsOrder, - zoomHeadingPitchRange: zoomHeadingPitchRange - } - }); - }); - this.boundingSphere = BoundingSphere.fromRectangle3D(this.boundingRectangle); - } - - /** - * @param {boolean} visible - */ - async setVisible(visible) { - const entities = this.earthquakeDataSource.entities.values; - if (entities && entities.length) { - this.earthquakeDataSource.show = visible; - } else { - if (visible) { - await this.showEarthquakes(); - } - } - } - - /** - * @param {number} opacity - */ - setOpacity(opacity) { - const entities = this.earthquakeDataSource.entities.values; - entities.forEach(entity => { - entity.ellipsoid.material = entity.ellipsoid.material.color.getValue().withAlpha(Number(opacity)); - }); - } -} +import { + Cartographic, + Cartesian3, + CustomDataSource, + HeadingPitchRange, + Math as CMath, + BoundingSphere, + Rectangle, + +} from 'cesium'; +import {EARTHQUAKE_SPHERE_SIZE_COEF, getColorFromTime, parseEarthquakeData} from './helpers'; +import {LayerType} from '../constants'; + +export default class EarthquakeVisualizer { + /** + * @param {import('cesium/Source/Widgets/Viewer/Viewer').default} viewer + * @param {Object} config + */ + constructor(viewer, config) { + this.viewer = viewer; + this.config = config; + this.earthquakeDataSource = new CustomDataSource(LayerType.earthquakes); + this.viewer.dataSources.add(this.earthquakeDataSource); + this.boundingSphere = null; + this.boundingRectangle = new Rectangle( + Number.POSITIVE_INFINITY, + Number.POSITIVE_INFINITY, + Number.NEGATIVE_INFINITY, + Number.NEGATIVE_INFINITY + ); + this.maximumHeight = 0; + this.earthquakeDataSource.entities.collectionChanged.addEventListener(() => { + this.viewer.scene.requestRender(); + }); + } + + async showEarthquakes() { + const response = await fetch(this.config.downloadUrl); + const text = await response.text(); + parseEarthquakeData(text).map(data => { + const size = Number(data.Magnitude.split(' ')[0]) * EARTHQUAKE_SPHERE_SIZE_COEF; + const depthMeters = Number(data.Depthkm.split(' ')[0]) * 1000; // convert km to m + const longitude = Number(data.Longitude); + const latitude = Number(data.Latitude); + delete data.Longitude; + delete data.Latitude; + const position = Cartesian3.fromDegrees(longitude, latitude, -depthMeters); + const posCart = Cartographic.fromCartesian(position); + const altitude = this.viewer.scene.globe.getHeight(posCart) || 0; + posCart.height = posCart.height + altitude; + Cartographic.toCartesian(posCart, undefined, position); + const cameraDistance = size * 4; + const zoomHeadingPitchRange = new HeadingPitchRange(0, CMath.toRadians(25), cameraDistance); + data['Details'] = this.config.detailsUrl; + this.boundingRectangle.west = Math.min(CMath.toRadians(longitude), this.boundingRectangle.west); + this.boundingRectangle.south = Math.min(CMath.toRadians(latitude), this.boundingRectangle.south); + this.boundingRectangle.east = Math.max(CMath.toRadians(longitude), this.boundingRectangle.east); + this.boundingRectangle.north = Math.max(CMath.toRadians(latitude), this.boundingRectangle.north); + this.maximumHeight = Math.max(this.maximumHeight, depthMeters * 2); + return this.earthquakeDataSource.entities.add({ + position: position, + ellipsoid: { + radii: new Cartesian3(size, size, size), + material: getColorFromTime(data.Time), + }, + properties: { + ...data, + propsOrder: this.config.propsOrder, + zoomHeadingPitchRange: zoomHeadingPitchRange + } + }); + }); + this.boundingSphere = BoundingSphere.fromRectangle3D(this.boundingRectangle); + } + + /** + * @param {boolean} visible + */ + async setVisible(visible) { + const entities = this.earthquakeDataSource.entities.values; + if (entities && entities.length) { + this.earthquakeDataSource.show = visible; + } else if (visible) { + await this.showEarthquakes(); + } + } + + /** + * @param {number} opacity + */ + setOpacity(opacity) { + const entities = this.earthquakeDataSource.entities.values; + entities.forEach(entity => { + entity.ellipsoid.material = entity.ellipsoid.material.color.getValue().withAlpha(Number(opacity)); + }); + } +} diff --git a/ui/src/elements/dashboard/ngm-dashboard.ts b/ui/src/elements/dashboard/ngm-dashboard.ts index 9a37f1d37..6f01a184b 100644 --- a/ui/src/elements/dashboard/ngm-dashboard.ts +++ b/ui/src/elements/dashboard/ngm-dashboard.ts @@ -158,7 +158,7 @@ export class NgmDashboard extends LitElementI18n { // const topic = this.topics?.find(p => p.id === value.param.topicId); // this.selectTopicOrProject(topic); // } else - if (value.kind === 'project') { + if (value.kind === 'project') { removeProject(); const project = await this.apiClient.getProject(value.param.projectId); this.selectTopicOrProject(project); diff --git a/ui/src/elements/ngm-layer-legend.ts b/ui/src/elements/ngm-layer-legend.ts index f589847d9..f43ed2c4b 100644 --- a/ui/src/elements/ngm-layer-legend.ts +++ b/ui/src/elements/ngm-layer-legend.ts @@ -1,65 +1,64 @@ -import {html, PropertyValues} from 'lit'; -import {until} from 'lit/directives/until.js'; -import {customElement, state} from 'lit/decorators.js'; -import draggable from './draggable'; -import i18next from 'i18next'; -import {LitElementI18n} from '../i18n.js'; - -import {LayerConfig, LayerType} from '../layertree'; -import {unsafeHTML} from 'lit/directives/unsafe-html.js'; -import {classMap} from 'lit/directives/class-map.js'; -import {dragArea} from './helperElements'; - -@customElement('ngm-layer-legend') -export class NgmLayerLegend extends LitElementI18n { - @state() - accessor config!: LayerConfig; - - protected firstUpdated(_changedProperties: PropertyValues) { - // hidden is required to have correct window placing - this.hidden = true; - draggable(this, { - allowFrom: '.drag-handle' - }); - this.hidden = false; - super.firstUpdated(_changedProperties); - } - - getImageLegend() { - const legendImage = this.config.legend ? `https://api.geo.admin.ch/static/images/legends/${this.config.legend}_${i18next.language}.png` : undefined; - return html`${legendImage ? html` -
-
${i18next.t('dtd_legend')}
-
-
- ` : ''}`; - } - - async getWmtsLegend() { - const response = await fetch(`https://api3.geo.admin.ch/rest/services/api/MapServer/${this.config.layer}/legend?lang=${i18next.language}`); - const legendHtml = await response.text(); - return html` -
- ${unsafeHTML(legendHtml)} -
`; - } - - render() { - return html` -
- ${i18next.t(this.config.label)} -
this.dispatchEvent(new CustomEvent('close'))}>
-
-
- ${this.config.type === LayerType.swisstopoWMTS ? html`${until(this.getWmtsLegend(), html` -
`)}` : this.getImageLegend()} -
- ${dragArea} - `; - } - - createRenderRoot() { - // no shadow dom - return this; - } -} +import {html, PropertyValues} from 'lit'; +import {until} from 'lit/directives/until.js'; +import {customElement, state} from 'lit/decorators.js'; +import draggable from './draggable'; +import i18next from 'i18next'; +import {LitElementI18n} from '../i18n.js'; + +import {LayerConfig, LayerType} from '../layertree'; +import {unsafeHTML} from 'lit/directives/unsafe-html.js'; +import {classMap} from 'lit/directives/class-map.js'; +import {dragArea} from './helperElements'; + +@customElement('ngm-layer-legend') +export class NgmLayerLegend extends LitElementI18n { + @state() + accessor config!: LayerConfig; + + protected firstUpdated(_changedProperties: PropertyValues) { + // hidden is required to have correct window placing + this.hidden = true; + draggable(this, { + allowFrom: '.drag-handle' + }); + this.hidden = false; + super.firstUpdated(_changedProperties); + } + + getImageLegend() { + const legendImage = this.config.legend ? `https://api.geo.admin.ch/static/images/legends/${this.config.legend}_${i18next.language}.png` : undefined; + return legendImage && html` +
+
${i18next.t('dtd_legend')}
+
+
`; + } + + async getWmtsLegend() { + const response = await fetch(`https://api3.geo.admin.ch/rest/services/api/MapServer/${this.config.layer}/legend?lang=${i18next.language}`); + const legendHtml = await response.text(); + return html` +
+ ${unsafeHTML(legendHtml)} +
`; + } + + render() { + return html` +
+ ${i18next.t(this.config.label)} +
this.dispatchEvent(new CustomEvent('close'))}>
+
+
+ ${this.config.type === LayerType.swisstopoWMTS ? until(this.getWmtsLegend(), html` +
`) : this.getImageLegend()} +
+ ${dragArea} + `; + } + + createRenderRoot() { + // no shadow dom + return this; + } +} diff --git a/ui/src/elements/ngm-minimap.ts b/ui/src/elements/ngm-minimap.ts index 789c174bf..f6334185c 100644 --- a/ui/src/elements/ngm-minimap.ts +++ b/ui/src/elements/ngm-minimap.ts @@ -1,152 +1,150 @@ -import {html} from 'lit'; -import {customElement, property, state} from 'lit/decorators.js'; -import {Rectangle, Math as CesiumMath, Cartesian3} from 'cesium'; -import {styleMap} from 'lit/directives/style-map.js'; -import {MINIMAP_EXTENT} from '../constants'; -import {LitElementI18n} from '../i18n'; -import NavToolsStore from '../store/navTools'; -import type {Interactable} from '@interactjs/types'; -import type {Event, Viewer} from 'cesium'; -import {classMap} from 'lit/directives/class-map.js'; - -const west = CesiumMath.toRadians(MINIMAP_EXTENT[0]); -const south = CesiumMath.toRadians(MINIMAP_EXTENT[1]); -const east = CesiumMath.toRadians(MINIMAP_EXTENT[2]); -const north = CesiumMath.toRadians(MINIMAP_EXTENT[3]); - -@customElement('ngm-minimap') -export class NgmMinimap extends LitElementI18n { - @property({type: Object}) - accessor viewer: Viewer | null = null; - @state() - accessor interaction: Interactable | null = null; - @state() - accessor moveMarker = false; - @state() - accessor left = 0; - @state() - accessor bottom = 0; - @state() - accessor heading = 0; - @state() - accessor nadirViewActive = false; - private unlistenPostRender: Event.RemoveCallback | null = null; - - constructor() { - super(); - this.addEventListener('mousemove', (evt: MouseEvent) => { - if (this.moveMarker && evt.target && (evt.target as Element).classList.contains('ngm-cam')) { - this.moveCamera(evt.x, evt.y, 'mousemove'); - } - }); - this.addEventListener('click', (evt: MouseEvent) => { - if (!this.moveMarker && evt.target && (evt.target as Element).classList.contains('ngm-map-overview')) { - NavToolsStore.hideTargetPoint(); - this.moveCamera(evt.x, evt.y, 'click'); - } - }); - this.addEventListener('mouseup', () => this.moveMarker = false); - this.addEventListener('mouseout', () => this.moveMarker = false); - } - - updated() { - if (this.viewer && !this.unlistenPostRender) { - this.unlistenPostRender = this.viewer.scene.postRender.addEventListener(() => { - this.updateFromCamera(); - }); - } - } - - disconnectedCallback() { - if (this.unlistenPostRender) { - this.unlistenPostRender(); - } - super.disconnectedCallback(); - } - - get markerStyle() { - const markerWidth = 48; - // apply restriction - this.left = Math.min(Math.max(this.left, 0.05), 0.94); - this.bottom = Math.min(Math.max(this.bottom, 0.1), 0.92); - - return { - position: 'absolute', - left: `calc(${this.left * 100}% - ${markerWidth / 2}px)`, - bottom: `calc(${this.bottom * 100}% - ${markerWidth / 2}px)`, - transform: `rotate(${this.heading}rad)`, - width: `${markerWidth}px`, - height: `${markerWidth}px`, - }; - } - - private toggleNadirStatus() { - this.nadirViewActive = !this.nadirViewActive; - } - - updateFromCamera() { - if (!this.viewer) return; - const position = this.viewer.scene.camera.positionCartographic; - const lon = CesiumMath.toDegrees(position.longitude); - const lat = CesiumMath.toDegrees(position.latitude); - this.left = (lon - MINIMAP_EXTENT[0]) / (MINIMAP_EXTENT[2] - MINIMAP_EXTENT[0]); - this.bottom = (lat - MINIMAP_EXTENT[1]) / (MINIMAP_EXTENT[3] - MINIMAP_EXTENT[1]); - this.heading = this.viewer.scene.camera.heading - 1.57; - - const nadirView = - CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, -CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1) || - CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1); - if (this.nadirViewActive && !nadirView) { - this.toggleNadirStatus(); - } else if (!this.nadirViewActive && nadirView) { - this.toggleNadirStatus(); - } - } - - moveCamera(evtX: number, evtY: number, evtType: string) { - if (!this.viewer) return; - const camera = this.viewer.scene.camera; - const cameraRect = camera.computeViewRectangle(this.viewer.scene.globe.ellipsoid, new Rectangle()); - let pinchScaleW = 1; - let pinchScaleH = 1; - if (cameraRect) { - const position = camera.positionCartographic; - pinchScaleW = cameraRect.west > position.longitude ? position.longitude / cameraRect.west : 1; - pinchScaleH = cameraRect.south > position.latitude ? position.latitude / cameraRect.south : 1; - } - // calculate left, bottom percentage from event - const boundingRect = this.getBoundingClientRect(); - const x = evtType === 'mousemove' ? evtX + Math.sin(camera.heading) : evtX; - const y = evtType === 'mousemove' ? evtY - Math.cos(camera.heading) : evtY; - const left = (x - boundingRect.left) / (boundingRect.right - boundingRect.left); - const bottom = (y - boundingRect.bottom) / (boundingRect.top - boundingRect.bottom); - - // get distance to point in radians - const lon = (west + (east - west) * left) * pinchScaleW; - const lat = (south + (north - south) * bottom) * pinchScaleH; - camera.position = Cartesian3.fromRadians(lon, lat, camera.positionCartographic.height); - } - - onIconPress(evt) { - NavToolsStore.hideTargetPoint(); - this.moveCamera(evt.x, evt.y, 'mousemove'); - this.moveMarker = true; - } - - render() { - return html` -
- -
-
-
- `; - } - - createRenderRoot() { - // no shadow dom - return this; - } - -} +import {html} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {Rectangle, Math as CesiumMath, Cartesian3} from 'cesium'; +import {styleMap} from 'lit/directives/style-map.js'; +import {MINIMAP_EXTENT} from '../constants'; +import {LitElementI18n} from '../i18n'; +import NavToolsStore from '../store/navTools'; +import type {Interactable} from '@interactjs/types'; +import type {Event, Viewer} from 'cesium'; +import {classMap} from 'lit/directives/class-map.js'; + +const west = CesiumMath.toRadians(MINIMAP_EXTENT[0]); +const south = CesiumMath.toRadians(MINIMAP_EXTENT[1]); +const east = CesiumMath.toRadians(MINIMAP_EXTENT[2]); +const north = CesiumMath.toRadians(MINIMAP_EXTENT[3]); + +@customElement('ngm-minimap') +export class NgmMinimap extends LitElementI18n { + @property({type: Object}) + accessor viewer: Viewer | null = null; + @state() + accessor interaction: Interactable | null = null; + @state() + accessor moveMarker = false; + @state() + accessor left = 0; + @state() + accessor bottom = 0; + @state() + accessor heading = 0; + @state() + accessor nadirViewActive = false; + private unlistenPostRender: Event.RemoveCallback | null = null; + + constructor() { + super(); + this.addEventListener('mousemove', (evt: MouseEvent) => { + if (this.moveMarker && evt.target && (evt.target as Element).classList.contains('ngm-cam')) { + this.moveCamera(evt.x, evt.y, 'mousemove'); + } + }); + this.addEventListener('click', (evt: MouseEvent) => { + if (!this.moveMarker && evt.target && (evt.target as Element).classList.contains('ngm-map-overview')) { + NavToolsStore.hideTargetPoint(); + this.moveCamera(evt.x, evt.y, 'click'); + } + }); + this.addEventListener('mouseup', () => this.moveMarker = false); + this.addEventListener('mouseout', () => this.moveMarker = false); + } + + updated() { + if (this.viewer && !this.unlistenPostRender) { + this.unlistenPostRender = this.viewer.scene.postRender.addEventListener(() => { + this.updateFromCamera(); + }); + } + } + + disconnectedCallback() { + if (this.unlistenPostRender) { + this.unlistenPostRender(); + } + super.disconnectedCallback(); + } + + get markerStyle() { + const markerWidth = 48; + // apply restriction + this.left = Math.min(Math.max(this.left, 0.05), 0.94); + this.bottom = Math.min(Math.max(this.bottom, 0.1), 0.92); + + return { + position: 'absolute', + left: `calc(${this.left * 100}% - ${markerWidth / 2}px)`, + bottom: `calc(${this.bottom * 100}% - ${markerWidth / 2}px)`, + transform: `rotate(${this.heading}rad)`, + width: `${markerWidth}px`, + height: `${markerWidth}px`, + }; + } + + private toggleNadirStatus() { + this.nadirViewActive = !this.nadirViewActive; + } + + updateFromCamera() { + if (!this.viewer) return; + const position = this.viewer.scene.camera.positionCartographic; + const lon = CesiumMath.toDegrees(position.longitude); + const lat = CesiumMath.toDegrees(position.latitude); + this.left = (lon - MINIMAP_EXTENT[0]) / (MINIMAP_EXTENT[2] - MINIMAP_EXTENT[0]); + this.bottom = (lat - MINIMAP_EXTENT[1]) / (MINIMAP_EXTENT[3] - MINIMAP_EXTENT[1]); + this.heading = this.viewer.scene.camera.heading - 1.57; + + const nadirView = + CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, -CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1) || + CesiumMath.equalsEpsilon(this.viewer.scene.camera.pitch, CesiumMath.PI_OVER_TWO, CesiumMath.EPSILON1); + if (this.nadirViewActive !== !nadirView) { + this.toggleNadirStatus(); + } + } + + moveCamera(evtX: number, evtY: number, evtType: string) { + if (!this.viewer) return; + const camera = this.viewer.scene.camera; + const cameraRect = camera.computeViewRectangle(this.viewer.scene.globe.ellipsoid, new Rectangle()); + let pinchScaleW = 1; + let pinchScaleH = 1; + if (cameraRect) { + const position = camera.positionCartographic; + pinchScaleW = cameraRect.west > position.longitude ? position.longitude / cameraRect.west : 1; + pinchScaleH = cameraRect.south > position.latitude ? position.latitude / cameraRect.south : 1; + } + // calculate left, bottom percentage from event + const boundingRect = this.getBoundingClientRect(); + const x = evtType === 'mousemove' ? evtX + Math.sin(camera.heading) : evtX; + const y = evtType === 'mousemove' ? evtY - Math.cos(camera.heading) : evtY; + const left = (x - boundingRect.left) / (boundingRect.right - boundingRect.left); + const bottom = (y - boundingRect.bottom) / (boundingRect.top - boundingRect.bottom); + + // get distance to point in radians + const lon = (west + (east - west) * left) * pinchScaleW; + const lat = (south + (north - south) * bottom) * pinchScaleH; + camera.position = Cartesian3.fromRadians(lon, lat, camera.positionCartographic.height); + } + + onIconPress(evt) { + NavToolsStore.hideTargetPoint(); + this.moveCamera(evt.x, evt.y, 'mousemove'); + this.moveMarker = true; + } + + render() { + return html` +
+ +
+
+
+ `; + } + + createRenderRoot() { + // no shadow dom + return this; + } + +} diff --git a/ui/src/elements/ngm-object-information.ts b/ui/src/elements/ngm-object-information.ts index fc7aa7f2f..0e377f98c 100644 --- a/ui/src/elements/ngm-object-information.ts +++ b/ui/src/elements/ngm-object-information.ts @@ -1,119 +1,114 @@ -import {html} from 'lit'; -import draggable from './draggable'; -import i18next from 'i18next'; -import {LitElementI18n} from '../i18n'; -import {unsafeHTML} from 'lit/directives/unsafe-html.js'; -import QueryStore from '../store/query'; -import {dragArea} from './helperElements'; -import {customElement, property} from 'lit/decorators.js'; -import type {QueryResult} from '../query/types'; - - -@customElement('ngm-object-information') -export class NgmObjectInformation extends LitElementI18n { - @property({type: Object}) - accessor info: QueryResult | undefined; - @property({type: Boolean}) - accessor opened: boolean; - - constructor() { - super(); - this.opened = false; - this.hidden = !this.opened; - - QueryStore.objectInfo.subscribe(info => { - if (info) { - this.info = info; - this.opened = !!info; - } else if (this.opened) { - this.opened = false; - this.info = undefined; - } - }); - - document.addEventListener('keydown', (event) => { - if (event.key === 'Escape') { - this.opened = false; - } - }); - } - - connectedCallback() { - draggable(this, { - allowFrom: '.drag-handle' - }); - super.connectedCallback(); - } - - render() { - this.hidden = !this.opened; - if (this.info && (this.info.popupItems?.length || this.info.properties?.length)) { - const content = this.info.popupItems?.length ? - this.info.popupItems.map(it => html` -
it.mouseEnter()} @mouseleave=${() => it.mouseLeave()}> -
- -
- ${unsafeHTML(it.content)} -
`) : - html` - - - ${this.info.properties!.map(row => { - const key = row[0]; - const value = row[1]; - if ((typeof value === 'string') && (value.startsWith('http'))) { - return html` - - - - - `; - } else { - return html` - - - - - `; - } - })} - -
${i18next.t(`assets:${key}`)}${value.split('/').pop()} -
${key.includes(' ') ? key : i18next.t(`assets:${key}`)}${value}
`; - - if (this.opened && this.info.onshow) { - this.info.onshow(); - } - if (!this.opened && this.info.onhide) { - this.info.onhide(); - } - - return html` -
-
this.opened = false}>
-
-
- -
-
- ${content} -
- ${dragArea} - `; - } else { - return html``; - } - } - - createRenderRoot() { - // no shadow dom - return this; - } -} +import {html} from 'lit'; +import draggable from './draggable'; +import i18next from 'i18next'; +import {LitElementI18n} from '../i18n'; +import {unsafeHTML} from 'lit/directives/unsafe-html.js'; +import QueryStore from '../store/query'; +import {dragArea} from './helperElements'; +import {customElement, property} from 'lit/decorators.js'; +import type {QueryResult} from '../query/types'; + + +@customElement('ngm-object-information') +export class NgmObjectInformation extends LitElementI18n { + @property({type: Object}) + accessor info: QueryResult | undefined; + @property({type: Boolean}) + accessor opened: boolean; + + constructor() { + super(); + this.opened = false; + this.hidden = !this.opened; + + QueryStore.objectInfo.subscribe(info => { + this.info = info; + this.opened = !!info; + }); + + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape') { + this.opened = false; + } + }); + } + + connectedCallback() { + draggable(this, { + allowFrom: '.drag-handle' + }); + super.connectedCallback(); + } + + render() { + this.hidden = !this.opened; + if (this.info && (this.info.popupItems?.length || this.info.properties?.length)) { + const content = this.info.popupItems?.length ? + this.info.popupItems.map(it => html` +
it.mouseEnter()} @mouseleave=${() => it.mouseLeave()}> +
+ +
+ ${unsafeHTML(it.content)} +
`) : + html` + + + ${this.info.properties!.map(row => { + const key = row[0]; + const value = row[1]; + if ((typeof value === 'string') && (value.startsWith('http'))) { + return html` + + + + + `; + } else { + return html` + + + + + `; + } + })} + +
${i18next.t(`assets:${key}`)}${value.split('/').pop()} +
${key.includes(' ') ? key : i18next.t(`assets:${key}`)}${value}
`; + + if (this.opened && this.info.onshow) { + this.info.onshow(); + } + if (!this.opened && this.info.onhide) { + this.info.onhide(); + } + + return html` +
+
this.opened = false}>
+
+
+ +
+
+ ${content} +
+ ${dragArea} + `; + } else { + return html``; + } + } + + createRenderRoot() { + // no shadow dom + return this; + } +} diff --git a/ui/src/elements/ngm-share-link.ts b/ui/src/elements/ngm-share-link.ts index 1ee3ea7d3..4188e55ff 100644 --- a/ui/src/elements/ngm-share-link.ts +++ b/ui/src/elements/ngm-share-link.ts @@ -1,86 +1,86 @@ -import {LitElementI18n} from '../i18n'; -import {html} from 'lit'; -import {showBannerSuccess, showBannerWarning} from '../notifications'; -import i18next from 'i18next'; -import 'fomantic-ui-css/components/popup.js'; -import './ngm-i18n-content.js'; -import {SHORTLINK_URL_BY_PAGE_HOST} from '../constants'; -import {classMap} from 'lit/directives/class-map.js'; -import {customElement, query, state} from 'lit/decorators.js'; - -@customElement('ngm-share-link') -export class NgmShareLink extends LitElementI18n { - @state() - accessor shortlink = ''; - @state() - accessor displayLoader = false; - @query('.ngm-toast-placeholder') - accessor toastPlaceholder; - - async getShortlink() { - const serviceUrl = SHORTLINK_URL_BY_PAGE_HOST[window.location.host]; - const url = window.location.href; - try { - const response = await fetch(serviceUrl, { - method: 'POST', - headers: { - 'Content-Type': 'application/json;charset=UTF-8' - }, - body: JSON.stringify({ - 'url': url, - }), - }); - if (!response.ok) { - throw `Service response status ${response.status}: ${await response.text()}`; - } else if (response.headers.has('location')) { - return response.headers.get('location')!; - } else { - throw 'Location header is missing'; - } - } catch (e) { - console.error(e); - showBannerWarning(this.toastPlaceholder, i18next.t('welcome_get_shortlink_error')); - return url; - } - } - - async connectedCallback() { - this.onConnect(); - super.connectedCallback(); - } - - async onConnect() { - this.shortlink = await this.getShortlink(); - } - - async onClick() { - if (!this.shortlink) return; - try { - await navigator.clipboard.writeText(this.shortlink); - showBannerSuccess(this.toastPlaceholder, i18next.t('shortlink_copied')); - } catch (e) { - console.error(e); - } - } - - render() { - return html` -
-
${i18next.t('shortlink_copy_btn_label')}
-
- - - ${i18next.t('shortlink_link_label')} -
- - ${i18next.t('shortlink_mailto_btn_label')} - - `; -} - - createRenderRoot() { - // no shadow dom - return this; - } -} +import {LitElementI18n} from '../i18n'; +import {html} from 'lit'; +import {showBannerSuccess, showBannerWarning} from '../notifications'; +import i18next from 'i18next'; +import 'fomantic-ui-css/components/popup.js'; +import './ngm-i18n-content.js'; +import {SHORTLINK_URL_BY_PAGE_HOST} from '../constants'; +import {classMap} from 'lit/directives/class-map.js'; +import {customElement, query, state} from 'lit/decorators.js'; + +@customElement('ngm-share-link') +export class NgmShareLink extends LitElementI18n { + @state() + accessor shortlink = ''; + @state() + accessor displayLoader = false; + @query('.ngm-toast-placeholder') + accessor toastPlaceholder; + + async getShortlink() { + const serviceUrl = SHORTLINK_URL_BY_PAGE_HOST[window.location.host]; + const url = window.location.href; + try { + const response = await fetch(serviceUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=UTF-8' + }, + body: JSON.stringify({ + 'url': url, + }), + }); + if (!response.ok) { + throw new Error(`Service response status ${response.status}: ${await response.text()}`); + } else if (response.headers.has('location')) { + return response.headers.get('location')!; + } else { + throw new Error('Location header is missing'); + } + } catch (e) { + console.error(e); + showBannerWarning(this.toastPlaceholder, i18next.t('welcome_get_shortlink_error')); + return url; + } + } + + async connectedCallback() { + this.onConnect(); + super.connectedCallback(); + } + + async onConnect() { + this.shortlink = await this.getShortlink(); + } + + async onClick() { + if (!this.shortlink) return; + try { + await navigator.clipboard.writeText(this.shortlink); + showBannerSuccess(this.toastPlaceholder, i18next.t('shortlink_copied')); + } catch (e) { + console.error(e); + } + } + + render() { + return html` +
+
${i18next.t('shortlink_copy_btn_label')}
+
+ + + ${i18next.t('shortlink_link_label')} +
+ + ${i18next.t('shortlink_mailto_btn_label')} + + `; +} + + createRenderRoot() { + // no shadow dom + return this; + } +} diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts index e1047f574..d8b104de5 100644 --- a/ui/src/ngm-app.ts +++ b/ui/src/ngm-app.ts @@ -180,7 +180,7 @@ export class NgmApp extends LitElementI18n { const config = event.target.config; const index = this.legendConfigs.findIndex(c => c && c.layer === config.layer); console.assert(index !== -1); - delete this.legendConfigs[index]; + this.legendConfigs.splice(index, 1); if (!this.legendConfigs.filter(c => !!c).length) this.legendConfigs = []; this.requestUpdate(); diff --git a/ui/src/query/SwisstopoIdentify.ts b/ui/src/query/SwisstopoIdentify.ts index 0ac951f50..d2a73f45f 100644 --- a/ui/src/query/SwisstopoIdentify.ts +++ b/ui/src/query/SwisstopoIdentify.ts @@ -1,43 +1,44 @@ -import type {Cartesian3} from 'cesium'; -import {Cartographic} from 'cesium'; -import {radiansToLv95} from '../projection'; -import type {IdentifyResult} from './types'; - -const getIdentifyUrl = (geom2056: number[], lang: string, layer: string, tolerance: number): string => - `https://api3.geo.admin.ch/rest/services/all/MapServer/identify?geometry=${geom2056}&geometryFormat=geojson&geometryType=esriGeometryPoint&mapExtent=0,0,100,100&imageDisplay=100,100,100&lang=${lang}&layers=all:${layer}&returnGeometry=true&sr=2056&tolerance=${tolerance}`; -const getPopupUrl = ({layerBodId, featureId, lang}) => - `https://api3.geo.admin.ch/rest/services/api/MapServer/${layerBodId}/${featureId}/htmlPopup?lang=${lang}`; - -const getTolerance = (distance: number) => { - if (distance > 100000) { - return 300; - } if (distance < 2500) { - return 20; - } else { - return 100; - } -}; - - -export default class SwisstopoIdentify { - - async identify(position: Cartesian3, distance: number, layers: Array, lang: string): Promise { - const carto = Cartographic.fromCartesian(position); - const geom2056 = radiansToLv95([carto.longitude, carto.latitude]); - const tolerance = getTolerance(distance); - const results: IdentifyResult[][] = await Promise.all(layers.map(async layer => { - const response = await fetch(getIdentifyUrl(geom2056, lang, layer, tolerance)); - const data = await response.json(); - return data.results?.length > 0 ? data.results : []; - })); - let mergedResults: IdentifyResult[] = []; - results.forEach(r => mergedResults = mergedResults.concat(r)); - return mergedResults; - } - - async getPopupForFeature(layerBodId: string, featureId: string, lang: string): Promise { - const url = getPopupUrl({layerBodId, featureId, lang}); - return fetch(url) - .then(response => response.text()); - } -} +import type {Cartesian3} from 'cesium'; +import {Cartographic} from 'cesium'; +import {radiansToLv95} from '../projection'; +import type {IdentifyResult} from './types'; + +const getIdentifyUrl = (geom2056: number[], lang: string, layer: string, tolerance: number): string => + `https://api3.geo.admin.ch/rest/services/all/MapServer/identify?geometry=${geom2056}&geometryFormat=geojson&geometryType=esriGeometryPoint&mapExtent=0,0,100,100&imageDisplay=100,100,100&lang=${lang}&layers=all:${layer}&returnGeometry=true&sr=2056&tolerance=${tolerance}`; +const getPopupUrl = ({layerBodId, featureId, lang}) => + `https://api3.geo.admin.ch/rest/services/api/MapServer/${layerBodId}/${featureId}/htmlPopup?lang=${lang}`; + +const getTolerance = (distance: number) => { + if (distance > 100000) { + return 300; + } + if (distance < 2500) { + return 20; + } else { + return 100; + } +}; + + +export default class SwisstopoIdentify { + + async identify(position: Cartesian3, distance: number, layers: Array, lang: string): Promise { + const carto = Cartographic.fromCartesian(position); + const geom2056 = radiansToLv95([carto.longitude, carto.latitude]); + const tolerance = getTolerance(distance); + const results: IdentifyResult[][] = await Promise.all(layers.map(async layer => { + const response = await fetch(getIdentifyUrl(geom2056, lang, layer, tolerance)); + const data = await response.json(); + return data.results?.length > 0 ? data.results : []; + })); + let mergedResults: IdentifyResult[] = []; + results.forEach(r => mergedResults = mergedResults.concat(r)); + return mergedResults; + } + + async getPopupForFeature(layerBodId: string, featureId: string, lang: string): Promise { + const url = getPopupUrl({layerBodId, featureId, lang}); + return fetch(url) + .then(response => response.text()); + } +} diff --git a/ui/src/search.js b/ui/src/search.js index 71e2a578a..3a4e5fc73 100644 --- a/ui/src/search.js +++ b/ui/src/search.js @@ -1,172 +1,170 @@ -import '@geoblocks/ga-search'; - -import {getLayersConfig} from './swisstopoImagery.ts'; -import {escapeRegExp} from './utils'; -import {lv95ToDegrees} from './projection'; - -import {Cartographic, Math as CesiumMath, Rectangle} from 'cesium'; -import {extractEntitiesAttributes} from './query/objectInformation.ts'; -import NavToolsStore from './store/navTools'; -import defaultLayerTree from './layertree'; -import i18next from 'i18next'; -import auth from './store/auth'; - -const integerFormat = new Intl.NumberFormat('de-CH', { - maximumFractionDigits: 1 -}); - - -/** - * @param {import('cesium/Source/Widgets/Viewer/Viewer').default} viewer - * @param {HTMLElement} element - * @param layerTree - */ -export function setupSearch(viewer, element, layerTree) { - - // search filter configuration - getLayersConfig().then(layersConfig => { - element.filterResults = result => { - if (result.properties && result.properties.origin === 'layer') { - const layerConfig = layersConfig[result.properties.layer]; - return !!layerConfig && (layerConfig.type === 'wmts' || layerConfig.type === 'wms'); - } else { - return true; - } - }; - }); - - // add icon before the label in the result list - element.renderResult = (result, label) => { - let imgName; - const type = resultType(result); - if (type === 'location') { - imgName = 'i_place'; - } else if (type === 'geoadmin_layer') { - imgName = 'i_layer'; - } else { - imgName = 'i_extrusion'; - } - return ` ${label} `; - }; - - // location search result - element.addEventListener('submit', event => { - const result = event.detail.result; - const type = resultType(result); - if (type === 'location') { - NavToolsStore.hideTargetPoint(); - const rectangle = Rectangle.fromDegrees(...result.bbox); - if (rectangle.width < CesiumMath.EPSILON3 || rectangle.height < CesiumMath.EPSILON3) { - // rectangle is too small - const center = Rectangle.center(rectangle); - center.height = 5000; - viewer.camera.flyTo({ - destination: Cartographic.toCartesian(center) - }); - } else { - // rectangle - viewer.camera.flyTo({ - destination: rectangle - }); - } - } else if (type === 'geoadmin_layer') { - layerTree.addLayerFromSearch(result.properties); - } else if (type === 'ngm_layer') { - NavToolsStore.hideTargetPoint(); - layerTree.addLayerFromSearch(result); - if (result.entity) { - viewer.zoomTo(result.entity); - } - } - event.target.autocomplete.input.blur(); - }); - - element.additionalSource = { - search: input => { - const matches = []; - - // search for coordinates - const coordinateMatch = input.match(/([\d.']+)[\s,/]+([\d.']+)/); - if (coordinateMatch) { - const left = parseFloat(coordinateMatch[1].replace(/'/g, '')); - const right = parseFloat(coordinateMatch[2].replace(/'/g, '')); - - if (isFinite(left) && isFinite(right)) { - const coordinates = [left, right].sort().reverse(); - const bbox = [...lv95ToDegrees(coordinates), ...lv95ToDegrees(coordinates)]; - matches.push({ - label: `Recenter to ${coordinates.map((coord) => integerFormat.format(coord)).join(' ')}`, - bbox: bbox, - origin: 'coordinates', - }); - } - } - - // search for primitives - const regexp = new RegExp(escapeRegExp(input), 'i'); - const dataSources = viewer.dataSources; - for (let i = 0, ii = dataSources.length; i < ii; i++) { - const dataSource = dataSources.get(i); - dataSource.entities.values.forEach(entity => { - const attributes = extractEntitiesAttributes(entity); - if (attributes && regexp.test(attributes.EventLocationName)) { - matches.push({ - entity: entity, - label: `${attributes.EventLocationName} (${attributes.Magnitude})`, - dataSourceName: dataSource.name - }); - } - }); - } - - // search catalog layers - const user = auth.user.getValue(); - const addCatalogLayer = (layerTree) => { - for (const layer of layerTree) { - if (layer.children) { - addCatalogLayer(layer.children); - } else { - if (regexp.test(layer.label)) { - layer.label = `${i18next.t(layer.label)}`; - if (!layer.restricted?.length || layer.restricted.some(g => user?.['cognito:groups'].includes(g))) matches.push(layer); - } - } - }}; - addCatalogLayer(defaultLayerTree); - - return Promise.resolve(matches); - }, - getResultValue: result => result.label - }; - - const icon = element.querySelector('.ngm-search-icon-container'); - const input = element.querySelector('input'); - icon.addEventListener('click', () => { - if (icon.classList.contains('ngm-search-icon')) return; - input.value = ''; - icon.classList.remove('ngm-close-icon'); - icon.classList.add('ngm-search-icon'); - }); - input.addEventListener('input', evt => { - if (evt.target.value && icon.classList.contains('ngm-search-icon')) { - icon.classList.remove('ngm-search-icon'); - icon.classList.add('ngm-close-icon'); - } else if (!evt.target.value) { - icon.classList.remove('ngm-close-icon'); - icon.classList.add('ngm-search-icon'); - } - }); - -} - -function resultType(result) { - // geoadmin - if (result.properties) { - return result.properties.origin === 'layer' ? 'geoadmin_layer' : 'location'; - } - // coordinates search - if (result.result?.origin === 'coordinates' || result.origin === 'coordinates') { - return 'location'; - } - return 'ngm_layer'; -} +import '@geoblocks/ga-search'; + +import {getLayersConfig} from './swisstopoImagery.ts'; +import {escapeRegExp} from './utils'; +import {lv95ToDegrees} from './projection'; + +import {Cartographic, Math as CesiumMath, Rectangle} from 'cesium'; +import {extractEntitiesAttributes} from './query/objectInformation.ts'; +import NavToolsStore from './store/navTools'; +import defaultLayerTree from './layertree'; +import i18next from 'i18next'; +import auth from './store/auth'; + +const integerFormat = new Intl.NumberFormat('de-CH', { + maximumFractionDigits: 1 +}); + + +/** + * @param {import('cesium/Source/Widgets/Viewer/Viewer').default} viewer + * @param {HTMLElement} element + * @param layerTree + */ +export function setupSearch(viewer, element, layerTree) { + + // search filter configuration + getLayersConfig().then(layersConfig => { + element.filterResults = result => { + if (result.properties && result.properties.origin === 'layer') { + const layerConfig = layersConfig[result.properties.layer]; + return !!layerConfig && (layerConfig.type === 'wmts' || layerConfig.type === 'wms'); + } else { + return true; + } + }; + }); + + // add icon before the label in the result list + element.renderResult = (result, label) => { + let imgName; + const type = resultType(result); + if (type === 'location') { + imgName = 'i_place'; + } else if (type === 'geoadmin_layer') { + imgName = 'i_layer'; + } else { + imgName = 'i_extrusion'; + } + return ` ${label} `; + }; + + // location search result + element.addEventListener('submit', event => { + const result = event.detail.result; + const type = resultType(result); + if (type === 'location') { + NavToolsStore.hideTargetPoint(); + const rectangle = Rectangle.fromDegrees(...result.bbox); + if (rectangle.width < CesiumMath.EPSILON3 || rectangle.height < CesiumMath.EPSILON3) { + // rectangle is too small + const center = Rectangle.center(rectangle); + center.height = 5000; + viewer.camera.flyTo({ + destination: Cartographic.toCartesian(center) + }); + } else { + // rectangle + viewer.camera.flyTo({ + destination: rectangle + }); + } + } else if (type === 'geoadmin_layer') { + layerTree.addLayerFromSearch(result.properties); + } else if (type === 'ngm_layer') { + NavToolsStore.hideTargetPoint(); + layerTree.addLayerFromSearch(result); + if (result.entity) { + viewer.zoomTo(result.entity); + } + } + event.target.autocomplete.input.blur(); + }); + + element.additionalSource = { + search: input => { + const matches = []; + + // search for coordinates + const coordinateMatch = input.match(/([\d.']+)[\s,/]+([\d.']+)/); + if (coordinateMatch) { + const left = parseFloat(coordinateMatch[1].replace(/'/g, '')); + const right = parseFloat(coordinateMatch[2].replace(/'/g, '')); + + if (isFinite(left) && isFinite(right)) { + const coordinates = [left, right].sort().reverse(); + const bbox = [...lv95ToDegrees(coordinates), ...lv95ToDegrees(coordinates)]; + matches.push({ + label: `Recenter to ${coordinates.map((coord) => integerFormat.format(coord)).join(' ')}`, + bbox: bbox, + origin: 'coordinates', + }); + } + } + + // search for primitives + const regexp = new RegExp(escapeRegExp(input), 'i'); + const dataSources = viewer.dataSources; + for (let i = 0, ii = dataSources.length; i < ii; i++) { + const dataSource = dataSources.get(i); + dataSource.entities.values.forEach(entity => { + const attributes = extractEntitiesAttributes(entity); + if (attributes && regexp.test(attributes.EventLocationName)) { + matches.push({ + entity: entity, + label: `${attributes.EventLocationName} (${attributes.Magnitude})`, + dataSourceName: dataSource.name + }); + } + }); + } + + // search catalog layers + const user = auth.user.getValue(); + const addCatalogLayer = (layerTree) => { + for (const layer of layerTree) { + if (layer.children) { + addCatalogLayer(layer.children); + } else if (regexp.test(layer.label)) { + layer.label = `${i18next.t(layer.label)}`; + if (!layer.restricted?.length || layer.restricted.some(g => user?.['cognito:groups'].includes(g))) matches.push(layer); + } + }}; + addCatalogLayer(defaultLayerTree); + + return Promise.resolve(matches); + }, + getResultValue: result => result.label + }; + + const icon = element.querySelector('.ngm-search-icon-container'); + const input = element.querySelector('input'); + icon.addEventListener('click', () => { + if (icon.classList.contains('ngm-search-icon')) return; + input.value = ''; + icon.classList.remove('ngm-close-icon'); + icon.classList.add('ngm-search-icon'); + }); + input.addEventListener('input', evt => { + if (evt.target.value && icon.classList.contains('ngm-search-icon')) { + icon.classList.remove('ngm-search-icon'); + icon.classList.add('ngm-close-icon'); + } else if (!evt.target.value) { + icon.classList.remove('ngm-close-icon'); + icon.classList.add('ngm-search-icon'); + } + }); + +} + +function resultType(result) { + // geoadmin + if (result.properties) { + return result.properties.origin === 'layer' ? 'geoadmin_layer' : 'location'; + } + // coordinates search + if (result.result?.origin === 'coordinates' || result.origin === 'coordinates') { + return 'location'; + } + return 'ngm_layer'; +} diff --git a/ui/src/style/index.css b/ui/src/style/index.css index 08f6bce74..0b1d3af8e 100644 --- a/ui/src/style/index.css +++ b/ui/src/style/index.css @@ -350,7 +350,7 @@ ngm-full-screen-view.full-active { border-bottom: 2px solid #DFE2E6; display: flex; align-items: center; - font: normal normal bold 14px/24px Inter; + font: normal normal bold 14px/24px Inter, sans-serif; letter-spacing: 0.14px; color: #212529; margin-bottom: 8px; @@ -389,7 +389,7 @@ ngm-full-screen-view.full-active { border: 0; border-radius: 0; box-shadow: 6px 6px 8px #00000029; - font: normal normal 500 14px/20px Inter; + font: normal normal 500 14px/20px Inter, sans-serif; color: #212529; right: 11px; } @@ -562,7 +562,7 @@ ngm-voxel-filter .ngm-action-btn.ui.button { color: var(--ngm-interaction); position: fixed; margin-left: 9px; - font: normal normal bold 12px/15px Inter; + font: normal normal bold 12px/15px Inter, sans-serif; } .ui.dimmer.ngm-main-load-dimmer { diff --git a/ui/src/style/layers.css b/ui/src/style/layers.css index 8d3d5458e..8ab73406d 100644 --- a/ui/src/style/layers.css +++ b/ui/src/style/layers.css @@ -1,250 +1,247 @@ -.ngm-displayed-slider { - width: 257px; - margin-left: 25px; -} - -.ngm-displayed-slider label:first-of-type { - word-wrap: break-word; - display: inline-block; - max-width: 210px; -} - -.ngm-displayed-slider label:last-of-type { - float: right; -} - -.ngm-layer-icon { - background-color: var(--ngm-interaction); - cursor: pointer; - max-height: 20px; - max-width: 22px; -} - -.ngm-layer-icon.ngm-invisible-icon, -.ngm-layer-icon.ngm-visible-icon { - margin-left: 2px; -} - -ngm-layers-item { - border-bottom: 2px solid #DFE2E6 !important; -} - -ngm-layers-item .ngm-checkbox { - width: 24px; - height: 24px; - margin-bottom: 0; -} - -.ngm-layer-icon:not(.disabled):hover, .ngm-layer-icon:not(.disabled):focus { - background-color: var(--ngm-interaction-hover); -} - -.ngm-layer-icon:not(.disabled):active, .ngm-action-menu.active .ngm-action-menu-icon { - background-color: var(--ngm-interaction-active); -} - -ngm-layers-item, .ngm-base-layer { - display: flex; - align-items: end; - flex-direction: row; -} - -ngm-layers-item, .ngm-base-layer > div:first-child { - padding: 0 11px; -} - -ngm-layers-item .ngm-displayed-menu { - display: flex; - flex-grow: 1; - justify-content: flex-end; -} - -ngm-layers-item .ngm-displayed-menu .ngm-layer-icon { - margin-right: 30px; -} - -ngm-layers-item .ngm-displayed-menu .ngm-layer-icon.ngm-action-menu-icon { - margin-right: 0; -} - -/* KML upload */ -.ngm-data-panel ngm-layers-upload { - display: flex; - column-gap: 12px; -} - -ngm-layers-upload .ngm-checkbox label { - margin-left: 8px; -} - -ngm-layers-upload .ngm-checkbox .ngm-checkbox-icon { - min-width: 19px; -} - -ngm-layers-upload button { - cursor: pointer; - display: flex; - align-items: center; - letter-spacing: 0.25px; - font-weight: bold; - color: var(--ngm-interaction); - background-color: #F1F3F5; - border: 2px dashed var(--ngm-interaction); - margin-top: 9px; - padding-left: 10px; - height: 46px; - width: 325px; -} - -ngm-layers-upload .ngm-file-upload-icon { - pointer-events: none; - background-color: var(--ngm-interaction); - margin-top: 0; - margin-left: 12px; - width: 20px; - height: 20px; -} - -ngm-layers-upload .ui.inline.loader { - margin-left: 12px; -} - -ngm-layers-upload button:hover { - color: var(--ngm-interaction-hover); - border: 2px dashed var(--ngm-interaction-hover); -} - -ngm-layers-upload button:hover .ngm-file-upload-icon { - background-color: var(--ngm-interaction-hover); -} - -ngm-layers-upload button.active { - color: var(--ngm-interaction-hover); - border: 2px dashed var(--ngm-interaction-hover); -} - -ngm-layers-upload button.active .ngm-file-upload-icon { - background-color: var(--ngm-interaction-hover); -} - -/* FIXME: Grey out action menue until further specification */ -ngm-layers-upload .ui.dropdown { - pointer-events: none; -} - -ngm-layers-upload .ngm-action-menu-icon { - background-color: gray; -} - -ngm-layers-item .ui.dropdown .menu .item:hover { - background-color: var(--ngm-hover); -} - -.ngm-extension-panel .ui.header { - margin-top: 7px; -} - -.ngm-extension-panel .ui.divider { - margin-top: 15px; - margin-bottom: 8px; - border-top: 1px solid #DFE2E6 !important; - border-bottom: 1px solid #DFE2E6 !important; -} - -@media (min-width: 600px) { - ngm-layers-upload button { - min-width: 325px; - } -} - -/* Layer catalog */ -ngm-catalog .ui.accordion, ngm-catalog .ui.accordion .content { - margin: 0 !important; - padding: 0 !important; -} - -ngm-catalog .ui.accordion .title { - display: flex; - align-items: center; -} - -ngm-catalog .ui.accordion .title label { - cursor: pointer; - margin-left: 11px; - color: #212529; -} - -ngm-catalog .ui.accordion .title.first-level { - font-weight: bold; -} - -ngm-catalog .ui.accordion .title.active label, .ngm-catalog-entry .displayed { - color: var(--ngm-action-hover) !important; -} - -ngm-catalog .ui.accordion .title:hover label, .ngm-catalog-entry:hover label { - color: var(--ngm-interaction-hover) !important; -} - -/* Dropdown icon */ -ngm-catalog .ui.accordion .ngm-dropdown-icon { - background-color: var(--ngm-interaction); -} - -ngm-catalog .ui.accordion .title.active .ngm-dropdown-icon { - background-color: var(--ngm-action-hover); - transform: rotate(90deg); -} - -ngm-catalog .ui.accordion .title:hover .ngm-dropdown-icon { - background-color: var(--ngm-interaction-hover); -} - -ngm-catalog .ngm-checkbox { - margin-left: 4px; - color: #212529 -} - -.ngm-upload-kml-btn { - margin-bottom: 16px; -} - -.ngm-displayed-color { - width: 24px; - height: 24px; - margin-left: 15px; -} - -ngm-layers-item { - padding: 10px; -} - -ngm-layers-item.selected { - background-color: var(--ngm-hover); - cursor: move; -} - -.ngm-layer-icon.ngm-delete-icon.disabled { - opacity: .5; - cursor: not-allowed; -} - -ngm-layers-item.selected .ngm-slider.disabled::-moz-range-thumb{ - cursor: move; -} - -ngm-layers-item.selected .ngm-slider.disabled::-webkit-slider-thumb{ - cursor: move; -} - -ngm-layers-item.selected .ngm-displayed-slider label, -ngm-layers-item.selected .ngm-slider.disabled, -ngm-layers-item.selected .ngm-layer-icon.ngm-delete-icon.disabled { - cursor: move; -} - -.ngm-ion-add-content-btn.ngm-action-btn.ui.button { - width: 325px; - justify-content: center; - margin-bottom: 16px; -} +.ngm-displayed-slider { + width: 257px; + margin-left: 25px; +} + +.ngm-displayed-slider label:first-of-type { + word-wrap: break-word; + display: inline-block; + max-width: 210px; +} + +.ngm-displayed-slider label:last-of-type { + float: right; +} + +.ngm-layer-icon { + background-color: var(--ngm-interaction); + cursor: pointer; + max-height: 20px; + max-width: 22px; +} + +.ngm-layer-icon.ngm-invisible-icon, +.ngm-layer-icon.ngm-visible-icon { + margin-left: 2px; +} + +ngm-layers-item { + border-bottom: 2px solid #DFE2E6 !important; + padding: 10px; +} + +ngm-layers-item .ngm-checkbox { + width: 24px; + height: 24px; + margin-bottom: 0; +} + +.ngm-layer-icon:not(.disabled):hover, .ngm-layer-icon:not(.disabled):focus { + background-color: var(--ngm-interaction-hover); +} + +.ngm-layer-icon:not(.disabled):active, .ngm-action-menu.active .ngm-action-menu-icon { + background-color: var(--ngm-interaction-active); +} + +ngm-layers-item, .ngm-base-layer { + display: flex; + align-items: end; + flex-direction: row; +} + +ngm-layers-item, .ngm-base-layer > div:first-child { + padding: 0 11px; +} + +ngm-layers-item .ngm-displayed-menu { + display: flex; + flex-grow: 1; + justify-content: flex-end; +} + +ngm-layers-item .ngm-displayed-menu .ngm-layer-icon { + margin-right: 30px; +} + +ngm-layers-item .ngm-displayed-menu .ngm-layer-icon.ngm-action-menu-icon { + margin-right: 0; +} + +/* KML upload */ +.ngm-data-panel ngm-layers-upload { + display: flex; + column-gap: 12px; +} + +ngm-layers-upload .ngm-checkbox label { + margin-left: 8px; +} + +ngm-layers-upload .ngm-checkbox .ngm-checkbox-icon { + min-width: 19px; +} + +ngm-layers-upload button { + cursor: pointer; + display: flex; + align-items: center; + letter-spacing: 0.25px; + font-weight: bold; + color: var(--ngm-interaction); + background-color: #F1F3F5; + border: 2px dashed var(--ngm-interaction); + margin-top: 9px; + padding-left: 10px; + height: 46px; + width: 325px; +} + +ngm-layers-upload .ngm-file-upload-icon { + pointer-events: none; + background-color: var(--ngm-interaction); + margin-top: 0; + margin-left: 12px; + width: 20px; + height: 20px; +} + +ngm-layers-upload .ui.inline.loader { + margin-left: 12px; +} + +ngm-layers-upload button:hover { + color: var(--ngm-interaction-hover); + border: 2px dashed var(--ngm-interaction-hover); +} + +ngm-layers-upload button:hover .ngm-file-upload-icon { + background-color: var(--ngm-interaction-hover); +} + +ngm-layers-upload button.active { + color: var(--ngm-interaction-hover); + border: 2px dashed var(--ngm-interaction-hover); +} + +ngm-layers-upload button.active .ngm-file-upload-icon { + background-color: var(--ngm-interaction-hover); +} + +/* FIXME: Grey out action menue until further specification */ +ngm-layers-upload .ui.dropdown { + pointer-events: none; +} + +ngm-layers-upload .ngm-action-menu-icon { + background-color: gray; +} + +ngm-layers-item .ui.dropdown .menu .item:hover { + background-color: var(--ngm-hover); +} + +.ngm-extension-panel .ui.header { + margin-top: 7px; +} + +.ngm-extension-panel .ui.divider { + margin-top: 15px; + margin-bottom: 8px; + border-top: 1px solid #DFE2E6 !important; + border-bottom: 1px solid #DFE2E6 !important; +} + +@media (min-width: 600px) { + ngm-layers-upload button { + min-width: 325px; + } +} + +/* Layer catalog */ +ngm-catalog .ui.accordion, ngm-catalog .ui.accordion .content { + margin: 0 !important; + padding: 0 !important; +} + +ngm-catalog .ui.accordion .title { + display: flex; + align-items: center; +} + +ngm-catalog .ui.accordion .title label { + cursor: pointer; + margin-left: 11px; + color: #212529; +} + +ngm-catalog .ui.accordion .title.first-level { + font-weight: bold; +} + +ngm-catalog .ui.accordion .title.active label, .ngm-catalog-entry .displayed { + color: var(--ngm-action-hover) !important; +} + +ngm-catalog .ui.accordion .title:hover label, .ngm-catalog-entry:hover label { + color: var(--ngm-interaction-hover) !important; +} + +/* Dropdown icon */ +ngm-catalog .ui.accordion .ngm-dropdown-icon { + background-color: var(--ngm-interaction); +} + +ngm-catalog .ui.accordion .title.active .ngm-dropdown-icon { + background-color: var(--ngm-action-hover); + transform: rotate(90deg); +} + +ngm-catalog .ui.accordion .title:hover .ngm-dropdown-icon { + background-color: var(--ngm-interaction-hover); +} + +ngm-catalog .ngm-checkbox { + margin-left: 4px; + color: #212529 +} + +.ngm-upload-kml-btn { + margin-bottom: 16px; +} + +.ngm-displayed-color { + width: 24px; + height: 24px; + margin-left: 15px; +} + +ngm-layers-item.selected { + background-color: var(--ngm-hover); + cursor: move; +} + +.ngm-layer-icon.ngm-delete-icon.disabled { + opacity: .5; + cursor: not-allowed; +} + +ngm-layers-item.selected .ngm-slider.disabled::-moz-range-thumb{ + cursor: move; +} + +ngm-layers-item.selected .ngm-slider.disabled::-webkit-slider-thumb{ + cursor: move; +} + +ngm-layers-item.selected .ngm-displayed-slider label, +ngm-layers-item.selected .ngm-slider.disabled, +ngm-layers-item.selected .ngm-layer-icon.ngm-delete-icon.disabled { + cursor: move; +} + +.ngm-ion-add-content-btn.ngm-action-btn.ui.button { + width: 325px; + justify-content: center; + margin-bottom: 16px; +} diff --git a/ui/src/style/ngm-action-list-item.css b/ui/src/style/ngm-action-list-item.css index 4e48794b1..0ef804d1a 100644 --- a/ui/src/style/ngm-action-list-item.css +++ b/ui/src/style/ngm-action-list-item.css @@ -1,93 +1,93 @@ -.ngm-action-list-item { - display: flex; - flex-direction: column; - align-items: start; - justify-content: center; - background-color: #F8F9FA; - color: var(--ngm-interaction); - height: 36px; - font: normal normal bold 14px/20px Inter; - padding: 10px 8px; - margin-bottom: 4px; - width: 100%; -} - -.ngm-action-list-item .ngm-action-list-item-header { - display: flex; - justify-content: space-between; - width: 100%; - cursor: pointer; -} - -ngm-draw-section .ngm-action-list-item .ngm-action-list-item-header, -ngm-measure .ngm-action-list-item .ngm-action-list-item-header { - justify-content: start; - align-items: center; - column-gap: 12px; -} - -.ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) { - display: flex; - align-items: center; - width: 100%; - column-gap: 5px; -} - -.ngm-geom-list .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) > div { - white-space: nowrap; - max-width: 155px; - overflow: hidden; - text-overflow: ellipsis; -} - -ngm-draw-section .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1), -ngm-measure .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) { - width: 24px; -} - -.ngm-action-list-item-header > div:nth-child(1):hover { - color: var(--ngm-interaction-hover); -} - -.ngm-action-list-item-header.view { - cursor: default; -} - -.ngm-action-list-item-header.view > div:nth-child(1):hover { - color: var(--ngm-interaction); -} - -.ngm-action-list-item-header .ngm-action-menu-icon:hover { - background-color: var(--ngm-interaction-hover); -} - -.ngm-action-list-item.active > .ngm-action-list-item-header { - color: var(--ngm-interaction-active); -} - -.ngm-action-list-item.disabled { - background-color: #F8F9FA; -} - -.ngm-action-list-item.disabled .ngm-action-menu-icon { - background-color: #868E96 !important; -} - -.ngm-action-list-item.hidden .ngm-geom-name, -.ngm-action-list-item.disabled { - cursor: default; - pointer-events: none; - color: #868E96 !important; -} - -.ngm-action-list-item.disabled .ngm-layer-icon { - background-color: #868E96 !important; -} - -.ngm-action-list-item.hidden .ngm-action-menu { - pointer-events: auto; -} - -.ngm-action-menu.ngm-disabled { - opacity: 0 !important; -} +.ngm-action-list-item { + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + background-color: #F8F9FA; + color: var(--ngm-interaction); + height: 36px; + font: normal normal bold 14px/20px Inter, sans-serif; + padding: 10px 8px; + margin-bottom: 4px; + width: 100%; +} + +.ngm-action-list-item .ngm-action-list-item-header { + display: flex; + justify-content: space-between; + width: 100%; + cursor: pointer; +} + +ngm-draw-section .ngm-action-list-item .ngm-action-list-item-header, +ngm-measure .ngm-action-list-item .ngm-action-list-item-header { + justify-content: start; + align-items: center; + column-gap: 12px; +} + +.ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) { + display: flex; + align-items: center; + width: 100%; + column-gap: 5px; +} + +.ngm-geom-list .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) > div { + white-space: nowrap; + max-width: 155px; + overflow: hidden; + text-overflow: ellipsis; +} + +ngm-draw-section .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1), +ngm-measure .ngm-action-list-item .ngm-action-list-item-header > div:nth-child(1) { + width: 24px; +} + +.ngm-action-list-item-header > div:nth-child(1):hover { + color: var(--ngm-interaction-hover); +} + +.ngm-action-list-item-header.view { + cursor: default; +} + +.ngm-action-list-item-header.view > div:nth-child(1):hover { + color: var(--ngm-interaction); +} + +.ngm-action-list-item-header .ngm-action-menu-icon:hover { + background-color: var(--ngm-interaction-hover); +} + +.ngm-action-list-item.active > .ngm-action-list-item-header { + color: var(--ngm-interaction-active); +} + +.ngm-action-list-item.disabled { + background-color: #F8F9FA; +} + +.ngm-action-list-item.disabled .ngm-action-menu-icon { + background-color: #868E96 !important; +} + +.ngm-action-list-item.hidden .ngm-geom-name, +.ngm-action-list-item.disabled { + cursor: default; + pointer-events: none; + color: #868E96 !important; +} + +.ngm-action-list-item.disabled .ngm-layer-icon { + background-color: #868E96 !important; +} + +.ngm-action-list-item.hidden .ngm-action-menu { + pointer-events: auto; +} + +.ngm-action-menu.ngm-disabled { + opacity: 0 !important; +} diff --git a/ui/src/style/ngm-cam-configuration.css b/ui/src/style/ngm-cam-configuration.css index 596b346bb..6aff80d75 100644 --- a/ui/src/style/ngm-cam-configuration.css +++ b/ui/src/style/ngm-cam-configuration.css @@ -65,12 +65,12 @@ ngm-cam-configuration { .ngm-cam-coord .dropdown.active, .ngm-cam-coord .dropdown { background-color: transparent; - font: normal normal bold 15px/24px Inter; + font: normal normal bold 15px/24px Inter, sans-serif; padding: 0; } .ngm-cam-coord .ngm-coords { - font: normal normal bold 15px/24px Inter; + font: normal normal bold 15px/24px Inter, sans-serif; letter-spacing: 0.16px; color: #222529; } diff --git a/ui/src/style/ngm-checkbox.css b/ui/src/style/ngm-checkbox.css index cc96a3c9a..c1554ab1d 100644 --- a/ui/src/style/ngm-checkbox.css +++ b/ui/src/style/ngm-checkbox.css @@ -1,75 +1,75 @@ -.ngm-checkbox { - text-align: left; - font: normal normal 500 14px/20px Inter; - color: #357183; - display: flex; - align-items: center; - margin-bottom: 12px; - cursor: pointer; -} - -.ngm-checkbox.active { - color: var(--ngm-action-hover) -} - -.ngm-checkbox:hover { - color: var(--ngm-interaction-hover) -} - -.ngm-checkbox > label { - margin-left: 15px; - cursor: pointer; -} - -.ngm-checkbox input { - display: none; -} - -.ngm-checkbox input:checked + .ngm-checkbox-icon { - background: var(--ngm-interaction); - border: 2px solid transparent; -} - -.ngm-checkbox input:checked + .ngm-checkbox-icon::before { - display: block; -} - -.ngm-checkbox .ngm-checkbox-icon { - width: 19px; - height: 18px; - display: block; - position: relative; - border-radius: 2px; - border: 2px solid var(--ngm-interaction); - transition: all 0.5s ease; -} - -.ngm-checkbox.active .ngm-checkbox-icon { - border-color: var(--ngm-action-hover); -} - -.ngm-checkbox.active input:checked + .ngm-checkbox-icon { - background: var(--ngm-action-hover); -} - -.ngm-checkbox:hover .ngm-checkbox-icon { - border-color: var(--ngm-interaction-hover); -} - -.ngm-checkbox:hover input:checked + .ngm-checkbox-icon { - background: var(--ngm-interaction-hover); -} - -.ngm-checkbox .ngm-checkbox-icon::before { - content: ""; - top: -2px; - left: 3px; - width: 8px; - height: 14px; - display: none; - position: absolute; - transform: rotate(45deg); - transition: all 0.5s ease; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; -} +.ngm-checkbox { + text-align: left; + font: normal normal 500 14px/20px Inter, sans-serif; + color: #357183; + display: flex; + align-items: center; + margin-bottom: 12px; + cursor: pointer; +} + +.ngm-checkbox.active { + color: var(--ngm-action-hover) +} + +.ngm-checkbox:hover { + color: var(--ngm-interaction-hover) +} + +.ngm-checkbox > label { + margin-left: 15px; + cursor: pointer; +} + +.ngm-checkbox input { + display: none; +} + +.ngm-checkbox input:checked + .ngm-checkbox-icon { + background: var(--ngm-interaction); + border: 2px solid transparent; +} + +.ngm-checkbox input:checked + .ngm-checkbox-icon::before { + display: block; +} + +.ngm-checkbox .ngm-checkbox-icon { + width: 19px; + height: 18px; + display: block; + position: relative; + border-radius: 2px; + border: 2px solid var(--ngm-interaction); + transition: all 0.5s ease; +} + +.ngm-checkbox.active .ngm-checkbox-icon { + border-color: var(--ngm-action-hover); +} + +.ngm-checkbox.active input:checked + .ngm-checkbox-icon { + background: var(--ngm-action-hover); +} + +.ngm-checkbox:hover .ngm-checkbox-icon { + border-color: var(--ngm-interaction-hover); +} + +.ngm-checkbox:hover input:checked + .ngm-checkbox-icon { + background: var(--ngm-interaction-hover); +} + +.ngm-checkbox .ngm-checkbox-icon::before { + content: ""; + top: -2px; + left: 3px; + width: 8px; + height: 14px; + display: none; + position: absolute; + transform: rotate(45deg); + transition: all 0.5s ease; + border-right: 2px solid #fff; + border-bottom: 2px solid #fff; +} diff --git a/ui/src/style/ngm-cursor-information.css b/ui/src/style/ngm-cursor-information.css index 7bc38e9c2..4f54e5b8e 100644 --- a/ui/src/style/ngm-cursor-information.css +++ b/ui/src/style/ngm-cursor-information.css @@ -1,40 +1,40 @@ -ngm-cursor-information { - flex-wrap: wrap; - align-self: center; - color: #212529; - text-align: left; - font: normal normal normal 14px/20px Inter; - 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; - } -} +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-dashboard.css b/ui/src/style/ngm-dashboard.css index 84fb08271..7a53c28b5 100644 --- a/ui/src/style/ngm-dashboard.css +++ b/ui/src/style/ngm-dashboard.css @@ -1,467 +1,463 @@ -ngm-dashboard .ngm-panel-header, -.ngm-proj-title-icon, -.ngm-projects-list { - margin-bottom: 12px; -} - -.ngm-proj-title { - margin-top: 12px; -} - -.ngm-proj-title-icon, -.ngm-proj-title { - display: flex; - color: #212529; - font: normal normal bold 14px/20px Inter; - align-items: center; -} - -.ngm-proj-title { - justify-content: space-between; -} - -.ngm-proj-title-icon > div:first-child { - margin-right: 15px; -} - -.ngm-proj-title-icon .ngm-user-icon, -.ngm-proj-title-icon .ngm-screenshot-icon { - width: 24px; - height: 24px; -} - -.ngm-proj-title-icon .ngm-user-icon { - background-color: black; -} - -.ngm-dashboard-tabs { - color: var(--ngm-interaction); - display: flex; -} - -.ngm-dashboard-tabs > div:hover, .edit-project:hover { - color: var(--ngm-interaction-hover); - cursor: pointer; -} - -.ngm-dashboard-tabs > div.active { - color: var(--ngm-interaction-active); -} - -.ngm-dashboard-tabs > div:not(:last-child) { - margin-right: 24px; -} - -.ngm-projects-list { - display: flex; - column-gap: 16px; - flex-wrap: wrap; -} - -hide-overflow.ngm-projects-list { - flex-wrap: nowrap; -} - -.ngm-proj-preview { - display: flex; - box-sizing: border-box; - flex-direction: column; - background-color: white; - box-shadow: 2px 2px 2px #00000029; - border-radius: 8px; - width: 240px; - height: 228px; - cursor: pointer; - margin: 8px 0; -} - -.ngm-proj-preview.ngm-proj-create { - align-items: center; - justify-content: center; - gap: 9px; - background-color: transparent; - box-shadow: none; - border: 2px dashed #DFE2E6; - font: normal normal normal 12px/15px Inter; - letter-spacing: 0; - color: #0B7285; - cursor: pointer; -} - -.ngm-proj-preview.ngm-proj-create > div { - max-width: 50%; - text-align: center; -} - -.ngm-proj-preview.ngm-proj-create .ngm-zoom-p-icon { - background-color: #357183; - width: 14px; - height: 14px; -} - -.ngm-proj-preview-img { - width: 240px; - height: 132px; - background-color: #F8F9FA; - background-size: cover; - background-repeat: no-repeat; - border-top-right-radius: 8px; - border-top-left-radius: 8px; -} - -.ngm-proj-preview-title, -.project-color-picker { - background-color: var(--ngm-interaction-active); - width: 240px; - height: 32px; - color: white; - font: normal normal bold 14px/28px Inter; -} - -.project-color-picker { - height: 87px; - display: flex; - align-items: center; - padding-top: 5px; - padding-left: 11px; -} - -.ngm-proj-preview-subtitle { - width: 100%; - height: calc(100% - 164px); - font: normal normal 500 14px/20px Inter; - color: #212529; -} - -.ngm-proj-preview-subtitle, -.ngm-proj-preview-title { - display: flex; - align-items: center; - padding: 0 8px; -} - -.ngm-proj-preview-subtitle span { - height: 70%; - display: block; - display: -webkit-box; - max-width: 224px; - margin: 0 auto; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} - -ngm-dashboard .ngm-divider { - margin-top: 16px; - margin-bottom: 19px; -} - -.ngm-proj-information { - display: flex; -} - -.ngm-proj-description { - margin-left: 28px; - font: normal normal 500 16px/24px Inter; - letter-spacing: 0.16px; - color: #4A5056; - width: 450px; -} - -.ngm-proj-data { - margin-bottom: 16px; - font: normal normal 500 14px/20px Inter; - color: #212529; -} - -.ngm-proj-description-title { - font: normal normal 500 12px/15px Inter; - letter-spacing: 0.41px; -} - -ngm-project-popup { - width: 480px; -} - -ngm-project-popup.compact { - width: 260px; -} - -.ngm-project-popup-content { - display: flex; - align-items: center; - justify-content: space-between; - box-shadow: 0 1px 3px #00000033; - margin-bottom: 12px; -} - -.ngm-project-view-title { - padding: 8px 0; - max-width: 380px; -} -.compact .ngm-project-view-title { - max-width: 170px; -} - -.ngm-project-popup-content > .ngm-play-last-icon, -.ngm-project-popup-content > .ngm-play-icon { - cursor: pointer; - margin: 4px; -} - -.ngm-project-popup-content > .ngm-play-last-icon:hover, -.ngm-project-popup-content > .ngm-play-icon:hover { - background-color: var(--ngm-interaction-hover); -} - -ngm-dashboard .ngm-label-btn { - display: flex; - align-items: center; - justify-content: start; -} - -ngm-dashboard .ngm-delete-icon, -ngm-dashboard .ngm-label-btn .ngm-back-icon { - background-color: var(--ngm-interaction); -} - -ngm-dashboard .ngm-label-btn .ngm-back-icon { - margin-right: 8px; -} - -ngm-dashboard .ngm-delete-icon { - margin-left: 5px; -} - -ngm-dashboard .ngm-label-btn:hover .ngm-zoom-p-icon, -ngm-dashboard .ngm-label-btn:hover .ngm-back-icon { - background-color: var(--ngm-interaction-hover); -} - -.ngm-view-icon { - background-color: var(--ngm-interaction); - cursor: pointer; -} - -ngm-dashboard .ngm-delete-icon:hover, -.ngm-view-icon:hover, .ngm-view-icon:focus, .ngm-edit-icon:hover, .edit-project:hover > .ngm-edit-icon { - background-color: var(--ngm-interaction-hover); -} - -.project-menu { - display: flex; -} - -.edit-project { - display: flex; - color: var(--ngm-interaction); - /* width: max-content; */ - /* margin-left: 36px; */ -} - -.edit-project.active { - color: var(--ngm-interaction-active); - cursor: unset; -} - -.edit-project > .ngm-edit-icon { - margin: 0 10px; -} - -.edit-project.active > .ngm-edit-icon, -.ngm-edit-icon.active { - background-color: var(--ngm-interaction-active); -} - -.project-image-and-color { - margin-right: 12px; -} - -.ngm-input.project-title { - max-width: 364px; -} - -.ngm-input, .ngm-input input, .ngm-input textarea { - width: 100%; -} - -.project-edit-fields { - margin-left: 39px; -} - -.project-view-edit { - display: flex; - justify-content: space-between; - margin-top: 12px; -} - -.project-edit-buttons { - display: flex; - align-content: flex-start; - margin-top: 36px; -} - -.project-edit-buttons .ngm-action-btn.ui.button { - width: 156px; - height: 36px; - text-align: center; - justify-content: center; - margin-right: 12px; -} - -ngm-add-member-form .ngm-cancel-btn.ui.button, -.project-edit-buttons .ngm-cancel-btn.ui.button { - background-color: rgba(0, 0, 0, 0); - color: #0C7285; - box-shadow: none; -} - -.ngm-proj-edit-assets { - display: flex; - width: 100%; - gap: 22px -} - -ngm-project-assets-section, -ngm-project-geoms-section { - width: 360px; -} - -ngm-project-edit .ngm-action-list-item .ngm-action-list-item-header { - display: flex; - align-items: center; -} - -ngm-project-edit .ngm-action-list-item .ngm-input { - margin-right: 5px; -} - -ngm-project-edit .ngm-action-list-item .ngm-input input { - height: 36px; - padding: 0; -} - -.ngm-member { - display: flex; - align-items: center; - gap: 12px; -} - -.ngm-member .ngm-member-info div { - user-select: text; - text-overflow: ellipsis; - overflow: hidden; - max-width: 233px; -} - -.ngm-member-icon { - min-width: 40px; - width: 40px; - height: 40px; - background-color: #DEE2E6; - border-radius: 20px; - font: normal normal bold 14px/20px Inter; - display: flex; - justify-content: center; - align-items: center; -} - -.ngm-member-email { - font: normal normal 500 12px/15px Inter; - color: var(--ngm-interaction); -} - -ngm-project-members-section .project-edit-fields { - display: flex; - flex-direction: column; - row-gap: 27px; - align-items: start; -} - -ngm-project-members-section .ngm-label-btn .ngm-zoom-p-icon { - background-color: var(--ngm-interaction); - width: 12px; - height: 12px; -} - -ngm-project-members-section .ngm-label-btn { - margin-left: 0; - display: flex; - column-gap: 18px; - align-items: center; -} - -.ngm-member-add-form { - width: 324px; - background-color: #DEE2E6; - display: flex; - flex-direction: column; - row-gap: 30px; - padding: 16px 12px; -} - -.ngm-members-list { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 24px; -} - -ngm-add-member-form .action-buttons { - display: flex; - column-gap: 5px; -} - -ngm-add-member-form .ngm-action-btn.ui.button { - display: flex; - justify-content: center; - width: auto; - flex: 2; -} - -ngm-add-member-form .ngm-cancel-btn.ui.button { - flex: 1; -} - -.ngm-member-container { - display: flex; - width: 324px; - align-items: center; -} - -.ngm-member-container .ngm-delete-icon { - cursor: pointer; - margin-left: auto; -} - -.ngm-proj-views-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.ngm-save-view-btn { - display: flex; - align-items: center; - column-gap: 5px; - background-color: transparent; - border: 0; - cursor: pointer; - color: var(--ngm-interaction); -} - -.ngm-save-view-btn:hover { - color: var(--ngm-interaction-hover); -} - -.ngm-save-view-btn:hover .ngm-save-icon { - background-color: var(--ngm-interaction-hover); -} - -@media (max-width: 819px) { - .ngm-members-list { - display: flex; - flex-direction: column; - gap: 20px; - } +ngm-dashboard .ngm-panel-header, +.ngm-proj-title-icon, +.ngm-projects-list { + margin-bottom: 12px; +} + + +.ngm-proj-title-icon, +.ngm-proj-title { + display: flex; + color: #212529; + font: normal normal bold 14px/20px Inter, sans-serif; + align-items: center; +} + +.ngm-proj-title { + margin-top: 12px; + justify-content: space-between; +} + +.ngm-proj-title-icon > div:first-child { + margin-right: 15px; +} + +.ngm-proj-title-icon .ngm-user-icon, +.ngm-proj-title-icon .ngm-screenshot-icon { + width: 24px; + height: 24px; +} + +.ngm-proj-title-icon .ngm-user-icon { + background-color: black; +} + +.ngm-dashboard-tabs { + color: var(--ngm-interaction); + display: flex; +} + +.ngm-dashboard-tabs > div:hover, .edit-project:hover { + color: var(--ngm-interaction-hover); + cursor: pointer; +} + +.ngm-dashboard-tabs > div.active { + color: var(--ngm-interaction-active); +} + +.ngm-dashboard-tabs > div:not(:last-child) { + margin-right: 24px; +} + +.ngm-projects-list { + display: flex; + column-gap: 16px; + flex-wrap: wrap; +} + +hide-overflow.ngm-projects-list { + flex-wrap: nowrap; +} + +.ngm-proj-preview { + display: flex; + box-sizing: border-box; + flex-direction: column; + background-color: white; + box-shadow: 2px 2px 2px #00000029; + border-radius: 8px; + width: 240px; + height: 228px; + cursor: pointer; + margin: 8px 0; +} + +.ngm-proj-preview.ngm-proj-create { + align-items: center; + justify-content: center; + gap: 9px; + background-color: transparent; + box-shadow: none; + border: 2px dashed #DFE2E6; + font: normal normal normal 12px/15px Inter, sans-serif; + letter-spacing: 0; + color: #0B7285; + cursor: pointer; +} + +.ngm-proj-preview.ngm-proj-create > div { + max-width: 50%; + text-align: center; +} + +.ngm-proj-preview.ngm-proj-create .ngm-zoom-p-icon { + background-color: #357183; + width: 14px; + height: 14px; +} + +.ngm-proj-preview-img { + width: 240px; + height: 132px; + background-color: #F8F9FA; + background-size: cover; + background-repeat: no-repeat; + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} + +.ngm-proj-preview-title, +.project-color-picker { + background-color: var(--ngm-interaction-active); + width: 240px; + height: 32px; + color: white; + font: normal normal bold 14px/28px Inter, sans-serif; +} + +.project-color-picker { + height: 87px; + display: flex; + align-items: center; + padding-top: 5px; + padding-left: 11px; +} + +.ngm-proj-preview-subtitle { + width: 100%; + height: calc(100% - 164px); + font: normal normal 500 14px/20px Inter, sans-serif; + color: #212529; +} + +.ngm-proj-preview-subtitle, +.ngm-proj-preview-title { + display: flex; + align-items: center; + padding: 0 8px; +} + +.ngm-proj-preview-subtitle span { + height: 70%; + display: block; + display: -webkit-box; + max-width: 224px; + margin: 0 auto; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +ngm-dashboard .ngm-divider { + margin-top: 16px; + margin-bottom: 19px; +} + +.ngm-proj-information { + display: flex; +} + +.ngm-proj-description { + margin-left: 28px; + font: normal normal 500 16px/24px Inter, sans-serif; + letter-spacing: 0.16px; + color: #4A5056; + width: 450px; +} + +.ngm-proj-data { + margin-bottom: 16px; + font: normal normal 500 14px/20px Inter, sans-serif; + color: #212529; +} + +.ngm-proj-description-title { + font: normal normal 500 12px/15px Inter, sans-serif; + letter-spacing: 0.41px; +} + +ngm-project-popup { + width: 480px; +} + +ngm-project-popup.compact { + width: 260px; +} + +.ngm-project-popup-content { + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: 0 1px 3px #00000033; + margin-bottom: 12px; +} + +.ngm-project-view-title { + padding: 8px 0; + max-width: 380px; +} +.compact .ngm-project-view-title { + max-width: 170px; +} + +.ngm-project-popup-content > .ngm-play-last-icon, +.ngm-project-popup-content > .ngm-play-icon { + cursor: pointer; + margin: 4px; +} + +.ngm-project-popup-content > .ngm-play-last-icon:hover, +.ngm-project-popup-content > .ngm-play-icon:hover { + background-color: var(--ngm-interaction-hover); +} + +ngm-dashboard .ngm-label-btn { + display: flex; + align-items: center; + justify-content: start; +} + +ngm-dashboard .ngm-delete-icon, +ngm-dashboard .ngm-label-btn .ngm-back-icon { + background-color: var(--ngm-interaction); +} + +ngm-dashboard .ngm-label-btn .ngm-back-icon { + margin-right: 8px; +} + +ngm-dashboard .ngm-delete-icon { + margin-left: 5px; +} + +ngm-dashboard .ngm-label-btn:hover .ngm-zoom-p-icon, +ngm-dashboard .ngm-label-btn:hover .ngm-back-icon { + background-color: var(--ngm-interaction-hover); +} + +.ngm-view-icon { + background-color: var(--ngm-interaction); + cursor: pointer; +} + +ngm-dashboard .ngm-delete-icon:hover, +.ngm-view-icon:hover, .ngm-view-icon:focus, .ngm-edit-icon:hover, .edit-project:hover > .ngm-edit-icon { + background-color: var(--ngm-interaction-hover); +} + +.project-menu { + display: flex; +} + +.edit-project { + display: flex; + color: var(--ngm-interaction); +} + +.edit-project.active { + color: var(--ngm-interaction-active); + cursor: unset; +} + +.edit-project > .ngm-edit-icon { + margin: 0 10px; +} + +.edit-project.active > .ngm-edit-icon, +.ngm-edit-icon.active { + background-color: var(--ngm-interaction-active); +} + +.project-image-and-color { + margin-right: 12px; +} + +.ngm-input.project-title { + max-width: 364px; +} + +.ngm-input, .ngm-input input, .ngm-input textarea { + width: 100%; +} + +.project-edit-fields { + margin-left: 39px; +} + +.project-view-edit { + display: flex; + justify-content: space-between; + margin-top: 12px; +} + +.project-edit-buttons { + display: flex; + align-content: flex-start; + margin-top: 36px; +} + +.project-edit-buttons .ngm-action-btn.ui.button { + width: 156px; + height: 36px; + text-align: center; + justify-content: center; + margin-right: 12px; +} + +ngm-add-member-form .ngm-cancel-btn.ui.button, +.project-edit-buttons .ngm-cancel-btn.ui.button { + background-color: rgba(0, 0, 0, 0); + color: #0C7285; + box-shadow: none; +} + +.ngm-proj-edit-assets { + display: flex; + width: 100%; + gap: 22px +} + +ngm-project-assets-section, +ngm-project-geoms-section { + width: 360px; +} + +ngm-project-edit .ngm-action-list-item .ngm-action-list-item-header { + display: flex; + align-items: center; +} + +ngm-project-edit .ngm-action-list-item .ngm-input { + margin-right: 5px; +} + +ngm-project-edit .ngm-action-list-item .ngm-input input { + height: 36px; + padding: 0; +} + +.ngm-member { + display: flex; + align-items: center; + gap: 12px; +} + +.ngm-member .ngm-member-info div { + user-select: text; + text-overflow: ellipsis; + overflow: hidden; + max-width: 233px; +} + +.ngm-member-icon { + min-width: 40px; + width: 40px; + height: 40px; + background-color: #DEE2E6; + border-radius: 20px; + font: normal normal bold 14px/20px Inter, sans-serif; + display: flex; + justify-content: center; + align-items: center; +} + +.ngm-member-email { + font: normal normal 500 12px/15px Inter, sans-serif; + color: var(--ngm-interaction); +} + +ngm-project-members-section .project-edit-fields { + display: flex; + flex-direction: column; + row-gap: 27px; + align-items: start; +} + +ngm-project-members-section .ngm-label-btn .ngm-zoom-p-icon { + background-color: var(--ngm-interaction); + width: 12px; + height: 12px; +} + +ngm-project-members-section .ngm-label-btn { + margin-left: 0; + display: flex; + column-gap: 18px; + align-items: center; +} + +.ngm-member-add-form { + width: 324px; + background-color: #DEE2E6; + display: flex; + flex-direction: column; + row-gap: 30px; + padding: 16px 12px; +} + +.ngm-members-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; +} + +ngm-add-member-form .action-buttons { + display: flex; + column-gap: 5px; +} + +ngm-add-member-form .ngm-action-btn.ui.button { + display: flex; + justify-content: center; + width: auto; + flex: 2; +} + +ngm-add-member-form .ngm-cancel-btn.ui.button { + flex: 1; +} + +.ngm-member-container { + display: flex; + width: 324px; + align-items: center; +} + +.ngm-member-container .ngm-delete-icon { + cursor: pointer; + margin-left: auto; +} + +.ngm-proj-views-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.ngm-save-view-btn { + display: flex; + align-items: center; + column-gap: 5px; + background-color: transparent; + border: 0; + cursor: pointer; + color: var(--ngm-interaction); +} + +.ngm-save-view-btn:hover { + color: var(--ngm-interaction-hover); +} + +.ngm-save-view-btn:hover .ngm-save-icon { + background-color: var(--ngm-interaction-hover); +} + +@media (max-width: 819px) { + .ngm-members-list { + display: flex; + flex-direction: column; + gap: 20px; + } } \ No newline at end of file diff --git a/ui/src/style/ngm-geometry-info.css b/ui/src/style/ngm-geometry-info.css index afd753349..d4e1feff4 100644 --- a/ui/src/style/ngm-geometry-info.css +++ b/ui/src/style/ngm-geometry-info.css @@ -1,210 +1,210 @@ -ngm-geometry-info { - width: 260px; - max-height: calc(100vh - 100px); - display: flex; - flex-direction: column; -} - -ngm-geometry-info > .ngm-drag-area { - margin-top: auto; -} - -.ngm-geom-actions { - background-color: #F1F3F5; - box-shadow: 0 1px 3px #00000033; - border-radius: 8px; - display: flex; - padding: 6px 14px; - width: fit-content; - width: -moz-fit-content; - height: 36px; - margin: 12px 2px; -} - -.ngm-geom-actions > div:not(:last-child) { - margin-right: 25px; -} - -.ngm-geom-actions > div:hover { - cursor: pointer; - background-color: var(--ngm-interaction-hover); -} - -.ngm-geom-actions > div.active { - background-color: var(--ngm-interaction-active); -} - -ngm-geometry-info .ngm-action-btn.ui.button { - margin: 12px 0; - width: 204px; -} - -.ngm-download-obj-btn.ngm-action-btn.ui.button, -.ngm-download-obj-btn.ngm-action-btn.ui.button:active, -.ngm-download-obj-btn.ngm-action-btn.ui.button:focus { - background-color: #DEE2E6; - color: #495057; -} - -ngm-geometry-info .ngm-file-download-icon, -ngm-geometry-info .ngm-download-icon { - background-color: #495057; -} - -ngm-line-info:not(:first-child), -.ngm-geom-info-content:not(:first-child) { - margin-top: 12px; -} - -.ngm-geom-info-content > div:not(:last-child) { - margin-bottom: 28px; -} - -.ngm-geom-info-label { - color: #4A5056; - text-align: left; - font: normal normal 500 12px/15px Inter; - letter-spacing: 0.41px; - margin-bottom: 5px; -} - -ngm-measure .ngm-geom-info-content .ngm-geom-info-value, -ngm-slicer .ngm-geom-info-content .ngm-geom-info-value, -ngm-draw-section .ngm-geom-info-content .ngm-geom-info-value { - color: black; -} - -.ngm-geom-img img { - max-width: 204px; -} - -.ngm-geom-info-body { - overflow-y: auto; - overflow-x: hidden; - overflow-wrap: anywhere; -} - -.ngm-geom-limits { - display: flex; -} - -.ngm-geom-limits > div:first-child { - margin-right: 49px; -} - -.ngm-geom-limits > div:nth-child(3) { - margin-left: 49px; -} - -ngm-geometry-edit { - margin-top: 12px; - display: flex; - flex-direction: column; -} - -ngm-point-edit > div, -ngm-geometry-edit > div:not(:last-child) { - margin-bottom: 22px; -} - -.ngm-geom-edit-double-input { - display: flex; - flex-direction: column; - gap: 22px; -} - -.ngm-geom-edit-coord-input { - display: flex; -} - -.ngm-geom-edit-double-input .ngm-input:first-child, -.ngm-geom-edit-coord-input .ngm-input:first-child { - margin-right: 12px; -} - -.ngm-geom-edit-double-input .ngm-input input { - width: 100%; -} - -.ngm-geom-edit-coord-input .ngm-input input { - width: 112px; -} - -ngm-geometry-edit .ngm-action-btn.ui.button { - width: 104px; - text-align: center; - justify-content: center; -} - -ngm-geometry-edit .ngm-cancel-btn.ui.button { - background-color: rgba(0, 0, 0, 0); - color: #0C7285; - box-shadow: none; -} - -.ngm-geom-edit-actions { - display: flex; - justify-content: space-between; -} - -.ngm-geom-color { - width: 32px; - height: 32px; - margin-bottom: 5px; -} - -.ngm-geom-colorpicker, -.ngm-geom-symbolpicker { - display: flex; - width: 100%; - justify-content: start; - flex-wrap: wrap; -} - -.ngm-geom-symbolpicker > .ngm-geom-symbol:not(:last-child), -.ngm-geom-colorpicker > .ngm-geom-color:not(:last-child) { - margin-right: 5px; -} - - -.ngm-geom-colorpicker .ngm-geom-color:hover, -.ngm-geom-colorpicker .ngm-geom-color.active { - background-image: url('./images/i_colorpicker_check.svg'); - background-repeat: no-repeat; - background-position: center; -} - -.ngm-geom-colorpicker .ngm-geom-color.black-tick:hover, -.ngm-geom-colorpicker .ngm-geom-color.active.black-tick { - background-image: url('./images/i_colorpicker_check_black.svg'); -} - -.ngm-geom-symbolpicker .ngm-geom-symbol:hover, -.ngm-geom-symbolpicker .ngm-geom-symbol.active, -.ngm-geom-colorpicker .ngm-geom-color:hover { - opacity: 0.75; - cursor: pointer; -} - -.ngm-geom-symbol { - width: 24px; - height: 24px; - -webkit-mask-size: contain; - mask-size: contain; -} - -.geom-styles-title { - margin-bottom: 12px; - font: normal normal 500 14px/20px Inter; - color: #212529; -} - - -@media (max-height: 630px) { - ngm-geometry-info { - max-height: calc(100vh - 165px); - } -} - - - +ngm-geometry-info { + width: 260px; + max-height: calc(100vh - 100px); + display: flex; + flex-direction: column; +} + +ngm-geometry-info > .ngm-drag-area { + margin-top: auto; +} + +.ngm-geom-actions { + background-color: #F1F3F5; + box-shadow: 0 1px 3px #00000033; + border-radius: 8px; + display: flex; + padding: 6px 14px; + width: fit-content; + width: -moz-fit-content; + height: 36px; + margin: 12px 2px; +} + +.ngm-geom-actions > div:not(:last-child) { + margin-right: 25px; +} + +.ngm-geom-actions > div:hover { + cursor: pointer; + background-color: var(--ngm-interaction-hover); +} + +.ngm-geom-actions > div.active { + background-color: var(--ngm-interaction-active); +} + +ngm-geometry-info .ngm-action-btn.ui.button { + margin: 12px 0; + width: 204px; +} + +.ngm-download-obj-btn.ngm-action-btn.ui.button, +.ngm-download-obj-btn.ngm-action-btn.ui.button:active, +.ngm-download-obj-btn.ngm-action-btn.ui.button:focus { + background-color: #DEE2E6; + color: #495057; +} + +ngm-geometry-info .ngm-file-download-icon, +ngm-geometry-info .ngm-download-icon { + background-color: #495057; +} + +ngm-line-info:not(:first-child), +.ngm-geom-info-content:not(:first-child) { + margin-top: 12px; +} + +.ngm-geom-info-content > div:not(:last-child) { + margin-bottom: 28px; +} + +.ngm-geom-info-label { + color: #4A5056; + text-align: left; + font: normal normal 500 12px/15px Inter, sans-serif; + letter-spacing: 0.41px; + margin-bottom: 5px; +} + +ngm-measure .ngm-geom-info-content .ngm-geom-info-value, +ngm-slicer .ngm-geom-info-content .ngm-geom-info-value, +ngm-draw-section .ngm-geom-info-content .ngm-geom-info-value { + color: black; +} + +.ngm-geom-img img { + max-width: 204px; +} + +.ngm-geom-info-body { + overflow-y: auto; + overflow-x: hidden; + overflow-wrap: anywhere; +} + +.ngm-geom-limits { + display: flex; +} + +.ngm-geom-limits > div:first-child { + margin-right: 49px; +} + +.ngm-geom-limits > div:nth-child(3) { + margin-left: 49px; +} + +ngm-geometry-edit { + margin-top: 12px; + display: flex; + flex-direction: column; +} + +ngm-point-edit > div, +ngm-geometry-edit > div:not(:last-child) { + margin-bottom: 22px; +} + +.ngm-geom-edit-double-input { + display: flex; + flex-direction: column; + gap: 22px; +} + +.ngm-geom-edit-coord-input { + display: flex; +} + +.ngm-geom-edit-double-input .ngm-input:first-child, +.ngm-geom-edit-coord-input .ngm-input:first-child { + margin-right: 12px; +} + +.ngm-geom-edit-double-input .ngm-input input { + width: 100%; +} + +.ngm-geom-edit-coord-input .ngm-input input { + width: 112px; +} + +ngm-geometry-edit .ngm-action-btn.ui.button { + width: 104px; + text-align: center; + justify-content: center; +} + +ngm-geometry-edit .ngm-cancel-btn.ui.button { + background-color: rgba(0, 0, 0, 0); + color: #0C7285; + box-shadow: none; +} + +.ngm-geom-edit-actions { + display: flex; + justify-content: space-between; +} + +.ngm-geom-color { + width: 32px; + height: 32px; + margin-bottom: 5px; +} + +.ngm-geom-colorpicker, +.ngm-geom-symbolpicker { + display: flex; + width: 100%; + justify-content: start; + flex-wrap: wrap; +} + +.ngm-geom-symbolpicker > .ngm-geom-symbol:not(:last-child), +.ngm-geom-colorpicker > .ngm-geom-color:not(:last-child) { + margin-right: 5px; +} + + +.ngm-geom-colorpicker .ngm-geom-color:hover, +.ngm-geom-colorpicker .ngm-geom-color.active { + background-image: url('./images/i_colorpicker_check.svg'); + background-repeat: no-repeat; + background-position: center; +} + +.ngm-geom-colorpicker .ngm-geom-color.black-tick:hover, +.ngm-geom-colorpicker .ngm-geom-color.active.black-tick { + background-image: url('./images/i_colorpicker_check_black.svg'); +} + +.ngm-geom-symbolpicker .ngm-geom-symbol:hover, +.ngm-geom-symbolpicker .ngm-geom-symbol.active, +.ngm-geom-colorpicker .ngm-geom-color:hover { + opacity: 0.75; + cursor: pointer; +} + +.ngm-geom-symbol { + width: 24px; + height: 24px; + -webkit-mask-size: contain; + mask-size: contain; +} + +.geom-styles-title { + margin-bottom: 12px; + font: normal normal 500 14px/20px Inter, sans-serif; + color: #212529; +} + + +@media (max-height: 630px) { + ngm-geometry-info { + max-height: calc(100vh - 165px); + } +} + + + diff --git a/ui/src/style/ngm-input.css b/ui/src/style/ngm-input.css index 13ca8cff4..6c9d6174f 100644 --- a/ui/src/style/ngm-input.css +++ b/ui/src/style/ngm-input.css @@ -1,105 +1,105 @@ -.ngm-input { - position: relative; -} - -.ngm-input textarea, -.ngm-input input { - appearance: none; - background: rgba(255, 255, 255, 1); - border-radius: 4px 4px 0 0; - border: 2px solid transparent; - width: 236px; - height: 54px; - border-bottom-color: #66D9E8; - font: normal normal 500 16px/24px Inter; - color: #212529; - outline: none; - padding-left: 16px; - padding-top: 17px; -} - -.ngm-input textarea:not(:placeholder-shown) ~ .ngm-floating-label, -.ngm-input textarea:focus ~ .ngm-floating-label, -.ngm-input input:focus ~ .ngm-floating-label, -.ngm-input input:not(:placeholder-shown) ~ .ngm-floating-label { - padding-top: 4px; - bottom: 10px; - font-size: 12px; - line-height: 15px; -} - -.ngm-floating-label { - position: absolute; - pointer-events: none; - top: 0; - left: 16px; - padding-top: 17px; - transition: 0.2s ease all; - color: #4A5056; - letter-spacing: 0.16px; - height: 20px; - background-color: white; - width: calc(100% - 24px); -} - -.ngm-input textarea { - height: 102px; - resize: none; -} - -.ngm-input.ngm-input-warning .ngm-floating-label { - color: var(--ngm-warning); -} - -.ngm-input.ngm-input-warning input { - border-bottom-color: var(--ngm-warning); -} - -.ngm-input textarea::placeholder, -.ngm-input input::placeholder, -.ngm-input textarea::-webkit-input-placeholder, -.ngm-input input::-webkit-input-placeholder { - opacity: 0; -} - -/* Input style dropdown */ - -.ngm-input.ui.dropdown { - height: 56px; - padding-top: 21px !important; - border: none !important; - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-bottom: 2px solid #52A8BC !important; -} - -.ngm-input.ui.selection.active.dropdown .menu { - border-top: 2px solid #52A8BC !important; -} - -.ngm-input.ui.dropdown > .dropdown.icon { - padding-top: 21px !important; - color: #52A8BC !important; - opacity: 1 !important; -} - -.ngm-input.ui.active.selection { - background-color: #C5F6FA; -} - -.ngm-input.ui.dropdown .menu .item.active.selected { - background-color: #F8F9FA; - font-weight: normal !important; -} - -.ngm-input.ui.dropdown .menu.visible { - display: block !important; -} - -.ngm-input.ui.dropdown.ngm-input-warning .text { - color: var(--ngm-warning) !important; -} - -.ngm-input.ui.dropdown.ngm-input-warning { - border-bottom-color: var(--ngm-warning) !important; -} +.ngm-input { + position: relative; +} + +.ngm-input textarea, +.ngm-input input { + appearance: none; + background: rgba(255, 255, 255, 1); + border-radius: 4px 4px 0 0; + border: 2px solid transparent; + width: 236px; + height: 54px; + border-bottom-color: #66D9E8; + font: normal normal 500 16px/24px Inter, sans-serif; + color: #212529; + outline: none; + padding-left: 16px; + padding-top: 17px; +} + +.ngm-input textarea:not(:placeholder-shown) ~ .ngm-floating-label, +.ngm-input textarea:focus ~ .ngm-floating-label, +.ngm-input input:focus ~ .ngm-floating-label, +.ngm-input input:not(:placeholder-shown) ~ .ngm-floating-label { + padding-top: 4px; + bottom: 10px; + font-size: 12px; + line-height: 15px; +} + +.ngm-floating-label { + position: absolute; + pointer-events: none; + top: 0; + left: 16px; + padding-top: 17px; + transition: 0.2s ease all; + color: #4A5056; + letter-spacing: 0.16px; + height: 20px; + background-color: white; + width: calc(100% - 24px); +} + +.ngm-input textarea { + height: 102px; + resize: none; +} + +.ngm-input.ngm-input-warning .ngm-floating-label { + color: var(--ngm-warning); +} + +.ngm-input.ngm-input-warning input { + border-bottom-color: var(--ngm-warning); +} + +.ngm-input textarea::placeholder, +.ngm-input input::placeholder, +.ngm-input textarea::-webkit-input-placeholder, +.ngm-input input::-webkit-input-placeholder { + opacity: 0; +} + +/* Input style dropdown */ + +.ngm-input.ui.dropdown { + height: 56px; + padding-top: 21px !important; + border: none !important; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-bottom: 2px solid #52A8BC !important; +} + +.ngm-input.ui.selection.active.dropdown .menu { + border-top: 2px solid #52A8BC !important; +} + +.ngm-input.ui.dropdown > .dropdown.icon { + padding-top: 21px !important; + color: #52A8BC !important; + opacity: 1 !important; +} + +.ngm-input.ui.active.selection { + background-color: #C5F6FA; +} + +.ngm-input.ui.dropdown .menu .item.active.selected { + background-color: #F8F9FA; + font-weight: normal !important; +} + +.ngm-input.ui.dropdown .menu.visible { + display: block !important; +} + +.ngm-input.ui.dropdown.ngm-input-warning .text { + color: var(--ngm-warning) !important; +} + +.ngm-input.ui.dropdown.ngm-input-warning { + border-bottom-color: var(--ngm-warning) !important; +} diff --git a/ui/src/style/ngm-layer-legend.css b/ui/src/style/ngm-layer-legend.css index 4afa8719d..9efed912c 100644 --- a/ui/src/style/ngm-layer-legend.css +++ b/ui/src/style/ngm-layer-legend.css @@ -1,59 +1,60 @@ - -ngm-layer-legend { - max-height: 100%; -} - -ngm-layer-legend .content-container { - max-width: 504px; - font-size: 14px; -} - -ngm-layer-legend .content-container.legend-html { - width: 504px; - max-width: 100%; -} - -ngm-layer-legend .ngm-legend-container { - background-color: #F8F9FA; - display: flex; -} - -ngm-layer-legend .ngm-legend-container > div { - padding-left: 8px !important; - vertical-align: top; - white-space: nowrap; - font-weight: bold; -} - -ngm-layer-legend .ngm-legend-image { - min-width: 160px; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 8px !important; -} - -ngm-layer-legend .ngm-legend-html table a { - color: #357183; -} - -ngm-layer-legend .ngm-legend-html span, -ngm-layer-legend .ngm-legend-html p.bod-title { - font-weight: bold; -} - -ngm-layer-legend .ngm-legend-container img { - width: 200px; -} - -ngm-layer-legend .ui.divider { - margin: 10px 0 0 0; -} - -ngm-layer-legend .content-container { - margin-bottom: 10px; - overflow-y: auto; - overflow-x: hidden; - max-height: 505px; - user-select: text; -} + +ngm-layer-legend { + max-height: 100%; +} + +ngm-layer-legend .content-container { + max-width: 504px; + font-size: 14px; + margin-bottom: 10px; + overflow-y: auto; + overflow-x: hidden; + max-height: 505px; + user-select: text; +} + +ngm-layer-legend .content-container.legend-html { + width: 504px; + max-width: 100%; +} + +ngm-layer-legend .ngm-legend-container { + background-color: #F8F9FA; + display: flex; +} + +ngm-layer-legend .ngm-legend-container > div { + padding-left: 8px !important; + vertical-align: top; + white-space: nowrap; + font-weight: bold; +} + +ngm-layer-legend .ngm-legend-image { + min-width: 160px; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 8px !important; +} + +ngm-layer-legend .ngm-legend-html table a { + color: #357183; +} + +ngm-layer-legend .ngm-legend-html span, +ngm-layer-legend .ngm-legend-html p.bod-title { + font-weight: bold; +} + +ngm-layer-legend .ngm-legend-container img { + width: 200px; +} + +ngm-layer-legend .ui.divider { + margin: 10px 0 0 0; +} + +ngm-layer-legend .content-container { + +} diff --git a/ui/src/style/ngm-point-edit.css b/ui/src/style/ngm-point-edit.css index 753304375..4c5d4c834 100644 --- a/ui/src/style/ngm-point-edit.css +++ b/ui/src/style/ngm-point-edit.css @@ -1,21 +1,21 @@ -.ngm-point-edit-dropdown .dropdown.active, -.ngm-point-edit-dropdown .dropdown { - background-color: transparent; - font: normal normal bold 15px/24px Inter; - padding: 0; -} - -.ngm-point-edit-dropdown .ngm-coords { - font: normal normal bold 15px/24px Inter; - letter-spacing: 0.16px; - color: #222529; -} - -.ngm-point-edit-dropdown .ui.dropdown .menu { - border-radius: 0; - box-shadow: 0 3px 4px #00000029; -} - -.ngm-point-edit-dropdown .ui.dropdown .menu .item:hover { - background-color: var(--ngm-hover); -} +.ngm-point-edit-dropdown .dropdown.active, +.ngm-point-edit-dropdown .dropdown { + background-color: transparent; + font: normal normal bold 15px/24px Inter, sans-serif; + padding: 0; +} + +.ngm-point-edit-dropdown .ngm-coords { + font: normal normal bold 15px/24px Inter, sans-serif; + letter-spacing: 0.16px; + color: #222529; +} + +.ngm-point-edit-dropdown .ui.dropdown .menu { + border-radius: 0; + box-shadow: 0 3px 4px #00000029; +} + +.ngm-point-edit-dropdown .ui.dropdown .menu .item:hover { + background-color: var(--ngm-hover); +} diff --git a/ui/src/style/ngm-share-link.css b/ui/src/style/ngm-share-link.css index 7d235d246..a95b40a97 100644 --- a/ui/src/style/ngm-share-link.css +++ b/ui/src/style/ngm-share-link.css @@ -1,59 +1,59 @@ -ngm-share-link { - display: flex; - flex-direction: column; -} - -ngm-share-link > div { - margin-bottom: 13px; -} - -.ngm-share-label { - margin-top: 12px; - color: #212529; - font: normal normal bold 14px/20px Inter; - letter-spacing: 0; -} - -ngm-share-link .ui.button.ngm-action-btn { - width: 222px; - justify-content: center; - margin-bottom: 13px; -} - -ngm-share-link .ngm-input, -ngm-share-link .ngm-input input { - width: 415px; -} - -.ngm-copy-icon-btn { - background-color: white; - right: 0; - top: 10px; - position: absolute; - cursor: pointer; - border: 0; -} - -.ngm-copy-icon-btn.disabled { - pointer-events: none; - cursor: default; -} - -.ngm-copy-icon-btn.disabled .ngm-copy-icon { - opacity: 0.5; -} - -.ngm-copy-icon-btn:hover .ngm-copy-icon { - background-color: var(--ngm-interaction-hover); -} - -.ngm-copy-icon-btn .ngm-copy-icon { - padding: 20px 30px; -} - -@media (max-height: 629px), (max-width: 599px) { - ngm-share-link .ngm-input, - ngm-share-link .ngm-input input { - width: 100%; - } -} +ngm-share-link { + display: flex; + flex-direction: column; +} + +ngm-share-link > div { + margin-bottom: 13px; +} + +.ngm-share-label { + margin-top: 12px; + color: #212529; + font: normal normal bold 14px/20px Inter, sans-serif; + letter-spacing: 0; +} + +ngm-share-link .ui.button.ngm-action-btn { + width: 222px; + justify-content: center; + margin-bottom: 13px; +} + +ngm-share-link .ngm-input, +ngm-share-link .ngm-input input { + width: 415px; +} + +.ngm-copy-icon-btn { + background-color: white; + right: 0; + top: 10px; + position: absolute; + cursor: pointer; + border: 0; +} + +.ngm-copy-icon-btn.disabled { + pointer-events: none; + cursor: default; +} + +.ngm-copy-icon-btn.disabled .ngm-copy-icon { + opacity: 0.5; +} + +.ngm-copy-icon-btn:hover .ngm-copy-icon { + background-color: var(--ngm-interaction-hover); +} + +.ngm-copy-icon-btn .ngm-copy-icon { + padding: 20px 30px; +} + +@media (max-height: 629px), (max-width: 599px) { + ngm-share-link .ngm-input, + ngm-share-link .ngm-input input { + width: 100%; + } +} diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css index 13e9f6ed8..c048e708d 100644 --- a/ui/src/style/ngm-side-bar.css +++ b/ui/src/style/ngm-side-bar.css @@ -1,317 +1,316 @@ -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, -.ngm-menu-mobile { - width: var(--ngm-left-side-bar-width); - justify-content: space-between; - font: normal normal normal 12px/15px Inter; - 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; -} - -.ngm-menu-2 > .ngm-settings { - margin-bottom: 0; -} - -.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-1 > div:hover, -.ngm-menu-2 > div:hover, -.ngm-menu-mobile > div:hover { - color: var(--ngm-interaction-hover); -} - -.ngm-side-bar-panel { - width: 250px; - height: calc(100vh - var(--ngm-header-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); - 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); -} - -.ngm-side-bar-panel.ngm-share-panel { - width: 436px; -} - -.ngm-side-bar-panel.ngm-extension-panel { - width: 528px; - left: 250px; -} - -.ngm-panel-header { - height: var(--ngm-panel-header-height); - border-bottom: 2px solid #DFE2E6; - display: flex; - align-items: center; - font: normal normal bold 14px/20px Inter; - color: #212529; -} - -.ngm-panel-header .ngm-close-icon { - width: 24px; - height: 24px; - background-color: #000000; - margin-left: auto; -} - -.ngm-panel-header .ngm-close-icon:hover { - background-color: var(--ngm-action-hover); -} - -.ngm-close-icon, -.ngm-back-icon { - cursor: pointer; -} - -.ngm-panel-content { - display: flex; - flex-direction: column; - margin-top: 9px; - overflow-y: auto; - overflow-x: hidden; - padding-bottom: 40px; - /* scrollbar-color: #868E96 #F1F3F5; */ -} - -.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; -} - -.ngm-background-label.ui.header { - display: flex; - height: 24px; - margin-bottom: 6px; -} - -.ngm-background-label > .ui.mini.loader { - margin-left: 5px; -} - -.ngm-label-btn { - margin-left: auto; - font: normal normal 500 14px/20px Inter; - 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-configure-data { - margin-right: 5px; - 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; - } - - .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); - height: 62px; - } - - .ngm-menu-mobile > div { - margin-top: 10px; - } - - .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)); - } - - .ngm-side-bar-panel.ngm-large-panel { - width: calc(100vw - 64px); - } - - .ngm-side-bar-panel.ngm-share-panel { - width: 100% - } - - .ngm-menu-1 > div > div:nth-child(1), - .ngm-menu-mobile > div > div:nth-child(1) { - margin-bottom: 1px; - background-color: #030303; - height: 24px; - } - - .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information .ngm-proj-description { - margin-left: 0; - margin-top: 12px; - width: 100%; - } - - .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information { - flex-direction: column; - } - - .ngm-side-bar-panel.ngm-large-panel .ngm-projects-list .ngm-proj-preview { - margin-right: 0; - 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; - text-align: start; - } - - ngm-map-configuration .base-map-labels label, - ngm-map-configuration .ngm-map-preview { - margin-right: 0; - width: 110px; - } - - ngm-map-configuration .base-map-labels, - ngm-map-configuration ngm-map-chooser { - margin-left: 10px; - justify-content: center; - } - - ngm-layers-item .ngm-displayed-slider { - width: 150px; - } -} - -@media (max-width: 350px) { - .ngm-menu-1 > div, - .ngm-menu-mobile > div { - width: 60px; - } -} +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, +.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; +} + +.ngm-menu-2 > .ngm-settings { + margin-bottom: 0; +} + +.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-1 > div:hover, +.ngm-menu-2 > div:hover, +.ngm-menu-mobile > div:hover { + color: var(--ngm-interaction-hover); +} + +.ngm-side-bar-panel { + width: 250px; + height: calc(100vh - var(--ngm-header-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); + 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); +} + +.ngm-side-bar-panel.ngm-share-panel { + width: 436px; +} + +.ngm-side-bar-panel.ngm-extension-panel { + width: 528px; + left: 250px; +} + +.ngm-panel-header { + height: var(--ngm-panel-header-height); + border-bottom: 2px solid #DFE2E6; + display: flex; + align-items: center; + font: normal normal bold 14px/20px Inter, sans-serif; + color: #212529; +} + +.ngm-panel-header .ngm-close-icon { + width: 24px; + height: 24px; + background-color: #000000; + margin-left: auto; +} + +.ngm-panel-header .ngm-close-icon:hover { + background-color: var(--ngm-action-hover); +} + +.ngm-close-icon, +.ngm-back-icon { + cursor: pointer; +} + +.ngm-panel-content { + display: flex; + flex-direction: column; + margin-top: 9px; + overflow-y: auto; + overflow-x: hidden; + 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; +} + +.ngm-background-label.ui.header { + display: flex; + height: 24px; + margin-bottom: 6px; +} + +.ngm-background-label > .ui.mini.loader { + 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-configure-data { + margin-right: 5px; + 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; + } + + .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); + height: 62px; + } + + .ngm-menu-mobile > div { + margin-top: 10px; + } + + .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)); + } + + .ngm-side-bar-panel.ngm-large-panel { + width: calc(100vw - 64px); + } + + .ngm-side-bar-panel.ngm-share-panel { + width: 100% + } + + .ngm-menu-1 > div > div:nth-child(1), + .ngm-menu-mobile > div > div:nth-child(1) { + margin-bottom: 1px; + background-color: #030303; + height: 24px; + } + + .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information .ngm-proj-description { + margin-left: 0; + margin-top: 12px; + width: 100%; + } + + .ngm-side-bar-panel.ngm-large-panel .ngm-proj-information { + flex-direction: column; + } + + .ngm-side-bar-panel.ngm-large-panel .ngm-projects-list .ngm-proj-preview { + margin-right: 0; + 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; + text-align: start; + } + + ngm-map-configuration .base-map-labels label, + ngm-map-configuration .ngm-map-preview { + margin-right: 0; + width: 110px; + } + + ngm-map-configuration .base-map-labels, + ngm-map-configuration ngm-map-chooser { + margin-left: 10px; + justify-content: center; + } + + ngm-layers-item .ngm-displayed-slider { + width: 150px; + } +} + +@media (max-width: 350px) { + .ngm-menu-1 > div, + .ngm-menu-mobile > div { + width: 60px; + } +} diff --git a/ui/src/style/ngm-toolbox.css b/ui/src/style/ngm-toolbox.css index e47f640cc..6715852cc 100644 --- a/ui/src/style/ngm-toolbox.css +++ b/ui/src/style/ngm-toolbox.css @@ -1,215 +1,215 @@ -ngm-tools { - height: 100%; -} - -ngm-draw-tool, -ngm-slicer, -ngm-gst-interaction, -ngm-measure { - height: calc(100% - (var(--ngm-panel-header-height) + 10px)); - display: flex; - flex-direction: column; -} - -ngm-geometries-list { - min-height: 140px; - height: 100%; -} - -ngm-geometries-simple-list { - display: flex; - flex-direction: column; - overflow: hidden; - height: 100%; -} - -.ngm-geom-list { - overflow-y: auto; - height: 100%; -} - -.ngm-draw-list-item, -.ngm-tools-list-item { - display: flex; - align-items: center; - color: #212529; - text-align: left; - font: normal normal bold 14px/20px Inter; - letter-spacing: 0; - padding: 14px 0; -} - -.ngm-draw-list-item div:nth-child(2), -.ngm-tools-list-item div:nth-child(2) { - margin-left: 12px; -} - -.ngm-slice-side > div:hover > div:nth-child(1), -.ngm-draw-list-item:hover div:nth-child(1), -.ngm-tools-list-item:hover div:nth-child(1) { - background-color: var(--ngm-interaction-hover); -} - -.ngm-draw-list-item:hover, -.ngm-tools-list-item:hover, -.ngm-slice-side > div:hover { - color: var(--ngm-interaction-hover); -} - -.ngm-slice-side > div.active, -.ngm-draw-list-item.active { - color: var(--ngm-action-hover); -} - -ngm-gst-interaction .ngm-action-list-item.active, -ngm-slicer .ngm-action-list-item.active, -ngm-measure .ngm-action-list-item.active, -ngm-draw-section .ngm-action-list-item.active { - height: auto; -} - -.ngm-draw-list-item.disabled > div:first-child { - background-color: #868E96 !important; -} - -.ngm-slice-types.disabled > .ngm-action-list-item, -.ngm-draw-list-item.disabled { - cursor: default; - pointer-events: none; - color: #868E96 !important; -} - -.ngm-hint { - background-color: var(--ngm-hover); - color: #212529; - font: normal normal bold 14px/20px Inter; - letter-spacing: 0; - padding: 12px; - border-radius: 8px; -} - -.ngm-slice-type-label, -.ngm-geom-label { - margin-top: 12px; - margin-bottom: 16px; - font: normal normal 500 14px/20px Inter; - color: #212529; -} - -.ngm-slice-side > div.active > div:nth-child(1), -.ngm-draw-list-item.active div:nth-child(1) { - background-color: var(--ngm-action-hover); -} - -.ngm-slice-side { - display: flex; - font: normal normal 500 14px/28px Inter; - margin-bottom: 20px; - width: 214px; -} - -.ngm-slice-side > div { - display: flex; - align-items: center; -} - -.ngm-slice-side > div:nth-child(1) { - margin-right: 37px; -} - -.ngm-slice-side > div > div:nth-child(1) { - margin-right: 13px; -} - -ngm-slicer .ui.button.ngm-transform-btn { - display: flex; - margin-left: auto; - height: 36px; - background-color: var(--ngm-interaction); - box-shadow: 0 1px 3px #00000033; - color: #fff; - vertical-align: middle; - letter-spacing: 0.25px; -} - -ngm-slicer .ui.button.ngm-transform-btn:hover { - background-color: #D0F5F9; - color: #357183; -} - -ngm-slicer .ngm-hint, -ngm-slicer .ngm-divider, -ngm-measure .ngm-hint, -ngm-draw-section .ngm-hint, -ngm-measure .ngm-divider, -ngm-draw-section .ngm-divider { - margin-top: 12px; -} - -.ngm-geom-filter.ngm-action-list-item { - background-color: #f1f3f5; -} - -.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:first-child { - width: auto; -} - -.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:not(:first-child, :last-child):hover { - background-color: var(--ngm-interaction-hover); -} - -.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:not(:first-child, :last-child).active { - background-color: var(--ngm-interaction-active); -} - -.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:first-child.active { - color: var(--ngm-interaction-active); -} - -.ngm-gst-container, -.ngm-gst-container .ngm-input > input { - width: 100%; -} - -.ngm-gst-container > div:first-child { - margin-top: 12px; -} - -.ngm-gst-container > div { - margin-bottom: 12px; -} - -.ngm-section-format-container { - font: normal normal bold 15px/24px Inter; - letter-spacing: 0.16px; - color: #222529; -} - -.ngm-section-format-container > label { - color: #495057; - font: normal normal 500 14px/20px Inter; -} - -.ngm-section-format-container .dropdown.active, -.ngm-section-format-container .dropdown { - background-color: transparent; - font: normal normal bold 15px/24px Inter; - padding: 0; -} - -.ngm-section-format-container .ui.dropdown .menu { - border-radius: 0; - box-shadow: 0 3px 4px #00000029; - width: 100%; -} - -.ngm-section-format-container .ui.dropdown .menu .item:hover { - background-color: var(--ngm-hover); -} - -.ngm-measure-segment-info:hover .ngm-measure-segment-title { - color: var(--ngm-interaction-hover); -} -.ngm-measure-segment-info:hover { - background-color: rgba(255, 255, 0, 0.2); -} +ngm-tools { + height: 100%; +} + +ngm-draw-tool, +ngm-slicer, +ngm-gst-interaction, +ngm-measure { + height: calc(100% - (var(--ngm-panel-header-height) + 10px)); + display: flex; + flex-direction: column; +} + +ngm-geometries-list { + min-height: 140px; + height: 100%; +} + +ngm-geometries-simple-list { + display: flex; + flex-direction: column; + overflow: hidden; + height: 100%; +} + +.ngm-geom-list { + overflow-y: auto; + height: 100%; +} + +.ngm-draw-list-item, +.ngm-tools-list-item { + display: flex; + align-items: center; + color: #212529; + text-align: left; + font: normal normal bold 14px/20px Inter, sans-serif; + letter-spacing: 0; + padding: 14px 0; +} + +.ngm-draw-list-item div:nth-child(2), +.ngm-tools-list-item div:nth-child(2) { + margin-left: 12px; +} + +.ngm-slice-side > div:hover > div:nth-child(1), +.ngm-draw-list-item:hover div:nth-child(1), +.ngm-tools-list-item:hover div:nth-child(1) { + background-color: var(--ngm-interaction-hover); +} + +.ngm-draw-list-item:hover, +.ngm-tools-list-item:hover, +.ngm-slice-side > div:hover { + color: var(--ngm-interaction-hover); +} + +.ngm-slice-side > div.active, +.ngm-draw-list-item.active { + color: var(--ngm-action-hover); +} + +ngm-gst-interaction .ngm-action-list-item.active, +ngm-slicer .ngm-action-list-item.active, +ngm-measure .ngm-action-list-item.active, +ngm-draw-section .ngm-action-list-item.active { + height: auto; +} + +.ngm-draw-list-item.disabled > div:first-child { + background-color: #868E96 !important; +} + +.ngm-slice-types.disabled > .ngm-action-list-item, +.ngm-draw-list-item.disabled { + cursor: default; + pointer-events: none; + color: #868E96 !important; +} + +.ngm-hint { + background-color: var(--ngm-hover); + color: #212529; + font: normal normal bold 14px/20px Inter, sans-serif; + letter-spacing: 0; + padding: 12px; + border-radius: 8px; +} + +.ngm-slice-type-label, +.ngm-geom-label { + margin-top: 12px; + margin-bottom: 16px; + font: normal normal 500 14px/20px Inter, sans-serif; + color: #212529; +} + +.ngm-slice-side > div.active > div:nth-child(1), +.ngm-draw-list-item.active div:nth-child(1) { + background-color: var(--ngm-action-hover); +} + +.ngm-slice-side { + display: flex; + font: normal normal 500 14px/28px Inter, sans-serif; + margin-bottom: 20px; + width: 214px; +} + +.ngm-slice-side > div { + display: flex; + align-items: center; +} + +.ngm-slice-side > div:nth-child(1) { + margin-right: 37px; +} + +.ngm-slice-side > div > div:nth-child(1) { + margin-right: 13px; +} + +ngm-slicer .ui.button.ngm-transform-btn { + display: flex; + margin-left: auto; + height: 36px; + background-color: var(--ngm-interaction); + box-shadow: 0 1px 3px #00000033; + color: #fff; + vertical-align: middle; + letter-spacing: 0.25px; +} + +ngm-slicer .ui.button.ngm-transform-btn:hover { + background-color: #D0F5F9; + color: #357183; +} + +ngm-slicer .ngm-hint, +ngm-slicer .ngm-divider, +ngm-measure .ngm-hint, +ngm-draw-section .ngm-hint, +ngm-measure .ngm-divider, +ngm-draw-section .ngm-divider { + margin-top: 12px; +} + +.ngm-geom-filter.ngm-action-list-item { + background-color: #f1f3f5; +} + +.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:first-child { + width: auto; +} + +.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:not(:first-child, :last-child):hover { + background-color: var(--ngm-interaction-hover); +} + +.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:not(:first-child, :last-child).active { + background-color: var(--ngm-interaction-active); +} + +.ngm-geom-filter.ngm-action-list-item .ngm-action-list-item-header > div:first-child.active { + color: var(--ngm-interaction-active); +} + +.ngm-gst-container, +.ngm-gst-container .ngm-input > input { + width: 100%; +} + +.ngm-gst-container > div:first-child { + margin-top: 12px; +} + +.ngm-gst-container > div { + margin-bottom: 12px; +} + +.ngm-section-format-container { + font: normal normal bold 15px/24px Inter, sans-serif; + letter-spacing: 0.16px; + color: #222529; +} + +.ngm-section-format-container > label { + color: #495057; + font: normal normal 500 14px/20px Inter, sans-serif; +} + +.ngm-section-format-container .dropdown.active, +.ngm-section-format-container .dropdown { + background-color: transparent; + font: normal normal bold 15px/24px Inter, sans-serif; + padding: 0; +} + +.ngm-section-format-container .ui.dropdown .menu { + border-radius: 0; + box-shadow: 0 3px 4px #00000029; + width: 100%; +} + +.ngm-section-format-container .ui.dropdown .menu .item:hover { + background-color: var(--ngm-hover); +} + +.ngm-measure-segment-info:hover .ngm-measure-segment-title { + color: var(--ngm-interaction-hover); +} +.ngm-measure-segment-info:hover { + background-color: rgba(255, 255, 0, 0.2); +} diff --git a/ui/src/style/search.css b/ui/src/style/search.css index f0866ce2b..25219df63 100644 --- a/ui/src/style/search.css +++ b/ui/src/style/search.css @@ -1,124 +1,124 @@ - -ga-search { - align-self: center; - flex: 2; - min-width: 260px; - max-width: 496px; - height: 56px; -} - -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; -} - -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, -ga-search.ui.input > input::-webkit-search-results-decoration { - display: none; -} - -.ngm-search-icon-container { - width: 30px; - height: 100%; - position: absolute; - right: 12px; - color: #66D9E8; - background-color: var(--ngm-interaction); -} - -.ngm-search-icon-container.ngm-close-icon { - cursor: pointer; -} - -.mobile-search-active ga-search .ngm-search-icon { - display: none; -} - -/* FIXME: use existing fomantic component */ -ga-search > .search-results { - z-index: 2 !important; - background-color: #fff; - box-shadow: 0 3px 4px #00000029; - list-style: none; - margin: 0; - padding: 0; - max-height: 300px; - overflow-y: auto; -} - -ga-search > .search-results > .autocomplete-result { - padding: 4px 8px 4px 8px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -ga-search > .search-results > .autocomplete-result .highlight { - background-color: #ffec99; -} - -ga-search > .search-results > .autocomplete-result[aria-selected=true], -ga-search > .search-results > .autocomplete-result:hover { - cursor: pointer; - background-color: var(--ngm-hover); -} - -ga-search > .search-results img { - width: 20px; - vertical-align: middle; - color: #868E96; -} - -ga-search > .search-results { - text-align: left; - font: normal normal normal 16px/24px 'Inter'; - letter-spacing: 0.16px; - color: #212529; -} - -ga-search > .search-results i { - font: italic normal normal 16px/24px Inter; - letter-spacing: 0.15px; -} - -ga-search > .search-results b { - font: normal normal bold 16px/24px Inter; -} - -@media (max-width: 690px) { - ga-search { - min-width: 180px; - max-width: 180px; - } - - ga-search > input { - padding: 11px 16px !important; - width: 150px; - } -} + +ga-search { + align-self: center; + flex: 2; + min-width: 260px; + max-width: 496px; + height: 56px; +} + +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; +} + +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, +ga-search.ui.input > input::-webkit-search-results-decoration { + display: none; +} + +.ngm-search-icon-container { + width: 30px; + height: 100%; + position: absolute; + right: 12px; + color: #66D9E8; + background-color: var(--ngm-interaction); +} + +.ngm-search-icon-container.ngm-close-icon { + cursor: pointer; +} + +.mobile-search-active ga-search .ngm-search-icon { + display: none; +} + +/* FIXME: use existing fomantic component */ +ga-search > .search-results { + z-index: 2 !important; + background-color: #fff; + box-shadow: 0 3px 4px #00000029; + list-style: none; + margin: 0; + padding: 0; + max-height: 300px; + overflow-y: auto; +} + +ga-search > .search-results > .autocomplete-result { + padding: 4px 8px 4px 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +ga-search > .search-results > .autocomplete-result .highlight { + background-color: #ffec99; +} + +ga-search > .search-results > .autocomplete-result[aria-selected=true], +ga-search > .search-results > .autocomplete-result:hover { + cursor: pointer; + background-color: var(--ngm-hover); +} + +ga-search > .search-results img { + width: 20px; + vertical-align: middle; + color: #868E96; +} + +ga-search > .search-results { + text-align: left; + font: normal normal normal 16px/24px 'Inter', sans-serif; + letter-spacing: 0.16px; + color: #212529; +} + +ga-search > .search-results i { + font: italic normal normal 16px/24px Inter, sans-serif; + letter-spacing: 0.15px; +} + +ga-search > .search-results b { + font: normal normal bold 16px/24px Inter, sans-serif; +} + +@media (max-width: 690px) { + ga-search { + min-width: 180px; + max-width: 180px; + } + + ga-search > input { + padding: 11px 16px !important; + width: 150px; + } +} diff --git a/ui/src/toolbox/ngm-geometry-info.ts b/ui/src/toolbox/ngm-geometry-info.ts index 0bc780e34..b7ba3d750 100644 --- a/ui/src/toolbox/ngm-geometry-info.ts +++ b/ui/src/toolbox/ngm-geometry-info.ts @@ -1,249 +1,249 @@ -import {LitElementI18n} from '../i18n'; -import {customElement, query, state} from 'lit/decorators.js'; -import {html} from 'lit'; -import draggable from '../elements/draggable'; -import type {CustomDataSource, Entity, Viewer} from 'cesium'; -import {Cartographic} from 'cesium'; -import MainStore from '../store/main'; -import {GEOMETRY_DATASOURCE_NAME, NO_EDIT_GEOMETRY_DATASOURCE_NAME} from '../constants'; -import ToolboxStore from '../store/toolbox'; -import i18next from 'i18next'; -import type {NgmGeometry} from './interfaces'; -import {classMap} from 'lit-html/directives/class-map.js'; -import {downloadGeometry, hideVolume, pauseGeometryCollectionEvents, updateEntityVolume} from './helpers'; -import './ngm-geometry-edit'; -import {styleMap} from 'lit/directives/style-map.js'; -import {showSnackbarInfo} from '../notifications'; -import {dragArea} from '../elements/helperElements'; - -@customElement('ngm-geometry-info') -export class NgmGeometryInfo extends LitElementI18n { - @state() - accessor geomEntity: Entity | undefined; - @state() - accessor editing = false; - @state() - accessor geometry: NgmGeometry | undefined; - @state() - accessor noEdit = false; - @state() - accessor sliceActive = false; - @query('.ngm-geom-info-body') - accessor infoBodyElement; - private viewer: Viewer | null = null; - private geometriesDataSource: CustomDataSource | undefined; - - constructor() { - super(); - MainStore.viewer.subscribe(viewer => this.viewer = viewer); - ToolboxStore.openedGeometryOptions.subscribe(options => { - this.noEdit = false; - this.geometriesDataSource = this.viewer?.dataSources.getByName(GEOMETRY_DATASOURCE_NAME)[0]; - if (!options?.id) { - this.editing = false; - this.geomEntity = undefined; - return; - } - let entity = this.geometriesDataSource?.entities.getById(options.id); - if (!entity) { - this.geometriesDataSource = this.viewer?.dataSources.getByName(NO_EDIT_GEOMETRY_DATASOURCE_NAME)[0]; - entity = this.geometriesDataSource?.entities.getById(options.id); - if (!entity) return; - this.noEdit = true; - } - this.geomEntity = entity; - this.geometry = ToolboxStore.openedGeometry; - this.editing = !!options.editing; - this.sliceActive = ToolboxStore.sliceGeomId === this.geometry?.id; - }); - ToolboxStore.sliceGeometry.subscribe(() => { - this.sliceActive = ToolboxStore.sliceGeomId === this.geometry?.id; - }); - ToolboxStore.geometries.subscribe(() => this.geometry = ToolboxStore.openedGeometry); - ToolboxStore.noEditGeometries.subscribe(() => this.geometry = ToolboxStore.openedGeometry); - } - - connectedCallback() { - draggable(this, { - allowFrom: '.drag-handle' - }); - super.connectedCallback(); - } - - @pauseGeometryCollectionEvents - toggleGeomVolume(geom: NgmGeometry) { - if (geom.volumeShowed) { - hideVolume(this.geomEntity!); - } else { - updateEntityVolume(this.geomEntity!, this.viewer!.scene.globe); - } - this.requestUpdate(); - } - - onEditClick() { - if (this.editing) { - this.showLostChangesWarn(); - } else { - if (this.sliceActive) ToolboxStore.setSliceGeometry(null); - ToolboxStore.setOpenedGeometryOptions({ - id: this.geomEntity!.id, - editing: !this.editing - }); - } - } - - @pauseGeometryCollectionEvents - onSliceClick() { - if (this.editing) { - this.showLostChangesWarn(); - } else { - hideVolume(this.geomEntity!); - ToolboxStore.setSliceGeometry(this.geometry); - } - } - - onClose() { - if (this.editing) - this.showLostChangesWarn(); - else - ToolboxStore.setOpenedGeometryOptions(null); - } - - getHeight(geom: NgmGeometry) { - const height = geom.type === 'point' ? Cartographic.fromCartesian(geom.positions[0]).height : geom.volumeHeightLimits?.height; - return (height || height === 0) ? height.toFixed(1) : ''; - } - - showLostChangesWarn() { - showSnackbarInfo(i18next.t('tbx_lost_changes_warning'), { - class: 'ngm-lost-changes-warn', - displayTime: 20000 - }); - this.infoBodyElement.scrollTop = this.infoBodyElement.scrollHeight; - } - - get infoTemplate() { - const geom: NgmGeometry | undefined = this.geometry; - if (!geom) return; - return html` -
- - -
-
-
-
-
${i18next.t('obj_info_description_label')}
-
${geom.description || ''}
-
-
-
${i18next.t('obj_info_image_label')}
-
${geom.image}
-
-
-
${i18next.t('obj_info_website_label')}
-
- ${geom.website} -
-
-
-
-
${i18next.t('tbx_volume_lower_limit_label')}
-
${geom.volumeHeightLimits?.lowerLimit.toFixed(1) || '-'} m
-
-
-
${i18next.t('tbx_volume_height_label')}
-
${this.getHeight(geom)} m
-
-
-
${i18next.t('tbx_point_depth_label')}
-
${geom.depth?.toFixed(1) || '-'} m
-
-
-
-
-
${i18next.t('tbx_point_diameter_label')}
-
${geom.diameter?.toFixed(1) || '-'} m
-
-
-
-
${i18next.t('obj_info_area_label')}
-
${geom.area || '-'} km²
-
-
-
- ${geom.type === 'line' ? i18next.t('obj_info_length_label') : i18next.t('obj_info_perimeter_label')} -
-
${geom.perimeter || '-'} km
-
-
-
${i18next.t('obj_info_number_segments_label')}
-
${geom.numberOfSegments || ''}
-
-
- ${geom.pointSymbol ? - html` -
` : - html` -
-
` - } -
-
- `; - } - - render() { - this.hidden = !this.geometry; - if (!this.geometry) return ''; - return html` -
- ${`${i18next.t('tbx_geometry')} ${this.geometry.type}`} -
this.onClose()}>
-
-
- ${`${this.geometry.name}`} -
-
this.onSliceClick()}>
-
this.toggleGeomVolume(this.geometry!)}>
- ${this.noEdit ? '' : html` -
this.onEditClick()}> -
`} -
-
- ${this.editing ? - html` - ` : - this.infoTemplate - } -
- ${dragArea} - `; - } - - createRenderRoot() { - return this; - } -} +import {LitElementI18n} from '../i18n'; +import {customElement, query, state} from 'lit/decorators.js'; +import {html} from 'lit'; +import draggable from '../elements/draggable'; +import type {CustomDataSource, Entity, Viewer} from 'cesium'; +import {Cartographic} from 'cesium'; +import MainStore from '../store/main'; +import {GEOMETRY_DATASOURCE_NAME, NO_EDIT_GEOMETRY_DATASOURCE_NAME} from '../constants'; +import ToolboxStore from '../store/toolbox'; +import i18next from 'i18next'; +import type {NgmGeometry} from './interfaces'; +import {classMap} from 'lit-html/directives/class-map.js'; +import {downloadGeometry, hideVolume, pauseGeometryCollectionEvents, updateEntityVolume} from './helpers'; +import './ngm-geometry-edit'; +import {styleMap} from 'lit/directives/style-map.js'; +import {showSnackbarInfo} from '../notifications'; +import {dragArea} from '../elements/helperElements'; + +@customElement('ngm-geometry-info') +export class NgmGeometryInfo extends LitElementI18n { + @state() + accessor geomEntity: Entity | undefined; + @state() + accessor editing = false; + @state() + accessor geometry: NgmGeometry | undefined; + @state() + accessor noEdit = false; + @state() + accessor sliceActive = false; + @query('.ngm-geom-info-body') + accessor infoBodyElement; + private viewer: Viewer | null = null; + private geometriesDataSource: CustomDataSource | undefined; + + constructor() { + super(); + MainStore.viewer.subscribe(viewer => this.viewer = viewer); + ToolboxStore.openedGeometryOptions.subscribe(options => { + this.noEdit = false; + this.geometriesDataSource = this.viewer?.dataSources.getByName(GEOMETRY_DATASOURCE_NAME)[0]; + if (!options?.id) { + this.editing = false; + this.geomEntity = undefined; + return; + } + let entity = this.geometriesDataSource?.entities.getById(options.id); + if (!entity) { + this.geometriesDataSource = this.viewer?.dataSources.getByName(NO_EDIT_GEOMETRY_DATASOURCE_NAME)[0]; + entity = this.geometriesDataSource?.entities.getById(options.id); + if (!entity) return; + this.noEdit = true; + } + this.geomEntity = entity; + this.geometry = ToolboxStore.openedGeometry; + this.editing = !!options.editing; + this.sliceActive = ToolboxStore.sliceGeomId === this.geometry?.id; + }); + ToolboxStore.sliceGeometry.subscribe(() => { + this.sliceActive = ToolboxStore.sliceGeomId === this.geometry?.id; + }); + ToolboxStore.geometries.subscribe(() => this.geometry = ToolboxStore.openedGeometry); + ToolboxStore.noEditGeometries.subscribe(() => this.geometry = ToolboxStore.openedGeometry); + } + + connectedCallback() { + draggable(this, { + allowFrom: '.drag-handle' + }); + super.connectedCallback(); + } + + @pauseGeometryCollectionEvents + toggleGeomVolume(geom: NgmGeometry) { + if (geom.volumeShowed) { + hideVolume(this.geomEntity!); + } else { + updateEntityVolume(this.geomEntity!, this.viewer!.scene.globe); + } + this.requestUpdate(); + } + + onEditClick() { + if (this.editing) { + this.showLostChangesWarn(); + } else { + if (this.sliceActive) ToolboxStore.setSliceGeometry(null); + ToolboxStore.setOpenedGeometryOptions({ + id: this.geomEntity!.id, + editing: !this.editing + }); + } + } + + @pauseGeometryCollectionEvents + onSliceClick() { + if (this.editing) { + this.showLostChangesWarn(); + } else { + hideVolume(this.geomEntity!); + ToolboxStore.setSliceGeometry(this.geometry); + } + } + + onClose() { + if (this.editing) + this.showLostChangesWarn(); + else + ToolboxStore.setOpenedGeometryOptions(null); + } + + getHeight(geom: NgmGeometry) { + const height = geom.type === 'point' ? Cartographic.fromCartesian(geom.positions[0]).height : geom.volumeHeightLimits?.height; + return (height || height === 0) ? height.toFixed(1) : ''; + } + + showLostChangesWarn() { + showSnackbarInfo(i18next.t('tbx_lost_changes_warning'), { + class: 'ngm-lost-changes-warn', + displayTime: 20000 + }); + this.infoBodyElement.scrollTop = this.infoBodyElement.scrollHeight; + } + + get infoTemplate() { + const geom: NgmGeometry | undefined = this.geometry; + if (!geom) return null; + return html` +
+ + +
+
+
+
+
${i18next.t('obj_info_description_label')}
+
${geom.description || ''}
+
+
+
${i18next.t('obj_info_image_label')}
+
${geom.image}
+
+
+
${i18next.t('obj_info_website_label')}
+
+ ${geom.website} +
+
+
+
+
${i18next.t('tbx_volume_lower_limit_label')}
+
${geom.volumeHeightLimits?.lowerLimit.toFixed(1) || '-'} m
+
+
+
${i18next.t('tbx_volume_height_label')}
+
${this.getHeight(geom)} m
+
+
+
${i18next.t('tbx_point_depth_label')}
+
${geom.depth?.toFixed(1) || '-'} m
+
+
+
+
+
${i18next.t('tbx_point_diameter_label')}
+
${geom.diameter?.toFixed(1) || '-'} m
+
+
+
+
${i18next.t('obj_info_area_label')}
+
${geom.area || '-'} km²
+
+
+
+ ${geom.type === 'line' ? i18next.t('obj_info_length_label') : i18next.t('obj_info_perimeter_label')} +
+
${geom.perimeter || '-'} km
+
+
+
${i18next.t('obj_info_number_segments_label')}
+
${geom.numberOfSegments || ''}
+
+
+ ${geom.pointSymbol ? + html` +
` : + html` +
+
` + } +
+
+ `; + } + + render() { + this.hidden = !this.geometry; + if (!this.geometry) return ''; + return html` +
+ ${`${i18next.t('tbx_geometry')} ${this.geometry.type}`} +
this.onClose()}>
+
+
+ ${`${this.geometry.name}`} +
+
this.onSliceClick()}>
+
this.toggleGeomVolume(this.geometry!)}>
+ ${this.noEdit ? '' : html` +
this.onEditClick()}> +
`} +
+
+ ${this.editing ? + html` + ` : + this.infoTemplate + } +
+ ${dragArea} + `; + } + + createRenderRoot() { + return this; + } +} diff --git a/ui/webpack.config.js b/ui/webpack.config.js index 4a41584e7..e8196370a 100644 --- a/ui/webpack.config.js +++ b/ui/webpack.config.js @@ -1,157 +1,152 @@ -import CopyPlugin from 'copy-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; -import {resolve, dirname, join} from 'path'; -import {fileURLToPath} from 'url'; - -const __dirname = dirname(fileURLToPath(import.meta.url)); - -const cesiumSource = __dirname + '/node_modules/cesium/Source'; -const cesiumWorkers = '../Build/Cesium/Workers'; -const devMode = process.env.NODE_ENV !== 'production'; - - -const presets = [ - '@babel/preset-typescript', - [ - '@babel/preset-env', { - 'useBuiltIns': 'entry', - 'corejs': { - 'version': 3 - }, - 'targets': { - 'browsers': ['chrome 94'] - } - } - ] -], - -plugins = [ - ['@babel/plugin-proposal-nullish-coalescing-operator'], - ['@babel/plugin-transform-class-static-block'], - ['@babel/plugin-syntax-dynamic-import'], - ['@babel/plugin-transform-typescript', {allowDeclareFields: true}], - ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true, version: '2023-05'}], - ['@babel/plugin-proposal-class-properties'], -]; - - -export default { - mode: devMode ? 'development' : 'production', - resolve: { - extensions: ['.ts', '.js'], - fallback: { - http: false, - https: false, - zlib: false, - }, - alias: { - cesium: resolve(__dirname, 'node_modules/cesium'), - // we need the aliases below for CSS :( don't know why - './cesium/Build': resolve(__dirname, 'node_modules/cesium/Build'), - './cesium': resolve(__dirname, 'node_modules/cesium/Source'), - './fomantic-ui-css': resolve(__dirname, 'node_modules/fomantic-ui-css'), - './images': resolve(__dirname, 'src/images'), - './@fontsource/inter': resolve(__dirname, 'node_modules@fontsource/inter'), - }, - fallback: { - 'zlib': false, - 'https': false, - 'http': false, - 'url': false, - } - }, - output: { - filename: 'debug/index.js', - }, - devtool: 'eval', - module: { - rules: [ - { - test: /\.m?js/, - resolve: { - fullySpecified: false - } - }, - { - test: /\.js$/, - use: ['source-map-loader'], - enforce: 'pre' - }, - { - test: /\.(png|jpe?g|gif|svg|ttf|woff2|woff|eot)$/i, - type: 'asset', - }, - { - test: /\.css$/i, - //use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader'], - use: [MiniCssExtractPlugin.loader, 'css-loader'], - }, - { - test: /\.ts$/, - use: { - loader: 'babel-loader', - options: { - presets: presets, - plugins: plugins, - assumptions: { - setPublicClassFields: true - }, - } - }, - exclude: /node_modules/, - }, - ], - }, - // ignore source-map-loader warnings - ignoreWarnings: [/Failed to parse source map/], - watchOptions: { - poll: true - }, - devServer: { - static: { - directory: join(__dirname, 'dist'), - }, - proxy: [ - { - context: ['/api'], - target: 'http://api:3000', - logLevel: 'debug', - }, - { - context: ['/abbr'], - target: 'http://abbreviator:8080', - pathRewrite: { - '^/abbr': '' - }, - logLevel: 'debug' - } - ], - compress: true, - port: 8000, - hot: true, - - }, - plugins: [ - new CopyPlugin({ - patterns: [ - // FIXME: is there a less ugly way to write these rules? - {from: 'index.html', to: './'}, - {from: 'src/', to: 'src/'}, - {from: 'locales/', to: './locales/'}, - {from: cesiumSource + '/' + cesiumWorkers, to: 'Workers/'}, - {from: cesiumSource + '/Assets/', to: 'Assets/'}, - {from: cesiumSource + '/Widgets/', to: 'Widgets/'}, - {from: cesiumSource + '/ThirdParty/', to: 'ThirdParty/'}, - {from: 'src/images/', to: 'images/'}, - {from: 'node_modules/@fontsource/inter/files/*', to: 'fonts/[name][ext]'}, - {from: 'node_modules/fomantic-ui-css/themes/default/assets/fonts/*', to: 'fonts/[name][ext]'}, - {from: 'manuals/dist/', to: './manuals/'}, - {from: 'manuals/style.css', to: './manuals/'}, - {from: 'manuals/images', to: './manuals/images/'}, - ] - }), - new MiniCssExtractPlugin({ - filename: 'bundle.css' - }), - ] -}; +import CopyPlugin from 'copy-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import {resolve, dirname, join} from 'path'; +import {fileURLToPath} from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +const cesiumSource = __dirname + '/node_modules/cesium/Source'; +const cesiumWorkers = '../Build/Cesium/Workers'; +const devMode = process.env.NODE_ENV !== 'production'; + + +const presets = [ + '@babel/preset-typescript', + [ + '@babel/preset-env', { + 'useBuiltIns': 'entry', + 'corejs': { + 'version': 3 + }, + 'targets': { + 'browsers': ['chrome 94'] + } + } + ] +], + +plugins = [ + ['@babel/plugin-proposal-nullish-coalescing-operator'], + ['@babel/plugin-transform-class-static-block'], + ['@babel/plugin-syntax-dynamic-import'], + ['@babel/plugin-transform-typescript', {allowDeclareFields: true}], + ['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true, version: '2023-05'}], + ['@babel/plugin-proposal-class-properties'], +]; + + +export default { + mode: devMode ? 'development' : 'production', + resolve: { + extensions: ['.ts', '.js'], + fallback: { + http: false, + https: false, + zlib: false, + url: false, + }, + alias: { + cesium: resolve(__dirname, 'node_modules/cesium'), + // we need the aliases below for CSS :( don't know why + './cesium/Build': resolve(__dirname, 'node_modules/cesium/Build'), + './cesium': resolve(__dirname, 'node_modules/cesium/Source'), + './fomantic-ui-css': resolve(__dirname, 'node_modules/fomantic-ui-css'), + './images': resolve(__dirname, 'src/images'), + './@fontsource/inter': resolve(__dirname, 'node_modules@fontsource/inter'), + }, + }, + output: { + filename: 'debug/index.js', + }, + devtool: 'eval', + module: { + rules: [ + { + test: /\.m?js/, + resolve: { + fullySpecified: false + } + }, + { + test: /\.js$/, + use: ['source-map-loader'], + enforce: 'pre' + }, + { + test: /\.(png|jpe?g|gif|svg|ttf|woff2|woff|eot)$/i, + type: 'asset', + }, + { + test: /\.css$/i, + //use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader'], + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + { + test: /\.ts$/, + use: { + loader: 'babel-loader', + options: { + presets: presets, + plugins: plugins, + assumptions: { + setPublicClassFields: true + }, + } + }, + exclude: /node_modules/, + }, + ], + }, + // ignore source-map-loader warnings + ignoreWarnings: [/Failed to parse source map/], + watchOptions: { + poll: true + }, + devServer: { + static: { + directory: join(__dirname, 'dist'), + }, + proxy: [ + { + context: ['/api'], + target: 'http://api:3000', + logLevel: 'debug', + }, + { + context: ['/abbr'], + target: 'http://abbreviator:8080', + pathRewrite: { + '^/abbr': '' + }, + logLevel: 'debug' + } + ], + compress: true, + port: 8000, + hot: true, + + }, + plugins: [ + new CopyPlugin({ + patterns: [ + // FIXME: is there a less ugly way to write these rules? + {from: 'index.html', to: './'}, + {from: 'src/', to: 'src/'}, + {from: 'locales/', to: './locales/'}, + {from: cesiumSource + '/' + cesiumWorkers, to: 'Workers/'}, + {from: cesiumSource + '/Assets/', to: 'Assets/'}, + {from: cesiumSource + '/Widgets/', to: 'Widgets/'}, + {from: cesiumSource + '/ThirdParty/', to: 'ThirdParty/'}, + {from: 'src/images/', to: 'images/'}, + {from: 'node_modules/@fontsource/inter/files/*', to: 'fonts/[name][ext]'}, + {from: 'node_modules/fomantic-ui-css/themes/default/assets/fonts/*', to: 'fonts/[name][ext]'}, + {from: 'manuals/dist/', to: './manuals/'}, + {from: 'manuals/style.css', to: './manuals/'}, + {from: 'manuals/images', to: './manuals/images/'}, + ] + }), + new MiniCssExtractPlugin({ + filename: 'bundle.css' + }), + ] +};