Design cleanup of layers panel (#31)

nreese · May 1, 2019 · ec6dab6 · ec6dab6
1 parent e6cb899
commit ec6dab6
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 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
@@ -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
@@ -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/...s/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/_toc_entry.scss b/...s/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/...k/plugins/maps/public/components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/...k/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,22 +148,29 @@ 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>
     );
   }
 
   _renderDetailsToggle() {
     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
@@ -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
@@ -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"