Merge pull request #3335 from Vizzuality/feature/recent-imagery-settings

Feature/recent imagery settings
wri · Mar 20, 2018 · bcf5044 · bcf5044
2 parents f49a1cf + 1e97776
commit bcf5044
Show file tree

Hide file tree

Showing 43 changed files with 1,042 additions and 218 deletions.
diff --git a/app/assets/javascripts/map/templates/legend/sentinel_tiles.handlebars b/app/assets/javascripts/map/templates/legend/sentinel_tiles.handlebars
@@ -1,3 +1 @@
-<div class="layer-sublayer js-refresh-tiles" data-sublayer="sentinel_tiles" style="cursor: pointer;">
-  <div class="sublayer-title -hidden">Refresh tile</div>
-</div>
+<div class="layer-sublayer js-refresh-tiles" data-sublayer="sentinel_tiles" style="cursor: pointer;"></div>
diff --git a/app/assets/javascripts/map/templates/tabs-mobile.handlebars b/app/assets/javascripts/map/templates/tabs-mobile.handlebars
@@ -9,7 +9,6 @@
       <li class="tab-mobile" data-tab="layers-tab-mobile"><span>Global data</span></li>
       <li id="country-tab-mobile-btn" class="tab-mobile" data-tab="country-tab-mobile"><span>Country data</span></li>
       <li class="tab-mobile" data-tab="basemaps-tab-mobile"><span>Basemaps</span></li>
-      <li class="tab-mobile" data-tab="hres-tab-mobile"><span>High Resolution Imagery</span></li>
     </ul>
     <footer>
       <ul class="button-container one fixed">

diff --git a/app/assets/javascripts/map/templates/tabs.handlebars b/app/assets/javascripts/map/templates/tabs.handlebars
@@ -4,7 +4,6 @@
       {{!-- <li id="countries-tab-button" class="tab" data-tab="countries-tab"><span class="tooltipmap">View country data</span><svg class="icon"><use xlink:href="#icon-tab-countries"></use></svg></li> --}}
       <li id="analysis-tab-button" class="tab" data-tab="analysis-tab"><span class="tooltipmap">Analyze &amp; Subscribe</span><svg class="icon"><use xlink:href="#icon-tab-analysis"></use></svg></li>
       <li id="basemaps-tab-button" class="tab" data-tab="basemaps-tab"><span class="tooltipmap">Change base map</span><svg class="icon"><use xlink:href="#icon-tab-basemap"></use></svg></li>
-      <li id="hd-tab-button" class="tab" data-tab="hd-tab"><span class="tooltipmap">View recent satellite<br/>imagery</span><svg class="icon"><use xlink:href="#icon-tab-highresolution"></use></svg></li>
     </ul>
   </nav>
 </header>

diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Compass
 @import "compass/reset";
 @import "compass/css3";
@@ -29,7 +30,7 @@
 @import "modules/shared";
 @import "modules/buttons";
 @import "modules/icons";
-@import "modules/slick";
+//@import "modules/slick";
 @import "modules/notifications";
 @import "modules/modal";
 @import "modules/modal_new";

