From 65b688697b23dc0e94e5f28497253aa01480b664 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 7 Apr 2022 02:35:56 +0300 Subject: [PATCH 01/51] # 150 Layout changes of the UI - Moving annotations to the left sidebar (TOC), adding annotation management tools into its toolbar. --- web/client/components/TOC/Toolbar.jsx | 23 ++++++++++- .../mapcontrols/annotations/Annotations.jsx | 11 +++--- web/client/epics/maplayout.js | 2 +- web/client/plugins/Annotations.jsx | 18 +++++---- web/client/plugins/TOC.jsx | 38 +++++++++++++++---- .../themes/default/less/annotations.less | 3 +- web/client/translations/data.de-DE.json | 2 + web/client/translations/data.en-US.json | 2 + web/client/translations/data.es-ES.json | 2 + web/client/translations/data.fr-FR.json | 2 + web/client/translations/data.it-IT.json | 2 + 11 files changed, 81 insertions(+), 24 deletions(-) diff --git a/web/client/components/TOC/Toolbar.jsx b/web/client/components/TOC/Toolbar.jsx index e3d32850ca..86d48682dd 100644 --- a/web/client/components/TOC/Toolbar.jsx +++ b/web/client/components/TOC/Toolbar.jsx @@ -62,7 +62,8 @@ class Toolbar extends React.Component { onGetMetadataRecord: () => {}, onHideLayerMetadata: () => {}, onShow: () => {}, - onLayerInfo: () => {} + onLayerInfo: () => {}, + onAnnotations: () => {} }, maxDepth: 3, text: { @@ -326,6 +327,26 @@ class Toolbar extends React.Component { : null} + {this.props.activateTool.activateAnnotations && !this.props.selectedLayers.length ? + {this.props.text.annotationsTooltip}}> + + + : null} + {this.props.activateTool.activateAnnotationsEdit && this.props.selectedLayers[0]?.id === 'annotations' ? + {this.props.text.annotationsEditTooltip}}> + + + : null} {this.props.items .filter(({ selector = () => true }) => selector({ ...this.props, status })) // filter items that should not show .map(({ Component }) => )} diff --git a/web/client/components/mapcontrols/annotations/Annotations.jsx b/web/client/components/mapcontrols/annotations/Annotations.jsx index 4eb8bc3cba..015c426881 100644 --- a/web/client/components/mapcontrols/annotations/Annotations.jsx +++ b/web/client/components/mapcontrols/annotations/Annotations.jsx @@ -268,7 +268,8 @@ class Annotations extends React.Component { }} btnGroupProps={{ style: { - margin: 10 + margin: 10, + whiteSpace: 'nowrap' } }} buttons={[ @@ -379,16 +380,16 @@ class Annotations extends React.Component {
-

