From ec6dab656211807d805e3e116a5681a0720a07dd Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 1 May 2019 16:21:08 -0400
Subject: [PATCH] Design cleanup of layers panel (#31)

---
 .../widget_overlay/_widget_overlay.scss       |   7 +-
 .../layer_control/_layer_control.scss         |   4 +-
 .../layer_toc/toc_entry/_toc_entry.scss       | 111 ++++++++++++++----
 .../layer_control/layer_toc/toc_entry/view.js |  95 ++++++++-------
 .../layer_control/layer_toc/view.js           |  33 ++++--
 .../widget_overlay/widget_overlay.js          |   2 +-
 .../shared/components/layer_toc_actions.js    |   9 +-
 .../legend/style_property_legend_row.js       |  23 ++--
 8 files changed, 190 insertions(+), 94 deletions(-)

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
index 433509a0060e0..c2ff67ac818d2 100644
--- 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,9 +13,12 @@
   pointer-events: none; /* 1 */
 }
 
+.mapWidgetOverlay__rightSideWrapper {
+  overflow: hidden; // Fixes Chrome overflow
+}
+
 .mapWidgetOverlay__rightSide {
-  min-width: 19rem;
-  max-width: 24rem;
+  width: $euiSize * 20;
 }
 
 .mapWidgetOverlay__layerWrapper {
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
index 381d4b24f8e45..c87342aaf31ff 100644
--- 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
@@ -2,6 +2,8 @@
   @include euiScrollBar;
   overflow-y: auto;
   flex-basis: auto !important; // Fixes IE and ensures the layer items are visible
+  padding-bottom: $euiSizeS + 1px;
+  border-top: 1px solid $euiColorLightestShade;
 }
 
 .mapLayerControl__addLayerButton,