diff --git a/app/assets/stylesheets/modules/_shared.scss b/app/assets/stylesheets/modules/_shared.scss
@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Information icon
 .info-icon{
   width: 14px;
@@ -71,7 +72,7 @@
 
 
 // Spinner
-.spinner {
+/*.spinner {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -90,7 +91,7 @@
     visibility: visible;
     opacity: 1;
   }
-}
+}*/
 
 // Spinner
 .spinner-info {

diff --git a/app/assets/stylesheets/modules/map/_module-tabs.scss b/app/assets/stylesheets/modules/map/_module-tabs.scss
@@ -34,7 +34,7 @@ $w-control: 44px;
           position: relative;
           @media (min-width: $br-mobileMap){
             float: none;
-            width: 33.33333%;
+            width: 50%;
 
             &:first-child{
               border-left: none;

diff --git a/app/javascript/assets/icons/satellite.svg b/app/javascript/assets/icons/satellite.svg
diff --git a/app/javascript/components/button/button-component.jsx b/app/javascript/components/button/button-component.jsx
@@ -20,14 +20,15 @@ const Button = props => {
     className,
     theme,
     disabled,
+    active,
     onClick,
     tooltip,
     trackingData,
     buttonClicked
   } = props;
   const classNames = `c-button ${theme || ''} ${className || ''} ${
     disabled ? 'disabled' : ''
-  }`;
+  } ${active ? '--active' : ''}`;
   const isDeviceTouch = isTouch();
   const handleClick = () => {
     if (onClick) {
@@ -94,6 +95,7 @@ Button.propTypes = {
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   theme: PropTypes.string,
   disabled: PropTypes.bool,
+  active: PropTypes.bool,
   onClick: PropTypes.func,
   extLink: PropTypes.string,
   tooltip: PropTypes.object,

diff --git a/...pt/components/slider/slider-component.jsx → ...omponents/carousel/carousel-component.jsx b/...pt/components/slider/slider-component.jsx → ...omponents/carousel/carousel-component.jsx
@@ -7,7 +7,7 @@ import Icon from 'components/icon';
 import arrowIcon from 'assets/icons/arrow-down.svg';
 import { SCREEN_M, SCREEN_XL } from 'utils/constants';
 
-import './slider-styles.scss';
+import './carousel-styles.scss';
 
 const defaultSettings = {
   dots: true,
@@ -42,7 +42,7 @@ const defaultSettings = {
   ]
 };
 
-class Slider extends PureComponent {
+class Carousel extends PureComponent {
   // eslint-disable-line react/prefer-stateless-function
   render() {
     const { className, children, settings } = this.props;
@@ -52,17 +52,17 @@ class Slider extends PureComponent {
     };
 
     return (
-      <div className={`c-slider ${className || ''}`}>
+      <div className={`c-carousel ${className || ''}`}>
         <SlickSlider {...sliderSettings}>{children}</SlickSlider>
       </div>
     );
   }
 }
 
-Slider.propTypes = {
+Carousel.propTypes = {
   children: PropTypes.node.isRequired,
   settings: PropTypes.object,
   className: PropTypes.string
 };
 
-export default Slider;
+export default Carousel;
diff --git a/...ript/components/slider/slider-styles.scss → .../components/carousel/carousel-styles.scss b/...ript/components/slider/slider-styles.scss → .../components/carousel/carousel-styles.scss
@@ -1,7 +1,7 @@
 @import "./slick.scss";
 @import '~styles/settings.scss';
 
-.c-slider {
+.c-carousel {
   margin: rem(30px) 0;
 
   .slick-slide {

diff --git a/app/javascript/components/carousel/carousel.js b/app/javascript/components/carousel/carousel.js
@@ -0,0 +1,3 @@
+import Component from './carousel-component';
+
+export default Component;
diff --git a/app/javascript/components/slider/slick.scss → ...javascript/components/carousel/slick.scss b/app/javascript/components/slider/slick.scss → ...javascript/components/carousel/slick.scss
@@ -15,6 +15,7 @@
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
 }
+
 .slick-list {
   position: relative;
   overflow: hidden;
@@ -23,14 +24,15 @@
   padding: 0;
 
   &:focus {
-      outline: none;
+    outline: none;
   }
 
   &.dragging {
-      cursor: pointer;
-      cursor: hand;
+    cursor: pointer;
+    cursor: hand;
   }
 }
+
 .slick-slider .slick-track,
 .slick-slider .slick-list {
   -webkit-transform: translate3d(0, 0, 0);
@@ -48,54 +50,58 @@
   margin-left: auto;
   margin-right: auto;
 
-  &:before,
-  &:after {
-      content: "";
-      display: table;
+  &::before,
+  &::after {
+    content: "";
+    display: table;
   }
 
-  &:after {
-      clear: both;
+  &::after {
+    clear: both;
   }
 
   .slick-loading & {
-      visibility: hidden;
+    visibility: hidden;
   }
 }
+
 .slick-slide {
+  display: none;
   float: left;
   height: 100%;
   min-height: 1px;
+
   [dir="rtl"] & {
-      float: right;
+    float: right;
   }
+
   img {
-      display: block;
+    display: block;
   }
+
   &.slick-loading img {
-      display: none;
+    display: none;
   }
 
-  display: none;
-
   &.dragging img {
-      pointer-events: none;
+    pointer-events: none;
   }
 
   .slick-initialized & {
-      display: block;
+    display: block;
   }
 
   .slick-loading & {
-      visibility: hidden;
+    visibility: hidden;
   }
 
   .slick-vertical & {
-      display: block;
-      height: auto;
-      border: 1px solid transparent;
+    display: block;
+    height: auto;
+    border: 1px solid transparent;
   }
 }
+
 .slick-arrow.slick-hidden {
   display: none;
 }
diff --git a/app/javascript/components/datepicker/datepicker-component.js b/app/javascript/components/datepicker/datepicker-component.js
@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { SingleDatePicker } from 'react-dates';
+
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+import './datepicker-styles.scss';
+
+class Datepicker extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false
+    };
+  }
+
+  render() {
+    const { className, date, handleOnDateChange, settings } = this.props;
+    return (
+      <div className={`c-datepicker ${className || ''}`}>
+        <SingleDatePicker
+          date={date}
+          onDateChange={d => {
+            handleOnDateChange(d);
+          }}
+          focused={this.state.focused}
+          onFocusChange={({ focused }) => this.setState({ focused })}
+          {...settings}
+        />
+      </div>
+    );
+  }
+}
+
+Datepicker.propTypes = {
+  className: PropTypes.string,
+  date: PropTypes.object,
+  handleOnDateChange: PropTypes.func.isRequired,
+  settings: PropTypes.object
+};
+
+export default Datepicker;
diff --git a/app/javascript/components/datepicker/datepicker-styles.scss b/app/javascript/components/datepicker/datepicker-styles.scss
@@ -0,0 +1,30 @@
+@import '~styles/settings.scss';
+
+.c-datepicker {
+  td {
+    vertical-align: middle;
+  }
+
+  .SingleDatePickerInput {
+    .DateInput_input {
+      padding: 0;
+      height: 28px;
+      border: 1px solid $green-gfw;
+      border-radius: rem(25px);
+      font-size: 13px;
+      font-weight: normal;
+      text-align: center;
+      text-transform: uppercase;
+      color: $slate;
+      cursor: pointer;
+    }
+  }
+
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__selected:hover {
+    background: $green-gfw;
+    border: 1px solid $green-gfw;
+    color: $white;
+  }
+}
diff --git a/app/javascript/components/datepicker/datepicker.js b/app/javascript/components/datepicker/datepicker.js
@@ -0,0 +1,3 @@
+import Component from './datepicker-component';
+
+export default Component;
diff --git a/app/javascript/components/loader/loader-styles.scss b/app/javascript/components/loader/loader-styles.scss
@@ -13,7 +13,6 @@
   z-index: 1;
 
   .spinner {
-    margin: rem(50px);
     height: rem(38px);
     width: rem(38px);
     animation: rotate 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);

diff --git a/app/javascript/components/map/components/map-controls/map-controls-styles.scss b/app/javascript/components/map/components/map-controls/map-controls-styles.scss
@@ -3,10 +3,6 @@
 .c-map-controls {
   width: rem(38px);
 
-  button {
-    box-shadow: 0 1px 2px rgba($black, 0.25);
-  }
-
   button:first-child {
     border-bottom: solid 1px rgba($medium-grey, 0.2);
   }

diff --git a/app/javascript/components/map/components/mini-legend/mini-legend-styles.scss b/app/javascript/components/map/components/mini-legend/mini-legend-styles.scss
@@ -2,7 +2,7 @@
 
 .c-mini-legend {
   background-color: $white;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 3px 0 rgba($black, 0.25);
   padding: rem(10px);
   padding-bottom: rem(5px);
   position: absolute;