[Maps] Design updates for draw shape mode and timeslider

x-pack/plugins/maps/public/_animations.scss

@@ -0,0 +1,25 @@
+@keyframes headShake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}

x-pack/plugins/maps/public/_index.scss

@@ -13,3 +13,4 @@
 @import 'connected_components/index';
 @import 'components/index';
 @import 'classes/index';
+@import 'animations';

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/index.ts

@@ -29,7 +29,9 @@ import {
   hideTOCDetails,
   showTOCDetails,
   toggleLayerVisible,
+  setDrawMode,
 } from '../../../../../actions';
+import { DRAW_MODE } from '../../../../../../common';
 
 function mapStateToProps(state: MapStoreState, ownProps: OwnProps): ReduxStateProps {
   const flyoutDisplay = getFlyoutDisplay(state);
@@ -63,6 +65,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyActi
     toggleVisible: (layerId: string) => {
       dispatch(toggleLayerVisible(layerId));
     },
+    cancelEditing: () => {
+      dispatch(setDrawMode(DRAW_MODE.NONE));
+    },
   };
 }
 

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx

@@ -8,8 +8,8 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-
-import { EuiIcon, EuiButtonIcon, EuiConfirmModal } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TOCEntryActionsPopover } from './toc_entry_actions_popover';
 import {
@@ -40,6 +40,7 @@ export interface ReduxDispatchProps {
   hideTOCDetails: (layerId: string) => void;
   showTOCDetails: (layerId: string) => void;
   toggleVisible: (layerId: string) => void;
+  cancelEditing: () => void;
 }
 
 export interface OwnProps {
@@ -332,6 +333,23 @@ export class TOCEntry extends Component<Props, State> {
         {this._renderDetailsToggle()}
 
         {this._renderCancelModal()}
+
+        {this.props.editModeActiveForLayer && (
+          <div className="mapTocEntry-isInEditingMode__row">
+            <EuiButtonEmpty
+              size="xs"
+              color="danger"
+              iconType="vector"
+              flush="left"
+              onClick={this.props.cancelEditing}
+            >
+              <FormattedMessage
+                id="xpack.maps.layerControl.tocEntry.exitEditModeAriaLabel"
+                defaultMessage="Exit feature editing"
+              />
+            </EuiButtonEmpty>
+          </div>
+        )}
       </div>
     );
   }

x-pack/plugins/maps/public/connected_components/timeslider/_index.scss

@@ -1,53 +1,17 @@
+$timesliderWidth: 580px;
+
 .mapTimeslider {
   @include euiBottomShadowLarge;
   position: fixed;
   left: 50%;
   bottom: $euiSize;
-  transform: translateX(-50%);
-  min-width: 530px;
+  // we could center with translateX but this would impact the animation
+  margin-left: -($timesliderWidth / 2);
+  width: $timesliderWidth;
   z-index: 99999;
   background: $euiColorEmptyShade;
   padding: $euiSizeL $euiSizeXL;
   border-radius: $euiSize;
-
-  .euiRangeTick {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    font-size: $euiFontSizeXS;
-    position: relative;
-    padding-top: $euiSize;
-    color: $euiColorDarkShade;
-
-    &::before {
-      @include size($euiSizeXS);
-      width: 3px;
-      height: $euiSizeS;
-      content: '';
-      background-color: $euiColorLightShade;
-      position: absolute;
-      top: $euiSizeXS;
-      left: calc(50% - #{($euiSizeXS/2)});
-    }
-
-    &--isCustom {
-      position: absolute;
-      transform: translateX(-50%);
-    }
-
-    &:enabled:hover,
-    &:focus,
-    &--selected {
-      color: $euiColorPrimary;
-    }
-
-    &--selected {
-      font-weight: $euiFontWeightMedium;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
 }
 
 .mapTimeslider__row {
@@ -77,6 +41,10 @@
 
 .mapTimeslider__controls {
   margin-left: $euiSizeS;
+
+  .euiButtonIcon + .euiButtonIcon {
+    margin-left: $euiSizeXS;
+  }
 }
 
 .mapTimeslider__innerPanel {
@@ -87,3 +55,11 @@
   display: inline-flex;
   align-items: center;
 }
+
+.mapTimeslider__playButton {
+  border-radius: 50%;
+}
+
+.mapTimeslider--animation {
+  animation: headShake 1.2s ease-in-out;
+}

x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx

@@ -166,7 +166,7 @@ class KeyedTimeslider extends Component<Props, State> {
 
   render() {
     return (
-      <div className="mapTimeslider">
+      <div className="mapTimeslider mapTimeslider--animation">
         <div className="mapTimeslider__row">
           <EuiButtonIcon
             onClick={this.props.closeTimeslider}
@@ -186,24 +186,18 @@ class KeyedTimeslider extends Component<Props, State> {
             <div className="mapTimeslider__controls">
               <EuiButtonIcon
                 onClick={this._onPrevious}
-                iconType="arrowLeft"
+                iconType="framePrevious"
                 color="text"
                 aria-label={i18n.translate('xpack.maps.timeslider.previousTimeWindowLabel', {
                   defaultMessage: 'Previous time window',
                 })}
               />
               <EuiButtonIcon
-                onClick={this._onNext}
-                iconType="arrowRight"
-                color="text"
-                aria-label={i18n.translate('xpack.maps.timeslider.nextTimeWindowLabel', {
-                  defaultMessage: 'Next time window',
-                })}
-              />
-              <EuiButtonIcon
+                className="mapTimeslider__playButton"
                 onClick={this.state.isPaused ? this._onPlay : this._onPause}
-                iconType={this.state.isPaused ? 'play' : 'pause'}
-                color="text"
+                iconType={this.state.isPaused ? 'playFilled' : 'pause'}
+                size="s"
+                display="fill"
                 aria-label={
                   this.state.isPaused
                     ? i18n.translate('xpack.maps.timeslider.playLabel', {
@@ -214,6 +208,14 @@ class KeyedTimeslider extends Component<Props, State> {
                       })
                 }
               />
+              <EuiButtonIcon
+                onClick={this._onNext}
+                iconType="frameNext"
+                color="text"
+                aria-label={i18n.translate('xpack.maps.timeslider.nextTimeWindowLabel', {
+                  defaultMessage: 'Next time window',
+                })}
+              />
             </div>
           </div>
         </div>

x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss

@@ -52,6 +52,10 @@
   }
 }
 
+.mapToolbarOverlay__buttonGroupAnimated {
+  animation: headShake 1.2s ease-in-out;
+}
+
 .mapToolbarOverlay__button__exit {
   .euiButtonIcon {
     color: $euiColorDangerText !important;

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/feature_edit_tools.tsx

@@ -19,7 +19,6 @@ export interface ReduxStateProps {
 
 export interface ReduxDispatchProps {
   setDrawShape: (shapeToDraw: DRAW_SHAPE) => void;
-  cancelEditing: () => void;
 }
 
 export interface OwnProps {
@@ -37,7 +36,10 @@ export function FeatureEditTools(props: Props) {
   const deleteSelected = props.drawShape === DRAW_SHAPE.DELETE;
 
   return (
-    <EuiPanel paddingSize="none" className="mapToolbarOverlay__buttonGroup">
+    <EuiPanel
+      paddingSize="none"
+      className="mapToolbarOverlay__buttonGroup mapToolbarOverlay__buttonGroupAnimated"
+    >
       {props.pointsOnly ? null : (
         <>
           <EuiButtonIcon
@@ -136,19 +138,6 @@ export function FeatureEditTools(props: Props) {
         isSelected={deleteSelected}
         display={deleteSelected ? 'fill' : 'empty'}
       />
-
-      <EuiButtonIcon
-        key="exit"
-        size="s"
-        onClick={props.cancelEditing}
-        iconType="exit"
-        aria-label={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.cancelDraw', {
-          defaultMessage: 'Exit feature editing',
-        })}
-        title={i18n.translate('xpack.maps.toolbarOverlay.featureDraw.cancelDrawTitle', {
-          defaultMessage: 'Exit feature editing',
-        })}
-      />
     </EuiPanel>
   );
 }

x-pack/plugins/maps/public/connected_components/toolbar_overlay/feature_draw_controls/feature_edit_tools/index.ts

@@ -14,9 +14,9 @@ import {
   ReduxStateProps,
   OwnProps,
 } from './feature_edit_tools';
-import { setDrawMode, updateEditShape } from '../../../../actions';
+import { updateEditShape } from '../../../../actions';
 import { MapStoreState } from '../../../../reducers/store';
-import { DRAW_MODE, DRAW_SHAPE } from '../../../../../common';
+import { DRAW_SHAPE } from '../../../../../common';
 import { getEditState } from '../../../../selectors/map_selectors';
 
 function mapStateToProps(state: MapStoreState): ReduxStateProps {
@@ -33,9 +33,6 @@ function mapDispatchToProps(
     setDrawShape: (shapeToDraw: DRAW_SHAPE) => {
       dispatch(updateEditShape(shapeToDraw));
     },
-    cancelEditing: () => {
-      dispatch(setDrawMode(DRAW_MODE.NONE));
-    },
   };
 }
 

x-pack/plugins/maps/public/connected_components/toolbar_overlay/timeslider_toggle_button/timeslider_toggle_button.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
-import { ClockPlayIcon } from './clock_play_icon';
 
 export interface Props {
   isTimesliderOpen: boolean;
@@ -39,10 +38,11 @@ export function TimesliderToggleButton(props: Props) {
         size="s"
         onClick={onClick}
         data-test-subj="timesliderToggleButton"
-        iconType={ClockPlayIcon}
-        color={props.isTimesliderOpen ? 'primary' : 'text'}
+        iconType="timeslider"
         aria-label={label}
         title={label}
+        isSelected={props.isTimesliderOpen}
+        display={props.isTimesliderOpen ? 'fill' : 'empty'}
       />
     </EuiPanel>
   );