From 67c7857998a7e62fb6fc0ff755fa1f12c52bd6ae Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 25 Sep 2019 15:11:16 +0100
Subject: [PATCH 1/5] Input with popoper and icons

---
 .../layer_panel/layer_settings/layer_settings.js             | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index c0dbb1ec8fcba..6d33cd2206461 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -14,6 +14,7 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiToolTip,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { ValidatedRange } from '../../../components/validated_range';
@@ -53,12 +54,14 @@ export function LayerSettings(props) {
         min={MIN_ZOOM}
         max={MAX_ZOOM}
         value={[props.minZoom, props.maxZoom]}
-        showInput
+        showInput="inputWithPopover"
         showRange
         showLabels
         onChange={onZoomChange}
         allowEmptyRange={false}
         compressed
+        prepend={<EuiIcon type="magnifyWithMinus" />}
+        append={<EuiIcon type="magnifyWithPlus" />}
       />
     );
   };

From 9f0e746a66663254cc0a22dd421620ec193e2804 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 26 Sep 2019 11:36:20 +0100
Subject: [PATCH 2/5] Improving layer settings styles

---
 .../layer_settings/layer_settings.js          | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index 6d33cd2206461..025b53a839b7e 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -14,7 +14,6 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiToolTip,
-  EuiIcon,
 } from '@elastic/eui';
 
 import { ValidatedRange } from '../../../components/validated_range';
@@ -37,7 +36,9 @@ export function LayerSettings(props) {
   };
 
   const onAlphaChange = alpha => {
-    props.updateAlpha(props.layerId, alpha);
+    const alphaDecimal = alpha / 100;
+
+    props.updateAlpha(props.layerId, alphaDecimal);
   };
 
   const onApplyGlobalQueryChange = event => {
@@ -60,8 +61,9 @@ export function LayerSettings(props) {
         onChange={onZoomChange}
         allowEmptyRange={false}
         compressed
-        prepend={<EuiIcon type="magnifyWithMinus" />}
-        append={<EuiIcon type="magnifyWithPlus" />}
+        prepend={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoom', {
+          defaultMessage: 'Zoom levels',
+        })}
       />
     );
   };
