Merge pull request #3497 from Vizzuality/feature/map-menu

Feature/map menu

Author: edbrett

app/javascript/assets/icons/climate-bubbles.svg

@@ -9,6 +9,7 @@ import Tip from 'components/ui/tip';
 import './button-styles.scss';
 import './themes/button-light.scss'; // eslint-disable-line
 import './themes/button-small.scss'; // eslint-disable-line
+import './themes/button-tiny.scss'; // eslint-disable-line
 import './themes/button-grey.scss'; // eslint-disable-line
 import './themes/button-clear.scss'; // eslint-disable-line
 import './themes/button-map-control.scss'; // eslint-disable-line

app/javascript/assets/icons/feather.svg

@@ -0,0 +1,21 @@
+@import '~styles/settings';
+
+.theme-button-tiny {
+  height: rem(14px);
+  border-radius: rem(10px);
+  padding: 0 rem(10px);
+  font-size: rem(12px);
+  line-height: 0.8em;
+  white-space: nowrap;
+
+  &.square {
+    width: rem(14px);
+    min-width: rem(14px);
+    padding: 0;
+  }
+
+  svg {
+    width: rem(8px);
+    height: rem(8px);
+  }
+}

app/javascript/assets/icons/land-tree.svg

@@ -5,23 +5,31 @@ import Toggle from 'react-toggle';
 import './react-toggle.scss';
 import './switch-styles.scss';
 import './themes/switch-light.scss';
