Merge pull request #4069 from Vizzuality/feature/gfw-overflow-menu-on…

…-u-areas Feature/gfw overflow menu on user areas
wri · Aug 21, 2020 · fb0866f · fb0866f
2 parents d544ca9 + 6fa7cdd
commit fb0866f
Show file tree

Hide file tree

Showing 18 changed files with 326 additions and 117 deletions.
diff --git a/assets/icons/dashboard.svg b/assets/icons/dashboard.svg
diff --git a/assets/icons/overflow-menu.svg b/assets/icons/overflow-menu.svg
diff --git a/components/analysis/components/chose-analysis/component.jsx b/components/analysis/components/chose-analysis/component.jsx
@@ -148,7 +148,7 @@ class ChoseAnalysis extends PureComponent {
           {!hasError && !uploading && (
             <Fragment>
               <p>
-                Drag and drop your 
+                Drag and drop your
                 {' '}
                 <b>polygon data file</b>
                 {' '}

diff --git a/components/aoi-card/styles.scss b/components/aoi-card/styles.scss
@@ -175,6 +175,7 @@
       font-size: rem(14px);
       margin-bottom: 0;
       padding-bottom: rem(5px);
+      padding-right: rem(5px);
       line-height: 1.4;
     }
   }

diff --git a/components/map-menu/components/sections/my-gfw/component.jsx b/components/map-menu/components/sections/my-gfw/component.jsx
@@ -19,12 +19,16 @@ import Paginate from 'components/paginate';
 import ConfirmSubscriptionModal from 'components/modals/confirm-subscription';
 
 import editIcon from 'assets/icons/edit.svg?sprite';
+import shareIcon from 'assets/icons/share.svg?sprite';
+import dashboardIcon from 'assets/icons/dashboard.svg?sprite';
 import logoutIcon from 'assets/icons/logout.svg?sprite';
 import screenImg1x from 'assets/images/aois/aoi-dashboard.png';
 import screenImg2x from 'assets/images/aois/[email protected]';
 
 import './styles.scss';
 
+const isServer = typeof window === 'undefined';
+
 class MapMenuMyGFW extends PureComponent {
   static propTypes = {
     isDesktop: PropTypes.bool,
@@ -39,6 +43,7 @@ class MapMenuMyGFW extends PureComponent {
     loading: PropTypes.bool,
     userData: PropTypes.object,
     setMapPromptsSettings: PropTypes.func,
+    setShareModal: PropTypes.func,
   };
 
   state = {
@@ -126,14 +131,80 @@ class MapMenuMyGFW extends PureComponent {
     );
   }
 
+  renderAoiActions() {
+    const { setShareModal, activeArea, onEditClick } = this.props;
+
+    const btnTheme = cx(
+      'theme-button-clear theme-button-clear-underline theme-button-small'
+    );
+
+    return (
+      <Dropdown
+        layout="overflow-menu"
+        className="edit-button"
+        onChange={this.handleAreaActions}
+        theme={cx('theme-button-medium theme-dropdown-no-border small square')}
+        options={[
+          {
+            value: 'open_dashboard',
+            component: (
+              <Button
+                theme={btnTheme}
+                link={activeArea && `/dashboards/aoi/${activeArea.id}`}
+              >
+                <Icon icon={dashboardIcon} />
+                Open Dashboard
+              </Button>
+            ),
+          },
+          {
+            value: 'edit_area',
+            component: (
+              <Button
+                theme={btnTheme}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onEditClick({ open: true });
+                }}
+              >
+                <Icon icon={editIcon} />
+                Edit area
+              </Button>
+            ),
+          },
+          {
+            value: 'share_area',
+            component: (
+              <Button
+                theme={btnTheme}
+                onClick={() =>
+                  setShareModal({
+                    title: 'Share this view',
+                    shareUrl:
+                      !isServer &&
+                      (window.location.href.includes('embed')
+                        ? window.location.href.replace('/embed', '')
+                        : window.location.href),
+                    embedUrl:
+                      !isServer &&
+                      (window.location.href.includes('embed')
+                        ? window.location.href
+                        : window.location.href.replace('/map', '/embed/map')),
+                  })}
+              >
+                <Icon icon={shareIcon} />
+                Share area
+              </Button>
+            ),
+          },
+        ]}
+      />
+    );
+  }
+
   renderAreas() {
-    const {
-      isDesktop,
-      activeArea,
-      viewArea,
-      onEditClick,
-      areas: allAreas,
-    } = this.props;
+    const { isDesktop, activeArea, viewArea, areas: allAreas } = this.props;
     const {
       activeTags,
       areas,
@@ -165,6 +236,7 @@ class MapMenuMyGFW extends PureComponent {
               ))}
             {unselectedTags && !!unselectedTags.length && (
               <Dropdown
+                alignMenuRight
                 className="aoi-tags-dropdown"
                 theme="theme-dropdown-button theme-dropdown-button-small"
                 placeholder={
@@ -214,19 +286,7 @@ class MapMenuMyGFW extends PureComponent {
                     key={area.id}
                   >
                     <AoICard index={i} {...area} simple />
-                    {active && (
-                      <Button
-                        className="edit-button"
-                        theme="square theme-button-clear"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onEditClick({ open: true });
-                        }}
-                      >
-                        <Icon icon={editIcon} className="info-icon" />
-                      </Button>
-                    )}
+                    {active && this.renderAoiActions()}
                   </div>
                 );
               })}