@@ -80,6 +82,8 @@ export function LayerSettings(props) {
   };
 
   const renderAlphaSlider = () => {
+    const alphaPercent = Math.round(props.alpha * 100);
+
     return (
       <EuiFormRow
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerTransparencyLabel', {
@@ -88,15 +92,19 @@ export function LayerSettings(props) {
         display="rowCompressed"
       >
         <ValidatedRange
-          min={0.0}
-          max={1.0}
-          step={0.05}
-          value={props.alpha}
+          min={0}
+          max={100}
+          step={5}
+          value={alphaPercent}
           onChange={onAlphaChange}
           showLabels
           showInput
           showRange
           compressed
+          append={i18n.translate('xpack.maps.layerPanel.settingsPanel.percentageLabel', {
+            defaultMessage: '%',
+            description: 'Percentage',
+          })}
         />
       </EuiFormRow>
     );

From 0e1cdca2f1f60d9fa072983128b374d7fb0e0075 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 26 Sep 2019 12:59:37 +0100
Subject: [PATCH 3/5] Column layout

---
 .../layer_panel/_index.scss                   |  1 +
 .../layer_panel/layer_settings/_index.scss    |  1 +
 .../layer_settings/_layer_settings.scss       |  6 +++
 .../layer_settings/layer_settings.js          | 40 +++++++++++--------
 4 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss

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
index 5412a05e7dd7b..8d12e3e3c24de 100644
--- 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 './layer_settings/index';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
new file mode 100644
index 0000000000000..2d807ebfe848b
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
@@ -0,0 +1 @@
+@import './_layer_settings';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss
new file mode 100644
index 0000000000000..9c615b2300321
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss
@@ -0,0 +1,6 @@
+.mapLayerSettings__globalFilterRow {
+    .euiFormRow__fieldWrapper {
+        display: flex;
+        align-items: center,
+    }
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index 025b53a839b7e..5f92da3569761 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -49,9 +49,9 @@ export function LayerSettings(props) {
     return (
       <ValidatedDualRange
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
-          defaultMessage: 'Zoom range for layer visibility',
+          defaultMessage: 'Visibility',
         })}
-        formRowDisplay="rowCompressed"
+        formRowDisplay="columnCompressed"
         min={MIN_ZOOM}
         max={MAX_ZOOM}
         value={[props.minZoom, props.maxZoom]}
@@ -72,9 +72,9 @@ export function LayerSettings(props) {
     return (
       <EuiFormRow
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerNameLabel', {
-          defaultMessage: 'Layer name',
+          defaultMessage: 'Name',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <EuiFieldText value={props.label} onChange={onLabelChange} compressed />
       </EuiFormRow>
@@ -87,9 +87,9 @@ export function LayerSettings(props) {
     return (
       <EuiFormRow
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerTransparencyLabel', {
-          defaultMessage: 'Layer transparency',
+          defaultMessage: 'Opacity',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <ValidatedRange
           min={0}
@@ -97,7 +97,6 @@ export function LayerSettings(props) {
           step={5}
           value={alphaPercent}
           onChange={onAlphaChange}
-          showLabels
           showInput
           showRange
           compressed
@@ -114,15 +113,24 @@ export function LayerSettings(props) {
     const layerSupportsGlobalQuery = props.layer.getIndexPatternIds().length;
 
     const applyGlobalQueryCheckbox = (
-      <EuiSwitch
-        label={i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {
-          defaultMessage: `Apply global filter to layer`,
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGlobalFilterLabel', {
+          defaultMessage: 'Global filter',
         })}
-        checked={layerSupportsGlobalQuery ? props.applyGlobalQuery : false}
-        onChange={onApplyGlobalQueryChange}
-        disabled={!layerSupportsGlobalQuery}
-        data-test-subj="mapLayerPanelApplyGlobalQueryCheckbox"
-      />
+        display="columnCompressed"
+        className="mapLayerSettings__globalFilterRow"
+      >
+        <EuiSwitch
+          label={i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {
+            defaultMessage: `Apply to layer`,
+          })}
+          checked={layerSupportsGlobalQuery ? props.applyGlobalQuery : false}
+          onChange={onApplyGlobalQueryChange}
+          disabled={!layerSupportsGlobalQuery}
+          data-test-subj="mapLayerPanelApplyGlobalQueryCheckbox"
+          compressed
+        />
+      </EuiFormRow>
     );
 
     if (layerSupportsGlobalQuery) {
@@ -157,8 +165,6 @@ export function LayerSettings(props) {
         {renderLabel()}
         {renderZoomSliders()}
         {renderAlphaSlider()}
-
-        <EuiSpacer size="m" />
         {renderApplyGlobalQueryCheckbox()}
       </EuiPanel>
 

From 989a679f4dafbf5a6f00deb683cecd28bb518cbc Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 26 Sep 2019 15:16:27 +0100
Subject: [PATCH 4/5] Changing step

---
 .../layer_panel/layer_settings/layer_settings.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index 5f92da3569761..2ce160ab882b8 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -94,7 +94,7 @@ export function LayerSettings(props) {
         <ValidatedRange
           min={0}
           max={100}
-          step={5}
+          step={1}
           value={alphaPercent}
           onChange={onAlphaChange}
           showInput

From 23d0c5eff634d3dfbaf8a9eead6d48c73e91dee5 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 26 Sep 2019 15:37:06 +0100
Subject: [PATCH 5/5] Removing unecessary css

---
 .../public/connected_components/layer_panel/_index.scss     | 3 +--
 .../layer_panel/layer_settings/_index.scss                  | 1 -
 .../layer_panel/layer_settings/_layer_settings.scss         | 6 ------
 .../layer_panel/layer_settings/layer_settings.js            | 3 +--
 4 files changed, 2 insertions(+), 11 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
 delete mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss

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
index 8d12e3e3c24de..b219f59476ce9 100644
--- 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,4 +1,3 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
-@import './layer_settings/index';
\ No newline at end of file
+@import './join_editor/resources/join';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
deleted file mode 100644
index 2d807ebfe848b..0000000000000
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './_layer_settings';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss
deleted file mode 100644
index 9c615b2300321..0000000000000
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/_layer_settings.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.mapLayerSettings__globalFilterRow {
-    .euiFormRow__fieldWrapper {
-        display: flex;
-        align-items: center,
-    }
-}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
index 2ce160ab882b8..5be842f949871 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js
@@ -117,8 +117,7 @@ export function LayerSettings(props) {
         label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGlobalFilterLabel', {
           defaultMessage: 'Global filter',
         })}
-        display="columnCompressed"
-        className="mapLayerSettings__globalFilterRow"
+        display="columnCompressedSwitch"
       >
         <EuiSwitch
           label={i18n.translate('xpack.maps.layerPanel.applyGlobalQueryCheckboxLabel', {