@@ -18,5 +20,5 @@
 .mapLayerControl__openLayerTOCButton,
 .mapLayerControl__closeLayerTOCButton {
   @include size($euiSizeXL);
-  background-color: $euiColorEmptyShade;
+  background-color: $euiColorEmptyShade !important; // During all states
 }
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
index 5e608e6ce2bb5..316ba65f2c2cf 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss
@@ -1,27 +1,60 @@
+/**
+ * 1. Truncate the layer name
+ * 2. For showing the layer details toggle above the following entry
+ */
+
 .mapTocEntry {
-  padding: $euiSizeS $euiSize;
   position: relative;
-  background-color: $euiColorEmptyShade;
+  padding: $euiSizeS;
+  border-bottom: 1px solid $euiColorLightestShade;
 
   &:hover,
-  &:focus {
-    .mapTocEntry__layerIcons {
-      visibility: visible;
-      opacity: 1;
-    }
+  &:focus,
+  &:focus-within {
+    z-index: 2; /* 2 */
 
+    .mapTocEntry__layerIcons,
     .mapTocEntry__detailsToggle {
-      visibility: visible;
-      opacity: 1;
+      display: block;
+      animation: mapTocEntryBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance;
+    }
+  }
+
+  .mapTocEntry__layerIcons,
+  .mapTocEntry__detailsToggle {
+    &:hover,
+    &:focus {
+      display: block;
+      animation: mapTocEntryBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance;
     }
   }
 }
 
-.mapTocEntry-visible {
-  opacity: 1;
+.mapTocEntry-isDragging {
+  @include euiBottomShadowMedium;
 }
 
+.mapTocEntry-isDraggingOver {
+  background-color: $euiColorEmptyShade;
+  // Don't allow interaction events while layer is being re-ordered
+  pointer-events: none !important;
+}
+
+.mapTocEntry-visible,
 .mapTocEntry-notVisible {
+  display: flex;
+}
+
+.mapLayTocActions {
+  overflow: hidden; /* 1 */
+  flex-grow: 1;
+}
+
+.mapLayTocActions__popoverAnchor {
+  max-width: 100%;
+}
+
+.mapTocEntry-notVisible .mapTocEntry__layerName {
   opacity: 0.5;
 }
 
@@ -30,31 +63,59 @@
 }
 
 .mapTocEntry__layerName {
-  cursor: pointer;
+  font-weight: $euiFontWeightMedium;
+}
+
+.mapTocEntry__layerNameText {
+  display: flex;
+  align-items: center;
+}
+
+.mapTocEntry__layerNameIcon {
+  flex-shrink: 0;
+  margin-right: $euiSizeS;
+
+  > * {
+    vertical-align: sub;
+  }
 }
 
 .mapTocEntry__layerIcons {
-  position: absolute;
-  right: 0;
-  top: 0;
-  background: $euiColorEmptyShade;
-  padding: $euiSizeXS;
-  visibility: hidden;
-  opacity: 0;
+  flex-shrink: 0;
+  display: none;
 }
 
 .mapTocEntry__detailsToggle {
   position: absolute;
+  display: none;
   left: 50%;
-  top: 50%;
-  visibility: hidden;
-  opacity: 0;
+  top: $euiSizeXL;
+  transform: translateX(-50%);
 }
 
 .mapTocEntry__detailsToggleButton {
-  background-color: $euiColorLightestShade;
+  background-color: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  color: $euiTextColor;
+  border-radius: $euiBorderRadius / 2;
   height: $euiSize;
-  width: $euiSizeXXL;
-  z-index
+  width: $euiSizeXL;
+  line-height: $euiSize;
+  text-align: center;
+
+  &:focus {
+    @include euiFocusRing;
+  }
 }
 
+.mapTocEntry__layerDetails {
+  @include euiOverflowShadow(transparentize($euiShadowColor, .7));
+  background-color: $euiPageBackgroundColor;
+  padding: $euiSize $euiSizeS $euiSizeS;
+  margin: $euiSizeS (-$euiSizeS) (-$euiSizeS);
+}
+
+@keyframes mapTocEntryBecomeVisible {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
index c66fdcc5ff8fb..04e6c3846e00c 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
@@ -5,9 +5,9 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
+
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiIcon,
   EuiOverlayMask,
   EuiModal,
@@ -135,7 +135,7 @@ export class TOCEntry extends React.Component {
     }
 
     return (
-      <span className="mapTocEntry__layerIcons">
+      <div className="mapTocEntry__layerIcons">
 
         <EuiButtonIcon
           iconType="pencil"
@@ -148,11 +148,20 @@ export class TOCEntry extends React.Component {
           onClick={this._openLayerPanelWithCheck}
         />
 
-        <span className="mapTocEntry__grab" {...this.props.dragHandleProps}>
-          <EuiIcon type="grab"/>
-        </span>
+        <EuiButtonIcon
+          iconType="grab"
+          color="subdued"
+          title={i18n.translate('xpack.maps.layerControl.tocEntry.grabButtonTitle', {
+            defaultMessage: 'Reorder layer'
+          })}
+          aria-label={i18n.translate('xpack.maps.layerControl.tocEntry.grabButtonAriaLabel', {
+            defaultMessage: 'Reorder layer'
+          })}
+          className="mapTocEntry__grab"
+          {...this.props.dragHandleProps}
+        />
 
-      </span>
+      </div>
     );
   }
 
@@ -160,10 +169,8 @@ export class TOCEntry extends React.Component {
     const isLayerDetailsOpen = this._isLayerDetailsOpen();
     return (
       <span className="mapTocEntry__detailsToggle">
-
-        <EuiButtonIcon
+        <button
           className="mapTocEntry__detailsToggleButton"
-          iconType={isLayerDetailsOpen ? 'arrowUp' : 'arrowDown'}
           aria-label={isLayerDetailsOpen
             ? i18n.translate('xpack.maps.layerControl.tocEntry.hideDetailsButtonAriaLabel', {
               defaultMessage: 'Hide layer details'
@@ -181,8 +188,9 @@ export class TOCEntry extends React.Component {
             })
           }
           onClick={this._toggleLayerDetailsVisibility}
-        />
-
+        >
+          <EuiIcon className="eui-alignBaseline" type={isLayerDetailsOpen ? 'arrowUp' : 'arrowDown'} size="s" />
+        </button>
       </span>
     );
   }
@@ -198,36 +206,32 @@ export class TOCEntry extends React.Component {
     } = this.props;
 
     return (
-      <EuiFlexGroup
-        gutterSize="none"
-        alignItems="center"
-        responsive={false}
+      <div
         className={
           layer.isVisible() && layer.showAtZoomLevel(zoom)
             && !layer.hasErrors() ? 'mapTocEntry-visible' : 'mapTocEntry-notVisible'
         }
       >
-        <EuiFlexItem grow={false} style={{ position: 'relative' }}>
-          <LayerTocActions
-            layer={layer}
-            fitToBounds={() => {
-              fitToBounds(layer.getId());
-            }}
-            zoom={zoom}
-            toggleVisible={() => {
-              toggleVisible(layer.getId());
-            }}
-            displayName={this.state.displayName}
-            escapedDisplayName={escapeLayerName(this.state.displayName)}
-            cloneLayer={() => {
-              cloneLayer(layer.getId());
-            }}
-            editLayer={this._openLayerPanelWithCheck}
-            isReadOnly={isReadOnly}
-          />
-          {this._renderDetailsToggle()}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        <LayerTocActions
+          layer={layer}
+          fitToBounds={() => {
+            fitToBounds(layer.getId());
+          }}
+          zoom={zoom}
+          toggleVisible={() => {
+            toggleVisible(layer.getId());
+          }}
+          displayName={this.state.displayName}
+          escapedDisplayName={escapeLayerName(this.state.displayName)}
+          cloneLayer={() => {
+            cloneLayer(layer.getId());
+          }}
+          editLayer={this._openLayerPanelWithCheck}
+          isReadOnly={isReadOnly}
+        />
+
+        {this._renderLayerIcons()}
+      </div>
     );
   }
 
@@ -243,6 +247,7 @@ export class TOCEntry extends React.Component {
 
     return (
       <div
+        className="mapTocEntry__layerDetails"
         data-test-subj={`mapLayerTOCDetails${escapeLayerName(this.state.displayName)}`}
       >
         {tocDetails}
@@ -251,19 +256,27 @@ export class TOCEntry extends React.Component {
   }
 
   render() {
+    const classes = classNames(
+      'mapTocEntry',
+      {
+        'mapTocEntry-isDragging': this.props.isDragging,
+        'mapTocEntry-isDraggingOver': this.props.isDraggingOver,
+      },
+    );
+
     return (
       <div
-        className="mapTocEntry"
+        className={classes}
         id={this.props.layer.getId()}
         data-layerid={this.props.layer.getId()}
       >
-        {this._renderCancelModal()}
-
         {this._renderLayerHeader()}
 
         {this._renderLayerDetails()}
 
-        {this._renderLayerIcons()}
+        {this._renderDetailsToggle()}
+
+        {this._renderCancelModal()}
       </div>
     );
   }
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/view.js
index 3dd5d231bba92..5cb28508d62fe 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/view.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/view.js
@@ -53,21 +53,30 @@ export class LayerTOC extends React.Component {
         });
     }
 
-    const draggableLayers = reverseLayerList.map((layer, idx) => (
-      <EuiDraggable spacing="none" key={layer.getId()} index={idx} draggableId={layer.getId()} customDragHandle={true}>
-        {(provided) => (
-          <TOCEntry
-            layer={layer}
-            dragHandleProps={provided.dragHandleProps}
-          />
-        )}
-      </EuiDraggable>
-    ));
-
     return (
       <EuiDragDropContext onDragEnd={this._onDragEnd}>
         <EuiDroppable droppableId="mapLayerTOC" spacing="none">
-          {draggableLayers}
+          {(provided, snapshot) => (
+            reverseLayerList.map((layer, idx) => (
+              <EuiDraggable
+                spacing="none"
+                key={layer.getId()}
+                index={idx}
+                draggableId={layer.getId()}
+                customDragHandle={true}
+                disableInteractiveElementBlocking // Allows button to be drag handle
+              >
+                {(provided, state) => (
+                  <TOCEntry
+                    layer={layer}
+                    dragHandleProps={provided.dragHandleProps}
+                    isDragging={state.isDragging}
+                    isDraggingOver={snapshot.isDraggingOver}
+                  />
+                )}
+              </EuiDraggable>
+            ))
+          )}
         </EuiDroppable>
       </EuiDragDropContext>
     );
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
index ea858ba8997d8..bd59361cc61b2 100644
--- 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,7 +16,7 @@ import { AttributionControl } from './attribution_control';
 export function WidgetOverlay() {
   return (
     <EuiFlexGroup className="mapWidgetOverlay" responsive={false} direction="column" alignItems="flexEnd" gutterSize="s">
-      <EuiFlexItem>
+      <EuiFlexItem className="mapWidgetOverlay__rightSideWrapper">
         <EuiFlexGroup
           className="mapWidgetOverlay__rightSide"
           direction="column"
diff --git a/x-pack/plugins/maps/public/shared/components/layer_toc_actions.js b/x-pack/plugins/maps/public/shared/components/layer_toc_actions.js
index 8cebd9c0fc198..d6bb70de8f792 100644
--- a/x-pack/plugins/maps/public/shared/components/layer_toc_actions.js
+++ b/x-pack/plugins/maps/public/shared/components/layer_toc_actions.js
@@ -56,16 +56,15 @@ export class LayerTocActions extends Component {
     const icon = this._renderIcon();
     return (
       <EuiButtonEmpty
-        style={{ maxWidth: '19rem' }}
-        className="mapTocEntry__layerName eui-textTruncate eui-textLeft"
+        className="mapTocEntry__layerName eui-textLeft"
         size="xs"
         flush="left"
         color="text"
         onClick={this._onClick}
         data-test-subj={`layerTocActionsPanelToggleButton${this.props.escapedDisplayName}`}
+        // textProps="mapTocEntry__layerNameText"
       >
-        <span className="eui-alignMiddle">{icon}</span>
-        {' '}
+        <span className="mapTocEntry__layerNameIcon">{icon}</span>
         {this.props.displayName}
       </EuiButtonEmpty>);
   }
@@ -206,12 +205,14 @@ export class LayerTocActions extends Component {
     return (
       <EuiPopover
         id="contextMenu"
+        className="mapLayTocActions"
         button={this._renderButton()}
         isOpen={this.state.isPopoverOpen}
         closePopover={this._closePopover}
         panelPaddingSize="none"
         withTitle
         anchorPosition="leftUp"
+        anchorClassName="mapLayTocActions__popoverAnchor"
       >
         <EuiContextMenu
           initialPanelId={0}
diff --git a/x-pack/plugins/maps/public/shared/layers/styles/components/vector/legend/style_property_legend_row.js b/x-pack/plugins/maps/public/shared/layers/styles/components/vector/legend/style_property_legend_row.js
index b05fee90c9dd3..21e83f57696a0 100644
--- a/x-pack/plugins/maps/public/shared/layers/styles/components/vector/legend/style_property_legend_row.js
+++ b/x-pack/plugins/maps/public/shared/layers/styles/components/vector/legend/style_property_legend_row.js
@@ -19,6 +19,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiToolTip,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 
 function renderLineWidthHeader() {
@@ -57,13 +58,19 @@ function renderSymbolSizeHeader() {
   }
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+    <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem grow={false}>
         <FillableCircle style={getStyle('4px')}/>
       </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiHorizontalRule margin="xs" />
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <FillableCircle style={getStyle('8px')}/>
       </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiHorizontalRule margin="xs" />
+      </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <FillableCircle style={getStyle('12px')}/>
       </EuiFlexItem>
@@ -90,10 +97,10 @@ export function StylePropertyLegendRow({ name, type, options, range }) {
     <div>
       <EuiSpacer size="xs"/>
       {header}
-      <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
+      <EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
+        <EuiFlexItem grow={true}>
           <EuiText size="xs">
-            {_.get(range, 'min', '')}
+            <small>{_.get(range, 'min', '')}</small>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -107,13 +114,13 @@ export function StylePropertyLegendRow({ name, type, options, range }) {
               size="xs"
               style={{ maxWidth: '180px' }}
             >
-              {options.field.label}
+              <small><strong>{options.field.label}</strong></small>
             </EuiText>
           </EuiToolTip>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs">
-            {_.get(range, 'max', '')}
+        <EuiFlexItem grow={true}>
+          <EuiText textAlign="right" size="xs">
+            <small>{_.get(range, 'max', '')}</small>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>