diff --git a/components/map-menu/components/sections/my-gfw/index.js b/components/map-menu/components/sections/my-gfw/index.js
@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import { viewArea } from 'providers/areas-provider/actions';
 import { setAreaOfInterestModalSettings } from 'components/modals/area-of-interest/actions';
 import { setMapPromptsSettings } from 'components/prompts/map-prompts/actions';
+import { setShareModal } from 'components/modals/share/actions';
 
 import Component from './component';
 import { mapStateToProps } from './selectors';
 
 export default connect(mapStateToProps, {
   viewArea,
+  setShareModal,
   setMapPromptsSettings,
   onEditClick: setAreaOfInterestModalSettings,
 })(Component);
diff --git a/components/ui/button/themes/button-clear.scss b/components/ui/button/themes/button-clear.scss
@@ -9,6 +9,10 @@
     fill: $slate;
   }
 
+  &-underline:hover {
+    text-decoration: underline;
+  }
+
   &:hover {
     background-color: transparent;
 

diff --git a/components/ui/dropdown/component.jsx b/components/ui/dropdown/component.jsx
@@ -31,6 +31,7 @@ import './themes/dropdown-no-border.scss';
 
 class Dropdown extends PureComponent {
   static propTypes = {
+    layout: PropTypes.oneOf(['overflow-menu', 'actions-menu']),
     className: PropTypes.string,
     label: PropTypes.string,
     theme: PropTypes.string,
@@ -128,6 +129,7 @@ class Dropdown extends PureComponent {
       onChange,
       options,
       selectorIcon,
+      layout
     } = this.props;
 
     const dropdown = (
@@ -161,6 +163,7 @@ class Dropdown extends PureComponent {
             </div>
           ) : (
             <Selector
+              layout={layout}
               isOpen={isOpen}
               arrowPosition={arrowPosition}
               onSelectorClick={onSelectorClick}
@@ -174,6 +177,7 @@ class Dropdown extends PureComponent {
               {...getRootProps({ refKey: 'innerRef' })}
             >
               <Menu
+                layout={layout}
                 isOpen={isOpen}
                 activeValue={activeValue}
                 activeLabel={activeLabel}

diff --git a/components/ui/dropdown/components/item/component.jsx b/components/ui/dropdown/components/item/component.jsx
@@ -23,8 +23,7 @@ const Item = (props) => {
     activeValue,
     activeLabel,
   } = props;
-  const { group, groupParent, label, metaKey, infoText } = item;
-
+  const { group, groupParent, label, component = null, metaKey, infoText } = item;
   const isActive =
     (!showGroup && !group) || group === showGroup || groupParent === showGroup;
   const isGroupParentActive = groupParent && showGroup === groupParent;
@@ -60,7 +59,8 @@ const Item = (props) => {
           onClick: () => handleSelectGroup(item),
         })}
       >
-        {label}
+        {component && component}
+        {!component && label}
       </div>
       {metaKey && (
         <Button

diff --git a/components/ui/dropdown/components/item/styles.scss b/components/ui/dropdown/components/item/styles.scss
@@ -1,25 +1,25 @@
 @import '~styles/settings.scss';
 
 .c-selector-item-wrapper {
-  justify-content: space-between;
   align-items: center;
   display: flex;
-  height: 0;
   flex: 0;
+  height: 0;
+  justify-content: space-between;
   margin-left: 100%;
-  width: 100%;
-  transition: none;
   overflow: hidden;
+  transition: none;
+  width: 100%;
 
   &.base {
     margin-left: -100%;
     transition: margin-right 0.2s ease-in-out;
   }
 
   &.show {
+    flex: 1;
     height: auto;
     margin-left: 0;
-    flex: 1;
     overflow: initial;
     transition: margin-left 0.2s ease-in-out;
   }
@@ -28,4 +28,8 @@
 .c-selector-item {
   width: 100%;
   padding: rem(8px) rem(16px);
+
+  .c-icon {
+    margin: 0 rem(5px) 0 0;
+  }
 }
diff --git a/components/ui/dropdown/components/menu/component.jsx b/components/ui/dropdown/components/menu/component.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import Item from '../item';
 
@@ -8,6 +9,7 @@ import './styles.scss';
 const Menu = props => {
   const {
     className,
+    layout,
     isOpen,
     activeValue,
     activeLabel,
@@ -22,7 +24,12 @@ const Menu = props => {
   } = props;
 
   return !isOpen ? null : (
-    <div className={`c-selector-menu ${className || ''}`}>
+    <div className={cx({
+      'c-selector-menu': true,
+      'selector-overflow-menu': layout === 'overflow-menu',
+      [className]: !!className
+    })}
+    >
       {items && items.length ? (
         items.map(
           (item, index) =>
@@ -52,6 +59,7 @@ const Menu = props => {
 };
 
 Menu.propTypes = {
+  layout: PropTypes.string,
   isOpen: PropTypes.bool,
   activeValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   activeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

diff --git a/components/ui/dropdown/components/menu/styles.scss b/components/ui/dropdown/components/menu/styles.scss
@@ -19,6 +19,10 @@ $dd-font-size: rem(13px);
   background-color: $white;
   padding: rem(5px) 0;
 
+  &.selector-overflow-menu {
+    right: 0;
+  }
+
   .info-button {
     margin-right: rem(10px);
     width: rem(16px);