[Maps] Fix some overlays designs (#36837) (#36856)

* Better text as overlay * Make “Go to” button an icon button * Fix layout with scrolling and overflow shadow of right side * Show full stroke of fillable circle * Moved mapbox styles to a hack file, increased text shadow for better visibility
elastic · May 23, 2019 · 30b1ee3 · 30b1ee3
1 parent fd797f3
commit 30b1ee3
Show file tree

Hide file tree

Showing 17 changed files with 136 additions and 107 deletions.
diff --git a/x-pack/plugins/maps/public/_main.scss b/x-pack/plugins/maps/public/_main.scss
@@ -18,44 +18,6 @@
   flex-direction: column;
 }
 
-
-// MapBox
-
-.mapContainer {
-  flex-grow: 1;
-
-  .mapboxgl-popup {
-    z-index: 100;
-    border-color: $euiColorEmptyShade;
-  }
-
-  .mapboxgl-popup-content {
-    background-color: $euiColorEmptyShade;
-  }
-
-  .mapboxgl-popup-tip {
-    border-top-color: $euiColorEmptyShade !important;
-  }
-
-  .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
-    margin-left: $euiSizeM;
-    margin-top: $euiSizeM;
-  }
-
-  .mapboxgl-ctrl-group:not(:empty) {
-    @include euiBottomShadowLarge;
-    background-color: $euiColorEmptyShade;
-    border-radius: $euiBorderRadius;
-
-    > button {
-      @include size($euiSizeXL);
-
-      + button {
-        border: none;
-      }
-    }
-  }
-}
 .euiColorPicker__emptySwatch {
   position: relative;
 }
diff --git a/x-pack/plugins/maps/public/_mapbox_hacks.scss b/x-pack/plugins/maps/public/_mapbox_hacks.scss
@@ -0,0 +1,51 @@
+// MapBox
+
+.mapContainer {
+  flex-grow: 1;
+
+  .mapboxgl-popup {
+    z-index: 100;
+    border-color: $euiColorEmptyShade;
+  }
+
+  .mapboxgl-popup-content {
+    background-color: $euiColorEmptyShade;
+  }
+
+  .mapboxgl-popup-tip {
+    border-top-color: $euiColorEmptyShade !important;
+  }
+
+  .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+    margin-left: $euiSizeM;
+    margin-top: $euiSizeM;
+  }
+
+  .mapboxgl-ctrl-group:not(:empty) {
+    @include euiBottomShadowLarge;
+    background-color: $euiColorEmptyShade;
+    border-radius: $euiBorderRadius;
+
+    > button {
+      @include size($euiSizeXL);
+
+      + button {
+        border: none;
+      }
+    }
+  }
+}
+
+// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled
+// Also fixes dark mode
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E");
+  background-position: center;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E");
+  background-position: center;
+}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_index.scss b/x-pack/plugins/maps/public/components/widget_overlay/_index.scss
@@ -1,3 +1,5 @@
+@import './mixins';
+
 @import './widget_overlay';
 @import './attribution_control/attribution_control';
 @import './layer_control/index';

diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss
@@ -0,0 +1,12 @@
+@mixin mapOverlayIsTextOnly() {
+  text-shadow:
+    0 0 2px $euiColorEmptyShade,
+    // Multiple shadows helps turn it into an outline since
+    // text shadows have no spread value
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade,
+    0 0 1px $euiColorEmptyShade;
+}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
@@ -13,16 +13,14 @@
   pointer-events: none; /* 1 */
 }
 
-.mapWidgetOverlay__rightSideWrapper {
-  overflow: hidden; // Fixes Chrome overflow
-}
-
-.mapWidgetOverlay__rightSide {
+.mapWidgetOverlay__layerWrapper {
+  align-items: flex-end;
   width: $euiSize * 20;
+  min-height: 0; // Fixes scroll in Firefox
 }
 
-.mapWidgetOverlay__layerWrapper {
-  align-items: flex-end;
+.mapWidgetControl__headerFlexItem {
+  flex-shrink: 0;
 }
 
 .mapWidgetControl {
@@ -45,5 +43,3 @@
   flex-shrink: 0;
   text-transform: uppercase;
 }
-
-
diff --git a/...maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap b/...maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap
diff --git a/...ugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss b/...ugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss
@@ -1,3 +1,5 @@
 .mapAttributionControl {
-  padding: 0 $euiSizeXS;
+  @include mapOverlayIsTextOnly;
+  pointer-events: all;
+  padding-left: $euiSizeM;
 }
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js
@@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
 import _ from 'lodash';
 import {
   EuiText,
-  EuiPanel,
   EuiLink,
 } from '@elastic/eui';
 
@@ -68,7 +67,7 @@ export class AttributionControl  extends React.Component {
     }
 
     return (
-      <EuiLink color="subdued" href={url} target="_blank">{label}</EuiLink>
+      <EuiLink color="text" href={url} target="_blank">{label}</EuiLink>
     );
   }
 
@@ -88,11 +87,11 @@ export class AttributionControl  extends React.Component {
       return null;
     }
     return (
-      <EuiPanel className="mapWidgetControl mapAttributionControl" paddingSize="none" grow={false}>
-        <EuiText color="subdued" size="xs">
-          <small>{this._renderAttributions()}</small>
+      <div className="mapAttributionControl">
+        <EuiText size="xs">
+          <small><strong>{this._renderAttributions()}</strong></small>
         </EuiText>
-      </EuiPanel>
+      </div>
     );
   }
 }
