From 05cad83b76f63b1ee580bef5d378dedf06adfe92 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 27 Feb 2020 11:54:12 +0000 Subject: [PATCH] [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 Co-authored-by: Elastic Machine --- .../layer_panel/_index.scss | 3 +- .../style_settings/_style_settings.scss | 3 + .../style_settings/style_settings.js | 2 +- .../vector/components/color/_color_stops.scss | 21 ------ .../components/color/color_map_select.js | 1 + .../vector/components/color/color_stops.js | 64 ++++++++++--------- .../components/color/dynamic_color_form.js | 6 +- .../components/color/static_color_form.js | 6 +- .../components/label/dynamic_label_form.js | 6 +- .../components/label/static_label_form.js | 6 +- .../orientation/dynamic_orientation_form.js | 6 +- .../orientation/static_orientation_form.js | 6 +- .../components/size/dynamic_size_form.js | 6 +- .../components/size/static_size_form.js | 6 +- .../vector/components/style_prop_editor.js | 6 +- .../__snapshots__/icon_select.test.js.snap | 2 +- .../components/symbol/dynamic_icon_form.js | 6 +- .../vector/components/symbol/icon_select.js | 1 + .../components/symbol/static_icon_form.js | 6 +- 19 files changed, 88 insertions(+), 75 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_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 b219f59476ce9f..fd074edf032fa0 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'; \ No newline at end of file +@import './join_editor/resources/join'; +@import './style_settings/style_settings'; \ No newline at end of file diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss new file mode 100644 index 00000000000000..249b6dfca5c764 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss @@ -0,0 +1,3 @@ +.mapStyleSettings__fixedBox { + width: $euiSize * 7.5; +} \ No newline at end of file diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js index 2857065f04c70b..69cf51fb29c0db 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js @@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) { return ( - + 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 index 001ca0685d0e98..519e97f4b30cd7 100644 --- 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 index e8d5754ef42067..436a92b6199090 100644 --- 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()} 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 index 47c2d037e0c793..3e9b9e2aafc478 100644 --- 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 = ( +
+ {deleteButton} + +
+ ); return ( -
- - {stopInput} - {colorInput} - -
- {deleteButton} - + + {stopInput} + + + -
-
+ + ); } @@ -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: , - }; - } - 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
{rows}
; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js index af5e5b37f5467f..3dc356c31cf30b 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js @@ -90,8 +90,10 @@ export function DynamicColorForm({ return ( - - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - - {staticDynamicSelect} + + + {staticDynamicSelect} + - {staticDynamicSelect} + + + {staticDynamicSelect} + - - {staticDynamicSelect} + + + {staticDynamicSelect} + diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap index 706dc0763b7cac..8fa69e1a5b467d 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap @@ -34,7 +34,7 @@ exports[`Should render icon select 1`] = ` } closePopover={[Function]} - display="inlineBlock" + display="block" hasArrow={true} isOpen={false} ownFocus={true} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js index afa11daf452178..9065102dc8bd73 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js @@ -53,8 +53,10 @@ export function DynamicIconForm({ return ( - - {staticDynamicSelect} + + + {staticDynamicSelect} + {this._renderIconSelectable()} 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 index b20d8f2eba1629..9b00b2fe38d7bb 100644 --- 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 ( - - {staticDynamicSelect} + + + {staticDynamicSelect} +