Fix #9638 ui issue with context when adding all plugins

web/client/plugins/GeoProcessing.jsx

@@ -66,6 +66,17 @@ const GeoProcessing = createPlugin(
  action: toggleControl.bind(null, 'GeoProcessing', null),
  priority: 10,
  toggle: true
+ },
+ BurgerMenu: {
+ name: 'GeoProcessing',
+ position: 2100,
+ doNotHide: true,
+ tooltip: "GeoProcessing.tooltip.siderBarBtn",
+ text: <Message msgId="GeoProcessing.title" />,
+ icon: <Glyphicon glyph="globe-settings" />,
+ action: toggleControl.bind(null, 'GeoProcessing', null),
+ priority: 12,
+ toggle: true
  }
  },
  reducers: {

web/client/plugins/LongitudinalProfileTool.jsx

@@ -10,7 +10,8 @@ import { createSelector } from 'reselect';
 
 import GlobalSpinner from '../components/misc/spinners/GlobalSpinner/GlobalSpinner';
 import Main from './longitudinalProfile/Main';
-import UserMenuConnected from './longitudinalProfile/Menu';
+import MenuConnected from './longitudinalProfile/Menu';
+import MenuForBurger from './longitudinalProfile/MenuForBurger';
 import { setControlProperty } from "../actions/controls";
 import {
  addMarker,
@@ -97,10 +98,9 @@ import { createPlugin } from '../utils/PluginsUtils';
  * "filterAllowedCRS": ["EPSG:4326", "EPSG:3857"],
  * "additionalCRS": {
  * "EPSG:3003": { "label": "EPSG:3003" }
- * },
+ * }
  * }
  * }
