From 324d3b90e05e6b356ff3aa274261b778f7b840c6 Mon Sep 17 00:00:00 2001 From: MV88 Date: Fri, 20 Oct 2023 17:56:14 +0200 Subject: [PATCH 1/4] Fix #9638 ui issue with context when adding all plugins --- web/client/plugins/GeoProcessing.jsx | 11 ++ .../plugins/LongitudinalProfileTool.jsx | 15 ++- .../plugins/longitudinalProfile/Menu.jsx | 42 ++----- .../longitudinalProfile/MenuForBurger.jsx | 119 ++++++++++++++++++ 4 files changed, 149 insertions(+), 38 deletions(-) create mode 100644 web/client/plugins/longitudinalProfile/MenuForBurger.jsx diff --git a/web/client/plugins/GeoProcessing.jsx b/web/client/plugins/GeoProcessing.jsx index d863ec57c3..4e016d2c35 100644 --- a/web/client/plugins/GeoProcessing.jsx +++ b/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: , + icon: , + action: toggleControl.bind(null, 'GeoProcessing', null), + priority: 12, + toggle: true } }, reducers: { diff --git a/web/client/plugins/LongitudinalProfileTool.jsx b/web/client/plugins/LongitudinalProfileTool.jsx index ffb72433fe..1321874ae2 100644 --- a/web/client/plugins/LongitudinalProfileTool.jsx +++ b/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, diff --git a/web/client/plugins/longitudinalProfile/Menu.jsx b/web/client/plugins/longitudinalProfile/Menu.jsx index ea62dca7e3..85ca07a38a 100644 --- a/web/client/plugins/longitudinalProfile/Menu.jsx +++ b/web/client/plugins/longitudinalProfile/Menu.jsx @@ -32,11 +32,10 @@ const TDropdownButton = tooltip(DropdownButton); /** * A DropDown menu for longitudinal profile */ -const UserMenu = ({ +const Menu = ({ className, dataSourceMode, initialized, - menuItem, isParametersOpen, menuIsActive, nav, @@ -75,7 +74,7 @@ const UserMenu = ({ ); - const DropDownMenu = ( setMenuOpen(val)} @@ -89,35 +88,10 @@ const UserMenu = ({ noCaret > {body} - ); - - let Menu; - if (menuItem) { - // inside extra tools - Menu = (<> { - open ? <> -
-
    - {body} -
