Merge pull request #176 from Vizzuality/feature/world-map-improvements

Feature/world map improvements vol1

.eslintrc.yml

@@ -14,9 +14,9 @@ rules:
   class-methods-use-this: 0
   comma-dangle: [error, never]
   func-names: 0
-  import/extensions: [error, {"js": never, "jsx": never}]
   import/no-extraneous-dependencies: 0
   import/no-unresolved: 0
+  import/order: 0
   import/prefer-default-export: 0
   jsx-a11y/alt-text: 0
   jsx-a11y/anchor-has-content: 0

app/assets/stylesheets/cclow.scss

@@ -1,11 +1,6 @@
-@import "cclow/colors.scss";
-@import "cclow/layout.scss";
+@import "cclow/colors";
+@import "cclow/layout";
 @import "cclow/typography";
-@import "cclow/geography-page";
-@import "cclow/hero";
-@import "cclow/latest-additions-slider";
-@import "cclow/laws-dropdown";
-@import "cclow/world-map";
 
 @import "bulma/sass/utilities/all";
 @import "bulma/sass/base/all";
@@ -16,6 +11,14 @@
 @import "bulma/sass/form/all";
 @import "slick-carousel/slick/slick";
 
+@import "cclow/buttons";
+
+@import "cclow/geography-page";
+@import "cclow/hero";
+@import "cclow/latest-additions-slider";
+@import "cclow/laws-dropdown";
+@import "cclow/world-map";
+
 @import "font-awesome";
 
 html {

app/assets/stylesheets/cclow/_buttons.scss

@@ -0,0 +1,96 @@
+@import "variables";
+
+$button-border-width: 4px;
+
+.link {
+  color: $red;
+  padding: 3px;
+
+  &:hover {
+    color: $red-medium;
+    text-decoration: underline;
+  }
+
+  &:focus {
+    color: white;
+    background-color: $red-medium;
+    text-decoration: underline;
+  }
+}
+
+.button {
+  $button-height: 40px;
+  height: $button-height;
+  font-family: $family-sans-serif-bold;
+  cursor: pointer;
+
+  &.is-primary {
+    justify-content: center;
+    align-items: center;
+    height: $button-height;
+
+    color: white;
+
+    background-color: $red;
+
+    &.is-small {
+      border-radius: 0;
+      height: 30px;
+      min-width: 100px;
+    }
+
+    &.is-hovered,
+    &:hover {
+      background-color: $red-dark;
+    }
+
+    &.is-focused,
+    &:focus {
+      background-color: $red-dark;
+      height: $button-height;
+      text-decoration: underline;
+    }
+
+    &.with-border {
+      border: 2px solid $grey;
+      height: $button-height;
+
+      &.is-hovered,
+      &:hover {
+        border: 2px solid $white;
+      }
+    }
+  }
+
+  &.is-secondary {
+    border: 2px solid $red;
+    color: $red;
+    justify-content: center;
+    align-items: center;
+
+    &.is-small {
+      border-radius: 0;
+      height: 30px;
+      min-width: 100px;
+    }
+
+    &.is-hovered,
+    &:hover,
+    &.is-focused,
+    &:focus {
+      color: $red-medium;
+    }
+
+    &.is-focused,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  &.with-icon {
+    img {
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+  }
+}

app/assets/stylesheets/cclow/_colors.scss

@@ -2,6 +2,9 @@ $white: #fff;
 $blue: #5587F6;
 $blue-dark: #2E3152;
 $red: #ED3D48;
+$red-medium: #C9131E;
+$red-dark: #B1101B;
+
 $grey: #C0C1CB;
 $grey-light: #EAEAED;
 $grey-text: #828397;

app/assets/stylesheets/cclow/_variables.scss

@@ -35,7 +35,7 @@ $hr-height: 1px;
 $hr-margin: 1rem 0 2rem;
 
 // LINKS
-$link-hover: $red;
+$link-hover: $red-medium;
 
 // BUTTON
 $control-radius: 0;

app/assets/stylesheets/cclow/_world-map.scss

@@ -19,6 +19,21 @@
     mix-blend-mode: multiply;
   }
 
+  &__selectors {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    width: 500px;
+  }
+
+  &__selector {
+    max-width: 300px;
+
+    label {
+      font-size: 12px;
+    }
+  }
+
   &__controls {
     position: absolute;
     top: 20px;
@@ -30,11 +45,17 @@
   &__controls-zoom-in,
   &__controls-zoom-out {
     cursor: pointer;
-    display: inline-block;
     height: 40px;
     width: 40px;
     background-color: $white;
 
+    padding: 0;
+
+    img {
+      height: 24px;
+      width: 24px;
+    }
+
     &:active {
       background-color: darken($white, 7%);
     }

app/controllers/cclow/home_controller.rb

@@ -5,5 +5,7 @@ class HomeController < CCLOWController
     def index
       @latest_additions = Api::LatestAdditions.new(5).call
     end
+
+    def sandbox; end
   end
 end

app/javascript/components/EventsTimeline.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, Fragment } from 'react';
-import Select, {components} from 'react-select';
 import PropTypes from 'prop-types';
 import { format } from 'date-fns';
 import Testimonials from './Testimonials';
+import MultiSelect from './MultiSelect';
 
 Testimonials.propTypes = {
   events: PropTypes.array,
@@ -38,27 +38,6 @@ const customStyles = {
   })
 };
 
-const Option = props => (
-  <div>
-    <components.Option {...props}>
-      <input type="checkbox" hidden checked={props.isSelected} onChange={() => null} />
-      {props.isSelected && <div className="checked select-checkbox"><i className="fa fa-check" /></div>}
-      {!props.isSelected && <div className="unchecked select-checkbox" />}
-      <label>{props.label}</label>
-    </components.Option>
-  </div>
-);
-
-const ValueContainer = ({children, ...props}) => {
-  const controls = React.Children.toArray(children).filter(item => ['Input', 'Placeholder'].includes(item.type.name));
-  return (
-    <components.ValueContainer {...props}>
-      {(props.selectProps.value || []).length !== 0 && <span>{props.selectProps.value.length} selected</span>}
-      {controls}
-    </components.ValueContainer>
-  );
-};
-
 const EventsTimeline = ({ events, options, isFiltered = false }) => {
   const [currentTypes, setCurrentTypes] = useState(false);
   const [isShowRightBtn, setIsShowRightBtn] = useState(true);
@@ -90,11 +69,9 @@ const EventsTimeline = ({ events, options, isFiltered = false }) => {
             <h5>Timeline of events</h5>
             <div className="filter-block">
               <span>Show events:</span>
-              <Select
-                components={{ Option, ValueContainer }}
+              <MultiSelect
                 styles={customStyles}
                 options={options}
-                isMulti
                 placeholder="All events"
                 closeMenuOnSelect={false}
                 hideSelectedOptions={false}

app/javascript/components/MultiSelect.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Select, {components} from 'react-select';
+
+const Option = props => (
+  <div>
+    <components.Option {...props}>
+      <input type="checkbox" hidden checked={props.isSelected} onChange={() => null} />
+      {props.isSelected && <div className="checked select-checkbox"><i className="fa fa-check" /></div>}
+      {!props.isSelected && <div className="unchecked select-checkbox" />}
+      <label>{props.label}</label>
+    </components.Option>
+  </div>
+);
+
+const ValueContainer = ({children, ...props}) => {
+  const controls = React.Children.toArray(children).filter(item => ['Input', 'Placeholder'].includes(item.type.name));
+  return (
+    <components.ValueContainer {...props}>
+      {(props.selectProps.value || []).length !== 0 && <span>{props.selectProps.value.length} selected</span>}
+      {controls}
+    </components.ValueContainer>
+  );
+};
+
+const MultiSelect = (props) => (
+  <Select
+    components={{ Option, ValueContainer }}
+    isMulti
+    {...props}
+  />
+);
+
+export default MultiSelect;

app/javascript/components/world-map/WorldMap.js

@@ -6,10 +6,13 @@ import {
   Geography,
   Geographies
 } from 'react-simple-maps';
+import Select from 'react-select';
 import { geoCylindricalEqualArea } from 'd3-geo-projection';
 import reducer, { initialState } from './world-map.reducer';
 import { useMarkers } from './world-map.hooks';
 import MapBubble from './MapBubble';
+import MinusIcon from 'images/cclow/icons/minus.svg';
+import PlusIcon from 'images/cclow/icons/plus.svg';
 
 const geoUrl = 'https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json';
 const PetersGall = geoCylindricalEqualArea().parallel(45);
@@ -21,26 +24,33 @@ function WorldMap(props) {
   const markers = useMarkers(layers, state.activeLayerId);
   const zoomIn = () => dispatch({ type: 'zoomIn' });
   const zoomOut = () => dispatch({ type: 'zoomOut' });
-  const setActiveLayerId = e => dispatch({ type: 'setActiveLayerId', payload: e.target.value });
+  const setActiveLayerId = selectedOption => dispatch({ type: 'setActiveLayerId', payload: selectedOption.value });
   const onZoomEnd = (e, position) => dispatch({ type: 'zoomEnd', payload: position });
+  const layerOptions = layers.map(l => ({ value: l.id, label: l.name }));
+  const selectedOption = layerOptions.find(l => l.value === state.activeLayerId);
 
   return (
     <div className="world-map__container">
       <div className="world-map__controls">
-        <button type="button" onClick={zoomIn} className="world-map__controls-zoom-in">
-          zoom in
+        <button type="button" onClick={zoomIn} className="button world-map__controls-zoom-in">
+          <img src={PlusIcon} alt="zoom-in" />
         </button>
-        <button type="button" onClick={zoomOut} className="world-map__controls-zoom-out">
-          zoom out
+        <button type="button" onClick={zoomOut} className="button world-map__controls-zoom-out">
+          <img src={MinusIcon} alt="zoom-out" />
         </button>
       </div>
-      <select onChange={setActiveLayerId} defaultValue={state.activeLayerId}>
-        {layers.map(layer => (
-          <option key={layer.id} value={layer.id}>
-            {layer.name}
-          </option>
-        ))}
-      </select>
+      <div className="world-map__selectors">
+        <div className="world-map__selector">
+          <label>Content</label>
+          <Select
+            options={layerOptions}
+            value={selectedOption}
+            onChange={setActiveLayerId}
+            isSearchable={false}
+            width="300px"
+          />
+        </div>
+      </div>
       <ComposableMap
         projection={PetersGall}
         style={{ width: '100%', height: 642 }}