- * `
  */
 const MainComponent = connect(
  createSelector(
@@ -202,9 +202,16 @@ export default createPlugin(
  name: 'LongitudinalProfileTool',
  position: 2100,
  doNotHide: true,
- tool: UserMenuConnected,
+ tool: MenuConnected,
  priority: 1
  },
+ BurgerMenu: {
+ tool: MenuForBurger,
+ name: 'LongitudinalProfileTool',
+ position: 2100,
+ doNotHide: true,
+ priority: 2
+ },
  Toolbar: {
  name: "LongitudinalProfileTool-spinner",
  alwaysVisible: true,

web/client/plugins/longitudinalProfile/Menu.jsx

@@ -32,7 +32,7 @@ const TDropdownButton = tooltip(DropdownButton);
 /**
  * A DropDown menu for longitudinal profile
  */
-const UserMenu = ({
+const Menu = ({
  className,
  dataSourceMode,
  initialized,
@@ -75,7 +75,24 @@ const UserMenu = ({
  <Glyphicon glyph="cog"/> <Message msgId="longitudinalProfile.parameters"/>
  </MenuItem>
  </>);
- const DropDownMenu = (<DropDown
+ if (!initialized) {
+ return false;
+ }
+ if (menuItem) {
+ // inside extra tools
+ return (<>
+ {open &&
+ <div className="open dropup btn-group btn-group-tray" style={{display: "inline"}}>
+ <ul role="menu" className="dropdown-menu dropdown-menu-right" aria-labelledby="longitudinal-tool">
+ {body}
+ </ul>
+ </div>}
+ <MenuItem active={menuIsActive || open} key="menu" onClick={() => setMenuOpen(!open)}>
+ <Glyphicon glyph="1-line"/>
+ <Message msgId="longitudinalProfile.title"/>
+ </MenuItem></>);
+ }
+ return (<DropDown
  dropup={dropUp}
  open={open}
  onToggle={(val) => setMenuOpen(val)}
@@ -91,33 +108,10 @@ const UserMenu = ({
  {body}
  </DropDown>);
 
- let Menu;
- if (menuItem) {
- // inside extra tools
- Menu = (<> {
- open ? <>
- <div className="open dropup btn-group btn-group-tray" style={{display: "inline"}}>
- <ul role="menu" className="dropdown-menu dropdown-menu-right" aria-labelledby="longitudinal-tool">
- {body}
- </ul>
- </div>
- <MenuItem active={menuIsActive || open} key="menu" onClick={() => setMenuOpen(!open)}>
- <Glyphicon glyph="1-line"/>
- <Message msgId="longitudinalProfile.title"/>
- </MenuItem></> :
- <MenuItem active={menuIsActive || open} key="menu" onClick={() => setMenuOpen(!open)}>
- <Glyphicon glyph="1-line"/>
- <Message msgId="longitudinalProfile.title"/>
- </MenuItem> }
- </>);
- } else {
- Menu = DropDownMenu;
- }
 
- return initialized ? Menu : false;
 };
 
-UserMenu.propTypes = {
+Menu.propTypes = {
  className: PropTypes.string,
  dataSourceMode: PropTypes.string,
  initialized: PropTypes.bool,
@@ -132,7 +126,7 @@ UserMenu.propTypes = {
  onToggleSourceMode: PropTypes.func
 };
 
-UserMenu.defaultProps = {
+Menu.defaultProps = {
  className: "square-button",
  menuIsActive: false,
  nav: false,
@@ -143,7 +137,7 @@ UserMenu.defaultProps = {
  tooltipPosition: 'left'
 };
 
-const UserMenuConnected = connect((state) => ({
+const MenuConnected = connect((state) => ({
  menuIsActive: isActiveMenuSelector(state),
  dataSourceMode: dataSourceModeSelector(state),
  isParametersOpen: isParametersOpenSelector(state),
@@ -153,6 +147,6 @@ const UserMenuConnected = connect((state) => ({
  onActivateTool: setControlProperty.bind(null, "longitudinalProfileTool", "enabled", true),
  onToggleSourceMode: toggleMode,
  onToggleParameters: setControlProperty.bind(null, "LongitudinalProfileToolParameters", "enabled", true, true)
-})(UserMenu);
+})(Menu);
 
-export default UserMenuConnected;
+export default MenuConnected;

web/client/plugins/longitudinalProfile/MenuForBurger.jsx

@@ -0,0 +1,137 @@
+/*
+ * Copyright 2023, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Overlay from '../../components/misc/Overlay';
+
+import {Glyphicon, MenuItem, Popover} from 'react-bootstrap';
+import {connect} from "react-redux";
+
+import Message from '../../components/I18N/Message';
+import { setControlProperty } from "../../actions/controls";
+import {
+ toggleMode
+} from "../../actions/longitudinalProfile";
+import {
+ dataSourceModeSelector,
+ isActiveMenuSelector,
+ isInitializedSelector,
+ isParametersOpenSelector
+} from "../../selectors/longitudinalProfile";
+import { isCesium } from '../../selectors/maptype';
+
+/**
+ * A DropDown menu for longitudinal profile
+ */
+const UserMenu = ({
+ dataSourceMode,
+ initialized,
+ isParametersOpen,
+ menuIsActive,
+ showDrawOption,
+ onActivateTool,
+ onToggleParameters,
+ onToggleSourceMode
+}) => {
+
+ const [open, setMenuOpen ] = useState(false);
+ useEffect(() => {
+ const burgerButton = document.querySelector("#mapstore-burger-menu-container");
+ burgerButton?.addEventListener("click", () => {
+ setMenuOpen(false);
+ });
+ return () => {
+ setMenuOpen(false);
+ };
+ }, []);
+ const onToggleTool = useCallback((toolName) => () => {
+ onActivateTool();
+ setMenuOpen(false);
+ onToggleSourceMode(toolName);
+ }, []);
+ const ref = useRef();
+ const body = (<>
+ {showDrawOption ? <MenuItem active={dataSourceMode === 'draw'} key="draw" onClick={onToggleTool('draw')}>
+ <Glyphicon glyph="pencil"/><Message msgId="longitudinalProfile.draw"/>
+ </MenuItem> : null}
+ <MenuItem active={dataSourceMode === 'import'} key="import" onClick={onToggleTool('import')}>
+ <Glyphicon glyph="upload"/> <Message msgId="longitudinalProfile.import"/>
+ </MenuItem>
+ <MenuItem active={dataSourceMode === 'select'} key="select" onClick={onToggleTool('select')}>
+ <Glyphicon glyph="1-layer"/> <Message msgId="longitudinalProfile.select"/>
+ </MenuItem>
+ <MenuItem key="divider" divider/>
+ <MenuItem active={isParametersOpen} key="parameters" onClick={onToggleParameters}>
+ <Glyphicon glyph="cog"/> <Message msgId="longitudinalProfile.parameters"/>
+ </MenuItem>
+ </>);
+
+ // inside extra tools
+ const Menu = (<>
+ {open && <Overlay
+ show={open}
+ target={ref.current}
+ placement="left"
+ container={this}
+ containerPadding={20}
+ >
+ <Popover id="longitudinal-profile-burger-menu" placement="left" style={{margin: 0, padding: 0}}>
+ <div className="dropdown-menu open" style={{display: "block", position: "relative"}}>
+ {body}
+ </div>
+ </Popover>
+ </Overlay>
+ }
+ <MenuItem ref={ref} active={menuIsActive || open} key="menu" onClick={() => { setMenuOpen(!open);}}>
+ <Glyphicon glyph="1-line"/>
+ <Message msgId="longitudinalProfile.title"/>
+ </MenuItem>
+ </>);
+
+ return initialized ? Menu : false;
+};
+
+UserMenu.propTypes = {
+ className: PropTypes.string,
+ dataSourceMode: PropTypes.string,
+ initialized: PropTypes.bool,
+ isParametersOpen: PropTypes.bool,
+ menuIsActive: PropTypes.bool,
+ menuItem: PropTypes.bool,
+ nav: PropTypes.bool,
+ showDrawOption: PropTypes.bool,
+ tooltipPosition: PropTypes.string,
+ onActivateTool: PropTypes.func,
+ onToggleParameters: PropTypes.func,
+ onToggleSourceMode: PropTypes.func
+};
+
+UserMenu.defaultProps = {
+ className: "square-button",
+ menuIsActive: false,
+ nav: false,
+ showDrawOption: true,
+ onActivateTool: () => {},
+ onToggleParameters: () => {},
+ onToggleSourceMode: () => {},
+ tooltipPosition: 'left'
+};
+
+const MenuForBurger = connect((state) => ({
+ menuIsActive: isActiveMenuSelector(state),
+ dataSourceMode: dataSourceModeSelector(state),
+ isParametersOpen: isParametersOpenSelector(state),
+ showDrawOption: !isCesium(state),
+ initialized: isInitializedSelector(state)
+}), {
+ onActivateTool: setControlProperty.bind(null, "longitudinalProfileTool", "enabled", true),
+ onToggleSourceMode: toggleMode,
+ onToggleParameters: setControlProperty.bind(null, "LongitudinalProfileToolParameters", "enabled", true, true)
+})(UserMenu);
+
+export default MenuForBurger;

web/client/themes/default/less/longitudinal-profile.less

@@ -24,6 +24,16 @@
  .background-color-var(@theme-vars[main-bg]);
  }
 }
+/** burger menu style */
+#longitudinal-profile-burger-menu {
+ .popover-content {
+ padding: 0;
+ .dropdown-menu {
+ margin-top: 0;
+ }
+ }
+
+}
 
 // **************
 // Layout
@@ -137,3 +147,4 @@
  }
 
 }
+