Merge pull request #3511 from Vizzuality/feature/analysis-moving

feature/analysis-moving
wri · Jul 12, 2018 · 7e89938 · 7e89938
2 parents 831382f + c02617a
commit 7e89938
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/app/javascript/pages/map/data-analysis-menu/component.jsx b/app/javascript/pages/map/data-analysis-menu/component.jsx
@@ -19,7 +19,8 @@ class DataAnalysisMenu extends PureComponent {
       activeTab = 'data',
       layerGroups,
       legendLoading,
-      analysis
+      analysis,
+      menuSectionData
     } = this.props;
     const links = [
       {
@@ -35,9 +36,14 @@ class DataAnalysisMenu extends PureComponent {
         active: activeTab === 'analysis'
       }
     ];
+    const relocateClass = menuSectionData
+      ? `-relocate${menuSectionData.bigFlap ? '-big' : ''}`
+      : '';
 
     return (
-      <div className={`c-data-analysis-menu ${className || ''}`}>
+      <div
+        className={`c-data-analysis-menu ${className || ''} ${relocateClass}`}
+      >
         <SubNavMenu
           className="nav"
           theme="theme-subnav-plain"
@@ -76,7 +82,8 @@ DataAnalysisMenu.propTypes = {
   activeTab: PropTypes.string,
   className: PropTypes.string,
   legendLoading: PropTypes.bool,
-  analysis: PropTypes.object
+  analysis: PropTypes.object,
+  menuSectionData: PropTypes.object
 };
 
 export default DataAnalysisMenu;
diff --git a/app/javascript/pages/map/data-analysis-menu/data-analysis-menu.js b/app/javascript/pages/map/data-analysis-menu/data-analysis-menu.js
@@ -3,18 +3,23 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 
+import { getSectionData } from 'pages/map/menu/menu-selectors';
 import { getActiveLayers } from './selectors';
 import actions from './actions';
 import reducers, { initialState } from './reducers';
 
 import Component from './component';
 
-const mapStateToProps = ({ location, datasets, dataAnalysis }) => ({
-  layerGroups: getActiveLayers({ datasets: datasets.data }),
-  activeTab: location.payload.tab,
-  legendLoading: datasets.loading,
-  analysis: dataAnalysis.analysis
-});
+const mapStateToProps = ({ location, datasets, dataAnalysis, mapMenu }) => {
+  const { selectedSection } = mapMenu;
+  return {
+    layerGroups: getActiveLayers({ datasets: datasets.data }),
+    activeTab: location.payload.tab,
+    legendLoading: datasets.loading,
+    analysis: dataAnalysis.analysis,
+    menuSectionData: getSectionData({ selectedSection })
+  };
+};
 
 class DataAnalysisMenuContainer extends PureComponent {
   componentWillReceiveProps(nextProps) {

diff --git a/app/javascript/pages/map/data-analysis-menu/styles.scss b/app/javascript/pages/map/data-analysis-menu/styles.scss
@@ -6,6 +6,15 @@
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
   background: $white;
   z-index: 12;
+  transition: transform 0.3s linear;
+
+  &.-relocate {
+    transform: translateX(292px);
+  }
+
+  &.-relocate-big {
+    transform: translateX(552px);
+  }
 
   .legend {
     position: relative;

diff --git a/app/javascript/pages/map/menu/menu-component.jsx b/app/javascript/pages/map/menu/menu-component.jsx
@@ -64,9 +64,7 @@ class Menu extends PureComponent {
         <MenuFlap
           section={selectedSection}
           Component={sectionData ? sectionData.Component : null}
-          isBig={
-            sectionData && sectionData.bigFlap ? sectionData.bigFlap : false
-          }
+          isBig={(sectionData && sectionData.bigFlap) || false}
           onClickClose={() => setSelectedSection(null)}
         />
       </div>