diff --git a/...ugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/...ugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
@@ -6,8 +6,13 @@
   border-top: 1px solid $euiColorLightestShade;
 }
 
+.mapLayerControl__addLayerButton {
+  flex-shrink: 0;
+}
+
 .mapLayerControl__addLayerButton,
-.mapLayerControl__openLayerTOCButton {
+.mapLayerControl__openLayerTOCButton,
+.mapViewControl__gotoButton {
   pointer-events: all;
 
   &:enabled,
@@ -18,7 +23,8 @@
 }
 
 .mapLayerControl__openLayerTOCButton,
-.mapLayerControl__closeLayerTOCButton {
+.mapLayerControl__closeLayerTOCButton,
+.mapViewControl__gotoButton {
   @include size($euiSizeXL);
   background-color: $euiColorEmptyShade !important; // During all states
 }
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
@@ -66,7 +66,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
   return (
     <Fragment>
       <EuiPanel className="mapWidgetControl mapWidgetControl-hasShadow" paddingSize="none" grow={false}>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem className="mapWidgetControl__headerFlexItem" grow={false}>
           <EuiFlexGroup
             justifyContent="spaceBetween"
             alignItems="center"

diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss
@@ -5,7 +5,7 @@
  */
 
 .mapViewControl__coordinates {
-  padding: $euiSizeXS $euiSizeS;
+  @include mapOverlayIsTextOnly;
   justify-content: center;
   pointer-events: none;
 }

diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js
@@ -9,14 +9,14 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
-  EuiButton,
+  EuiButtonIcon,
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
 import { SetView } from './set_view';
 import { DECIMAL_DEGREES_PRECISION } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoordinates }) {
   const toggleSetViewVisibility = () => {
@@ -31,18 +31,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
     <EuiPopover
       anchorPosition="upRight"
       button={(
-        <EuiButton
+        <EuiButtonIcon
           className="mapViewControl__gotoButton"
-          fill
-          size="s"
           onClick={toggleSetViewVisibility}
           data-test-subj="toggleSetViewVisibilityButton"
-        >
-          <FormattedMessage
-            id="xpack.maps.viewControl.goToButtonLabel"
-            defaultMessage="Go to"
-          />
-        </EuiButton>)}
+          iconType="crosshairs"
+          color="text"
+          aria-label={i18n.translate('xpack.maps.viewControl.goToButtonLabel', {
+            defaultMessage: 'Go to'
+          })}
+          title={i18n.translate('xpack.maps.viewControl.goToButtonLabel', {
+            defaultMessage: 'Go to'
+          })}
+        />
+      )}
       isOpen={isSetViewOpen}
       closePopover={closeSetView}
     >
@@ -58,9 +60,9 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
       ? _.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION)
       : '';
     return (
-      <EuiPanel className="mapWidgetControl mapViewControl__coordinates" paddingSize="none">
+      <div className="mapViewControl__coordinates">
         <EuiText size="xs">
-          <p>
+          <small>
             <strong>
               <FormattedMessage
                 id="xpack.maps.viewControl.latLabel"
@@ -73,19 +75,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo
                 defaultMessage="lon:"
               />
             </strong> {lon}
-          </p>
+          </small>
         </EuiText>
-      </EuiPanel>
+      </div>
     );
   }
 
   return (
     <EuiFlexGroup
-      justifyContent="spaceBetween"
+      justifyContent="flexEnd"
+      alignItems="flexEnd"
       gutterSize="s"
       responsive={false}
     >
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         {mouseCoordinates && renderMouseCoordinates()}
       </EuiFlexItem>
 

diff --git a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
@@ -16,20 +16,11 @@ import { AttributionControl } from './attribution_control';
 export function WidgetOverlay() {
   return (
     <EuiFlexGroup className="mapWidgetOverlay" responsive={false} direction="column" alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem className="mapWidgetOverlay__rightSideWrapper">
-        <EuiFlexGroup
-          className="mapWidgetOverlay__rightSide"
-          direction="column"
-          justifyContent="spaceBetween"
-          responsive={false}
-        >
-          <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
-            <LayerControl/>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ViewControl/>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+      <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
+        <LayerControl/>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <ViewControl/>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <AttributionControl/>