-
diff --git a/web/client/epics/maplayout.js b/web/client/epics/maplayout.js index b71bdf8b5a..e7ec26a2dd 100644 --- a/web/client/epics/maplayout.js +++ b/web/client/epics/maplayout.js @@ -95,6 +95,7 @@ export const updateMapLayoutEpic = (action$, store) => const leftPanels = head([ get(state, "controls.queryPanel.enabled") && {left: mapLayout.left.lg} || null, + get(state, "controls.annotations.enabled") && {left: mapLayout.left.sm} || null, get(state, "controls.widgetBuilder.enabled") && {left: mapLayout.left.md} || null, get(state, "layers.settings.expanded") && {left: mapLayout.left.md} || null, get(state, "controls.drawer.enabled") && { left: resizedDrawer || mapLayout.left.sm} || null @@ -102,7 +103,6 @@ export const updateMapLayoutEpic = (action$, store) => const rightPanels = head([ get(state, "controls.details.enabled") && !mapInfoDetailsSettingsFromIdSelector(state)?.showAsModal && {right: mapLayout.right.md} || null, - get(state, "controls.annotations.enabled") && {right: mapLayout.right.md / 2} || null, get(state, "controls.metadataexplorer.enabled") && {right: mapLayout.right.md} || null, get(state, "controls.measure.enabled") && showCoordinateEditorSelector(state) && {right: mapLayout.right.md} || null, get(state, "controls.userExtensions.enabled") && { right: mapLayout.right.md } || null, diff --git a/web/client/plugins/Annotations.jsx b/web/client/plugins/Annotations.jsx index 3590567faa..6e0c7429a4 100644 --- a/web/client/plugins/Annotations.jsx +++ b/web/client/plugins/Annotations.jsx @@ -213,12 +213,10 @@ class AnnotationsPanel extends React.Component { closeGlyph: "1-close", // side panel properties - width: 330, + width: 300, dockProps: { dimMode: "none", - size: 0.30, - fluid: true, - position: "right", + position: "left", zIndex: 1030 }, dockStyle: {} @@ -308,7 +306,7 @@ const annotationsSelector = createSelector([ ], (active, dockStyle, list) => ({ active, dockStyle, - width: !isEmpty(list?.selected) ? 660 : 330 + width: !isEmpty(list?.selected) ? 600 : 300 })); const AnnotationsPlugin = connect(annotationsSelector, { @@ -318,7 +316,12 @@ const AnnotationsPlugin = connect(annotationsSelector, { export default createPlugin('Annotations', { component: assign(AnnotationsPlugin, { disablePluginIf: "{state('mapType') === 'cesium' || state('mapType') === 'leaflet' }" - }, { + }), + containers: { + TOC: { + doNotHide: true, + name: "Annotations" + }, BurgerMenu: { name: 'annotations', position: 40, @@ -326,10 +329,9 @@ export default createPlugin('Annotations', { tooltip: "annotations.tooltip", icon: , action: conditionalToggle, - priority: 2, doNotHide: true } - }), + }, reducers: { annotations: annotationsReducer }, diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index f2741dfda4..8bf4e0e06a 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -131,7 +131,8 @@ const tocSelector = createSelector( generalInfoFormat, selectedLayers: layers.filter((l) => head(selectedNodes.filter(s => s === l.id))), noFilterResults: layers.filter((l) => filterLayersByTitle(l, filterText, currentLocale)).length === 0, - updatableLayersCount: layers.filter(l => l.group !== 'background' && (l.type === 'wms' || l.type === 'wmts')).length, + updatableLayersCount: layers.filter(l => l.group !== 'background' && (l.type === 'wms' || l.type === 'wmts')).length > 0, + annotationsLayerExists: layers.filter(l => l.id === 'annotations').length > 0, selectedGroups: selectedNodes.map(n => getNode(groups, n)).filter(n => n && n.nodes), mapName, filteredGroups: addFilteredAttributesGroups(groups, [ @@ -249,6 +250,10 @@ class LayerTree extends React.Component { activateAddLayerButton: PropTypes.bool, activateAddGroupButton: PropTypes.bool, activateLayerFilterTool: PropTypes.bool, + activateAnnotations: PropTypes.bool, + activateAnnotationsEdit: PropTypes.bool, + onAnnotations: PropTypes.func, + annotationsLayerExists: PropTypes.bool, catalogActive: PropTypes.bool, refreshLayerVersion: PropTypes.func, hideOpacityTooltip: PropTypes.bool, @@ -299,6 +304,8 @@ class LayerTree extends React.Component { activateQueryTool: true, activateDownloadTool: true, activateWidgetTool: false, + activateAnnotations: true, + activateAnnotationsEdit: false, activateLayerFilterTool: false, activateLayerInfoTool: true, maxDepth: 3, @@ -342,7 +349,8 @@ class LayerTree extends React.Component { refreshLayerVersion: () => {}, metadataTemplate: null, onLayerInfo: () => {}, - onSetSwipeMode: () => {} + onSetSwipeMode: () => {}, + onAnnotations: () => {} }; getNoBackgroundLayers = (group) => { @@ -438,7 +446,9 @@ class LayerTree extends React.Component { activateMetedataTool: this.props.activateMetedataTool, activateWidgetTool: this.props.activateWidgetTool, activateLayerFilterTool: this.props.activateLayerFilterTool, - activateLayerInfoTool: this.props.updatableLayersCount > 0 && this.props.activateLayerInfoTool + activateLayerInfoTool: this.props.updatableLayersCount > 0 && this.props.activateLayerInfoTool, + activateAnnotations: !this.props.annotationsLayerExists && this.props.activateAnnotations, + activateAnnotationsEdit: this.props.annotationsLayerExists && this.props.activateAnnotations }} options={{ modalOptions: {}, @@ -466,6 +476,10 @@ class LayerTree extends React.Component { addGroupTooltip: , addSubGroupTooltip: , createWidgetTooltip: , + annotations: , + annotationsTooltip: , + annotationsEdit: , + annotationsEditTooltip: , zoomToTooltip: { LAYER: , LAYERS: @@ -509,7 +523,8 @@ class LayerTree extends React.Component { onGetMetadataRecord: this.props.onGetMetadataRecord, onHideLayerMetadata: this.props.hideLayerMetadata, onShow: this.props.layerPropertiesChangeHandler, - onLayerInfo: this.props.onLayerInfo + onLayerInfo: this.props.onLayerInfo, + onAnnotations: this.props.onAnnotations }}/> }/>
@@ -599,7 +614,9 @@ const checkPluginsEnhancer = branch( "activateLayerFilterTool", "activateSettingsTool", "FeatureEditor", - "activateLayerInfoTool" + "activateLayerInfoTool", + "activateAnnotations", + "activateAnnotationsEdit" ], ({ items = [], @@ -610,7 +627,9 @@ const checkPluginsEnhancer = branch( activateLayerFilterTool = true, activateWidgetTool = true, activateLayerInfoTool = true, - activateDownloadTool = true + activateDownloadTool = true, + activateAnnotations = true, + activateAnnotationsEdit = true }) => ({ activateAddLayerButton: activateAddLayerButton && !!find(items, { name: "MetadataExplorer" }) || false, // requires MetadataExplorer (Catalog) activateAddGroupButton: activateAddGroupButton && !!find(items, { name: "AddGroup" }) || false, @@ -621,7 +640,9 @@ const checkPluginsEnhancer = branch( // the button should hide if also widgets plugins is not available. Maybe is a good idea to merge the two plugins activateWidgetTool: activateWidgetTool && !!find(items, { name: "WidgetBuilder" }) && !!find(items, { name: "Widgets" }), activateLayerInfoTool: activateLayerInfoTool && !!find(items, { name: "LayerInfo" }) || false, - activateDownloadTool: activateDownloadTool && !!find(items, { name: "LayerDownload" }) || false + activateDownloadTool: activateDownloadTool && !!find(items, { name: "LayerDownload" }) || false, + activateAnnotations: activateAnnotations && !!find(items, { name: "Annotations" }) || false, + activateAnnotationsEdit: activateAnnotationsEdit && !!find(items, { name: "Annotations" }) || false }) ) ); @@ -901,7 +922,8 @@ const TOCPlugin = connect(tocSelector, { hideLayerMetadata, onNewWidget: () => createWidget(), refreshLayerVersion, - onLayerInfo: setControlProperty.bind(null, 'layerinfo', 'enabled', true, false) + onLayerInfo: setControlProperty.bind(null, 'layerinfo', 'enabled', true, false), + onAnnotations: setControlProperty.bind(null, 'annotations', 'enabled', true, false) })(compose( securityEnhancer, checkPluginsEnhancer diff --git a/web/client/themes/default/less/annotations.less b/web/client/themes/default/less/annotations.less index 6b67dad1f4..06f96c445f 100644 --- a/web/client/themes/default/less/annotations.less +++ b/web/client/themes/default/less/annotations.less @@ -262,7 +262,8 @@ .mapstore-annotations-panel-card-title{ margin-top: 5px; text-overflow: ellipsis; - width: 100px; + width: 150px; + overflow: hidden; } .mapstore-side-card-desc{ border-bottom: none; diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json index a46425f35e..28c08539c0 100644 --- a/web/client/translations/data.de-DE.json +++ b/web/client/translations/data.de-DE.json @@ -529,6 +529,8 @@ "toggleGroupVisibility": "Gruppensichtbarkeit umschalten", "displayLegendAndTools": "Legende einblenden", "zoomToLayerExtent": "Zoome auf Ausdehung der Ebene", + "addAnnotations": "Anmerkungen hinzufügen", + "editAnnotations": "Anmerkungen bearbeiten", "addLayer": "Ebene hinzufügen", "addLayerToGroup": "Ebene zur ausgewählten Gruppe hinzufügen", "addGroup": "Gruppe hinzufügen", diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json index 60bf62dff0..46c3b56ea9 100644 --- a/web/client/translations/data.en-US.json +++ b/web/client/translations/data.en-US.json @@ -491,6 +491,8 @@ "toggleGroupVisibility": "Toggle group visibility", "displayLegendAndTools": "Display legend", "zoomToLayerExtent": "Zoom to layer extent", + "addAnnotations": "Add annotations", + "editAnnotations": "Edit annotations", "addLayer": "Add layer", "addLayerToGroup": "Add layer to selected group", "addGroup": "Add group", diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json index dbf4e88588..702078bf9e 100644 --- a/web/client/translations/data.es-ES.json +++ b/web/client/translations/data.es-ES.json @@ -491,6 +491,8 @@ "toggleGroupVisibility": "Alternar la visibilidad del grupo", "displayLegendAndTools": "Mostrar la leyenda", "zoomToLayerExtent": "Zoom a la extensión de la capa", + "addAnnotations": "Agregar anotaciones", + "editAnnotations": "Editar anotaciones", "addLayer": "Añadir capa", "addLayerToGroup": "Añadir capa al grupo seleccionado", "addGroup": "Añadir grupo", diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json index 4b31b9a7fd..9a6d6eb8ce 100644 --- a/web/client/translations/data.fr-FR.json +++ b/web/client/translations/data.fr-FR.json @@ -491,6 +491,8 @@ "toggleGroupVisibility": "Changer la visibilité du groupe", "displayLegendAndTools": "Afficher la légende", "zoomToLayerExtent": "Zoomer sur l'étendue de la couche", + "addAnnotations": "Ajouter des annotations", + "editAnnotations": "Modifier les annotations", "addLayer": "Ajouter une couche", "addLayerToGroup": "Ajouter une couche au groupe sélectionné", "addGroup": "Ajouter un groupe", diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json index 690d7d9a62..3fb2982b7f 100644 --- a/web/client/translations/data.it-IT.json +++ b/web/client/translations/data.it-IT.json @@ -491,6 +491,8 @@ "toggleGroupVisibility": "Attiva o disattiva la visibilità del gruppo", "displayLegendAndTools": "Visualizza legenda", "zoomToLayerExtent": "Zoom all' estensione del livello", + "addAnnotations": "Aggiungi annotazioni", + "editAnnotations": "Modifica annotazioni", "addLayer": "Aggiungi Livello", "addLayerToGroup": "Aggiungi livello al gruppo selezionato", "addGroup": "Aggiungi Gruppo", From 523ba557e2948c92ea99cfed3ebc27ba946ca452 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 7 Apr 2022 12:53:32 +0300 Subject: [PATCH 02/51] Updated test to be align with the changed position of annotations panel --- web/client/epics/__tests__/maplayout-test.js | 29 +++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/web/client/epics/__tests__/maplayout-test.js b/web/client/epics/__tests__/maplayout-test.js index d1a9aba8db..0fb1cab54a 100644 --- a/web/client/epics/__tests__/maplayout-test.js +++ b/web/client/epics/__tests__/maplayout-test.js @@ -171,16 +171,37 @@ describe('map layout epics', () => { const state = { controls: { userExtensions: { enabled: true, group: "parent" } } }; testEpic(updateMapLayoutEpic, 1, setControlProperties("userExtensions", "enabled", true, "group", "parent"), epicResult(done), state); }); - it('annotations', (done) => { - const state = { controls: { annotations: { enabled: true, group: "parent" } } }; - testEpic(updateMapLayoutEpic, 1, setControlProperties("annotations", "enabled", true, "group", "parent"), epicResult(done, 329), state); - }); it('details', (done) => { const state = { controls: { details: { enabled: true, group: "parent" } } }; testEpic(updateMapLayoutEpic, 1, setControlProperties("details", "enabled", true, "group", "parent"), epicResult(done), state); }); }); + describe('tests layout updated for left panels', () => { + const epicResult = (done, left = 300) => actions => { + try { + expect(actions.length).toBe(1); + actions.map((action) => { + expect(action.type).toBe(UPDATE_MAP_LAYOUT); + expect(action.layout).toEqual({ + right: 0, left, bottom: 0, transform: 'none', height: 'calc(100% - 30px)', boundingMapRect: { + bottom: 0, + right: 0, + left + } + }); + }); + } catch (e) { + done(e); + } + done(); + }; + it('annotations', (done) => { + const state = { controls: { annotations: { enabled: true, group: "parent" } } }; + testEpic(updateMapLayoutEpic, 1, setControlProperties("annotations", "enabled", true, "group", "parent"), epicResult(done), state); + }); + }); + it('tests layout updated on noQueryableLayers', (done) => { const epicResult = actions => { From 8e808b266426fe3671aa67385c4b1bb9fd39d556 Mon Sep 17 00:00:00 2001 From: Alexander Date: Fri, 8 Apr 2022 01:33:59 +0300 Subject: [PATCH 03/51] Changes for print plugin required to support printing of additional layers. --- web/client/plugins/Print.jsx | 11 ++++++++--- web/client/plugins/print/index.js | 15 +++++++++++++++ web/client/translations/data.de-DE.json | 3 ++- web/client/translations/data.en-US.json | 3 ++- web/client/translations/data.es-ES.json | 3 ++- web/client/translations/data.fr-FR.json | 3 ++- web/client/translations/data.it-IT.json | 3 ++- 7 files changed, 33 insertions(+), 8 deletions(-) diff --git a/web/client/plugins/Print.jsx b/web/client/plugins/Print.jsx index e6cf0c9031..9ad573643e 100644 --- a/web/client/plugins/Print.jsx +++ b/web/client/plugins/Print.jsx @@ -32,6 +32,7 @@ import { getMessageById } from '../utils/LocaleUtils'; import { defaultGetZoomForExtent, getResolutions, mapUpdated, dpi2dpu, DEFAULT_SCREEN_DPI } from '../utils/MapUtils'; import { isInsideResolutionsLimits } from '../utils/LayersUtils'; import { has, includes } from 'lodash'; +import {additionalLayersSelector} from "../selectors/additionallayers"; /** * Print plugin. This plugin allows to print current map view. **note**: this plugin requires the **printing module** to work. @@ -337,7 +338,10 @@ export default { UNSAFE_componentWillReceiveProps(nextProps) { const hasBeenOpened = nextProps.open && !this.props.open; const mapHasChanged = this.props.open && this.props.syncMapPreview && mapUpdated(this.props.map, nextProps.map); - const specHasChanged = nextProps.printSpec.defaultBackground !== this.props.printSpec.defaultBackground; + const specHasChanged = ( + nextProps.printSpec.defaultBackground !== this.props.printSpec.defaultBackground || + nextProps.printSpec.additionalLayers !== this.props.printSpec.additionalLayers + ); if (hasBeenOpened || mapHasChanged || specHasChanged) { this.configurePrintMap(nextProps); } @@ -608,18 +612,19 @@ export default { (state) => state.print && state.print.error, mapSelector, layersSelector, + additionalLayersSelector, scalesSelector, (state) => state.browser && (!state.browser.ie || state.browser.ie11), currentLocaleSelector, mapTypeSelector - ], (open, capabilities, printSpec, pdfUrl, error, map, layers, scales, usePreview, currentLocale, mapType) => ({ + ], (open, capabilities, printSpec, pdfUrl, error, map, layers, additionalLayers, scales, usePreview, currentLocale, mapType) => ({ open, capabilities, printSpec, pdfUrl, error, map, - layers: layers.filter(l => !l.loadingError), + layers: [...layers.filter(l => !l.loadingError), ...(printSpec?.additionalLayers ? additionalLayers.map(l => l.options).filter(l => !l.loadingError) : [])], scales, usePreview, currentLocale, diff --git a/web/client/plugins/print/index.js b/web/client/plugins/print/index.js index 38b85e9240..b47c55155b 100644 --- a/web/client/plugins/print/index.js +++ b/web/client/plugins/print/index.js @@ -125,6 +125,16 @@ export const DefaultBackgrounOption = connect((state) => ({ onChangeParameter: setPrintParameter })(Option); +export const AdditionalLayers = connect((state) => ({ + spec: state.print?.spec || {}, + path: "", + property: "additionalLayers", + additionalProperty: false, + label: "print.additionalLayers" +}), { + onChangeParameter: setPrintParameter +})(Option); + export const PrintSubmit = connect((state) => ({ spec: state?.print?.spec || {}, loading: state.print && state.print.isLoading || false, @@ -140,6 +150,7 @@ export const PrintPreview = connect((state) => ({ scale: state.controls && state.controls.print && state.controls.print.viewScale || 0.5, currentPage: state.controls && state.controls.print && state.controls.print.currentPage || 0, pages: state.controls && state.controls.print && state.controls.print.pages || 1, + additionalLayers: state.print?.spec?.additionalLayers ?? false, outputFormat: state.print?.spec?.outputFormat || "pdf" }), { back: printCancel, @@ -178,6 +189,10 @@ export const standardItems = { "projections": [{"name": "EPSG:3857", "value": "EPSG:3857"}, {"name": "EPSG:4326", "value": "EPSG:4326"}] }, position: 4 + }, { + id: "additionalLayers", + plugin: AdditionalLayers, + position: 5 }], "left-panel-accordion": [{ id: "layout", diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json index 28c08539c0..b42a06dae6 100644 --- a/web/client/translations/data.de-DE.json +++ b/web/client/translations/data.de-DE.json @@ -699,7 +699,8 @@ "previewFormatUnsupported": "Nicht unterstütztes Format für die Vorschau", "projection": "Koordinatensystem", "projectionmismatch": "Nichtübereinstimmung des Koordinatensystems zwischen gedruckter und Bildschirmkarte", - "graticule": "Raster mit Etiketten hinzufügen" + "graticule": "Raster mit Etiketten hinzufügen", + "additionalLayers": "Fügen Sie zusätzliche Ebenen hinzu" }, "backgroundSwitcher":{ "tooltip": "Wähle Hintergrund" diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json index 46c3b56ea9..69460f4f6d 100644 --- a/web/client/translations/data.en-US.json +++ b/web/client/translations/data.en-US.json @@ -660,7 +660,8 @@ "previewFormatUnsupported": "Unsupported format for preview", "projection": "Coordinates System", "projectionmismatch": "Coordinate system mismatch among printed and screen map", - "graticule": "add grid with labels" + "graticule": "add grid with labels", + "additionalLayers": "Include additional layers" }, "backgroundSwitcher":{ "tooltip": "Select Background" diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json index 702078bf9e..50e642c842 100644 --- a/web/client/translations/data.es-ES.json +++ b/web/client/translations/data.es-ES.json @@ -660,7 +660,8 @@ "previewFormatUnsupported": "Formato no compatible para la vista previa", "projection": "Sistema de coordenadas", "projectionmismatch": "Falta de coincidencia del sistema de coordenadas entre el mapa impreso y en pantalla", - "graticule": "agregar cuadrícula con etiquetas" + "graticule": "agregar cuadrícula con etiquetas", + "additionalLayers": "Incluir capas adicionales" }, "backgroundSwitcher":{ "tooltip": "Selección del fondo" diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json index 9a6d6eb8ce..8ba7f476d5 100644 --- a/web/client/translations/data.fr-FR.json +++ b/web/client/translations/data.fr-FR.json @@ -660,7 +660,8 @@ "previewFormatUnsupported": "Format non pris en charge pour l'aperçu", "projection": "Système de coordonnées", "projectionmismatch": "Non-concordance du système de coordonnées entre la carte imprimée et la carte à l'écran", - "graticule": "ajouter une grille avec des étiquettes" + "graticule": "ajouter une grille avec des étiquettes", + "additionalLayers": "Inclure des couches supplémentaires" }, "backgroundSwitcher": { "tooltip": "Sélection du fond de plan" diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json index 3fb2982b7f..74fd56c816 100644 --- a/web/client/translations/data.it-IT.json +++ b/web/client/translations/data.it-IT.json @@ -660,7 +660,8 @@ "previewFormatUnsupported": "Formato non supportato per la preview", "projection": "Sistema di coordinate", "projectionmismatch": "Sistema di coordinate di stampa diverso da quello a schermo", - "graticule": "aggiungi griglia con label" + "graticule": "aggiungi griglia con label", + "additionalLayers": "Includi livelli aggiuntivi" }, "backgroundSwitcher":{ "tooltip": "Scegli lo sfondo" From ba43a08405c7616aef01e896c36c384af5bbc4c9 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 13 Apr 2022 10:32:49 +0300 Subject: [PATCH 04/51] Minor customizations for "Home" and "Login" plugins to make them properly styled both for Omnibar and SidebarMenu Adding abstract element for sidebar menu that could be used as a tool. Making OmniBar disappear on map viewer page if sidebarMenu was instantiated. --- web/client/components/home/Home.jsx | 8 +- .../components/misc/enhancers/tooltip.jsx | 2 +- web/client/components/security/UserMenu.jsx | 6 +- .../components/sidebarmenu/SidebarElement.jsx | 22 ++++ web/client/configs/localConfig.json | 4 +- web/client/epics/maplayout.js | 1 + web/client/plugins/Home.jsx | 12 ++ web/client/plugins/Login.jsx | 15 ++- web/client/plugins/MapExport.jsx | 19 ++++ web/client/plugins/MapImport.jsx | 14 +++ web/client/plugins/OmniBar.jsx | 2 +- web/client/plugins/Print.jsx | 13 +++ web/client/plugins/SidebarMenu.jsx | 105 ++++++++++++++++++ web/client/plugins/login/index.js | 1 - .../plugins/sidebarmenu/sidebarmenu.css | 9 ++ web/client/product/plugins.js | 4 +- 16 files changed, 226 insertions(+), 11 deletions(-) create mode 100644 web/client/components/sidebarmenu/SidebarElement.jsx create mode 100644 web/client/plugins/SidebarMenu.jsx create mode 100644 web/client/plugins/sidebarmenu/sidebarmenu.css diff --git a/web/client/components/home/Home.jsx b/web/client/components/home/Home.jsx index f5872ccdcc..10a2799737 100644 --- a/web/client/components/home/Home.jsx +++ b/web/client/components/home/Home.jsx @@ -26,7 +26,8 @@ class Home extends React.Component { onCloseUnsavedDialog: PropTypes.func, displayUnsavedDialog: PropTypes.bool, renderUnsavedMapChangesDialog: PropTypes.bool, - tooltipPosition: PropTypes.string + tooltipPosition: PropTypes.string, + bsStyle: PropTypes.string }; static contextTypes = { @@ -39,7 +40,8 @@ class Home extends React.Component { onCheckMapChanges: () => {}, onCloseUnsavedDialog: () => {}, renderUnsavedMapChangesDialog: true, - tooltipPosition: 'left' + tooltipPosition: 'left', + bsStyle: 'primary' }; render() { @@ -51,7 +53,7 @@ class Home extends React.Component { : null} - {this.props.activateTool.activateAnnotations && !this.props.selectedLayers.length ? - {this.props.text.annotationsTooltip}}> - - - : null} - {this.props.activateTool.activateAnnotationsEdit && this.props.selectedLayers[0]?.id === 'annotations' ? - {this.props.text.annotationsEditTooltip}}> - - - : null} {this.props.items .filter(({ selector = () => true }) => selector({ ...this.props, status })) // filter items that should not show .map(({ Component }) => )} diff --git a/web/client/plugins/Annotations.jsx b/web/client/plugins/Annotations.jsx index 76ea5a5a95..1b4755195b 100644 --- a/web/client/plugins/Annotations.jsx +++ b/web/client/plugins/Annotations.jsx @@ -83,6 +83,10 @@ import { mapLayoutValuesSelector } from '../selectors/maplayout'; import { ANNOTATIONS } from '../utils/AnnotationsUtils'; import { registerRowViewer } from '../utils/MapInfoUtils'; import ResponsivePanel from "../components/misc/panels/ResponsivePanel"; +import {Glyphicon, Tooltip} from "react-bootstrap"; +import Button from "../components/misc/Button"; +import OverlayTrigger from "../components/misc/OverlayTrigger"; +import Message from "../components/I18N/Message"; const commonEditorActions = { onUpdateSymbols: updateSymbols, @@ -317,7 +321,39 @@ export default createPlugin('Annotations', { containers: { TOC: { doNotHide: true, - name: "Annotations" + name: "Annotations", + target: 'toolbar', + selector: () => true, + Component: connect(() => {}, { + onClick: conditionalToggle + })(({onClick, layers, selectedLayers, status}) => { + if (status === 'DESELECT' && layers.filter(l => l.id === 'annotations').length === 0) { + return (}> + + ); + } + if (selectedLayers[0]?.id === 'annotations') { + return ( + }> + + ); + } + return false; + }) } }, reducers: { diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx index ae8655150f..bdc76aa905 100644 --- a/web/client/plugins/TOC.jsx +++ b/web/client/plugins/TOC.jsx @@ -129,10 +129,10 @@ const tocSelector = createSelector( selectedNodes, filterText, generalInfoFormat, + layers, selectedLayers: layers.filter((l) => head(selectedNodes.filter(s => s === l.id))), noFilterResults: layers.filter((l) => filterLayersByTitle(l, filterText, currentLocale)).length === 0, updatableLayersCount: layers.filter(l => l.group !== 'background' && (l.type === 'wms' || l.type === 'wmts')).length > 0, - annotationsLayerExists: layers.filter(l => l.id === 'annotations').length > 0, selectedGroups: selectedNodes.map(n => getNode(groups, n)).filter(n => n && n.nodes), mapName, filteredGroups: addFilteredAttributesGroups(groups, [ @@ -175,6 +175,7 @@ class LayerTree extends React.Component { static propTypes = { id: PropTypes.number, items: PropTypes.array, + layers: PropTypes.array, buttonContent: PropTypes.node, groups: PropTypes.array, settings: PropTypes.object, @@ -250,10 +251,6 @@ class LayerTree extends React.Component { activateAddLayerButton: PropTypes.bool, activateAddGroupButton: PropTypes.bool, activateLayerFilterTool: PropTypes.bool, - activateAnnotations: PropTypes.bool, - activateAnnotationsEdit: PropTypes.bool, - onAnnotations: PropTypes.func, - annotationsLayerExists: PropTypes.bool, catalogActive: PropTypes.bool, refreshLayerVersion: PropTypes.func, hideOpacityTooltip: PropTypes.bool, @@ -273,6 +270,7 @@ class LayerTree extends React.Component { static defaultProps = { items: [], + layers: [], groupPropertiesChangeHandler: () => {}, layerPropertiesChangeHandler: () => {}, retrieveLayerData: () => {}, @@ -304,8 +302,6 @@ class LayerTree extends React.Component { activateQueryTool: true, activateDownloadTool: true, activateWidgetTool: false, - activateAnnotations: true, - activateAnnotationsEdit: false, activateLayerFilterTool: false, activateLayerInfoTool: true, maxDepth: 3, @@ -349,8 +345,7 @@ class LayerTree extends React.Component { refreshLayerVersion: () => {}, metadataTemplate: null, onLayerInfo: () => {}, - onSetSwipeMode: () => {}, - onAnnotations: () => {} + onSetSwipeMode: () => {} }; getNoBackgroundLayers = (group) => { @@ -423,6 +418,7 @@ class LayerTree extends React.Component { target === "toolbar")} groups={this.props.groups} + layers={this.props.layers} selectedLayers={this.props.selectedLayers} selectedGroups={this.props.selectedGroups} generalInfoFormat={this.props.generalInfoFormat} @@ -446,9 +442,7 @@ class LayerTree extends React.Component { activateMetedataTool: this.props.activateMetedataTool, activateWidgetTool: this.props.activateWidgetTool, activateLayerFilterTool: this.props.activateLayerFilterTool, - activateLayerInfoTool: this.props.updatableLayersCount > 0 && this.props.activateLayerInfoTool, - activateAnnotations: !this.props.annotationsLayerExists && this.props.activateAnnotations, - activateAnnotationsEdit: this.props.annotationsLayerExists && this.props.activateAnnotations + activateLayerInfoTool: this.props.updatableLayersCount > 0 && this.props.activateLayerInfoTool }} options={{ modalOptions: {}, @@ -476,10 +470,6 @@ class LayerTree extends React.Component { addGroupTooltip: , addSubGroupTooltip: , createWidgetTooltip: , - annotations: , - annotationsTooltip: , - annotationsEdit: , - annotationsEditTooltip: , zoomToTooltip: { LAYER: , LAYERS: @@ -523,8 +513,7 @@ class LayerTree extends React.Component { onGetMetadataRecord: this.props.onGetMetadataRecord, onHideLayerMetadata: this.props.hideLayerMetadata, onShow: this.props.layerPropertiesChangeHandler, - onLayerInfo: this.props.onLayerInfo, - onAnnotations: this.props.onAnnotations + onLayerInfo: this.props.onLayerInfo }}/> }/>
@@ -614,9 +603,7 @@ const checkPluginsEnhancer = branch( "activateLayerFilterTool", "activateSettingsTool", "FeatureEditor", - "activateLayerInfoTool", - "activateAnnotations", - "activateAnnotationsEdit" + "activateLayerInfoTool" ], ({ items = [], @@ -627,9 +614,7 @@ const checkPluginsEnhancer = branch( activateLayerFilterTool = true, activateWidgetTool = true, activateLayerInfoTool = true, - activateDownloadTool = true, - activateAnnotations = true, - activateAnnotationsEdit = true + activateDownloadTool = true }) => ({ activateAddLayerButton: activateAddLayerButton && !!find(items, { name: "MetadataExplorer" }) || false, // requires MetadataExplorer (Catalog) activateAddGroupButton: activateAddGroupButton && !!find(items, { name: "AddGroup" }) || false, @@ -640,9 +625,7 @@ const checkPluginsEnhancer = branch( // the button should hide if also widgets plugins is not available. Maybe is a good idea to merge the two plugins activateWidgetTool: activateWidgetTool && !!find(items, { name: "WidgetBuilder" }) && !!find(items, { name: "Widgets" }), activateLayerInfoTool: activateLayerInfoTool && !!find(items, { name: "LayerInfo" }) || false, - activateDownloadTool: activateDownloadTool && !!find(items, { name: "LayerDownload" }) || false, - activateAnnotations: activateAnnotations && !!find(items, { name: "Annotations" }) || false, - activateAnnotationsEdit: activateAnnotationsEdit && !!find(items, { name: "Annotations" }) || false + activateDownloadTool: activateDownloadTool && !!find(items, { name: "LayerDownload" }) || false }) ) ); @@ -922,8 +905,7 @@ const TOCPlugin = connect(tocSelector, { hideLayerMetadata, onNewWidget: () => createWidget(), refreshLayerVersion, - onLayerInfo: setControlProperty.bind(null, 'layerinfo', 'enabled', true, false), - onAnnotations: setControlProperty.bind(null, 'annotations', 'enabled', true, false) + onLayerInfo: setControlProperty.bind(null, 'layerinfo', 'enabled', true, false) })(compose( securityEnhancer, checkPluginsEnhancer From d524a0b23c8b0beeeaa83cdbdfc0df0a5789a5c7 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 3 May 2022 16:50:30 +0300 Subject: [PATCH 37/51] Correction to make cards size approximately same as it was before button sizes change --- web/client/themes/default/less/sidegrid.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/client/themes/default/less/sidegrid.less b/web/client/themes/default/less/sidegrid.less index 08d19a8064..61bb853901 100644 --- a/web/client/themes/default/less/sidegrid.less +++ b/web/client/themes/default/less/sidegrid.less @@ -229,11 +229,11 @@ &.ms-sm { .ms-head { - height: @square-btn-size; + height: @square-btn-size * 1.25; } .mapstore-side-preview { - width: @square-btn-size; - height: @square-btn-size; + width: @square-btn-size * 1.25 ; + height: @square-btn-size * 1.25; padding: 8px; > .glyphicon { text-align: center; From 45c8eefdd188dd9acfdaeff1663574217d5a606e Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 3 May 2022 17:09:21 +0300 Subject: [PATCH 38/51] Using common button size in less stylesheet of SidebarMenu; Migration guide. --- .../mapstore-migration-guide.md | 23 +++++++++++++++++++ .../plugins/sidebarmenu/sidebarmenu.less | 11 ++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md index 2f57293dfe..addde5dcff 100644 --- a/docs/developer-guide/mapstore-migration-guide.md +++ b/docs/developer-guide/mapstore-migration-guide.md @@ -91,6 +91,29 @@ formats: - '*' ``` +### Replacing BurgerMenu with SidebarMenu +There were several changes applied to the application layout, one of them is the Sidebar Menu that comes to replace Burger menu on map viewer and in contexts. +Following actions need to be applied to make a switch: +- Update localConfig.json and add "SidebarMenu" entry to the "desktop" section: +```json +{ + "desktop": [ + ... + "SidebarMenu", + ... + ] +} +``` +- Remove "BurgerMenu" entry from "desktop" section. + +#### Updating contexts to use Sidebar Menu +Existing contexts need to be updated manually using following procedure: +- Edit context and proceed to the step of plugins configuration. +- Remove "BurgerMenu" from list of enabled plugins. +- Save context. + +"SidebarMenu" will be used by context if "BurgerMenu" is not in the list of enabled plugins. + ## Migration from 2021.02.00 to 2022.01.00 This release includes several libraries upgrade on the backend side, diff --git a/web/client/plugins/sidebarmenu/sidebarmenu.less b/web/client/plugins/sidebarmenu/sidebarmenu.less index 0b9ca845f4..04fdf249a6 100644 --- a/web/client/plugins/sidebarmenu/sidebarmenu.less +++ b/web/client/plugins/sidebarmenu/sidebarmenu.less @@ -1,5 +1,4 @@ -@toolbarWidth: 40px; - +@import '../../themes/default/ms-variables.less'; #mapstore-sidebar-menu-container { z-index: 1030; @@ -7,7 +6,7 @@ background: inherit; right: 0; top: 0; - width: @toolbarWidth; + width: @square-btn-size; height: 100%; #mapstore-sidebar-menu { @@ -20,8 +19,8 @@ & > .btn-tray, & > .btn, & > .btn-group .btn { border-bottom: 0; - height: @toolbarWidth; - width: @toolbarWidth; + height: @square-btn-size; + width: @square-btn-size; span:not(.glyphicon) { display: none; @@ -30,7 +29,7 @@ .snapshot-panel { position: absolute; - right: @toolbarWidth; + right: @square-btn-size; top: 60px; background: #ffffffab; } From 895e89d1e4538226b152de26f79417e6ed9c7a2d Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 00:21:01 +0300 Subject: [PATCH 39/51] - Tracking of the case when left/right panels are open via state. - Style fix for mapstore logo, spinner; - Widgets plugin corrections, removed hardcoded offset, using offset provided by state. - Amended tests --- .../GlobalSpinner/css/GlobalSpinner.css | 6 ++++ web/client/epics/__tests__/maplayout-test.js | 34 +++++++++++++------ web/client/epics/maplayout.js | 7 ++-- web/client/plugins/Widgets.jsx | 14 +++++--- web/client/plugins/maploading/maploading.css | 2 -- web/client/plugins/widgets/WidgetsTray.jsx | 12 ++++--- .../selectors/__tests__/maplayout-test.js | 13 +++++-- web/client/selectors/maplayout.js | 23 ++++++++++--- web/client/themes/default/less/loaders.less | 2 +- web/client/themes/default/less/navbar.less | 17 ++++++++++ web/client/utils/MapUtils.js | 2 ++ 11 files changed, 100 insertions(+), 32 deletions(-) diff --git a/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css b/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css index 02544671b1..fd4f1eff55 100644 --- a/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css +++ b/web/client/components/misc/spinners/GlobalSpinner/css/GlobalSpinner.css @@ -3,4 +3,10 @@ width: 40px !important; position:static !important; border-radius: 0 !important; + display: flex; + justify-content: center; + align-items: center; +} +#mapstore-globalspinner > .spinner { + margin: 0; } diff --git a/web/client/epics/__tests__/maplayout-test.js b/web/client/epics/__tests__/maplayout-test.js index f4b9781277..0ef7fe8df1 100644 --- a/web/client/epics/__tests__/maplayout-test.js +++ b/web/client/epics/__tests__/maplayout-test.js @@ -33,7 +33,9 @@ describe('map layout epics', () => { left: 600, right: 548 }, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + leftPanel: true, + rightPanel: true } ); }); @@ -59,7 +61,9 @@ describe('map layout epics', () => { left: 600, right: 588 }, - boundingSidebarRect: { right: 40, left: 0, bottom: 0 } + boundingSidebarRect: { right: 40, left: 0, bottom: 0 }, + leftPanel: true, + rightPanel: true } ); }); @@ -84,13 +88,15 @@ describe('map layout epics', () => { actions.map((action) => { expect(action.type).toBe(UPDATE_MAP_LAYOUT); expect(action.layout).toEqual({ - left: 600, right: 330, bottom: 0, transform: 'none', height: 'calc(100% - 120px)', + left: 0, right: 330, bottom: 0, transform: 'none', height: 'calc(100% - 120px)', boundingMapRect: { bottom: 0, - left: 600, + left: 0, right: 330 }, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + leftPanel: false, + rightPanel: true }); }); } catch (e) { @@ -98,7 +104,7 @@ describe('map layout epics', () => { } done(); }; - const state = { controls: { metadataexplorer: { enabled: true }, queryPanel: { enabled: true } } }; + const state = { controls: { metadataexplorer: { enabled: true }, queryPanel: { enabled: false } } }; testEpic(updateMapLayoutEpic, 1, toggleControl("queryPanel"), epicResult, state); }); @@ -167,7 +173,9 @@ describe('map layout epics', () => { right: 0, bottom: 0 }, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + rightPanel: false, + leftPanel: true }); }); } catch (e) { @@ -192,7 +200,9 @@ describe('map layout epics', () => { left: 0, right }, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + rightPanel: !!right, + leftPanel: false }); }); } catch (e) { @@ -227,7 +237,9 @@ describe('map layout epics', () => { right: 0, left }, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + leftPanel: true, + rightPanel: false }); }); } catch (e) { @@ -266,7 +278,9 @@ describe('map layout epics', () => { expect(action.layout).toEqual({ left: 0, right: 0, bottom: '100%', dockSize: 100, transform: "translate(0, -30px)", height: "calc(100% - 30px)", boundingMapRect: {bottom: "100%", dockSize: 100, left: 0, right: 0}, - boundingSidebarRect: { right: 0, left: 0, bottom: 0 } + boundingSidebarRect: { right: 0, left: 0, bottom: 0 }, + leftPanel: false, + rightPanel: false }); }); } catch (e) { diff --git a/web/client/epics/maplayout.js b/web/client/epics/maplayout.js index 29b11efb86..1111528ac9 100644 --- a/web/client/epics/maplayout.js +++ b/web/client/epics/maplayout.js @@ -36,6 +36,7 @@ import { mapInfoDetailsSettingsFromIdSelector, isMouseMoveIdentifyActiveSelector import { head, get } from 'lodash'; import { isFeatureGridOpen, getDockSize } from '../selectors/featuregrid'; +import {DEFAULT_MAP_LAYOUT} from "../utils/MapUtils"; /** * Capture that cause layout change to update the proper object. @@ -92,7 +93,7 @@ export const updateMapLayoutEpic = (action$, store) => }; /* ---------------------- */ - const mapLayout = ConfigUtils.getConfigProp("mapLayout") || {left: {sm: 300, md: 500, lg: 600}, right: {md: 548}, bottom: {sm: 30}}; + const mapLayout = ConfigUtils.getConfigProp("mapLayout") || DEFAULT_MAP_LAYOUT; if (get(state, "mode") === 'embedded') { const height = {height: 'calc(100% - ' + mapLayout.bottom.sm + 'px)'}; @@ -153,7 +154,9 @@ export const updateMapLayoutEpic = (action$, store) => ...transform, ...height, boundingMapRect, - boundingSidebarRect + boundingSidebarRect, + rightPanel: rightPanels.right > 0, + leftPanel: leftPanels.left > 0 })); }); diff --git a/web/client/plugins/Widgets.jsx b/web/client/plugins/Widgets.jsx index f0921cfe7f..ee033c8158 100644 --- a/web/client/plugins/Widgets.jsx +++ b/web/client/plugins/Widgets.jsx @@ -21,10 +21,11 @@ import { editWidget, updateWidgetProperty, deleteWidget, changeLayout, exportCSV import editOptions from './widgets/editOptions'; import autoDisableWidgets from './widgets/autoDisableWidgets'; -const RIGHT_MARGIN = 70; +const RIGHT_MARGIN = 55; import { widthProvider, heightProvider } from '../components/layout/enhancers/gridLayout'; import WidgetsViewBase from '../components/widgets/view/WidgetsView'; +import {mapLayoutValuesSelector} from "../selectors/maplayout"; const WidgetsView = compose( @@ -35,12 +36,14 @@ compose( getFloatingWidgetsLayout, getMaximizedState, dependenciesSelector, - (id, widgets, layouts, maximized, dependencies) => ({ + (state) => mapLayoutValuesSelector(state, { right: true}), + (id, widgets, layouts, maximized, dependencies, mapLayout) => ({ id, widgets, layouts, maximized, - dependencies + dependencies, + mapLayout }) ), { editWidget, @@ -57,7 +60,8 @@ compose( compose( heightProvider({ debounceTime: 20, closest: true, querySelector: '.fill' }), widthProvider({ overrideWidthProvider: false }), - withProps(({width, height, maximized} = {}) => { + withProps(({width, height, maximized, mapLayout} = {}) => { + const rightOffset = mapLayout?.right ?? 0; const divHeight = height - 120; const nRows = 4; const rowHeight = Math.floor(divHeight / nRows - 20); @@ -78,7 +82,7 @@ compose( breakpoints: { xxs: 0 }, cols: { xxs: 1 } } : {}; - const viewWidth = width && width > 800 ? width - (500 + RIGHT_MARGIN) : width - RIGHT_MARGIN; + const viewWidth = width && width > 800 ? width - (500 + rightOffset + RIGHT_MARGIN) : width - rightOffset - RIGHT_MARGIN; const widthOptions = width ? {width: viewWidth - 1} : {}; return ({ rowHeight, diff --git a/web/client/plugins/maploading/maploading.css b/web/client/plugins/maploading/maploading.css index 3010c0d89e..d16bf1f56b 100644 --- a/web/client/plugins/maploading/maploading.css +++ b/web/client/plugins/maploading/maploading.css @@ -31,6 +31,4 @@ .ms2-loading .sk-circle-wrapper { width: 30px; height: 30px; - margin-left: 10px !important; - margin-top: 10px !important; } diff --git a/web/client/plugins/widgets/WidgetsTray.jsx b/web/client/plugins/widgets/WidgetsTray.jsx index 7dd473a36e..9dfbba6333 100644 --- a/web/client/plugins/widgets/WidgetsTray.jsx +++ b/web/client/plugins/widgets/WidgetsTray.jsx @@ -20,6 +20,7 @@ import { filterHiddenWidgets } from './widgetsPermission'; import BorderLayout from '../../components/layout/BorderLayout'; import WidgetsBar from './WidgetsBar'; import BButton from '../../components/misc/Button'; +import {mapLayoutValuesSelector} from "../../selectors/maplayout"; const Button = tooltip(BButton); @@ -78,20 +79,22 @@ class WidgetsTray extends React.Component { toolsOptions: PropTypes.object, items: PropTypes.array, expanded: PropTypes.bool, - setExpanded: PropTypes.func + setExpanded: PropTypes.func, + layout: PropTypes.object }; static defaultProps = { enabled: true, items: [], expanded: false, - setExpanded: () => { } + setExpanded: () => { }, + layout: {} }; render() { return this.props.enabled ? (
({ widgets }) + (state) => mapLayoutValuesSelector(state, { right: true }), + (widgets, layout = []) => ({ widgets, layout }) ), { toggleTray }), diff --git a/web/client/selectors/__tests__/maplayout-test.js b/web/client/selectors/__tests__/maplayout-test.js index 0bdb1f1152..5c658264ad 100644 --- a/web/client/selectors/__tests__/maplayout-test.js +++ b/web/client/selectors/__tests__/maplayout-test.js @@ -13,6 +13,7 @@ import { mapLayoutValuesSelector, checkConditionsSelector, rightPanelOpenSelector, + leftPanelOpenSelector, bottomPanelOpenSelector, boundingMapRectSelector, mapPaddingSelector @@ -56,18 +57,24 @@ describe('Test map layout selectors', () => { }); it('test rightPanelOpenSelector', () => { - expect(rightPanelOpenSelector({maplayout: { layout: {right: 658, bottom: 500}}})).toBe(true); - expect(rightPanelOpenSelector({maplayout: { layout: {left: 300, bottom: 30}}})).toBe(false); + expect(rightPanelOpenSelector({maplayout: { layout: {rightPanel: true, leftPanel: false}}})).toBe(true); + expect(rightPanelOpenSelector({maplayout: { layout: {rightPanel: false, leftPanel: false}}})).toBe(false); expect(rightPanelOpenSelector({})).toBe(false); }); + it('test leftPanelOpenSelector', () => { + expect(leftPanelOpenSelector({maplayout: { layout: {rightPanel: true, leftPanel: true}}})).toBe(true); + expect(leftPanelOpenSelector({maplayout: { layout: {rightPanel: false, leftPanel: false}}})).toBe(false); + expect(leftPanelOpenSelector({})).toBe(false); + }); + it('test bottomPanelOpenSelector', () => { expect(bottomPanelOpenSelector({maplayout: { layout: {left: 300, bottom: 500}}})).toBe(true); expect(bottomPanelOpenSelector({maplayout: { layout: {left: 300, bottom: 30}}})).toBe(false); expect(bottomPanelOpenSelector({})).toBe(false); }); - it('test bottomPanelOpenSelector', () => { + it('test boundingMapRectSelector', () => { expect(boundingMapRectSelector({ maplayout: { diff --git a/web/client/selectors/maplayout.js b/web/client/selectors/maplayout.js index 762eb30f8b..821a605976 100644 --- a/web/client/selectors/maplayout.js +++ b/web/client/selectors/maplayout.js @@ -8,7 +8,8 @@ import {head, memoize} from 'lodash'; import { mapSelector } from './map'; -import { parseLayoutValue } from '../utils/MapUtils'; +import {DEFAULT_MAP_LAYOUT, parseLayoutValue} from '../utils/MapUtils'; +import ConfigUtils from "../utils/ConfigUtils"; /** * selects map layout state @@ -97,9 +98,20 @@ export const checkConditionsSelector = (state, conditions = []) => { * @return {boolean} returns true if right panels are open */ export const rightPanelOpenSelector = state => { - // need to remove 658 and manage it from the state with all dafault layout variables - return checkConditionsSelector(state, [{ key: 'right', value: 658 }]); + return !!mapLayoutSelector(state)?.rightPanel; }; + +/** + * Check if left panels are open + * @function + * @memberof selectors.mapLayout + * @param {object} state the state + * @return {boolean} returns true if left panels are open + */ +export const leftPanelOpenSelector = state => { + return !!mapLayoutSelector(state)?.leftPanel; +}; + /** * Check if bottom panel is open * @function @@ -108,8 +120,9 @@ export const rightPanelOpenSelector = state => { * @return {boolean} returns true if bottom panel is open */ export const bottomPanelOpenSelector = state => { - // need to remove 30 and manage it from the state with all dafault layout variables - return checkConditionsSelector(state, [{ key: 'bottom', value: 30, type: 'not' }]); + const mapLayout = ConfigUtils.getConfigProp("mapLayout") || DEFAULT_MAP_LAYOUT; + const bottomMapOffset = mapLayout?.bottom.sm ?? 0; + return checkConditionsSelector(state, [{ key: 'bottom', value: bottomMapOffset, type: 'not' }]); }; /** diff --git a/web/client/themes/default/less/loaders.less b/web/client/themes/default/less/loaders.less index d631be3987..8f048681ca 100644 --- a/web/client/themes/default/less/loaders.less +++ b/web/client/themes/default/less/loaders.less @@ -64,7 +64,7 @@ // Layout // ************** div#mapstore-globalspinner { - display: inline-block; + display: flex; margin-bottom: 0; vertical-align: middle; width: @square-btn-size !important; diff --git a/web/client/themes/default/less/navbar.less b/web/client/themes/default/less/navbar.less index 71a74f6d77..055be3c0ce 100644 --- a/web/client/themes/default/less/navbar.less +++ b/web/client/themes/default/less/navbar.less @@ -59,4 +59,21 @@ ol { #mapstore-navbar-container { height: @square-btn-size; + + .nav { + &.pull-left { + display: flex; + flex: 1; + + >li { + >a { + display: flex; + align-items: center; + height: @square-btn-size; + padding: 0 15px; + } + } + } + } + } diff --git a/web/client/utils/MapUtils.js b/web/client/utils/MapUtils.js index 562d9cc71c..4d3653bcfb 100644 --- a/web/client/utils/MapUtils.js +++ b/web/client/utils/MapUtils.js @@ -38,6 +38,8 @@ import { } from './LayersUtils'; import assign from 'object-assign'; +export const DEFAULT_MAP_LAYOUT = {left: {sm: 300, md: 500, lg: 600}, right: {md: 548}, bottom: {sm: 30}}; + export const DEFAULT_SCREEN_DPI = 96; export const METERS_PER_UNIT = { From e2bcc35106161fe7403b6cc5a8ac692a808eacdc Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 13:57:09 +0300 Subject: [PATCH 40/51] Updated migration documentation with changes to the pluginsConfig.json --- .../mapstore-migration-guide.md | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md index e2d1e150c9..93a49997d9 100644 --- a/docs/developer-guide/mapstore-migration-guide.md +++ b/docs/developer-guide/mapstore-migration-guide.md @@ -107,6 +107,45 @@ Following actions need to be applied to make a switch: - Remove "BurgerMenu" entry from "desktop" section. #### Updating contexts to use Sidebar Menu +Contents of your `pluginsConfig.json` need to be reviewed to allow usage of new "SidebarMenu" in contexts. +- Find "BurgerMenu" plugin confuguration in `pluginsConfig.json` and remove `"hidden": true` line from it: +```json + { + "name": "BurgerMenu", + "glyph": "menu-hamburger", + "title": "plugins.BurgerMenu.title", + "description": "plugins.BurgerMenu.description", + "dependencies": [ + "OmniBar" + ] +} +``` +- Add "SidebarMenu" entry to the "plugins" array: +```json +{ + "plugins": [ + ... + { + "name": "SidebarMenu", + "hidden": true + } + ... + ] +} +``` +- Go through all plugins definitions and replace "BurgerMenu" dependency with "SidebarMenu", e.g.: +```json + { + "name": "MapExport", + "glyph": "download", + "title": "plugins.MapExport.title", + "description": "plugins.MapExport.description", + "dependencies": [ + "SidebarMenu" + ] + } +``` + Existing contexts need to be updated manually using following procedure: - Edit context and proceed to the step of plugins configuration. - Remove "BurgerMenu" from list of enabled plugins. From a950395061bf07555b99bd7ecd738c78dde352e5 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 13:58:18 +0300 Subject: [PATCH 41/51] - Map export, Save, SaveAs plugins - making them work again by adding doNotHide flag into container configuration. --- web/client/plugins/MapExport.jsx | 6 ++++-- web/client/plugins/Save.jsx | 6 ++++-- web/client/plugins/SaveAs.jsx | 6 ++++-- web/client/plugins/StreetView/StreetView.jsx | 16 ++++++++++++++++ 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/web/client/plugins/MapExport.jsx b/web/client/plugins/MapExport.jsx index 156c067b6d..3d81ab136a 100644 --- a/web/client/plugins/MapExport.jsx +++ b/web/client/plugins/MapExport.jsx @@ -104,7 +104,8 @@ const MapExportPlugin = createPlugin('MapExport', { () => toggleControl('export') : () => exportMap(enabledFormats[0] || 'mapstore2'), priority: 1, - toggle: true + toggle: true, + doNotHide: true }; }, BurgerMenu: config => { @@ -119,7 +120,8 @@ const MapExportPlugin = createPlugin('MapExport', { () => toggleControl('export') : () => exportMap(enabledFormats[0] || 'mapstore2'), priority: 2, - toggle: true + toggle: true, + doNotHide: true }; } }, diff --git a/web/client/plugins/Save.jsx b/web/client/plugins/Save.jsx index 5d5e7fa84a..d611804b28 100644 --- a/web/client/plugins/Save.jsx +++ b/web/client/plugins/Save.jsx @@ -53,7 +53,8 @@ export default createPlugin('Save', { style: loggedIn && id && canEdit ? {} : { display: "none" }// the resource is new (no resource) or if present, is editable }) ), - priority: 2 + priority: 2, + doNotHide: true }, SidebarMenu: { name: 'mapSave', @@ -71,7 +72,8 @@ export default createPlugin('Save', { style: loggedIn && id && canEdit ? {} : { display: "none" }// the resource is new (no resource) or if present, is editable }) ), - priority: 1 + priority: 1, + doNotHide: true } } }); diff --git a/web/client/plugins/SaveAs.jsx b/web/client/plugins/SaveAs.jsx index 8f65d56133..11388322e2 100644 --- a/web/client/plugins/SaveAs.jsx +++ b/web/client/plugins/SaveAs.jsx @@ -59,7 +59,8 @@ export default createPlugin('SaveAs', { } return { style: isLoggedIn(state) ? {} : {display: "none"} }; }, - priority: 2 + priority: 2, + doNotHide: true }, SidebarMenu: { name: 'saveAs', @@ -77,7 +78,8 @@ export default createPlugin('SaveAs', { }; }, - priority: 1 + priority: 1, + doNotHide: true } } }); diff --git a/web/client/plugins/StreetView/StreetView.jsx b/web/client/plugins/StreetView/StreetView.jsx index 2535f2ff52..cd14a73602 100644 --- a/web/client/plugins/StreetView/StreetView.jsx +++ b/web/client/plugins/StreetView/StreetView.jsx @@ -72,6 +72,22 @@ export default createPlugin( tooltip: "streetView.tooltip", icon: , action: () => toggleStreetView() + }, + SidebarMenu: { + position: 40, + priority: 1, + doNotHide: true, + name: CONTROL_NAME, + text: , + tooltip: "streetView.tooltip", + icon: , + action: () => toggleStreetView(), + selector: (state) => { + return { + bsStyle: state.controls["street-view"] && state.controls["street-view"].enabled ? 'primary' : 'tray', + active: state.controls["street-view"] && state.controls["street-view"].enabled || false + }; + } } } } From cd0ca65147c5b1db8a5b8817f25eba96338b2884 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 15:36:19 +0300 Subject: [PATCH 42/51] DockContainer and ResponsivePanel documentation --- .../components/misc/panels/DockContainer.jsx | 13 ++++++++ .../misc/panels/ResponsivePanel.jsx | 33 ++++++++++++------- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/web/client/components/misc/panels/DockContainer.jsx b/web/client/components/misc/panels/DockContainer.jsx index 8472d07996..bc14197160 100644 --- a/web/client/components/misc/panels/DockContainer.jsx +++ b/web/client/components/misc/panels/DockContainer.jsx @@ -1,6 +1,19 @@ import React from 'react'; import classnames from "classnames"; +/** + * Wrapper for DockablePanel with main intension to support applying of custom styling to make dock panels have proper + * offset depending on the sidebars presence on the page + * @memberof components.misc.panels + * @name DockContainer + * @param id {string} - id applied to the container + * @param children {JSX.Element} + * @param dockStyle {object} - style object obtained from mapLayoutValuesSelector and used to calculate offsets + * @param className {string} - class name + * @param style - style object to apply to the container. Can be used to overwrite styles applied by dockStyle calculations + * @returns {JSX.Element} + * @constructor + */ const DockContainer = ({ id, children, dockStyle, className, style = {}}) => { const persistentStyle = { width: `calc(100% - ${(dockStyle?.right ?? 0) + (dockStyle?.left ?? 0)}px)`, diff --git a/web/client/components/misc/panels/ResponsivePanel.jsx b/web/client/components/misc/panels/ResponsivePanel.jsx index a451d85b4a..590b97f3d1 100644 --- a/web/client/components/misc/panels/ResponsivePanel.jsx +++ b/web/client/components/misc/panels/ResponsivePanel.jsx @@ -12,21 +12,30 @@ import DockablePanel from "./DockablePanel"; import React from "react"; /** + * Component for rendering DockPanel that supposed to: + * - Get dynamic width if panel cannot fit to the screen width. It will be automatically resized to the window width. + * - Get proper offsets based on the current map layout: with or without sidebar + * @memberof components.misc.panels * @name ResponsivePanel - * @param props + * @param {boolean} dock - rendered as a dock if true, otherwise rendered as a modal window + * @param {object} containerStyle - style object to be applied to the DockContainer. + * @param {string} containerClassName - class name to be applied to the DockContainer. + * @param {string} containerId - id to be applied to the DockContainer. + * @param {number} size - maximum width of the dock panel. + * @param {JSX.Element} children - components to be rendered inside the dock panel. + * @param {JSX.Element} siblings - components to be rendered inside container after dock panel. + * @param {object} panelProps - props that will be applied to the DockablePanel component. * @returns {JSX.Element} */ -export default (props) => { - const { - dock = true, - containerStyle, - containerClassName, - containerId, - size, - children, - siblings, - ...panelProps - } = props; +export default ({ + children, + containerClassName, + containerId, + containerStyle, + dock = true, + siblings, + size, + ...panelProps}) => { return ( Date: Wed, 4 May 2022 16:55:26 +0300 Subject: [PATCH 43/51] Added card-height variable. Applied it to the min-height of the sidegrid cards & TOC layers list --- web/client/themes/default/less/sidegrid.less | 10 +++++----- web/client/themes/default/less/toc.less | 6 +++--- web/client/themes/default/ms-variables.less | 2 ++ 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/web/client/themes/default/less/sidegrid.less b/web/client/themes/default/less/sidegrid.less index 61bb853901..9df46a91cc 100644 --- a/web/client/themes/default/less/sidegrid.less +++ b/web/client/themes/default/less/sidegrid.less @@ -85,7 +85,7 @@ border-width: 1px; border-style: dashed; &.ms-sm { - height: @square-btn-size; + min-height: @card-height; } } @@ -114,7 +114,7 @@ flex-direction: column; .ms-head { display: flex; - height: @square-btn-size * 2; + min-height: @card-height * 2; } .mapstore-side-card-container { display: flex; @@ -229,11 +229,11 @@ &.ms-sm { .ms-head { - height: @square-btn-size * 1.25; + min-height: @card-height; } .mapstore-side-preview { - width: @square-btn-size * 1.25 ; - height: @square-btn-size * 1.25; + width: @card-height; + height: @card-height; padding: 8px; > .glyphicon { text-align: center; diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index 812a9c0037..9b43cd52b8 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -644,12 +644,12 @@ } .toc-default-layer-head { - height: @square-btn-size; + height: @card-height; width: 100%; color: @ms-main-color; background-color: @ms-main-bg; margin-bottom: 0; - padding: floor(((@square-btn-size - @icon-size-md) / 2)) 0; + padding: floor(((@card-height - @icon-size-md) / 2)) 0; .toc-title { overflow: hidden; @@ -823,7 +823,7 @@ .is-dragging.toc-default-group.selected { background-color: @ms-main-bg !important; border: 1px dashed @ms-primary !important; - height: @square-btn-size !important; + height: @card-height !important; overflow: hidden; border-radius: @border-radius-base !important; opacity: 0.8; diff --git a/web/client/themes/default/ms-variables.less b/web/client/themes/default/ms-variables.less index 19d1d505a3..be3b058970 100644 --- a/web/client/themes/default/ms-variables.less +++ b/web/client/themes/default/ms-variables.less @@ -349,6 +349,8 @@ @grid-btn-size: 32px; @grid-btn-padding-left: floor(((@grid-btn-size - @grid-icon-size) / 2)); +@card-height: 52px; + // ****************************************** From 0f51faea9ab4a387dac600664740161541c1ab3b Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 17:00:31 +0300 Subject: [PATCH 44/51] Missed lines --- web/client/themes/default/less/toc.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index 9b43cd52b8..c0c554422e 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -559,9 +559,9 @@ .toc-default-group-head { background-color: @ms-main-bg; - height: @square-btn-size; + height: @card-height; width: 100%; - padding: floor(((@square-btn-size - @icon-size-md) / 2)) 0; + padding: floor(((@card-height - @icon-size-md) / 2)) 0; .toc-group-title { overflow: hidden; @@ -850,7 +850,7 @@ background-color: @ms-main-bg !important; border: none !important; border-bottom: 1px solid @ms-primary !important; - height: @square-btn-size + 5 !important; + height: @card-height + 5 !important; overflow: hidden; border-radius: @border-radius-base !important; .toc-default-group-head { From 7a1256a796b32f0302a5a374891c771ea7d46b2b Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 17:01:33 +0300 Subject: [PATCH 45/51] Missed lines /2 --- web/client/themes/default/less/toc.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index c0c554422e..01093d702d 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -778,7 +778,7 @@ .is-dragging.toc-default-layer.selected { background-color: @ms-main-bg !important; border: 1px dashed @ms-primary !important; - height: @square-btn-size !important; + height: @card-height !important; overflow: hidden; border-radius: @border-radius-base !important; opacity: 0.8; From 4d8dcef348afee53c3108f31d60411633c0c74a6 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 17:04:16 +0300 Subject: [PATCH 46/51] Use card-height in TOC styles --- web/client/themes/default/less/toc.less | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index 01093d702d..3afb5b861c 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -312,15 +312,15 @@ } &.toc-head-sections-1 { - height: @square-btn-size; + height: @card-height; } &.toc-head-sections-2 { - height: @square-btn-size * 2; + height: @card-height * 2; } &.toc-head-sections-3 { - height: @square-btn-size * 3; + height: @card-height * 3; } .toc-inline-loader { @@ -332,7 +332,7 @@ display: table-cell; vertical-align: middle; width: 270px; - height: @square-btn-size; + height: @card-height; color: @ms-primary; font-weight: bold; .glyphicon { @@ -342,7 +342,7 @@ } .col-xs-12 { - height: @square-btn-size; + height: @card-height; border-top: 1px solid @ms-main-border-color; .btn-sm { @@ -463,15 +463,15 @@ } &.toc-body-sections-1 .mapstore-layers-container { - height: ~"calc(100% - @{square-btn-size})"; + height: ~"calc(100% - @{card-height})"; } &.toc-body-sections-2 .mapstore-layers-container { - height: ~"calc(100% - @{square-btn-size} * 2 )"; + height: ~"calc(100% - @{card-height} * 2 )"; } &.toc-body-sections-3 .mapstore-layers-container { - height: ~"calc(100% - @{square-btn-size} * 3 )"; + height: ~"calc(100% - @{card-height} * 3 )"; } .toc-filter-no-results { @@ -804,7 +804,7 @@ .is-placeholder.toc-default-layer.selected { background-color: transparent !important; border: 1px dashed @ms-primary !important; - height: @square-btn-size !important; + height: @card-height !important; overflow: hidden; border-radius: @border-radius-base !important; .toc-default-layer-head { From 1874d950fbacb84422446c46d8604f29d9961209 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 17:11:03 +0300 Subject: [PATCH 47/51] Suggested change to the documentation with minor fix --- .../mapstore-migration-guide.md | 42 ++++++++++++------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/docs/developer-guide/mapstore-migration-guide.md b/docs/developer-guide/mapstore-migration-guide.md index 93a49997d9..17366d03d0 100644 --- a/docs/developer-guide/mapstore-migration-guide.md +++ b/docs/developer-guide/mapstore-migration-guide.md @@ -107,20 +107,25 @@ Following actions need to be applied to make a switch: - Remove "BurgerMenu" entry from "desktop" section. #### Updating contexts to use Sidebar Menu + Contents of your `pluginsConfig.json` need to be reviewed to allow usage of new "SidebarMenu" in contexts. + - Find "BurgerMenu" plugin confuguration in `pluginsConfig.json` and remove `"hidden": true` line from it: + ```json { - "name": "BurgerMenu", - "glyph": "menu-hamburger", - "title": "plugins.BurgerMenu.title", - "description": "plugins.BurgerMenu.description", - "dependencies": [ - "OmniBar" - ] + "name": "BurgerMenu", + "glyph": "menu-hamburger", + "title": "plugins.BurgerMenu.title", + "description": "plugins.BurgerMenu.description", + "dependencies": [ + "OmniBar" + ] } ``` -- Add "SidebarMenu" entry to the "plugins" array: + +- Add `SidebarMenu` entry to the "plugins" array: + ```json { "plugins": [ @@ -133,7 +138,9 @@ Contents of your `pluginsConfig.json` need to be reviewed to allow usage of new ] } ``` -- Go through all plugins definitions and replace "BurgerMenu" dependency with "SidebarMenu", e.g.: + +- Go through all plugins definitions and replace `BurgerMenu` dependency with `SidebarMenu`, e.g.: + ```json { "name": "MapExport", @@ -146,12 +153,19 @@ Contents of your `pluginsConfig.json` need to be reviewed to allow usage of new } ``` -Existing contexts need to be updated manually using following procedure: -- Edit context and proceed to the step of plugins configuration. -- Remove "BurgerMenu" from list of enabled plugins. -- Save context. +- Also the `StreetView` plugin needs to depend from `SidebarMenu`. -"SidebarMenu" will be used by context if "BurgerMenu" is not in the list of enabled plugins. +```json +{ + "name": "StreetView", + "glyph": "road", + "title": "plugins.StreetView.title", + "description": "plugins.StreetView.description", + "dependencies": [ + "SidebarMenu" + ] +} +``` ## Migration from 2022.01.00 to 2022.01.01 From 4547d60f17bd9b99dad1c76d4aa4064b7a6de5c5 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 17:12:35 +0300 Subject: [PATCH 48/51] Update web/client/configs/pluginsConfig.json Co-authored-by: Lorenzo Natali --- web/client/configs/pluginsConfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/client/configs/pluginsConfig.json b/web/client/configs/pluginsConfig.json index ae14cdb832..eda0ef0143 100644 --- a/web/client/configs/pluginsConfig.json +++ b/web/client/configs/pluginsConfig.json @@ -618,7 +618,7 @@ "title": "plugins.StreetView.title", "description": "plugins.StreetView.description", "dependencies": [ - "Toolbar" + "SidebarMenu" ] }, { From 1b78995e050754c9235e3a6b7152bd964a3ec3f6 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 4 May 2022 21:56:45 +0300 Subject: [PATCH 49/51] Properly hide overlay layers printing options by default (it is enabled if opposite is not passed by props) --- web/client/plugins/print/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/client/plugins/print/index.js b/web/client/plugins/print/index.js index b6fed6797f..6c085a37e5 100644 --- a/web/client/plugins/print/index.js +++ b/web/client/plugins/print/index.js @@ -192,6 +192,9 @@ export const standardItems = { }, { id: "overlayLayers", plugin: AdditionalLayers, + cfg: { + enabled: false + }, position: 5 }], "left-panel-accordion": [{ From adf9fabbcd415e67b4db59a05d991c047c2300f0 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 5 May 2022 09:58:55 +0300 Subject: [PATCH 50/51] Properly hide overlay layers printing options by default (it is enabled if opposite is not passed by props) --- web/client/plugins/Print.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web/client/plugins/Print.jsx b/web/client/plugins/Print.jsx index 0118944cc9..fcfcb92b87 100644 --- a/web/client/plugins/Print.jsx +++ b/web/client/plugins/Print.jsx @@ -324,10 +324,7 @@ export default { currentLocale: 'en-US', overrideOptions: {}, items: [], - printingService: getDefaultPrintingService(), - overlayLayersOptions: { - "enabled": true - } + printingService: getDefaultPrintingService() }; state = { From 14481913101e0be3b7fa853f99a571e3ea159a3c Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 5 May 2022 10:01:38 +0300 Subject: [PATCH 51/51] Missing doNotHide for DeleteMap plugin --- web/client/plugins/DeleteMap.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/client/plugins/DeleteMap.jsx b/web/client/plugins/DeleteMap.jsx index 981ded578a..25b832b15b 100644 --- a/web/client/plugins/DeleteMap.jsx +++ b/web/client/plugins/DeleteMap.jsx @@ -85,7 +85,8 @@ export default createPlugin('DeleteMap', { const { canDelete = false } = state?.map?.present?.info || {}; return canDelete ? {} : { style: {display: "none"} }; }, - priority: 2 + priority: 2, + doNotHide: true }, SidebarMenu: { name: 'mapDelete', @@ -99,7 +100,8 @@ export default createPlugin('DeleteMap', { const { canDelete = false } = state?.map?.present?.info || {}; return canDelete ? {} : { style: {display: "none"} }; }, - priority: 1 + priority: 1, + doNotHide: true } } });