diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap index 5e9500f65d167..053863c68775f 100644 --- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap +++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap @@ -2,9 +2,6 @@ exports[`should not render relation select when geo field is geo_point 1`] = ` - - + - Create filter - + + Create filter + + `; exports[`should not show "within" relation when filter geometry is not closed 1`] = ` - - + - Create filter - + + Create filter + + `; exports[`should render relation select when geo field is geo_shape 1`] = ` - - + - Create filter - + + Create filter + + `; diff --git a/x-pack/legacy/plugins/maps/public/components/_index.scss b/x-pack/legacy/plugins/maps/public/components/_index.scss index 3e13cd3755dd3..6f180b840b877 100644 --- a/x-pack/legacy/plugins/maps/public/components/_index.scss +++ b/x-pack/legacy/plugins/maps/public/components/_index.scss @@ -2,6 +2,26 @@ margin-bottom: $euiSizeS; } +.mapMetricEditorPanel__metricEditor { + padding: $euiSizeM 0; + border-top: $euiBorderThin; + + &:first-child { + padding-top: 0; + border-top: none; + } + + &:last-child { + margin-bottom: $euiSizeM; + border-bottom: 1px solid $euiColorLightShade; + } +} + +.mapMetricEditorPanel__metricRemoveButton { + padding-top: $euiSizeM; + text-align: right; +} + .mapGeometryFilter__geoFieldSuperSelect { height: $euiSizeL * 2; } diff --git a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js index 2c518a856f239..10410f4d79e5b 100644 --- a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js +++ b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js @@ -16,6 +16,7 @@ import { EuiButton, EuiSelect, EuiSpacer, + EuiTextAlign, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants'; @@ -154,8 +155,6 @@ export class GeometryFilterForm extends Component { }); return ( - - - {this.props.buttonLabel} - + + + + + {this.props.buttonLabel} + + ); } diff --git a/x-pack/legacy/plugins/maps/public/components/metric_editor.js b/x-pack/legacy/plugins/maps/public/components/metric_editor.js index f2f309d051213..65f345925fd84 100644 --- a/x-pack/legacy/plugins/maps/public/components/metric_editor.js +++ b/x-pack/legacy/plugins/maps/public/components/metric_editor.js @@ -43,7 +43,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu label={i18n.translate('xpack.maps.metricsEditor.selectFieldLabel', { defaultMessage: 'Field', })} - display="rowCompressed" + display="columnCompressed" > {fieldSelect} - {labelInput} + {removeButton} ); } diff --git a/x-pack/legacy/plugins/maps/public/components/metrics_editor.js b/x-pack/legacy/plugins/maps/public/components/metrics_editor.js index ebb3904a44799..53d078369cf89 100644 --- a/x-pack/legacy/plugins/maps/public/components/metrics_editor.js +++ b/x-pack/legacy/plugins/maps/public/components/metrics_editor.js @@ -8,7 +8,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiButtonIcon, EuiButtonEmpty, EuiPanel, EuiSpacer, EuiTextAlign } from '@elastic/eui'; +import { EuiButtonEmpty, EuiSpacer, EuiTextAlign } from '@elastic/eui'; import { MetricEditor } from './metric_editor'; export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, metricsFilter }) { @@ -25,23 +25,26 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, let removeButton; if (index > 0) { removeButton = ( - +
+ + + +
); } return ( - +
- +
); }); } @@ -80,7 +83,7 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, return ( - {renderMetrics()} +
{renderMetrics()}
{renderAddMetricButton()} 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..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,3 +1,3 @@ @import './layer_panel'; @import './filter_editor/filter_editor'; -@import './join_editor/resources/join'; +@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/layer_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js index c0dbb1ec8fcba..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 @@ -36,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 => { @@ -47,18 +49,21 @@ export function LayerSettings(props) { return ( ); }; @@ -67,9 +72,9 @@ export function LayerSettings(props) { return ( @@ -77,23 +82,28 @@ export function LayerSettings(props) { }; const renderAlphaSlider = () => { + const alphaPercent = Math.round(props.alpha * 100); + return ( ); @@ -103,15 +113,23 @@ export function LayerSettings(props) { const layerSupportsGlobalQuery = props.layer.getIndexPatternIds().length; const applyGlobalQueryCheckbox = ( - + display="columnCompressedSwitch" + > + + ); if (layerSupportsGlobalQuery) { @@ -146,8 +164,6 @@ export function LayerSettings(props) { {renderLabel()} {renderZoomSliders()} {renderAlphaSlider()} - - {renderApplyGlobalQueryCheckbox()} diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js index f1d055d357b24..05ec23d10795a 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js @@ -13,6 +13,8 @@ import { EuiFieldNumber, EuiButtonIcon, EuiPopover, + EuiTextAlign, + EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -72,7 +74,7 @@ export class SetViewControl extends Component { return { isInvalid, component: ( - + + {latFormRow} {lonFormRow} {zoomFormRow} - - - + + + + + + + ); } @@ -149,6 +158,7 @@ export class SetViewControl extends Component { return ( , "id": 1, - "title": "Draw shape to filter data", + "title": "Draw shape", }, Object { "content": , "id": 2, - "title": "Draw bounds to filter data", + "title": "Draw bounds", }, ] } @@ -166,7 +166,7 @@ exports[`renders 1`] = ` onSubmit={[Function]} />, "id": 1, - "title": "Draw shape to filter data", + "title": "Draw shape", }, Object { "content": , "id": 2, - "title": "Draw bounds to filter data", + "title": "Draw bounds", }, ] } diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js index 722c615ea4324..ea6ffe3ba1435 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.js @@ -26,10 +26,17 @@ const DRAW_BOUNDS_LABEL = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLa defaultMessage: 'Draw bounds to filter data', }); -export class ToolsControl extends Component { +const DRAW_SHAPE_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawShapeLabelShort', { + defaultMessage: 'Draw shape', +}); + +const DRAW_BOUNDS_LABEL_SHORT = i18n.translate('xpack.maps.toolbarOverlay.drawBoundsLabelShort', { + defaultMessage: 'Draw bounds', +}); +export class ToolsControl extends Component { state = { - isPopoverOpen: false + isPopoverOpen: false, }; _togglePopover = () => { @@ -42,18 +49,18 @@ export class ToolsControl extends Component { this.setState({ isPopoverOpen: false }); }; - _initiateShapeDraw = (options) => { + _initiateShapeDraw = options => { this.props.initiateDraw({ drawType: DRAW_TYPE.POLYGON, - ...options + ...options, }); this._closePopover(); - } + }; - _initiateBoundsDraw = (options) => { + _initiateBoundsDraw = options => { this.props.initiateDraw({ drawType: DRAW_TYPE.BOUNDS, - ...options + ...options, }); this._closePopover(); }; @@ -68,48 +75,50 @@ export class ToolsControl extends Component { items: [ { name: DRAW_SHAPE_LABEL, - panel: 1 + panel: 1, }, { name: DRAW_BOUNDS_LABEL, - panel: 2 - } - ] + panel: 2, + }, + ], }, { id: 1, - title: DRAW_SHAPE_LABEL, + title: DRAW_SHAPE_LABEL_SHORT, content: ( - ) + ), }, { id: 2, - title: DRAW_BOUNDS_LABEL, + title: DRAW_BOUNDS_LABEL_SHORT, content: ( - ) - } + ), + }, ]; } @@ -141,10 +150,7 @@ export class ToolsControl extends Component { withTitle anchorPosition="leftUp" > - + ); @@ -154,15 +160,9 @@ export class ToolsControl extends Component { return ( + {toolsPopoverButton} - {toolsPopoverButton} - - - + - + {this._renderMetricsEditor()} ); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap index f83240e3f70d0..97706169d98bf 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap @@ -1,34 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Should render icon select when symbolized as Icon 1`] = ` - - + + hasEmptyLabelSpace={false} + label="Symbol type" + labelType="label" + > + + @@ -60,37 +60,37 @@ exports[`Should render icon select when symbolized as Icon 1`] = ` } singleSelection={true} /> - + `; exports[`Should render symbol select when symbolized as Circle 1`] = ` - - + - + hasEmptyLabelSpace={false} + label="Symbol type" + labelType="label" + > + + + `; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss index 7d6c6ede0d330..eab7896650772 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss @@ -1,6 +1,6 @@ .mapColorStop { position: relative; - padding-right: $euiSizeXL + $euiSizeXS; + padding-right: $euiSizeXL + $euiSizeS; & + & { margin-top: $euiSizeS; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js index 8a33582203887..b5529c6987459 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js @@ -23,6 +23,7 @@ export function StaticOrientationSelection({ onChange, styleOptions }) { showInput showLabels compressed + append="°" /> ); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js index fd1ce0ffe89a8..31b9b4f5ad649 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js @@ -8,6 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ValidatedDualRange } from 'ui/validated_range'; import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults'; +import { i18n } from '@kbn/i18n'; export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) { const onSizeChange = ([min, max]) => { @@ -23,10 +24,14 @@ export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) { max={DEFAULT_MAX_SIZE} step={1} value={[minSize, maxSize]} - showInput + showInput="inputWithPopover" showRange onChange={onSizeChange} allowEmptyRange={false} + append={i18n.translate('xpack.maps.vector.dualSize.unitLabel', { + defaultMessage: 'px', + description: 'Shorthand for pixel', + })} {...rest} /> ); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js index 507f81ade9309..38f8fe53d1748 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js @@ -8,6 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { staticSizeShape } from '../style_option_shapes'; import { ValidatedRange } from '../../../../../components/validated_range'; +import { i18n } from '@kbn/i18n'; export function StaticSizeSelection({ onChange, styleOptions }) { const onSizeChange = size => { @@ -23,6 +24,10 @@ export function StaticSizeSelection({ onChange, styleOptions }) { showInput showLabels compressed + append={i18n.translate('xpack.maps.vector.size.unitLabel', { + defaultMessage: 'px', + description: 'Shorthand for pixel', + })} /> ); } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js index 0fcbe7653c3de..268b1f39255b9 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js @@ -10,7 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiFormRow, - EuiSelect, + EuiButtonGroup, EuiSpacer, EuiComboBox, } from '@elastic/eui'; @@ -21,14 +21,14 @@ import { SymbolIcon } from './legend/symbol_icon'; const SYMBOLIZE_AS_OPTIONS = [ { - value: SYMBOLIZE_AS_CIRCLE, - text: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', { + id: SYMBOLIZE_AS_CIRCLE, + label: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', { defaultMessage: 'circle marker', }), }, { - value: SYMBOLIZE_AS_ICON, - text: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', { + id: SYMBOLIZE_AS_ICON, + label: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', { defaultMessage: 'icon', }), }, @@ -41,26 +41,27 @@ export function VectorStyleSymbolEditor({ isDarkMode, }) { const renderSymbolizeAsSelect = () => { - const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ value }) => { - return value === styleOptions.symbolizeAs; + const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => { + return id === styleOptions.symbolizeAs; }); - const onSymbolizeAsChange = e => { + const onSymbolizeAsChange = optionId => { const styleDescriptor = { options: { ...styleOptions, - symbolizeAs: e.target.value, + symbolizeAs: optionId, }, }; handlePropertyChange('symbol', styleDescriptor); }; return ( - ); }; @@ -113,28 +114,23 @@ export function VectorStyleSymbolEditor({ ); }; - const renderFormRowContent = () => { - if (styleOptions.symbolizeAs === SYMBOLIZE_AS_CIRCLE) { - return renderSymbolizeAsSelect(); - } - - return ( - + return ( + + {renderSymbolizeAsSelect()} - - {renderSymbolSelect()} - - ); - }; + - return ( - - {renderFormRowContent()} - + {styleOptions.symbolizeAs !== SYMBOLIZE_AS_CIRCLE && ( + + + {renderSymbolSelect()} + + )} + ); } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 9b57ab465b707..0c6d667822aa5 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -5874,9 +5874,7 @@ "xpack.maps.source.wms.attributionText": "属性 URL にはテキストが必要です", "xpack.maps.style.customColorRampLabel": "カスタマカラーランプ", "xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel": "境界", - "xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel": "境界を描く", "xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel": "図形", - "xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel": "図形を描く", "xpack.maps.tooltip.geometryFilterForm.createFilterButtonLabel": "フィルターを作成", "xpack.maps.tooltip.pageNumerText": "{total} 個中 {pageNumber} 個の機能", "xpack.maps.tooltip.showGeometryFilterViewLinkLabel": "ジオメトリでフィルタリング", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3cd3ad3fdcd35..2b5631aa142fd 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -5877,9 +5877,7 @@ "xpack.maps.source.wms.attributionText": "属性 url 必须附带文本", "xpack.maps.style.customColorRampLabel": "定制颜色渐变", "xpack.maps.toolbarOverlay.drawBounds.initialGeometryLabel": "边界", - "xpack.maps.toolbarOverlay.drawBounds.onSubmitButtonLabel": "绘制边界", "xpack.maps.toolbarOverlay.drawShape.initialGeometryLabel": "形状", - "xpack.maps.toolbarOverlay.drawShape.onSubmitButtonLabel": "绘制形状", "xpack.maps.tooltip.geometryFilterForm.createFilterButtonLabel": "创建筛选", "xpack.maps.tooltip.pageNumerText": "第 {pageNumber} 项功能，总计 {total} 项", "xpack.maps.tooltip.showGeometryFilterViewLinkLabel": "按几何筛选",