[Maps] Improve Layer Style UI (#58406) (#58626)

* Improving Layer Style UI * Removing unnecessary method * Updating snapshot * Changing width value to make use of sass variable Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Feb 27, 2020 · 05cad83 · 05cad83
1 parent 3e491f8
commit 05cad83
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 75 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
@@ -1,3 +1,4 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
+@import './join_editor/resources/join';
+@import './style_settings/style_settings';
diff --git a/.../plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/.../plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
@@ -0,0 +1,3 @@
+.mapStyleSettings__fixedBox {
+    width: $euiSize * 7.5;
+}
diff --git a/...acy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/...acy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
@@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
 
   return (
     <Fragment>
-      <EuiPanel>
+      <EuiPanel className="mapStyleSettings">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="xs">

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
@@ -1,6 +1,5 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
@@ -17,23 +16,3 @@
   }
 }
 
-.mapColorStop__icons {
-  flex-shrink: 0;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-right: -$euiSizeS;
-  margin-top: -$euiSizeM;
-}
-
-@keyframes mapColorStopBecomeVisible {
-
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -105,6 +105,7 @@ export class ColorMapSelect extends Component {
           onChange={this._onColorMapSelect}
           valueOfSelected={valueOfSelected}
           hasDividers={true}
+          compressed
         />
         {this._renderColorStopsInput()}
       </Fragment>

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
@@ -10,7 +10,19 @@ import { removeRow, isColorInvalid } from './color_stops_utils';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiColorPicker, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
-function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
+function getColorStopRow({ index, errors, stopInput, onColorChange, color, deleteButton, onAdd }) {
+  const colorPickerButtons = (
+    <div className="mapColorStop__icons">
+      {deleteButton}
+      <EuiButtonIcon
+        iconType="plusInCircle"
+        color="primary"
+        aria-label="Add"
+        title="Add"
+        onClick={onAdd}
+      />
+    </div>
+  );
   return (
     <EuiFormRow
       key={index}
@@ -19,22 +31,19 @@ function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, o
       error={errors}
       display="rowCompressed"
     >
-      <div>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-          <EuiFlexItem>{stopInput}</EuiFlexItem>
-          <EuiFlexItem>{colorInput}</EuiFlexItem>
-        </EuiFlexGroup>
-        <div className="mapColorStop__icons">
-          {deleteButton}
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            color="primary"
-            aria-label="Add"
-            title="Add"
-            onClick={onAdd}
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {stopInput}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiColorPicker
+            onChange={onColorChange}
+            color={color}
+            compressed
+            append={colorPickerButtons}
           />
-        </div>
-      </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
@@ -80,17 +89,6 @@ export const ColorStops = ({
     };
   }
 
-  function getColorInput(onColorChange, color) {
-    return {
-      colorError: isColorInvalid(color)
-        ? i18n.translate('xpack.maps.styles.colorStops.hexWarningLabel', {
-            defaultMessage: 'Color must provide a valid hex value',
-          })
-        : undefined,
-      colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
-    };
-  }
-
   const rows = colorStops.map((colorStop, index) => {
     const onColorChange = color => {
       const newColorStops = _.cloneDeep(colorStops);
@@ -102,7 +100,15 @@ export const ColorStops = ({
     };
 
     const { stopError, stopInput } = getStopInput(colorStop.stop, index);
-    const { colorError, colorInput } = getColorInput(onColorChange, colorStop.color);
+
+    const color = colorStop.color;
+
+    const colorError = isColorInvalid(color)
+      ? i18n.translate('xpack.maps.styles.colorStops.hexWarningLabel', {
+          defaultMessage: 'Color must provide a valid hex value',
+        })
+      : undefined;
+
     const errors = [];
     if (stopError) {
       errors.push(stopError);
@@ -131,7 +137,7 @@ export const ColorStops = ({
       deleteButton = getDeleteButton(onRemove);
     }
 
-    return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
+    return getColorStopRow({ index, errors, stopInput, onColorChange, color, deleteButton, onAdd });
   });
 
   return <div>{rows}</div>;

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -90,8 +90,10 @@ export function DynamicColorForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
@@ -18,8 +18,10 @@ export function StaticColorForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiColorPicker
           onChange={onColorChange}

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/...ck/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -21,8 +21,10 @@ export function DynamicLabelForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
@@ -14,8 +14,10 @@ export function StaticLabelForm({ onStaticStyleChange, staticDynamicSelect, styl
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFieldText
           placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {

diff --git a/...ugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/...ugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -24,8 +24,10 @@ export function DynamicOrientationForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}

diff --git a/...lugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js b/...lugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
@@ -14,8 +14,10 @@ export function StaticOrientationForm({ onStaticStyleChange, staticDynamicSelect
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -44,8 +44,10 @@ export function DynamicSizeForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
@@ -15,8 +15,10 @@ export function StaticSizeForm({ onStaticStyleChange, staticDynamicSelect, style
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
@@ -97,8 +97,10 @@ export class StylePropEditor extends Component {
         anchorClassName="mapStyleFormDisabledTooltip"
         content={getDisabledByMessage(this.props.disabledBy)}
       >
-        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+            {staticDynamicSelect}
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldText compressed disabled />
           </EuiFlexItem>

diff --git a/...maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/...maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/...ck/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -53,8 +53,10 @@ export function DynamicIconForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
@@ -128,6 +128,7 @@ export class IconSelect extends Component {
         closePopover={this._closePopover}
         anchorPosition="downLeft"
         panelPaddingSize="s"
+        display="block"
       >
         <EuiFocusTrap clickOutsideDisables={true}>{this._renderIconSelectable()}</EuiFocusTrap>
       </EuiPopover>

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
@@ -20,8 +20,10 @@ export function StaticIconForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <IconSelect
           isDarkMode={isDarkMode}