diff --git a/web/client/actions/widgets.js b/web/client/actions/widgets.js index ae76e2c2b9..62c34af5e1 100644 --- a/web/client/actions/widgets.js +++ b/web/client/actions/widgets.js @@ -43,6 +43,7 @@ export const TOGGLE_COLLAPSE = "WIDGET:TOGGLE_COLLAPSE"; export const TOGGLE_COLLAPSE_ALL = "WIDGET:TOGGLE_COLLAPSE_ALL"; export const TOGGLE_MAXIMIZE = "WIDGET:TOGGLE_MAXIMIZE"; export const TOGGLE_TRAY = "WIDGET:TOGGLE_TRAY"; +export const EXPAND_TRAY = "WIDGET:EXPAND_TRAY"; /** * Intent to create a new Widgets @@ -320,3 +321,9 @@ export const toggleMaximize = (widget, target = DEFAULT_TARGET) => ({ * @param {boolean} value true the tray is present, false if it is not present */ export const toggleTray = value => ({ type: TOGGLE_TRAY, value}); + +/** + * Toggles the content of the widgets tray. + * @param {boolean} value true the widget tray is expanded, false if it is not expanded + */ +export const expandTray = value => ({ type: EXPAND_TRAY, value}); diff --git a/web/client/plugins/Timeline.jsx b/web/client/plugins/Timeline.jsx index c1180b8390..1c1af3415e 100644 --- a/web/client/plugins/Timeline.jsx +++ b/web/client/plugins/Timeline.jsx @@ -54,6 +54,7 @@ import TimelineToggle from './timeline/TimelineToggle'; import ButtonRB from '../components/misc/Button'; import { isTimelineVisible } from "../utils/LayersUtils"; import Loader from '../components/misc/Loader'; +import { getExpandedTray } from '../selectors/widgets'; const Button = tooltip(ButtonRB); @@ -103,7 +104,8 @@ const TimelinePlugin = compose( rangeSelector, (state) => state.timeline?.loader !== undefined, selectedLayerSelector, - (visible, layers, currentTime, currentTimeRange, offsetEnabled, playbackRange, status, viewRange, timelineIsReady, selectedLayer) => ({ + getExpandedTray, + (visible, layers, currentTime, currentTimeRange, offsetEnabled, playbackRange, status, viewRange, timelineIsReady, selectedLayer, expandedWidgetTray) => ({ visible, layers, currentTime, @@ -113,7 +115,8 @@ const TimelinePlugin = compose( status, viewRange, timelineIsReady, - selectedLayer + selectedLayer, + expandedWidgetTray }) ), { setCurrentTime: selectTime, @@ -129,6 +132,7 @@ const TimelinePlugin = compose( withState('options', 'setOptions', ({expandedPanel}) => { return { collapsed: !expandedPanel }; }), + withState('rightOffset', 'setRightOffset', 0), // add mapSync button handler and value connect( createSelector(isMapSync, mapSync => ({mapSync})), @@ -156,8 +160,8 @@ const TimelinePlugin = compose( endValuesSupport: undefined, style: { marginBottom: 35, - marginLeft: 100, - marginRight: 80 + marginLeft: 55, + marginRight: 55 } }), // get info about expand, collapse panel @@ -218,7 +222,10 @@ const TimelinePlugin = compose( initialSnap = 'now', resetButton, reset = () => {}, - selectedLayer + selectedLayer, + rightOffset, + setRightOffset, + expandedWidgetTray }) => { useEffect(()=>{ // update state with configs coming from configuration file like localConfig.json so that can be used as props initializer @@ -227,6 +234,16 @@ const TimelinePlugin = compose( const { hideLayersName, collapsed } = options; + useEffect(() => { + if (collapsed) return; + const widgetsTrayElement = document.querySelector('.widgets-tray'); + if (widgetsTrayElement) { + const dims = widgetsTrayElement.getBoundingClientRect(); + // set the right offset to the left of the widgets tray with some margin to avoid overlap + setRightOffset(window.innerWidth - dims.left - style.marginRight + 10); + } + }, [collapsed, style, expandedWidgetTray]); + const playbackItem = head(items && items.filter(item => item.name === 'playback')); const Playback = playbackItem && playbackItem.plugin; @@ -266,7 +283,7 @@ const TimelinePlugin = compose( marginBottom: 35, marginLeft: 100, ...style, - right: collapsed ? 'auto' : (style.right || 0) + right: collapsed ? 'auto' : (rightOffset || style.right || 0) }} className={`timeline-plugin${hideLayersName ? ' hide-layers-name' : ''}${offsetEnabled ? ' with-time-offset' : ''} ${!isTimelineVisible(layers) ? 'hidden' : ''}`}> diff --git a/web/client/plugins/widgets/WidgetsTray.jsx b/web/client/plugins/widgets/WidgetsTray.jsx index f7cb79a639..13c4aecdfa 100644 --- a/web/client/plugins/widgets/WidgetsTray.jsx +++ b/web/client/plugins/widgets/WidgetsTray.jsx @@ -9,12 +9,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { compose, withProps, withState, lifecycle, mapPropsStream } from 'recompose'; +import { compose, withProps, lifecycle, mapPropsStream } from 'recompose'; import { createSelector } from 'reselect'; import tooltip from '../../components/misc/enhancers/tooltip'; import { Glyphicon } from 'react-bootstrap'; -import { getVisibleFloatingWidgets } from '../../selectors/widgets'; -import { toggleCollapseAll, toggleTray } from '../../actions/widgets'; +import { getExpandedTray, getVisibleFloatingWidgets } from '../../selectors/widgets'; +import { expandTray, toggleCollapseAll, toggleTray } from '../../actions/widgets'; import { trayWidgets } from '../../selectors/widgetsTray'; import { filterHiddenWidgets } from './widgetsPermission'; import BorderLayout from '../../components/layout/BorderLayout'; @@ -122,15 +122,16 @@ class WidgetsTray extends React.Component { export default compose( withContainerDimensions, - withState("expanded", "setExpanded", false), connect(createSelector( trayWidgets, state => state.browser && state.browser.mobile, (state) => mapLayoutValuesSelector(state, { right: true }), is3DMode, - (widgets, isMobileAgent, layout = [], is3DMap) => ({ widgets, layout, isMobileAgent, is3DMap }) + getExpandedTray, + (widgets, isMobileAgent, layout = [], is3DMap, expanded) => ({ widgets, layout, isMobileAgent, is3DMap, expanded }) ), { - toggleTray + toggleTray, + setExpanded: expandTray }), filterHiddenWidgets, withProps(({ widgets = [] }) => ({ @@ -146,9 +147,11 @@ export default compose( lifecycle({ componentDidMount() { if (this.props.toggleTray) this.props.toggleTray(true); + if (this.props.setExpanded) this.props.setExpanded(true); }, componentWillUnmount() { if (this.props.toggleTray) this.props.toggleTray(false); + if (this.props.setExpanded) this.props.setExpanded(false); } }), // expand icons when one widget has been collapsed, collapse icons when no items collapsed anymore @@ -156,7 +159,7 @@ export default compose( .merge( props$ .distinctUntilKeyChanged('hasCollapsedWidgets') - .do(({ setExpanded = () => { }, hasCollapsedWidgets }) => setExpanded(hasCollapsedWidgets)) + .do(({ setExpandWidgets = () => { }, hasCollapsedWidgets }) => setExpandWidgets(hasCollapsedWidgets)) .ignoreElements() ) ), diff --git a/web/client/reducers/widgets.js b/web/client/reducers/widgets.js index 760f20f47d..2d6dd1a2b2 100644 --- a/web/client/reducers/widgets.js +++ b/web/client/reducers/widgets.js @@ -30,7 +30,8 @@ import { TOGGLE_TRAY, toggleCollapse, REPLACE, - WIDGETS_REGEX + WIDGETS_REGEX, + EXPAND_TRAY } from '../actions/widgets'; import { REFRESH_SECURITY_LAYERS, CLEAR_SECURITY } from '../actions/security'; import { MAP_CONFIG_LOADED } from '../actions/config'; @@ -59,7 +60,8 @@ const emptyState = { settings: { step: 0 } - } + }, + expanded: true }; @@ -447,6 +449,9 @@ function widgetsReducer(state = emptyState, action) { case TOGGLE_TRAY: { return set('tray', action.value, state); } + case EXPAND_TRAY: { + return set('expanded', action.value, state); + } default: return state; } diff --git a/web/client/selectors/widgets.js b/web/client/selectors/widgets.js index 4a902b5ba4..2d2af34de4 100644 --- a/web/client/selectors/widgets.js +++ b/web/client/selectors/widgets.js @@ -193,3 +193,5 @@ export const getTblWidgetZoomLoader = state => { let tableWidgets = (getFloatingWidgets(state) || []).filter(({ widgetType } = {}) => widgetType === "table"); return tableWidgets?.find(t=>t.dependencies?.zoomLoader) ? true : false; }; + +export const getExpandedTray = state => get(state, "widgets.expanded");