#8086 Layout changes and other improvements

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.

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)`,

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 (
         <DockContainer
             dockStyle={containerStyle}

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
             };
         }
     },

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
         }
     }
 });

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
         }
     }
 });

web/client/plugins/StreetView/StreetView.jsx

@@ -72,6 +72,22 @@ export default createPlugin(
                 tooltip: "streetView.tooltip",
                 icon: <Glyphicon glyph="road" />,
                 action: () => toggleStreetView()
+            },
+            SidebarMenu: {
+                position: 40,
+                priority: 1,
+                doNotHide: true,
+                name: CONTROL_NAME,
+                text: <Message msgId="streetView.title"/>,
+                tooltip: "streetView.tooltip",
+                icon: <Glyphicon glyph="road" />,
+                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
+                    };
+                }
             }
         }
     }