From f21974b5d62efba71f29ccebabd9abf35db1f529 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Wed, 7 Feb 2024 17:19:11 +0100 Subject: [PATCH 01/12] Add attribute and classes for menuCompact --- components/AppMenu.jsx | 23 ++++++++++++++--------- components/PluginsContainer.jsx | 7 ++++++- plugins/TopBar.jsx | 12 ++++++++++-- 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/components/AppMenu.jsx b/components/AppMenu.jsx index 718ed1621..5acb0d9e2 100644 --- a/components/AppMenu.jsx +++ b/components/AppMenu.jsx @@ -32,6 +32,7 @@ class AppMenu extends React.Component { currentTaskBlocked: PropTypes.bool, currentTheme: PropTypes.object, keepMenuOpen: PropTypes.bool, + menuCompact: PropTypes.bool, menuItems: PropTypes.array, onMenuToggled: PropTypes.func, openExternalUrl: PropTypes.func, @@ -173,9 +174,13 @@ class AppMenu extends React.Component { document.addEventListener('keydown', this.onKeyPress, true); document.addEventListener('mousemove', this.onMouseMove, true); } else { - document.removeEventListener('click', this.checkCloseMenu); - document.removeEventListener('keydown', this.onKeyPress, true); - document.removeEventListener('mousemove', this.onMouseMove, true); + if (this.props.keepMenuOpen) { + return; + } else { + document.removeEventListener('click', this.checkCloseMenu); + document.removeEventListener('keydown', this.onKeyPress, true); + document.removeEventListener('mousemove', this.onMouseMove, true); + } } this.props.onMenuToggled(!this.state.menuVisible); this.setState((state) => ({menuVisible: !state.menuVisible, submenusVisible: [], filter: ""})); @@ -262,12 +267,12 @@ class AppMenu extends React.Component { } }; render() { - let className = ""; - if (this.props.currentTaskBlocked) { - className = "appmenu-blocked"; - } else if (this.state.menuVisible) { - className = "appmenu-visible"; - } + const visible = !this.props.currentTaskBlocked && this.state.menuVisible; + const className = classnames({ + "appmenu-blocked": this.props.currentTaskBlocked, + "appmenu-visible": visible, + "appmenu-compact": this.props.menuCompact + }); const filter = removeDiacritics(this.state.filter.toLowerCase()); return (
{ this.menuEl = el; MiscUtils.setupKillTouchEvents(el); }} diff --git a/components/PluginsContainer.jsx b/components/PluginsContainer.jsx index fe508b18d..4e57ae043 100644 --- a/components/PluginsContainer.jsx +++ b/components/PluginsContainer.jsx @@ -20,6 +20,10 @@ class PluginsContainer extends React.Component { pluginsAppConfig: PropTypes.object, pluginsConfig: PropTypes.object }; + isAppMenuCompact = (pluginsConfig)=> { + const pluginTopBar = pluginsConfig.find((pluginConf) => pluginConf.name === "TopBar"); + return pluginTopBar && pluginTopBar.cfg.appMenuCompact; + }; renderPlugins = (pluginsConfig) => { return pluginsConfig.map((pluginConf, idx) => { const Plugin = this.props.plugins[pluginConf.name + "Plugin"]; @@ -35,8 +39,9 @@ class PluginsContainer extends React.Component { }; render() { if (this.props.pluginsConfig) { + const menuCompactclassName = this.isAppMenuCompact(this.props.pluginsConfig[this.props.mode]) ? "appmenu-compact" : ""; return ( -
+
{this.renderPlugins(this.props.pluginsConfig[this.props.mode])}
diff --git a/plugins/TopBar.jsx b/plugins/TopBar.jsx index db4428c05..b32ebd4f9 100644 --- a/plugins/TopBar.jsx +++ b/plugins/TopBar.jsx @@ -28,6 +28,8 @@ class TopBar extends React.Component { static propTypes = { /** Whether opening the app menu clears the active task. */ appMenuClearsTask: PropTypes.bool, + /** Whether show an appMenu compact (menu visible on icons hover) */ + appMenuCompact: PropTypes.bool, /** Whether to display the filter field in the app menu. */ appMenuFilterField: PropTypes.bool, /** The shortcut for tiggering the app menu, i.e. alt+shift+m. */ @@ -99,7 +101,7 @@ class TopBar extends React.Component { let logo; const assetsPath = ConfigUtils.getAssetsPath(); const tooltip = LocaleUtils.tr("appmenu.menulabel"); - if (this.props.mobile) { + if (this.props.mobile || this.props.appMenuCompact) { buttonContents = ( @@ -128,6 +130,10 @@ class TopBar extends React.Component { const searchOptions = {...this.props.searchOptions}; searchOptions.minScaleDenom = searchOptions.minScaleDenom || searchOptions.minScale; delete searchOptions.minScale; + // Keep menu open when appMenu is in compact mode (Visible on Hover) + const keepMenuOpen = this.props.appMenuCompact; + // Menu should be visible on startup when appMenu is in compact mode (Visible on Hover) + const showOnStartup = this.props.appMenuVisibleOnStartup || this.props.appMenuCompact; return ( this.props.toggleFullscreen(false)} @@ -150,10 +156,12 @@ class TopBar extends React.Component { appMenuClearsTask={this.props.appMenuClearsTask} appMenuShortcut={this.props.appMenuShortcut} buttonContents={buttonContents} + keepMenuOpen={keepMenuOpen} + menuCompact={this.props.appMenuCompact} menuItems={this.props.menuItems} openExternalUrl={this.openUrl} showFilterField={this.props.appMenuFilterField} - showOnStartup={this.props.appMenuVisibleOnStartup} /> + showOnStartup={showOnStartup} /> ) : null} {this.props.components.FullscreenSwitcher ? ( From f8619721f908a005b96f0138549d18454acc392e Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Wed, 7 Feb 2024 17:19:54 +0100 Subject: [PATCH 02/12] CSS --- components/style/AppMenu.css | 18 ++++++++++++++++++ components/style/ResizeableWindow.css | 5 +++++ components/style/SideBar.css | 7 ++++++- plugins/style/Buttons.css | 4 ++++ plugins/style/LoginUser.css | 4 ++++ plugins/style/MapCopyright.css | 4 ++++ 6 files changed, 41 insertions(+), 1 deletion(-) diff --git a/components/style/AppMenu.css b/components/style/AppMenu.css index 1641ff85d..b93f98583 100644 --- a/components/style/AppMenu.css +++ b/components/style/AppMenu.css @@ -14,6 +14,10 @@ div.AppMenu.appmenu-visible { overflow: visible; } +.appmenu-compact div.AppMenu.appmenu-visible { + background: none; +} + div.AppMenu .appmenu-label { font-weight: bold; transition: color 0.25s; @@ -53,6 +57,20 @@ div.AppMenu div.appmenu-menu-container { max-height: calc(var(--vh, 1vh) * 100 - 5.8em); } +div.AppMenu.appmenu-compact div.appmenu-menu-container { + right: -11.5em; + width: 15em; + height: calc(100vh - 86px); + transition: transform 0.25s, opacity 0.25s, right 0.5s; + background: var(--app-menu-bg-color); + box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.5); + top: 3.7em; +} + +div.AppMenu.appmenu-compact div.appmenu-menu-container:hover { + right: 0; +} + div.AppMenu ul.appmenu-menu { text-align: left; padding: 0; diff --git a/components/style/ResizeableWindow.css b/components/style/ResizeableWindow.css index 8740282c8..90b5425f0 100644 --- a/components/style/ResizeableWindow.css +++ b/components/style/ResizeableWindow.css @@ -6,6 +6,11 @@ div.resizeable-window-container { right: 0; pointer-events: none; } + +.appmenu-compact div.resizeable-window-container { + right: 3.7em; +} + div.resizeable-window { pointer-events: auto; background-color: var(--container-bg-color); diff --git a/components/style/SideBar.css b/components/style/SideBar.css index 771dae833..0e81bc286 100644 --- a/components/style/SideBar.css +++ b/components/style/SideBar.css @@ -7,7 +7,7 @@ div.sidebar { max-height: calc(var(--vh, 1vh) * 100 - 5.75em); background-color: var(--container-bg-color); transition: transform 0.25s; - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75); + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; max-width: 100vw; @@ -21,6 +21,11 @@ div.sidebar-left { left: 0; } +.appmenu-compact div.sidebar-right { + right: 3.7em; + top: 3.7em; +} + div.sidebar-right:not(.sidebar-open) { transform: translateX(100%) translateX(8px); } diff --git a/plugins/style/Buttons.css b/plugins/style/Buttons.css index 87f9acd02..34d46583f 100644 --- a/plugins/style/Buttons.css +++ b/plugins/style/Buttons.css @@ -56,3 +56,7 @@ button.map-button-engaged { background-color: yellow; color: var(--map-button-bg-color); } + +.appmenu-compact button.map-button { + right: 4em !important; +} diff --git a/plugins/style/LoginUser.css b/plugins/style/LoginUser.css index 7f26cae6f..fc3994300 100644 --- a/plugins/style/LoginUser.css +++ b/plugins/style/LoginUser.css @@ -9,6 +9,10 @@ div.login-user { display: flex; } +.appmenu-compact div.login-user { + right: 3.7em; +} + div.login-user > span { flex: 0 0 auto; padding: 0 0.25em; diff --git a/plugins/style/MapCopyright.css b/plugins/style/MapCopyright.css index 1d9018fc2..7b220d5c1 100644 --- a/plugins/style/MapCopyright.css +++ b/plugins/style/MapCopyright.css @@ -8,6 +8,10 @@ font-size: x-small; } +.appmenu-compact #MapCopyright { + right: 5.25em !important; +} + #MapCopyright > span { padding: 0 0.5em; } From a17ed1a7ed591bc93b7ac81ce82a810d2015ac5c Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Wed, 7 Feb 2024 17:23:03 +0100 Subject: [PATCH 03/12] remove useless change --- components/style/SideBar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/style/SideBar.css b/components/style/SideBar.css index 0e81bc286..90b5eac17 100644 --- a/components/style/SideBar.css +++ b/components/style/SideBar.css @@ -7,7 +7,7 @@ div.sidebar { max-height: calc(var(--vh, 1vh) * 100 - 5.75em); background-color: var(--container-bg-color); transition: transform 0.25s; - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.55); + box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; max-width: 100vw; From 348c5a2379aeaf4df703de09772fe34532519030 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Thu, 8 Feb 2024 14:09:43 +0100 Subject: [PATCH 04/12] Restrict Menu compact to desktop --- plugins/TopBar.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/plugins/TopBar.jsx b/plugins/TopBar.jsx index b32ebd4f9..9f169357e 100644 --- a/plugins/TopBar.jsx +++ b/plugins/TopBar.jsx @@ -28,7 +28,7 @@ class TopBar extends React.Component { static propTypes = { /** Whether opening the app menu clears the active task. */ appMenuClearsTask: PropTypes.bool, - /** Whether show an appMenu compact (menu visible on icons hover) */ + /** Whether show an appMenu compact (menu visible on icons hover) - Only available for desktop client. */ appMenuCompact: PropTypes.bool, /** Whether to display the filter field in the app menu. */ appMenuFilterField: PropTypes.bool, @@ -130,10 +130,12 @@ class TopBar extends React.Component { const searchOptions = {...this.props.searchOptions}; searchOptions.minScaleDenom = searchOptions.minScaleDenom || searchOptions.minScale; delete searchOptions.minScale; + // Menu compact only available for desktop client + const menuCompact = !this.props.mobile ? this.props.appMenuCompact : false; // Keep menu open when appMenu is in compact mode (Visible on Hover) - const keepMenuOpen = this.props.appMenuCompact; + const keepMenuOpen = menuCompact; // Menu should be visible on startup when appMenu is in compact mode (Visible on Hover) - const showOnStartup = this.props.appMenuVisibleOnStartup || this.props.appMenuCompact; + const showOnStartup = this.props.appMenuVisibleOnStartup || menuCompact; return ( this.props.toggleFullscreen(false)} @@ -157,7 +159,7 @@ class TopBar extends React.Component { appMenuShortcut={this.props.appMenuShortcut} buttonContents={buttonContents} keepMenuOpen={keepMenuOpen} - menuCompact={this.props.appMenuCompact} + menuCompact={menuCompact} menuItems={this.props.menuItems} openExternalUrl={this.openUrl} showFilterField={this.props.appMenuFilterField} From eabb2d0ef694e03db05cee59390f51691ce782be Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Thu, 8 Feb 2024 14:12:19 +0100 Subject: [PATCH 05/12] Add doc --- doc/plugins.md | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/plugins.md b/doc/plugins.md index 5f7a21c52..c71492f1c 100644 --- a/doc/plugins.md +++ b/doc/plugins.md @@ -763,6 +763,7 @@ Top bar, containing the logo, searchbar, task buttons and app menu. | Property | Type | Description | Default value | |----------|------|-------------|---------------| | appMenuClearsTask | `bool` | Whether opening the app menu clears the active task. | `undefined` | +| appMenuCompact | `bool` | Whether show an appMenu compact (menu visible on icons hover) - Only available for desktop client. | `undefined` | | appMenuFilterField | `bool` | Whether to display the filter field in the app menu. | `undefined` | | appMenuShortcut | `string` | The shortcut for tiggering the app menu, i.e. alt+shift+m. | `undefined` | | appMenuVisibleOnStartup | `bool` | Whether to open the app menu on application startup. | `undefined` | From 33189174d1a4752fca165cde7fdae88b52dd39b3 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Tue, 20 Feb 2024 16:50:48 +0100 Subject: [PATCH 06/12] Revert use of CSS class to enforce margin right --- components/PluginsContainer.jsx | 7 +------ components/style/ResizeableWindow.css | 4 ---- components/style/SideBar.css | 5 ----- plugins/style/Buttons.css | 4 ---- plugins/style/LoginUser.css | 4 ---- plugins/style/MapCopyright.css | 4 ---- 6 files changed, 1 insertion(+), 27 deletions(-) diff --git a/components/PluginsContainer.jsx b/components/PluginsContainer.jsx index 4e57ae043..fe508b18d 100644 --- a/components/PluginsContainer.jsx +++ b/components/PluginsContainer.jsx @@ -20,10 +20,6 @@ class PluginsContainer extends React.Component { pluginsAppConfig: PropTypes.object, pluginsConfig: PropTypes.object }; - isAppMenuCompact = (pluginsConfig)=> { - const pluginTopBar = pluginsConfig.find((pluginConf) => pluginConf.name === "TopBar"); - return pluginTopBar && pluginTopBar.cfg.appMenuCompact; - }; renderPlugins = (pluginsConfig) => { return pluginsConfig.map((pluginConf, idx) => { const Plugin = this.props.plugins[pluginConf.name + "Plugin"]; @@ -39,9 +35,8 @@ class PluginsContainer extends React.Component { }; render() { if (this.props.pluginsConfig) { - const menuCompactclassName = this.isAppMenuCompact(this.props.pluginsConfig[this.props.mode]) ? "appmenu-compact" : ""; return ( -
+
{this.renderPlugins(this.props.pluginsConfig[this.props.mode])}
diff --git a/components/style/ResizeableWindow.css b/components/style/ResizeableWindow.css index 90b5425f0..0b4d1dec3 100644 --- a/components/style/ResizeableWindow.css +++ b/components/style/ResizeableWindow.css @@ -7,10 +7,6 @@ div.resizeable-window-container { pointer-events: none; } -.appmenu-compact div.resizeable-window-container { - right: 3.7em; -} - div.resizeable-window { pointer-events: auto; background-color: var(--container-bg-color); diff --git a/components/style/SideBar.css b/components/style/SideBar.css index 90b5eac17..771dae833 100644 --- a/components/style/SideBar.css +++ b/components/style/SideBar.css @@ -21,11 +21,6 @@ div.sidebar-left { left: 0; } -.appmenu-compact div.sidebar-right { - right: 3.7em; - top: 3.7em; -} - div.sidebar-right:not(.sidebar-open) { transform: translateX(100%) translateX(8px); } diff --git a/plugins/style/Buttons.css b/plugins/style/Buttons.css index 34d46583f..87f9acd02 100644 --- a/plugins/style/Buttons.css +++ b/plugins/style/Buttons.css @@ -56,7 +56,3 @@ button.map-button-engaged { background-color: yellow; color: var(--map-button-bg-color); } - -.appmenu-compact button.map-button { - right: 4em !important; -} diff --git a/plugins/style/LoginUser.css b/plugins/style/LoginUser.css index fc3994300..7f26cae6f 100644 --- a/plugins/style/LoginUser.css +++ b/plugins/style/LoginUser.css @@ -9,10 +9,6 @@ div.login-user { display: flex; } -.appmenu-compact div.login-user { - right: 3.7em; -} - div.login-user > span { flex: 0 0 auto; padding: 0 0.25em; diff --git a/plugins/style/MapCopyright.css b/plugins/style/MapCopyright.css index 7b220d5c1..1d9018fc2 100644 --- a/plugins/style/MapCopyright.css +++ b/plugins/style/MapCopyright.css @@ -8,10 +8,6 @@ font-size: x-small; } -.appmenu-compact #MapCopyright { - right: 5.25em !important; -} - #MapCopyright > span { padding: 0 0.5em; } From 8acbba256e8d40efa4ebaf1b0805b2f3d5595a86 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Tue, 20 Feb 2024 16:52:05 +0100 Subject: [PATCH 07/12] Create setRightMargin action --- actions/map.js | 8 ++++++++ components/AppMenu.jsx | 13 +++++++++++-- reducers/map.js | 6 +++++- utils/MiscUtils.js | 4 ++++ 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/actions/map.js b/actions/map.js index 113ad4b62..3d7c3af78 100644 --- a/actions/map.js +++ b/actions/map.js @@ -22,6 +22,7 @@ export const CHANGE_ROTATION = 'CHANGE_ROTATION'; export const TOGGLE_MAPTIPS = 'TOGGLE_MAPTIPS'; export const SET_TOPBAR_HEIGHT = 'SET_TOPBAR_HEIGHT'; export const SET_BOTTOMBAR_HEIGHT = 'SET_BOTTOMBAR_HEIGHT'; +export const SET_RIGHT_MARGIN = 'SET_RIGHT_MARGIN'; export const SET_SNAPPING_CONFIG = 'SET_SNAPPING_CONFIG'; export function changeMapView(center, zoom, bbox, size, mapStateSource, projection) { @@ -122,6 +123,13 @@ export function setBottombarHeight(height) { }; } +export function setRightMargin(right) { + return { + type: SET_RIGHT_MARGIN, + right + }; +} + export function setSnappingConfig(enabled, active) { return { type: SET_SNAPPING_CONFIG, diff --git a/components/AppMenu.jsx b/components/AppMenu.jsx index 5acb0d9e2..072219397 100644 --- a/components/AppMenu.jsx +++ b/components/AppMenu.jsx @@ -13,6 +13,7 @@ import mousetrap from 'mousetrap'; import {remove as removeDiacritics} from 'diacritics'; import isEmpty from 'lodash.isempty'; import classnames from 'classnames'; +import {setRightMargin} from '../actions/map'; import {setCurrentTask} from '../actions/task'; import InputContainer from '../components/InputContainer'; import LocaleUtils from '../utils/LocaleUtils'; @@ -37,6 +38,7 @@ class AppMenu extends React.Component { onMenuToggled: PropTypes.func, openExternalUrl: PropTypes.func, setCurrentTask: PropTypes.func, + setRightMargin: PropTypes.func, showFilterField: PropTypes.bool, showOnStartup: PropTypes.bool }; @@ -280,7 +282,7 @@ class AppMenu extends React.Component {
{this.props.buttonContents}
-
+
    {this.props.showFilterField ? (
  • @@ -307,6 +309,12 @@ class AppMenu extends React.Component { mousetrap(el).bind(this.props.appMenuShortcut, this.toggleMenu); } }; + storeRigthMargin = (el) => { + if (this.props.menuCompact && el?.clientWidth > 0) { + const rightmargin = el.clientWidth - MiscUtils.convertEmToPx(11.5); + this.props.setRightMargin(rightmargin); + } + }; itemAllowed = (item) => { if (!ThemeUtils.themFlagsAllowed(this.props.currentTheme, item.themeFlagWhitelist, item. themeFlagBlacklist)) { return false; @@ -328,5 +336,6 @@ export default connect((state) => ({ currentTaskBlocked: state.task.blocked, currentTheme: state.theme.current || {} }), { - setCurrentTask: setCurrentTask + setCurrentTask: setCurrentTask, + setRightMargin: setRightMargin })(AppMenu); diff --git a/reducers/map.js b/reducers/map.js index e56c76825..8df83be13 100644 --- a/reducers/map.js +++ b/reducers/map.js @@ -9,7 +9,7 @@ import { CHANGE_MAP_VIEW, CONFIGURE_MAP, CHANGE_ZOOM_LVL, ZOOM_TO_EXTENT, ZOOM_TO_POINT, - PAN_TO, CHANGE_ROTATION, CLICK_ON_MAP, TOGGLE_MAPTIPS, SET_TOPBAR_HEIGHT, SET_BOTTOMBAR_HEIGHT, SET_SNAPPING_CONFIG + PAN_TO, CHANGE_ROTATION, CLICK_ON_MAP, TOGGLE_MAPTIPS, SET_TOPBAR_HEIGHT, SET_BOTTOMBAR_HEIGHT, SET_RIGHT_MARGIN, SET_SNAPPING_CONFIG } from '../actions/map'; import isEmpty from 'lodash.isempty'; import MapUtils from '../utils/MapUtils'; @@ -27,6 +27,7 @@ const defaultState = { resolutions: [0], topbarHeight: 0, bottombarHeight: 0, + rightMargin: 0, click: null, snapping: { enabled: false, @@ -140,6 +141,9 @@ export default function map(state = defaultState, action) { case SET_BOTTOMBAR_HEIGHT: { return {...state, bottombarHeight: action.height}; } + case SET_RIGHT_MARGIN: { + return {...state, rightMargin: action.right}; + } case SET_SNAPPING_CONFIG: { return {...state, snapping: {enabled: action.enabled, active: action.active}}; } diff --git a/utils/MiscUtils.js b/utils/MiscUtils.js index 983c7d260..d7f5c8838 100644 --- a/utils/MiscUtils.js +++ b/utils/MiscUtils.js @@ -110,6 +110,10 @@ const MiscUtils = { return 'https:' + url.substr(5); } return url; + }, + convertEmToPx(emsize) { + const defaultfontsize = getComputedStyle(document.documentElement).fontSize; + return emsize * parseFloat(defaultfontsize); } }; From 743553c2ec0688f7a384293d864d0f0ff76ad563 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Tue, 20 Feb 2024 16:53:01 +0100 Subject: [PATCH 08/12] Use setRightMargin action --- components/ResizeableWindow.jsx | 9 +++++++-- components/SideBar.jsx | 5 ++++- components/style/AppMenu.css | 2 +- plugins/LoginUser.jsx | 17 +++++++++++++++-- plugins/ZoomButtons.jsx | 5 +++++ 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/components/ResizeableWindow.jsx b/components/ResizeableWindow.jsx index b40f79002..796705f75 100644 --- a/components/ResizeableWindow.jsx +++ b/components/ResizeableWindow.jsx @@ -48,6 +48,7 @@ class ResizeableWindow extends React.Component { onGeometryChanged: PropTypes.func, raiseWindow: PropTypes.func, registerWindow: PropTypes.func, + rightMargin: PropTypes.number, scrollable: PropTypes.bool, setSplitScreen: PropTypes.func, splitScreenWhenDocked: PropTypes.bool, @@ -169,7 +170,10 @@ class ResizeableWindow extends React.Component { "resizeable-window-body-scrollable": this.props.scrollable, "resizeable-window-body-nonscrollable": !this.props.scrollable }); - const style = {display: this.props.visible ? 'initial' : 'none'}; + const style = { + display: this.props.visible ? 'initial' : 'none', + right: 'calc(0.25em + ' + this.props.rightMargin + 'px)' + }; const maximized = this.state.geometry.maximized ? true : false; const minimized = this.state.geometry.minimized ? true : false; const zIndex = this.props.baseZIndex + this.props.windowStacking.findIndex(item => item === this.id); @@ -327,7 +331,8 @@ class ResizeableWindow extends React.Component { export default connect((state) => ({ windowStacking: state.windows.stacking, topbarHeight: state.map.topbarHeight, - bottombarHeight: state.map.bottombarHeight + bottombarHeight: state.map.bottombarHeight, + rightMargin: state.map.rightMargin }), { raiseWindow: raiseWindow, registerWindow: registerWindow, diff --git a/components/SideBar.jsx b/components/SideBar.jsx index 908469f58..081a86ecf 100644 --- a/components/SideBar.jsx +++ b/components/SideBar.jsx @@ -30,6 +30,7 @@ class SideBar extends React.Component { onHide: PropTypes.func, onShow: PropTypes.func, renderWhenHidden: PropTypes.bool, + rightMargin: PropTypes.number, setCurrentTask: PropTypes.func, side: PropTypes.string, title: PropTypes.string, @@ -80,6 +81,7 @@ class SideBar extends React.Component { const render = visible || this.state.render || this.props.renderWhenHidden; const style = { width: this.props.width, + right: 'calc(0.25em + ' + this.props.rightMargin + 'px)', minWidth: this.props.minWidth, zIndex: visible ? 5 : 4 }; @@ -166,7 +168,8 @@ class SideBar extends React.Component { } const selector = (state) => ({ - currentTask: state.task + currentTask: state.task, + rightMargin: state.map.rightMargin }); export default connect(selector, { diff --git a/components/style/AppMenu.css b/components/style/AppMenu.css index b93f98583..a951b10c4 100644 --- a/components/style/AppMenu.css +++ b/components/style/AppMenu.css @@ -14,7 +14,7 @@ div.AppMenu.appmenu-visible { overflow: visible; } -.appmenu-compact div.AppMenu.appmenu-visible { +div.AppMenu.appmenu-visible.appmenu-compact { background: none; } diff --git a/plugins/LoginUser.jsx b/plugins/LoginUser.jsx index 9013949c2..1583501fc 100644 --- a/plugins/LoginUser.jsx +++ b/plugins/LoginUser.jsx @@ -7,6 +7,8 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; +import {connect} from 'react-redux'; import Icon from '../components/Icon'; import ConfigUtils from '../utils/ConfigUtils'; import './style/LoginUser.css'; @@ -15,17 +17,28 @@ import './style/LoginUser.css'; /** * Displays the currently logged in user. */ -export default class LoginUser extends React.Component { +class LoginUser extends React.Component { + static propTypes = { + rightMargin: PropTypes.string + }; render() { const username = ConfigUtils.getConfigProp("username"); + const style = { + right: 'calc(0.25em + ' + this.props.rightMargin + 'px)' + }; if (!username) { return null; } return ( -
    +
    {username}
    ); } } + +export default connect((state) => ({ + rightMargin: state.map.rightMargin +}))(LoginUser); + diff --git a/plugins/ZoomButtons.jsx b/plugins/ZoomButtons.jsx index 4b7351e7f..1a38be9c9 100644 --- a/plugins/ZoomButtons.jsx +++ b/plugins/ZoomButtons.jsx @@ -29,6 +29,11 @@ class ZoomButton extends React.Component { maxZoom: PropTypes.number, /** The position slot index of the map button, from the bottom (0: bottom slot). */ position: PropTypes.number, +<<<<<<< HEAD +======= + rightMargin: PropTypes.number, + splitScreen: PropTypes.object, +>>>>>>> 390fa289 (Use setRightMargin action) theme: PropTypes.object, /** Omit the button in themes matching one of these flags. */ themeFlagBlacklist: PropTypes.arrayOf(PropTypes.string), From bc27264efc8aaf53e75ad4f30ee88ea622486327 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Tue, 20 Feb 2024 16:56:05 +0100 Subject: [PATCH 09/12] Add right-docked splitscreen support for LoginUser plugin --- plugins/LoginUser.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/plugins/LoginUser.jsx b/plugins/LoginUser.jsx index 1583501fc..ada35b404 100644 --- a/plugins/LoginUser.jsx +++ b/plugins/LoginUser.jsx @@ -19,12 +19,15 @@ import './style/LoginUser.css'; */ class LoginUser extends React.Component { static propTypes = { - rightMargin: PropTypes.string + rightMargin: PropTypes.string, + splitScreen: PropTypes.object }; render() { const username = ConfigUtils.getConfigProp("username"); + const splitWindows = Object.values(this.props.splitScreen); + const right = splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0) + this.props.rightMargin; const style = { - right: 'calc(0.25em + ' + this.props.rightMargin + 'px)' + right: 'calc(0.25em + ' + right + 'px)' }; if (!username) { return null; @@ -39,6 +42,7 @@ class LoginUser extends React.Component { } export default connect((state) => ({ - rightMargin: state.map.rightMargin + rightMargin: state.map.rightMargin, + splitScreen: state.windows.splitScreen }))(LoginUser); From f75338e8605153d169acadc61b16992db715d35a Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Wed, 21 Feb 2024 18:13:22 +0100 Subject: [PATCH 10/12] Changes after rebase --- actions/map.js | 8 -------- actions/windows.js | 14 ++++++++++++-- components/AppMenu.jsx | 8 ++++---- components/ResizeableWindow.jsx | 14 +++++++------- components/SideBar.jsx | 6 +++--- plugins/LoginUser.jsx | 9 +++------ plugins/ZoomButtons.jsx | 5 ----- reducers/map.js | 5 +---- reducers/windows.js | 23 ++++++++++++++++++++--- 9 files changed, 50 insertions(+), 42 deletions(-) diff --git a/actions/map.js b/actions/map.js index 3d7c3af78..113ad4b62 100644 --- a/actions/map.js +++ b/actions/map.js @@ -22,7 +22,6 @@ export const CHANGE_ROTATION = 'CHANGE_ROTATION'; export const TOGGLE_MAPTIPS = 'TOGGLE_MAPTIPS'; export const SET_TOPBAR_HEIGHT = 'SET_TOPBAR_HEIGHT'; export const SET_BOTTOMBAR_HEIGHT = 'SET_BOTTOMBAR_HEIGHT'; -export const SET_RIGHT_MARGIN = 'SET_RIGHT_MARGIN'; export const SET_SNAPPING_CONFIG = 'SET_SNAPPING_CONFIG'; export function changeMapView(center, zoom, bbox, size, mapStateSource, projection) { @@ -123,13 +122,6 @@ export function setBottombarHeight(height) { }; } -export function setRightMargin(right) { - return { - type: SET_RIGHT_MARGIN, - right - }; -} - export function setSnappingConfig(enabled, active) { return { type: SET_SNAPPING_CONFIG, diff --git a/actions/windows.js b/actions/windows.js index d12ae14b4..8cce3cffb 100644 --- a/actions/windows.js +++ b/actions/windows.js @@ -17,6 +17,7 @@ export const CLOSE_ALL_WINDOWS = 'CLOSE_ALL_WINDOWS'; export const REGISTER_WINDOW = 'REGISTER_WINDOW'; export const UNREGISTER_WINDOW = 'UNREGISTER_WINDOW'; export const RAISE_WINDOW = 'RAISE_WINDOW'; +export const SET_MENU_MARGIN = 'SET_MENU_MARGIN'; export const SET_SPLIT_SCREEN = 'SET_SPLIT_SCREEN'; export const NotificationType = { @@ -78,11 +79,20 @@ export function raiseWindow(id) { }; } -export function setSplitScreen(windowId, side, size) { +export function setSplitScreen(windowId, side, size, menuMargins) { return { type: SET_SPLIT_SCREEN, windowId: windowId, side: side, - size: size + size: size, + menuMargins: menuMargins + }; +} + +export function setMenuMargin(right, left) { + return { + type: SET_MENU_MARGIN, + right: right, + left: left }; } diff --git a/components/AppMenu.jsx b/components/AppMenu.jsx index 072219397..abc6726c3 100644 --- a/components/AppMenu.jsx +++ b/components/AppMenu.jsx @@ -13,7 +13,7 @@ import mousetrap from 'mousetrap'; import {remove as removeDiacritics} from 'diacritics'; import isEmpty from 'lodash.isempty'; import classnames from 'classnames'; -import {setRightMargin} from '../actions/map'; +import {setMenuMargin} from '../actions/windows'; import {setCurrentTask} from '../actions/task'; import InputContainer from '../components/InputContainer'; import LocaleUtils from '../utils/LocaleUtils'; @@ -38,7 +38,7 @@ class AppMenu extends React.Component { onMenuToggled: PropTypes.func, openExternalUrl: PropTypes.func, setCurrentTask: PropTypes.func, - setRightMargin: PropTypes.func, + setMenuMargin: PropTypes.func, showFilterField: PropTypes.bool, showOnStartup: PropTypes.bool }; @@ -312,7 +312,7 @@ class AppMenu extends React.Component { storeRigthMargin = (el) => { if (this.props.menuCompact && el?.clientWidth > 0) { const rightmargin = el.clientWidth - MiscUtils.convertEmToPx(11.5); - this.props.setRightMargin(rightmargin); + this.props.setMenuMargin(rightmargin, 0); } }; itemAllowed = (item) => { @@ -337,5 +337,5 @@ export default connect((state) => ({ currentTheme: state.theme.current || {} }), { setCurrentTask: setCurrentTask, - setRightMargin: setRightMargin + setMenuMargin: setMenuMargin })(AppMenu); diff --git a/components/ResizeableWindow.jsx b/components/ResizeableWindow.jsx index 796705f75..2e6d69d06 100644 --- a/components/ResizeableWindow.jsx +++ b/components/ResizeableWindow.jsx @@ -41,6 +41,7 @@ class ResizeableWindow extends React.Component { maxHeight: PropTypes.number, maxWidth: PropTypes.number, maximizeable: PropTypes.bool, + menuMargins: PropTypes.object, minHeight: PropTypes.number, minWidth: PropTypes.number, minimizeable: PropTypes.bool, @@ -48,7 +49,6 @@ class ResizeableWindow extends React.Component { onGeometryChanged: PropTypes.func, raiseWindow: PropTypes.func, registerWindow: PropTypes.func, - rightMargin: PropTypes.number, scrollable: PropTypes.bool, setSplitScreen: PropTypes.func, splitScreenWhenDocked: PropTypes.bool, @@ -101,7 +101,7 @@ class ResizeableWindow extends React.Component { if (props.splitScreenWhenDocked && this.state.geometry.docked) { const dockSide = props.dockable === true ? "left" : props.dockable; const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; - props.setSplitScreen(this.id, dockSide, dockSize); + props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); } } computeInitialX = (x) => { @@ -118,7 +118,7 @@ class ResizeableWindow extends React.Component { componentWillUnmount() { this.props.unregisterWindow(this.id); if (this.props.splitScreenWhenDocked) { - this.props.setSplitScreen(this.id, null); + this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); } } componentDidUpdate(prevProps, prevState) { @@ -136,11 +136,11 @@ class ResizeableWindow extends React.Component { (!this.props.visible && prevProps.visible) || (this.state.geometry.docked === false && prevState.geometry.docked !== false) ) { - this.props.setSplitScreen(this.id, null); + this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); } else if (this.props.visible && this.state.geometry.docked) { const dockSide = this.props.dockable === true ? "left" : this.props.dockable; const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; - this.props.setSplitScreen(this.id, dockSide, dockSize); + this.props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); } } } @@ -172,7 +172,7 @@ class ResizeableWindow extends React.Component { }); const style = { display: this.props.visible ? 'initial' : 'none', - right: 'calc(0.25em + ' + this.props.rightMargin + 'px)' + right: 'calc(0.25em + ' + this.props.menuMargins.right + 'px)' }; const maximized = this.state.geometry.maximized ? true : false; const minimized = this.state.geometry.minimized ? true : false; @@ -332,7 +332,7 @@ export default connect((state) => ({ windowStacking: state.windows.stacking, topbarHeight: state.map.topbarHeight, bottombarHeight: state.map.bottombarHeight, - rightMargin: state.map.rightMargin + menuMargins: state.windows.menuMargins }), { raiseWindow: raiseWindow, registerWindow: registerWindow, diff --git a/components/SideBar.jsx b/components/SideBar.jsx index 081a86ecf..a8ef661b4 100644 --- a/components/SideBar.jsx +++ b/components/SideBar.jsx @@ -26,11 +26,11 @@ class SideBar extends React.Component { heightResizeable: PropTypes.bool, icon: PropTypes.string, id: PropTypes.string.isRequired, + menuMargins: PropTypes.object, minWidth: PropTypes.string, onHide: PropTypes.func, onShow: PropTypes.func, renderWhenHidden: PropTypes.bool, - rightMargin: PropTypes.number, setCurrentTask: PropTypes.func, side: PropTypes.string, title: PropTypes.string, @@ -81,7 +81,7 @@ class SideBar extends React.Component { const render = visible || this.state.render || this.props.renderWhenHidden; const style = { width: this.props.width, - right: 'calc(0.25em + ' + this.props.rightMargin + 'px)', + right: visible ? 'calc(0.25em + ' + this.props.menuMargins.right + 'px)' : 0, minWidth: this.props.minWidth, zIndex: visible ? 5 : 4 }; @@ -169,7 +169,7 @@ class SideBar extends React.Component { const selector = (state) => ({ currentTask: state.task, - rightMargin: state.map.rightMargin + menuMargins: state.windows.menuMargins }); export default connect(selector, { diff --git a/plugins/LoginUser.jsx b/plugins/LoginUser.jsx index ada35b404..e36e1744e 100644 --- a/plugins/LoginUser.jsx +++ b/plugins/LoginUser.jsx @@ -19,13 +19,11 @@ import './style/LoginUser.css'; */ class LoginUser extends React.Component { static propTypes = { - rightMargin: PropTypes.string, - splitScreen: PropTypes.object + mapMargins: PropTypes.object }; render() { const username = ConfigUtils.getConfigProp("username"); - const splitWindows = Object.values(this.props.splitScreen); - const right = splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0) + this.props.rightMargin; + const right = this.props.mapMargins.right; const style = { right: 'calc(0.25em + ' + right + 'px)' }; @@ -42,7 +40,6 @@ class LoginUser extends React.Component { } export default connect((state) => ({ - rightMargin: state.map.rightMargin, - splitScreen: state.windows.splitScreen + mapMargins: state.windows.mapMargins }))(LoginUser); diff --git a/plugins/ZoomButtons.jsx b/plugins/ZoomButtons.jsx index 1a38be9c9..4b7351e7f 100644 --- a/plugins/ZoomButtons.jsx +++ b/plugins/ZoomButtons.jsx @@ -29,11 +29,6 @@ class ZoomButton extends React.Component { maxZoom: PropTypes.number, /** The position slot index of the map button, from the bottom (0: bottom slot). */ position: PropTypes.number, -<<<<<<< HEAD -======= - rightMargin: PropTypes.number, - splitScreen: PropTypes.object, ->>>>>>> 390fa289 (Use setRightMargin action) theme: PropTypes.object, /** Omit the button in themes matching one of these flags. */ themeFlagBlacklist: PropTypes.arrayOf(PropTypes.string), diff --git a/reducers/map.js b/reducers/map.js index 8df83be13..2553ef6b3 100644 --- a/reducers/map.js +++ b/reducers/map.js @@ -9,7 +9,7 @@ import { CHANGE_MAP_VIEW, CONFIGURE_MAP, CHANGE_ZOOM_LVL, ZOOM_TO_EXTENT, ZOOM_TO_POINT, - PAN_TO, CHANGE_ROTATION, CLICK_ON_MAP, TOGGLE_MAPTIPS, SET_TOPBAR_HEIGHT, SET_BOTTOMBAR_HEIGHT, SET_RIGHT_MARGIN, SET_SNAPPING_CONFIG + PAN_TO, CHANGE_ROTATION, CLICK_ON_MAP, TOGGLE_MAPTIPS, SET_TOPBAR_HEIGHT, SET_BOTTOMBAR_HEIGHT, SET_SNAPPING_CONFIG } from '../actions/map'; import isEmpty from 'lodash.isempty'; import MapUtils from '../utils/MapUtils'; @@ -141,9 +141,6 @@ export default function map(state = defaultState, action) { case SET_BOTTOMBAR_HEIGHT: { return {...state, bottombarHeight: action.height}; } - case SET_RIGHT_MARGIN: { - return {...state, rightMargin: action.right}; - } case SET_SNAPPING_CONFIG: { return {...state, snapping: {enabled: action.enabled, active: action.active}}; } diff --git a/reducers/windows.js b/reducers/windows.js index 87a2d37f7..f6b338e89 100644 --- a/reducers/windows.js +++ b/reducers/windows.js @@ -14,7 +14,8 @@ import { REGISTER_WINDOW, UNREGISTER_WINDOW, RAISE_WINDOW, - SET_SPLIT_SCREEN + SET_SPLIT_SCREEN, + SET_MENU_MARGIN } from '../actions/windows'; const defaultState = { @@ -23,6 +24,9 @@ const defaultState = { mapMargins: { left: 0, top: 0, right: 0, bottom: 0 }, + menuMargins: { + left: 0, right: 0 + }, entries: {} }; @@ -95,9 +99,9 @@ export default function windows(state = defaultState, action) { } const splitWindows = Object.values(newSplitScreen); const mapMargins = { - right: splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0), + right: splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0) + action.menuMargins.right, bottom: splitWindows.filter(entry => entry.side === 'bottom').reduce((res, e) => Math.max(e.size, res), 0), - left: splitWindows.filter(entry => entry.side === 'left').reduce((res, e) => Math.max(e.size, res), 0), + left: splitWindows.filter(entry => entry.side === 'left').reduce((res, e) => Math.max(e.size, res), 0) + action.menuMargins.left, top: splitWindows.filter(entry => entry.side === 'top').reduce((res, e) => Math.max(e.size, res), 0) }; return { @@ -106,6 +110,19 @@ export default function windows(state = defaultState, action) { mapMargins: mapMargins }; } + case SET_MENU_MARGIN: { + const menuMargins = { + right: action.right, + left: action.left + }; + const mapMargins = { + right: action.right, + bottom: 0, + left: action.left, + top: 0 + }; + return {...state, menuMargins: menuMargins, mapMargins: mapMargins}; + } default: return state; } From 714416141d0eaa29c75cec090a7e4cb4765519e3 Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Thu, 22 Feb 2024 11:34:38 +0100 Subject: [PATCH 11/12] Remove Event listener with menu kept opened --- components/AppMenu.jsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/components/AppMenu.jsx b/components/AppMenu.jsx index abc6726c3..455d84639 100644 --- a/components/AppMenu.jsx +++ b/components/AppMenu.jsx @@ -171,18 +171,14 @@ class AppMenu extends React.Component { if (!this.state.menuVisible && this.props.appMenuClearsTask) { this.props.setCurrentTask(null); } - if (!this.state.menuVisible) { + if (this.state.menuVisible || this.props.keepMenuOpen) { + document.removeEventListener('click', this.checkCloseMenu); + document.removeEventListener('keydown', this.onKeyPress, true); + document.removeEventListener('mousemove', this.onMouseMove, true); + } else { document.addEventListener('click', this.checkCloseMenu); document.addEventListener('keydown', this.onKeyPress, true); document.addEventListener('mousemove', this.onMouseMove, true); - } else { - if (this.props.keepMenuOpen) { - return; - } else { - document.removeEventListener('click', this.checkCloseMenu); - document.removeEventListener('keydown', this.onKeyPress, true); - document.removeEventListener('mousemove', this.onMouseMove, true); - } } this.props.onMenuToggled(!this.state.menuVisible); this.setState((state) => ({menuVisible: !state.menuVisible, submenusVisible: [], filter: ""})); From 68b103c084317065af6357f5feed311296dc684d Mon Sep 17 00:00:00 2001 From: Gwendoline Andres Date: Tue, 27 Feb 2024 17:36:47 +0100 Subject: [PATCH 12/12] Review --- actions/windows.js | 5 ++--- components/AppMenu.jsx | 22 ++++++++++++---------- components/ResizeableWindow.jsx | 8 ++++---- reducers/map.js | 1 - reducers/windows.js | 12 ++++++------ 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/actions/windows.js b/actions/windows.js index 8cce3cffb..e2b00e063 100644 --- a/actions/windows.js +++ b/actions/windows.js @@ -79,13 +79,12 @@ export function raiseWindow(id) { }; } -export function setSplitScreen(windowId, side, size, menuMargins) { +export function setSplitScreen(windowId, side, size) { return { type: SET_SPLIT_SCREEN, windowId: windowId, side: side, - size: size, - menuMargins: menuMargins + size: size }; } diff --git a/components/AppMenu.jsx b/components/AppMenu.jsx index 455d84639..285f6bb73 100644 --- a/components/AppMenu.jsx +++ b/components/AppMenu.jsx @@ -171,14 +171,16 @@ class AppMenu extends React.Component { if (!this.state.menuVisible && this.props.appMenuClearsTask) { this.props.setCurrentTask(null); } - if (this.state.menuVisible || this.props.keepMenuOpen) { - document.removeEventListener('click', this.checkCloseMenu); - document.removeEventListener('keydown', this.onKeyPress, true); - document.removeEventListener('mousemove', this.onMouseMove, true); - } else { - document.addEventListener('click', this.checkCloseMenu); - document.addEventListener('keydown', this.onKeyPress, true); - document.addEventListener('mousemove', this.onMouseMove, true); + if (!this.props.keepMenuOpen) { + if (!this.state.menuVisible) { + document.addEventListener('click', this.checkCloseMenu); + document.addEventListener('keydown', this.onKeyPress, true); + document.addEventListener('mousemove', this.onMouseMove, true); + } else { + document.removeEventListener('click', this.checkCloseMenu); + document.removeEventListener('keydown', this.onKeyPress, true); + document.removeEventListener('mousemove', this.onMouseMove, true); + } } this.props.onMenuToggled(!this.state.menuVisible); this.setState((state) => ({menuVisible: !state.menuVisible, submenusVisible: [], filter: ""})); @@ -278,7 +280,7 @@ class AppMenu extends React.Component {
    {this.props.buttonContents}
    -
    +
      {this.props.showFilterField ? (
    • @@ -305,7 +307,7 @@ class AppMenu extends React.Component { mousetrap(el).bind(this.props.appMenuShortcut, this.toggleMenu); } }; - storeRigthMargin = (el) => { + storeRightMargin = (el) => { if (this.props.menuCompact && el?.clientWidth > 0) { const rightmargin = el.clientWidth - MiscUtils.convertEmToPx(11.5); this.props.setMenuMargin(rightmargin, 0); diff --git a/components/ResizeableWindow.jsx b/components/ResizeableWindow.jsx index 2e6d69d06..8c75bf8d5 100644 --- a/components/ResizeableWindow.jsx +++ b/components/ResizeableWindow.jsx @@ -101,7 +101,7 @@ class ResizeableWindow extends React.Component { if (props.splitScreenWhenDocked && this.state.geometry.docked) { const dockSide = props.dockable === true ? "left" : props.dockable; const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; - props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); + props.setSplitScreen(this.id, dockSide, dockSize); } } computeInitialX = (x) => { @@ -118,7 +118,7 @@ class ResizeableWindow extends React.Component { componentWillUnmount() { this.props.unregisterWindow(this.id); if (this.props.splitScreenWhenDocked) { - this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); + this.props.setSplitScreen(this.id, null, null); } } componentDidUpdate(prevProps, prevState) { @@ -136,11 +136,11 @@ class ResizeableWindow extends React.Component { (!this.props.visible && prevProps.visible) || (this.state.geometry.docked === false && prevState.geometry.docked !== false) ) { - this.props.setSplitScreen(this.id, null, null, this.props.menuMargins); + this.props.setSplitScreen(this.id, null, null); } else if (this.props.visible && this.state.geometry.docked) { const dockSide = this.props.dockable === true ? "left" : this.props.dockable; const dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height; - this.props.setSplitScreen(this.id, dockSide, dockSize, this.props.menuMargins); + this.props.setSplitScreen(this.id, dockSide, dockSize); } } } diff --git a/reducers/map.js b/reducers/map.js index 2553ef6b3..e56c76825 100644 --- a/reducers/map.js +++ b/reducers/map.js @@ -27,7 +27,6 @@ const defaultState = { resolutions: [0], topbarHeight: 0, bottombarHeight: 0, - rightMargin: 0, click: null, snapping: { enabled: false, diff --git a/reducers/windows.js b/reducers/windows.js index f6b338e89..8544fa02e 100644 --- a/reducers/windows.js +++ b/reducers/windows.js @@ -99,9 +99,9 @@ export default function windows(state = defaultState, action) { } const splitWindows = Object.values(newSplitScreen); const mapMargins = { - right: splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0) + action.menuMargins.right, + right: splitWindows.filter(entry => entry.side === 'right').reduce((res, e) => Math.max(e.size, res), 0) + state.menuMargins.right, bottom: splitWindows.filter(entry => entry.side === 'bottom').reduce((res, e) => Math.max(e.size, res), 0), - left: splitWindows.filter(entry => entry.side === 'left').reduce((res, e) => Math.max(e.size, res), 0) + action.menuMargins.left, + left: splitWindows.filter(entry => entry.side === 'left').reduce((res, e) => Math.max(e.size, res), 0) + state.menuMargins.left, top: splitWindows.filter(entry => entry.side === 'top').reduce((res, e) => Math.max(e.size, res), 0) }; return { @@ -116,10 +116,10 @@ export default function windows(state = defaultState, action) { left: action.left }; const mapMargins = { - right: action.right, - bottom: 0, - left: action.left, - top: 0 + right: state.mapMargins.right + action.right, + bottom: state.mapMargins.bottom, + left: state.mapMargins.left + action.left, + top: state.mapMargins.top }; return {...state, menuMargins: menuMargins, mapMargins: mapMargins}; }