github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] Improve Layer Style UI (#58406)

Browse source 
* 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>
This commit is contained in:
Elizabet Oliveira 2020-02-26 18:20:03 +00:00 • committed by GitHub
parent 8511fe3780
commit fa5400f606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 88 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
View file

@ -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';

3
x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss Normal file
View file

@ -0,0 +1,3 @@
.mapStyleSettings__fixedBox {
width: $euiSize * 7.5;
}

2
x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
View file

@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
return (
<Fragment>
<EuiPanel>
<EuiPanel className="mapStyleSettings">
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="xs">

21
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
View file

@ -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;
}
}

1
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
View file

@ -105,6 +105,7 @@ export class ColorMapSelect extends Component {
onChange={this._onColorMapSelect}
valueOfSelected={valueOfSelected}
hasDividers={true}
compressed
/>
{this._renderColorStopsInput()}
</Fragment>

64
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
View file

@ -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>;

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
View file

@ -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', {

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
View file

@ -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}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
View file

@ -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>

2
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap generated
View file

@ -34,7 +34,7 @@ exports[`Should render icon select 1`] = `
</EuiFormControlLayout>
}
closePopover={[Function]}
display="inlineBlock"
display="block"
hasArrow={true}
isOpen={false}
ownFocus={true}

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
View file

@ -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}

1
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
View file

@ -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>

6
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
View file

@ -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}