+import './themes/switch-toggle.scss';
 
 class Switch extends PureComponent {
   render() {
     const { theme, label, value, options, onChange } = this.props;
+    const icons = options
+      ? {
+        checked: options[0].label,
+        unchecked: options[1].label
+      }
+      : false;
+    const defaultChecked = options ? options[1].value === value : false;
+
     return (
       <div className={`c-switch ${theme || ''}`}>
         {label && <div className="label">{label}</div>}
         <Toggle
-          icons={{
-            checked: options[0].label,
-            unchecked: options[1].label
-          }}
-          defaultChecked={options[1].value === value}
+          icons={icons}
+          defaultChecked={defaultChecked}
           onChange={e => {
-            const result = e.target.checked
-              ? options[1].value
-              : options[0].value;
+            let result = e.target.checked;
+            if (options) {
+              result = result ? options[1].value : options[0].value;
+            }
+
             onChange(result);
           }}
         />

app/javascript/assets/icons/trees.svg

@@ -0,0 +1,40 @@
+@import '~styles/settings.scss';
+
+.theme-switch-toggle {
+  .react-toggle {
+    width: rem(22px);
+    height: rem(14px);
+
+    .react-toggle-track {
+      width: 100%;
+      height: 100%;
+      background-color: $light-grey;
+    }
+  
+    .react-toggle-thumb {
+      top: rem(2px);
+      left: rem(2px);
+      width: rem(10px);
+      height: rem(10px);
+      border: 0;
+      box-shadow: none !important;
+    }
+
+    &:hover {
+      .react-toggle-track {
+        background-color: $light-grey;
+      }
+    }
+
+    &--checked {
+      .react-toggle-thumb {
+        left: calc(50% - #{rem(1px)});
+      }
+
+      .react-toggle-track,
+      &:hover .react-toggle-track {
+        background-color: $green-gfw;
+      }
+    }
+  }
+}

app/javascript/assets/icons/truck.svg

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import LayersBlock from 'pages/map/menu/components/layers-block';
+
+class ForestChange extends PureComponent {
+  render() {
+    const { data } = this.props;
+    return (
+      <div className="c-forest-change">
+        {data &&
+          data.map(block => {
+            const { name, description, layers } = block;
+            return (
+              <LayersBlock
+                key={`layers-block-${name}`}
+                name={name}
+                description={description}
+                layers={layers}
+              />
+            );
+          })}
+      </div>
+    );
+  }
+}
+
+ForestChange.propTypes = {
+  data: PropTypes.array
+};
+
+export default ForestChange;

app/javascript/assets/icons/world.svg

@@ -0,0 +1,16 @@
+import { createElement, PureComponent } from 'react';
+import { connect } from 'react-redux';
+
+import ForestChangeComponent from './forest-change-component';
+
+const mapStateToProps = () => ({});
+
+class ForestChangeContainer extends PureComponent {
+  render() {
+    return createElement(ForestChangeComponent, {
+      ...this.props
+    });
+  }
+}
+
+export default connect(mapStateToProps, null)(ForestChangeContainer);

app/javascript/assets/logos/gfw.png

@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import Switch from 'components/ui/switch';
+import Button from 'components/ui/button';
+import Icon from 'components/ui/icon';
+
+import infoIcon from 'assets/icons/info.svg';
+
+import './layer-toggle-styles.scss';
+
+class LayerToggle extends PureComponent {
+  render() {
+    const { data: { name, description } } = this.props;
+
+    return (
+      <div className="c-layer-toggle">
+        <Switch theme="theme-switch-toggle" onChange={() => {}} />
+        <div className="c-layer-toggle__content">
+          <div className="c-layer-toggle__header">
+            <div className="c-layer-toggle__name">{name}</div>
+            <Button
+              className="theme-button-tiny square info-button"
+              onClick={() => {}}
+            >
+              <Icon icon={infoIcon} className="info-icon" />
+            </Button>
+          </div>
+          <div className="c-layer-toggle__description">{description}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+LayerToggle.propTypes = {
+  data: PropTypes.object
+};
+
+export default LayerToggle;

app/javascript/components/ui/button/button-component.jsx

@@ -0,0 +1,35 @@
+@import '~styles/settings';
+
+.c-layer-toggle {
+  display: flex;
+  margin-bottom: rem(21px);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__content {
+    flex: 1;
+    padding-left: rem(6px);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__name {
+    font-size: 14px;
+    line-height: 1.21;
+    letter-spacing: -0.3px;
+    color: $slate;
+  }
+
+  &__description {
+    font-size: 12px;
+    line-height: normal;
+    letter-spacing: -0.3px;
+    color: $hot-grey;
+    margin-top: rem(3px);
+  }
+}

app/javascript/components/ui/button/themes/button-tiny.scss

@@ -0,0 +1,3 @@
+import Component from './layer-toggle-component';
+
+export default Component;

app/javascript/components/ui/switch/switch-component.jsx

@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import LayerToggle from 'pages/map/menu/components/layer-toggle';
+
+import './layers-block-styles.scss';
+
+class LayersBlock extends PureComponent {
+  render() {
+    const { name, description, layers } = this.props;
+    return (
+      <div className="c-layers-block">
+        {(name || description) && (
+          <div className="c-layers-block__header">
+            {name && <div className="c-layers-block__title">{name}</div>}
+            {description && (
+              <div className="c-layers-block__description">{description}</div>
+            )}
+          </div>
+        )}
+        {layers &&
+          layers.map(layer => (
+            <LayerToggle key={`toogle-${layer.name}`} data={layer} />
+          ))}
+      </div>
+    );
+  }
+}
+
+LayersBlock.propTypes = {
+  name: PropTypes.string,
+  description: PropTypes.string,
+  layers: PropTypes.array
+};
+
+export default LayersBlock;

app/javascript/components/ui/switch/themes/switch-toggle.scss

@@ -0,0 +1,33 @@
+@import '~styles/settings';
+
+.c-layers-block {
+  position: relative;
+  padding: rem(20px) 0;
+
+  &__header {
+    margin-bottom: rem(20px);
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.1;
+    color: $greyish-brown;
+  }
+
+  &__description {
+    font-size: 12px;
+    letter-spacing: -0.3px;
+    color: $hot-grey;
+  }
+
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: rem(-20px);
+    width: calc(100% + #{rem(20px)});
+    height: rem(1px);
+    background-color: rgba($hot-grey, 0.3);
+  }
+}

app/javascript/pages/map/menu/components/forest-change/forest-change-component.jsx

@@ -0,0 +1,3 @@
+import Component from './layers-block-component';
+
+export default Component;

app/javascript/pages/map/menu/components/forest-change/forest-change.js

@@ -0,0 +1,7 @@
+import { createAction } from 'redux-actions';
+
+const setSelectedSection = createAction('setSelectedSection');
+
+export default {
+  setSelectedSection
+};