Merge pull request #3375 from Vizzuality/feature/GEE-design-improvements

Feature/gee design improvements

Author: edbrett

app/assets/javascripts/map/views/MapControlsView.js

@@ -12,15 +12,17 @@
   line-height: 10px;
   color: $slate-light;
 
+  svg {
+    fill: $slate;
+  }
+
   &:hover {
     background-color: $grey-light;
   }
 
   &.--active {
-    background-color: $border;
-  }
-
-  svg {
-    fill: $slate;
+    svg {
+      fill: $green-gfw;
+    }
   }
 }

app/javascript/components/button/themes/button-map-control.scss

@@ -1,5 +1,11 @@
 @import '~styles/settings.scss';
 
+$reactDatesInputHeight: rem(50px);
+$reactDatesFangHeight: rem(10px);
+$datepickerInputHeight: rem(28px);
+$datepickerFangHeight: rem(6px);
+$datepickerPositionAdjust: rem(8px);
+
 .c-datepicker {
   td {
     vertical-align: middle;
@@ -8,7 +14,7 @@
   .SingleDatePickerInput {
     .DateInput_input {
       padding: 0;
-      height: 28px;
+      height: $datepickerInputHeight;
       border: 1px solid $green-gfw;
       border-radius: rem(25px);
       font-size: 13px;
@@ -18,6 +24,24 @@
       color: $slate;
       cursor: pointer;
     }
+
+    .DateInput_fang {
+      height: $datepickerFangHeight;
+      transform: translateY($datepickerInputHeight - $reactDatesInputHeight + ($reactDatesFangHeight - $datepickerFangHeight) - $datepickerPositionAdjust);
+    }
+
+    .DateInput_fangStroke {
+      stroke: rgba($slate, 0.08);
+    }
+  }
+
+  .SingleDatePicker_picker {
+    transform: translateY($datepickerInputHeight - $reactDatesInputHeight - $datepickerPositionAdjust);
+  }
+
+  .DayPicker__withBorder {
+    box-shadow: $pop-box-shadow;
+    border-radius: 0;
   }
 
   .CalendarDay__selected,

app/javascript/components/datepicker/datepicker-styles.scss

@@ -30,7 +30,7 @@ $dd-button-height: rem(28px);
         border-right: none;
         transform-origin: 0 0;
         transform: rotate(-45deg);
-        top: calc(#{$dd-button-height} + 6px);
+        top: calc(#{$dd-button-height} + #{rem(11px)});
         left: calc(50% - 14px);
         border-bottom-color: #fff;
         box-shadow: 1px -2px 3px 0 rgba(85, 85, 85, 0.1);
@@ -39,9 +39,9 @@ $dd-button-height: rem(28px);
     }
 
     .menu {
-      top: calc(#{$dd-button-height} + 5px);
+      top: calc(#{$dd-button-height} + #{rem(12px)});
       border: 0;
-      box-shadow: 1px 1px 10px 0 rgba(85, 85, 85, 0.25);
+      box-shadow: $pop-box-shadow;
     }
   }
 

app/javascript/components/dropdown/themes/dropdown-button.scss

@@ -110,6 +110,7 @@ class WidgetHeader extends PureComponent {
           {settingsConfig &&
             !isEmpty(settingsConfig.options) && (
               <Tooltip
+                className="widget-tooltip-theme"
                 theme="light"
                 position="bottom-right"
                 offset={-95}

app/javascript/components/widget/components/widget-header/widget-header-component.js

@@ -49,5 +49,5 @@
 }
 
 .tippy-popper .tippy-tooltip.widget-tooltip-theme {
-  box-shadow: 1px 1px 10px 0 rgba($slate, 0.25);
+  box-shadow: $pop-box-shadow;
 }

app/javascript/components/widget/widget-styles.scss

@@ -7,6 +7,7 @@ import Slider from 'components/slider';
 import Carousel from 'components/carousel';
 import Dropdown from 'components/dropdown';
 import Datepicker from 'components/datepicker';
+import NoContent from 'components/no-content';
 import RecentImageryThumbnail from 'pages/map/recent-imagery/components/recent-imagery-thumbnail';
 
 import WEEKS from 'pages/map/data/weeks.json';
@@ -84,7 +85,8 @@ class RecentImagerySettings extends PureComponent {
                 numberOfMonths: 1,
                 isOutsideRange: d => d.isAfter(moment()),
                 hideKeyboardShortcutsPanel: true,
-                noBorder: true
+                noBorder: true,
+                readOnly: true
               }}
             />
           </div>
@@ -113,43 +115,59 @@ class RecentImagerySettings extends PureComponent {
           />
         </div>
         <div className="c-recent-imagery-settings__thumbnails">
-          <div className="c-recent-imagery-settings__thumbnails__description">
-            {this.state.thumbnailsDescription || selectedTile.description}
-          </div>
-          <Carousel
-            settings={{
-              slidesToShow: thumbsToShow,
-              infinite: tiles.length > thumbsToShow,
-              centerMode: tiles.length > thumbsToShow,
-              centerPadding: '20px',
-              responsive: null,
-              draggable: false,
-              dots: false,
-              arrows: tiles.length > thumbsToShow
-            }}
-          >
-            {tiles.length &&
-              tiles.map((tile, i) => (
-                <div key={`recent-imagery-thumb-${tile.id}`}>
-                  <RecentImageryThumbnail
-                    id={i}
-                    tile={tile}
-                    selected={selectedTileIndex === i}
-                    handleClick={() => {
-                      setRecentImagerySettings({ selectedTileIndex: i });
-                    }}
-                    handleMouseEnter={() => {
-                      this.setState({
-                        thumbnailsDescription: tile.description
-                      });
-                    }}
-                    handleMouseLeave={() => {
-                      this.setState({ thumbnailsDescription: null });
-                    }}
-                  />
-                </div>
-              ))}
-          </Carousel>
+          {tiles.length >= 2 && (
+            <div>
+              <div className="c-recent-imagery-settings__thumbnails__description">
+                {this.state.thumbnailsDescription || selectedTile.description}
+              </div>
+              <Carousel
+                settings={{
+                  slidesToShow: thumbsToShow,
+                  infinite: tiles.length > thumbsToShow,
+                  centerMode: tiles.length > thumbsToShow,
+                  centerPadding: '20px',
+                  draggable: false,
+                  dots: false,
+                  arrows: tiles.length > thumbsToShow,
+                  responsive: [
+                    {
+                      breakpoint: 620,
+                      settings: {
+                        slidesToShow: thumbsToShow - 2
+                      }
+                    }
+                  ]
+                }}
+              >
+                {tiles.map((tile, i) => (
+                  <div key={`recent-imagery-thumb-${tile.id}`}>
+                    <RecentImageryThumbnail
+                      id={i}
+                      tile={tile}
+                      selected={selectedTileIndex === i}
+                      handleClick={() => {
+                        setRecentImagerySettings({ selectedTileIndex: i });
+                      }}
+                      handleMouseEnter={() => {
+                        this.setState({
+                          thumbnailsDescription: tile.description
+                        });
+                      }}
+                      handleMouseLeave={() => {
+                        this.setState({ thumbnailsDescription: null });
+                      }}
+                    />
+                  </div>
+                ))}
+              </Carousel>
+            </div>
+          )}
+          {tiles.length < 2 && (
+            <NoContent
+              className="c-recent-imagery-settings__empty-thumbnails"
+              message="We can't find additional images for the selection"
+            />
+          )}
         </div>
       </div>
     );

app/javascript/pages/map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js

@@ -2,14 +2,16 @@
 
 .c-recent-imagery-settings {
   position: absolute;
-  width: rem(600px);
+  width: calc(100% - #{rem(20px)});
+  max-width: rem(600px);
   padding: rem(25px) 0 rem(22px) 0;
   transform: translateX(-50%);
   background-color: $white;
   box-shadow: 0 1px 3px 0 rgba($black, 0.25);
   z-index: 102;
 
   .dragger-icon {
+    display: none;
     position: absolute;
     top: rem(9px);
     left: rem(10px);
@@ -48,10 +50,10 @@
   &__dates {
     position: relative;
     display: inline-block;
-    width: 50%;
+    width: 100%;
     padding: 0 rem(20px);
     vertical-align: top;
-    z-index: 2;
+    z-index: 4;
 
     &__title {
       margin-bottom: rem(10px);
@@ -78,8 +80,9 @@
   &__clouds {
     position: relative;
     display: inline-block;
-    width: 50%;
+    width: 100%;
     padding: 0 rem(20px);
+    margin-top: rem(11px);
     vertical-align: top;
 
     &__title {
@@ -97,6 +100,7 @@
   &__thumbnails {
     position: relative;
     width: 100%;
+    min-height: rem(146px);
     padding-top: rem(14px);
     margin-top: rem(20px);
     border-top: 1px solid rgba(#9e9e9e, 0.3);
@@ -135,4 +139,23 @@
       }
     }
   }
+
+  &__empty-thumbnails {
+    padding-top: rem(11px);
+  }
+
+  @media screen and (min-width: rem(620px)) {
+    .dragger-icon {
+      display: block;
+    }
+
+    &__dates {
+      width: 50%;
+    }
+
+    &__clouds {
+      width: 50%;
+      margin-top: 0;
+    }
+  }
 }

app/javascript/pages/map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-styles.scss

@@ -11,13 +11,21 @@
   cursor: pointer;
   outline: none;
 
-  &--selected::before {
+  &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    border: 4px solid $green-gfw;
+    border: 4px solid transparent;
+  }
+
+  &:hover::before {
+    border-color: $slate;
+  }
+
+  &--selected::before {
+    border-color: $green-gfw !important;
   }
 }

app/javascript/pages/map/recent-imagery/components/recent-imagery-thumbnail/recent-imagery-thumbnail-styles.scss

@@ -6,6 +6,7 @@ import findIndex from 'lodash/findIndex';
 import { getRecentTiles, getTiles, getThumbs } from 'services/recent-imagery';
 
 const toogleRecentImagery = createAction('toogleRecentImagery');
+const setTimelineFlag = createAction('setTimelineFlag');
 const setRecentImageryData = createAction('setRecentImageryData');
 const setRecentImageryDataStatus = createAction('setRecentImageryDataStatus');
 const setRecentImagerySettings = createAction('setRecentImagerySettings');
@@ -125,6 +126,7 @@ const resetData = createThunkAction('resetData', () => dispatch => {
 
 export default {
   toogleRecentImagery,
+  setTimelineFlag,
   setRecentImageryData,
   setRecentImageryDataStatus,
   setRecentImagerySettings,

app/javascript/pages/map/recent-imagery/recent-imagery-actions.js

@@ -13,6 +13,7 @@ class RecentImagery extends PureComponent {
     const {
       active,
       showSettings,
+      isTimelineOpen,
       tile,
       allTiles,
       settings,
@@ -30,7 +31,9 @@ class RecentImagery extends PureComponent {
         }`}
       >
         <Button
-          className="c-recent-imagery__button"
+          className={`c-recent-imagery__button ${
+            isTimelineOpen ? 'c-recent-imagery__button--timeline-open' : ''
+          }`}
           theme="theme-button-map-control"
           active={active}
           onClick={() => toogleRecentImagery()}
@@ -57,6 +60,7 @@ class RecentImagery extends PureComponent {
 RecentImagery.propTypes = {
   active: PropTypes.bool.isRequired,
   showSettings: PropTypes.bool.isRequired,
+  isTimelineOpen: PropTypes.bool.isRequired,
   tile: PropTypes.object,
   allTiles: PropTypes.array.isRequired,
   settings: PropTypes.object.isRequired,

app/javascript/pages/map/recent-imagery/recent-imagery-component.js

@@ -1,6 +1,7 @@
 export const initialState = {
   active: false,
   showSettings: false,
+  isTimelineOpen: false,
   data: {},
   dataStatus: {
     tilesPerRequest: 6,
@@ -28,6 +29,11 @@ const toogleRecentImagery = state => ({
   active: !state.active
 });
 
+const setTimelineFlag = (state, { payload }) => ({
+  ...state,
+  isTimelineOpen: payload
+});
+
 const setRecentImageryData = (state, { payload }) => ({
   ...state,
   data: payload.data ? payload.data : state.data,
@@ -60,6 +66,7 @@ const setRecentImageryShowSettings = (state, { payload }) => ({
 
 export default {
   toogleRecentImagery,
+  setTimelineFlag,
   setRecentImageryData,
   setRecentImageryDataStatus,
   setRecentImagerySettings,