Added new exit mode design. Renamed animations

elastic · Jun 29, 2021 · 9137264 · 9137264
1 parent c6c6e78
commit 9137264
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/x-pack/plugins/maps/public/_animations.scss b/x-pack/plugins/maps/public/_animations.scss
@@ -1,4 +1,4 @@
-@keyframes headShake {
+@keyframes mapAnimationHeadShake {
   0% {
     transform: translateX(0);
   }
@@ -24,7 +24,7 @@
   }
 }
 
-@keyframes pulse {
+@keyframes mapAnimationPulse {
   from {
     transform: scale3d(1, 1, 1);
   }

diff --git a/...onnected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/...onnected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss
@@ -32,9 +32,22 @@
 
 .mapTocEntry-isInEditingMode {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important;
+  font-size: $euiFontSizeXS;
+  font-weight: $euiFontWeightMedium;
 
   &__row {
     margin-left: $euiSizeL;
+    display: inline-flex;
+    align-items: center;
+
+    > * {
+      margin-right: $euiSizeXS;
+    }
+  }
+
+  &__editFeatureText {
+    line-height: 1;
+    padding-right: $euiSizeXS;
   }
 }
 

diff --git a/.../connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/.../connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx
@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui';
+import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TOCEntryActionsPopover } from './toc_entry_actions_popover';
 import {
@@ -336,16 +336,17 @@ export class TOCEntry extends Component<Props, State> {
 
         {this.props.editModeActiveForLayer && (
           <div className="mapTocEntry-isInEditingMode__row">
-            <EuiButtonEmpty
-              size="xs"
-              color="danger"
-              iconType="vector"
-              flush="left"
-              onClick={this.props.cancelEditing}
-            >
+            <EuiIcon type="vector" size="s" />
+            <span className="mapTocEntry-isInEditingMode__editFeatureText">
+              <FormattedMessage
+                id="xpack.maps.layerControl.tocEntry.EditFeature"
+                defaultMessage="Edit feature"
+              />
+            </span>
+            <EuiButtonEmpty size="xs" flush="both" onClick={this.props.cancelEditing}>
               <FormattedMessage
                 id="xpack.maps.layerControl.tocEntry.exitEditModeAriaLabel"
-                defaultMessage="Exit feature editing"
+                defaultMessage="Exit"
               />
             </EuiButtonEmpty>
           </div>

diff --git a/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss b/x-pack/plugins/maps/public/connected_components/timeslider/_index.scss
@@ -65,5 +65,5 @@ $timesliderWidth: 585px;
 }
 
 .mapTimeslider--animation {
-  animation: pulse .6s ease-in-out;
+  animation: mapAnimationPulse .6s ease-in-out;
 }
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss
@@ -53,7 +53,7 @@
 }
 
 .mapToolbarOverlay__buttonGroupAnimated {
-  animation: headShake 1.2s ease-in-out;
+  animation: mapAnimationHeadShake 1.2s ease-in-out;
 }
 
 .mapToolbarOverlay__button__exit {