Fix #11304 Improve the layout of the timeline plugin by putting widgets tray in footer (#11844) (#11850)

(cherry picked from commit f9a698e)

Co-authored-by: Sovas Tiwari <40485930+subashtiwari1010@users.noreply.github.com>

Author: offtherailz

web/client/plugins/MousePosition.jsx

@@ -146,7 +146,7 @@ export default {
     MousePositionPlugin: Object.assign(MousePositionPlugin, {
         MapFooter: {
             name: 'mousePosition',
-            position: 2,
+            position: 3,
             target: 'right-footer',
             priority: 1
         }

web/client/plugins/ScaleBox.jsx

@@ -60,7 +60,7 @@ export default {
     }, {
         MapFooter: {
             name: 'scale',
-            position: 1,
+            position: 2,
             target: 'right-footer',
             priority: 1
         }

web/client/plugins/WidgetsTray.jsx

@@ -10,6 +10,7 @@
 import WidgetsTray from './widgets/WidgetsTray';
 import autoDisableWidgets from './widgets/autoDisableWidgets';
 import epics from '../epics/widgetsTray';
+import { createPlugin } from '../utils/PluginsUtils';
 
 /**
  * Plugin that allow to collapse widgets. Shows a small tray where to see the collapsed plugins list.
@@ -18,7 +19,15 @@ import epics from '../epics/widgetsTray';
  * @prop {boolean|string|array} [toolsOptions.seeHidden] hides the widgets under particular conditions. **Must** be the same of rule of the Widget plugin. @see plugins.Widgets.
  * @class
  */
-export default {
-    WidgetsTrayPlugin: autoDisableWidgets(WidgetsTray),
+export default createPlugin("WidgetsTrayPlugin", {
+    component: autoDisableWidgets(WidgetsTray),
+    containers: {
+        MapFooter: {
+            name: 'widgetsTray',
+            position: 1,
+            target: 'right-footer',
+            priority: 1
+        }
+    },
     epics
-};
+});

web/client/plugins/widgets/WidgetsTray.jsx

@@ -96,14 +96,16 @@ class WidgetsTray extends React.Component {
     render() {
         return this.props.enabled
             ? (<div className="widgets-tray"
-                style={{
-                    marginBottom: this.props.isMobileAgent && !this.props.is3DMap ? 60 : 2,
+                style={this.props.isMobileAgent ? {
+                    marginBottom: !this.props.is3DMap ? 60 : 2,
                     marginRight: (this.props.layout?.right ?? 0) + 65,
                     bottom: 0,
                     right: 0,
-                    position: "absolute"
-                }}>
+                    position: "absolute",
+                    zIndex: 1000
+                } : {}}>
                 <BorderLayout
+                    style={{ width: 'auto' }}
                     columns={[
                         ...( !this.props.isSingleWidgetLayout
                             ? [<CollapseTrayButton key="collapse-tray" toolsOptions={this.props.toolsOptions} expanded={this.props.expanded} onClick={() => this.props.setExpanded(!this.props.expanded)} />]
@@ -137,9 +139,9 @@ export default compose(
         hasCollapsedWidgets: widgets.filter(({ collapsed } = {}) => collapsed).length > 0,
         hasTrayWidgets: widgets.length > 0
     })),
-    withProps(({ isMobileAgent, width, singleWidgetLayoutBreakpoint = 1024 }) => {
+    withProps(({ isMobileAgent }) => {
         return {
-            isSingleWidgetLayout: isMobileAgent || width <= singleWidgetLayoutBreakpoint
+            isSingleWidgetLayout: isMobileAgent
         };
     }),
     // flag of plugin presence

web/client/themes/default/less/widget.less

@@ -478,9 +478,7 @@
 }
 
 .widgets-tray {
-    .shadow-soft;
     padding: 4px;
-    z-index: 1000;
     .widgets-bar {
         > span {
             button.btn {
@@ -493,6 +491,10 @@
             border-right: 1px solid @ms-main-border-color;
         }
     }
+    .ms2-border-layout-body,
+    .ms2-border-layout-content {
+        flex: none !important;
+    }
 }
 
 .mapstore-chart-advance-options {