Fix #11304 Improving timeline layout

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

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' : ''}`}>
 

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,17 +147,19 @@ 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
     mapPropsStream(props$ => props$
         .merge(
             props$
                 .distinctUntilKeyChanged('hasCollapsedWidgets')
-                .do(({ setExpanded = () => { }, hasCollapsedWidgets }) => setExpanded(hasCollapsedWidgets))
+                .do(({ setExpandWidgets = () => { }, hasCollapsedWidgets }) => setExpandWidgets(hasCollapsedWidgets))
                 .ignoreElements()
         )
     ),

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

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