-
- setMenuOpen(!open)}> - - - : - setMenuOpen(!open)}> - - - } - ); - } else { - Menu = DropDownMenu; - } - - return initialized ? Menu : false; + ) : false; }; -UserMenu.propTypes = { +Menu.propTypes = { className: PropTypes.string, dataSourceMode: PropTypes.string, initialized: PropTypes.bool, @@ -132,7 +106,7 @@ UserMenu.propTypes = { onToggleSourceMode: PropTypes.func }; -UserMenu.defaultProps = { +Menu.defaultProps = { className: "square-button", menuIsActive: false, nav: false, @@ -143,7 +117,7 @@ UserMenu.defaultProps = { tooltipPosition: 'left' }; -const UserMenuConnected = connect((state) => ({ +const MenuConnected = connect((state) => ({ menuIsActive: isActiveMenuSelector(state), dataSourceMode: dataSourceModeSelector(state), isParametersOpen: isParametersOpenSelector(state), @@ -153,6 +127,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; diff --git a/web/client/plugins/longitudinalProfile/MenuForBurger.jsx b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx new file mode 100644 index 0000000000..3f64ee4acf --- /dev/null +++ b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx @@ -0,0 +1,119 @@ +/* + * 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, useCallback } from 'react'; +import PropTypes from 'prop-types'; +import {Glyphicon, MenuItem} 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 onToggleTool = useCallback((toolName) => () => { + onActivateTool(); + onToggleSourceMode(toolName); + }, []); + const [open, setMenuOpen ] = useState(false); + const body = (<> + {showDrawOption ? + + : null} + + + + + + + + + + + ); + + // inside extra tools + const Menu = (<> { + open ? <> +
+
    + {body} +
+
+ setMenuOpen(!open)}> + + + : + setMenuOpen(!open)}> + + + } + ); + + 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; From 55a71edda21ceaeae2d76dc57e1500c83e2d831c Mon Sep 17 00:00:00 2001 From: Lorenzo Natali Date: Mon, 23 Oct 2023 18:00:29 +0200 Subject: [PATCH 2/4] Fixed the menu to be visible. --- .../longitudinalProfile/MenuForBurger.jsx | 48 ++++++++++++------- .../default/less/longitudinal-profile.less | 11 +++++ 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/web/client/plugins/longitudinalProfile/MenuForBurger.jsx b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx index 3f64ee4acf..612e351545 100644 --- a/web/client/plugins/longitudinalProfile/MenuForBurger.jsx +++ b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx @@ -5,9 +5,11 @@ * 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, useCallback } from 'react'; +import React, { useState, useEffect, useCallback, useRef } from 'react'; import PropTypes from 'prop-types'; -import {Glyphicon, MenuItem} from 'react-bootstrap'; +import Overlay from '../../components/misc/Overlay'; + +import {Glyphicon, MenuItem, Popover} from 'react-bootstrap'; import {connect} from "react-redux"; import Message from '../../components/I18N/Message'; @@ -36,11 +38,19 @@ const UserMenu = ({ onToggleParameters, onToggleSourceMode }) => { + + const [open, setMenuOpen ] = useState(false); + useEffect(() => { + return () => { + setMenuOpen(false); + }; + }, []); const onToggleTool = useCallback((toolName) => () => { onActivateTool(); + setMenuOpen(false); onToggleSourceMode(toolName); }, []); - const [open, setMenuOpen ] = useState(false); + const ref = useRef(); const body = (<> {showDrawOption ? @@ -58,21 +68,25 @@ const UserMenu = ({ ); // inside extra tools - const Menu = (<> { - open ? <> -
-
    + const Menu = (<> + {open && + +
    {body} -
-
- setMenuOpen(!open)}> - - - : - setMenuOpen(!open)}> - - - } + + + + } + { setMenuOpen(!open);}}> + + + ); return initialized ? Menu : false; diff --git a/web/client/themes/default/less/longitudinal-profile.less b/web/client/themes/default/less/longitudinal-profile.less index a2b426ab2c..c454f65e32 100644 --- a/web/client/themes/default/less/longitudinal-profile.less +++ b/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 @@ } } + From 70f086922511a90c8c5b374ff7445b0933450f9e Mon Sep 17 00:00:00 2001 From: MV88 Date: Mon, 23 Oct 2023 22:28:30 +0200 Subject: [PATCH 3/4] Fix behaviour in every case --- .../plugins/longitudinalProfile/Menu.jsx | 30 +++++++++++++++++-- .../longitudinalProfile/MenuForBurger.jsx | 4 +++ 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/web/client/plugins/longitudinalProfile/Menu.jsx b/web/client/plugins/longitudinalProfile/Menu.jsx index 85ca07a38a..e2f793cff9 100644 --- a/web/client/plugins/longitudinalProfile/Menu.jsx +++ b/web/client/plugins/longitudinalProfile/Menu.jsx @@ -36,6 +36,7 @@ const Menu = ({ className, dataSourceMode, initialized, + menuItem, isParametersOpen, menuIsActive, nav, @@ -74,7 +75,7 @@ const Menu = ({ ); - return initialized ? ( setMenuOpen(val)} @@ -88,7 +89,32 @@ const Menu = ({ noCaret > {body} - ) : false; + ); + + let MenuComp; + if (menuItem) { + // inside extra tools + MenuComp = (<> { + open ? <> +
+
    + {body} +
+
+ setMenuOpen(!open)}> + + + : + setMenuOpen(!open)}> + + + } + ); + } else { + MenuComp = DropDownMenu; + } + + return initialized ? MenuComp : false; }; Menu.propTypes = { diff --git a/web/client/plugins/longitudinalProfile/MenuForBurger.jsx b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx index 612e351545..4e9af0051c 100644 --- a/web/client/plugins/longitudinalProfile/MenuForBurger.jsx +++ b/web/client/plugins/longitudinalProfile/MenuForBurger.jsx @@ -41,6 +41,10 @@ const UserMenu = ({ const [open, setMenuOpen ] = useState(false); useEffect(() => { + const burgerButton = document.querySelector("#mapstore-burger-menu-container"); + burgerButton?.addEventListener("click", () => { + setMenuOpen(false); + }); return () => { setMenuOpen(false); }; From 22c68c4ab408eaa68cf5862b700c075370fa0509 Mon Sep 17 00:00:00 2001 From: Lorenzo Natali Date: Tue, 24 Oct 2023 11:26:52 +0200 Subject: [PATCH 4/4] Simplified logic behind menu --- .../plugins/longitudinalProfile/Menu.jsx | 42 ++++++++----------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/web/client/plugins/longitudinalProfile/Menu.jsx b/web/client/plugins/longitudinalProfile/Menu.jsx index e2f793cff9..7121e85e59 100644 --- a/web/client/plugins/longitudinalProfile/Menu.jsx +++ b/web/client/plugins/longitudinalProfile/Menu.jsx @@ -75,7 +75,24 @@ const Menu = ({ ); - const DropDownMenu = ( + {open && +
+
    + {body} +
+
} + setMenuOpen(!open)}> + + + ); + } + return ( setMenuOpen(val)} @@ -91,30 +108,7 @@ const Menu = ({ {body} ); - let MenuComp; - if (menuItem) { - // inside extra tools - MenuComp = (<> { - open ? <> -
-
    - {body} -
-
- setMenuOpen(!open)}> - - - : - setMenuOpen(!open)}> - - - } - ); - } else { - MenuComp = DropDownMenu; - } - return initialized ? MenuComp : false; }; Menu.propTypes = {