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

[Maps] disable style forms when they are not applied due to other style settings (#55858)

Browse source 
* [Maps] disable style forms when they are not applied due to other style settings

* disable label border color when label border is none

* disable symbol style inputs when symbol size is zero

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2020-01-31 11:13:28 -05:00 • committed by GitHub
parent 5ed7be9498
commit 38c7d3a668
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 156 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/legacy/plugins/maps/public/layers/styles/_index.scss
View file

@ -1,4 +1,4 @@
@import './components/color_gradient';
@import './vector/components/static_dynamic_style_row';
@import './vector/components/style_prop_editor';
@import './vector/components/color/color_stops';
@import './vector/components/symbol/icon_select';

3
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/_static_dynamic_style_row.scss
View file

@ -1,3 +0,0 @@
.mapStaticDynamicSylingOption__dynamicSizeHack {
width: calc(100% - #{$euiSizeXXL + $euiSizeS});
}

3
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/_style_prop_editor.scss Normal file
View file

@ -0,0 +1,3 @@
.mapStyleFormDisabledTooltip {
width: 100%;
}

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

@ -8,6 +8,13 @@ import { i18n } from '@kbn/i18n';
import { VECTOR_STYLES } from '../vector_style_defaults';
export function getDisabledByMessage(styleName) {
return i18n.translate('xpack.maps.styles.vector.disabledByMessage', {
defaultMessage: `Set '{styleLabel}' to enable`,
values: { styleLabel: getVectorStyleLabel(styleName) },
});
}
export function getVectorStyleLabel(styleName) {
switch (styleName) {
case VECTOR_STYLES.FILL_COLOR:

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

@ -6,9 +6,9 @@
import React from 'react';
import { EuiFormRow, EuiSelect } from '@elastic/eui';
import { EuiFormRow, EuiSelect, EuiToolTip } from '@elastic/eui';
import { LABEL_BORDER_SIZES, VECTOR_STYLES } from '../../vector_style_defaults';
import { getVectorStyleLabel } from '../get_vector_style_label';
import { getVectorStyleLabel, getDisabledByMessage } from '../get_vector_style_label';
import { i18n } from '@kbn/i18n';
const options = [
@ -38,7 +38,12 @@ const options = [
},
];
export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, styleProperty }) {
export function VectorStyleLabelBorderSizeEditor({
disabled,
disabledBy,
handlePropertyChange,
styleProperty,
}) {
function onChange(e) {
const styleDescriptor = {
options: { size: e.target.value },
@ -46,12 +51,13 @@ export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, stylePr
handlePropertyChange(styleProperty.getStyleName(), styleDescriptor);
}
return (
const labelBorderSizeForm = (
<EuiFormRow
label={getVectorStyleLabel(VECTOR_STYLES.LABEL_BORDER_SIZE)}
display="columnCompressed"
>
<EuiSelect
disabled={disabled}
options={options}
value={styleProperty.getOptions().size}
onChange={onChange}
@ -62,4 +68,17 @@ export function VectorStyleLabelBorderSizeEditor({ handlePropertyChange, stylePr
/>
</EuiFormRow>
);
if (!disabled) {
return labelBorderSizeForm;
}
return (
<EuiToolTip
anchorClassName="mapStyleFormDisabledTooltip"
content={getDisabledByMessage(disabledBy)}
>
{labelBorderSizeForm}
</EuiToolTip>
);
}

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

@ -5,8 +5,15 @@
*/
import React, { Component, Fragment } from 'react';
import { getVectorStyleLabel } from './get_vector_style_label';
import { EuiFormRow, EuiSelect } from '@elastic/eui';
import { getVectorStyleLabel, getDisabledByMessage } from './get_vector_style_label';
import {
EuiFormRow,
EuiSelect,
EuiFlexGroup,
EuiFlexItem,
EuiFieldText,
EuiToolTip,
} from '@elastic/eui';
import { VectorStyle } from '../vector_style';
import { i18n } from '@kbn/i18n';
@ -69,7 +76,7 @@ export class StylePropEditor extends Component {
: VectorStyle.STYLE_TYPE.STATIC
}
onChange={this._onTypeToggle}
disabled={this.props.fields.length === 0}
disabled={this.props.disabled || this.props.fields.length === 0}
aria-label={i18n.translate('xpack.maps.styles.staticDynamicSelect.ariaLabel', {
defaultMessage: 'Select to style by fixed value or by data value',
})}
@ -83,17 +90,35 @@ export class StylePropEditor extends Component {
this._onFieldMetaOptionsChange
);
const staticDynamicSelect = this.renderStaticDynamicSelect();
const stylePropertyForm = this.props.disabled ? (
<EuiToolTip
anchorClassName="mapStyleFormDisabledTooltip"
content={getDisabledByMessage(this.props.disabledBy)}
>
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
<EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
<EuiFlexItem>
<EuiFieldText compressed disabled />
</EuiFlexItem>
</EuiFlexGroup>
</EuiToolTip>
) : (
<Fragment>
{React.cloneElement(this.props.children, {
staticDynamicSelect,
})}
{fieldMetaOptionsPopover}
</Fragment>
);
return (
<EuiFormRow
label={getVectorStyleLabel(this.props.styleProperty.getStyleName())}
display="rowCompressed"
>
<Fragment>
{React.cloneElement(this.props.children, {
staticDynamicSelect: this.renderStaticDynamicSelect(),
})}
{fieldMetaOptionsPopover}
</Fragment>
{stylePropertyForm}
</EuiFormRow>
);
}

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

@ -6,11 +6,12 @@
import React from 'react';
import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
import { EuiFormRow, EuiButtonGroup, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SYMBOLIZE_AS_TYPES } from '../../../../../../common/constants';
import { VECTOR_STYLES } from '../../vector_style_defaults';
import { getDisabledByMessage } from '../get_vector_style_label';
const SYMBOLIZE_AS_OPTIONS = [
{
@ -27,7 +28,12 @@ const SYMBOLIZE_AS_OPTIONS = [
},
];
export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChange }) {
export function VectorStyleSymbolizeAsEditor({
disabled,
disabledBy,
styleProperty,
handlePropertyChange,
}) {
const styleOptions = styleProperty.getOptions();
const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => {
return id === styleOptions.value;
@ -42,7 +48,7 @@ export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChan
handlePropertyChange(VECTOR_STYLES.SYMBOLIZE_AS, styleDescriptor);
};
return (
const symbolizeAsForm = (
<EuiFormRow
label={i18n.translate('xpack.maps.vector.symbolLabel', {
defaultMessage: 'Symbol type',
@ -50,6 +56,7 @@ export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChan
display="columnCompressed"
>
<EuiButtonGroup
isDisabled={disabled}
buttonSize="compressed"
options={SYMBOLIZE_AS_OPTIONS}
idSelected={selectedOption ? selectedOption.id : undefined}
@ -58,4 +65,17 @@ export function VectorStyleSymbolizeAsEditor({ styleProperty, handlePropertyChan
/>
</EuiFormRow>
);
if (!disabled) {
return symbolizeAsForm;
}
return (
<EuiToolTip
anchorClassName="mapStyleFormDisabledTooltip"
content={getDisabledByMessage(disabledBy)}
>
{symbolizeAsForm}
</EuiToolTip>
);
}

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

@ -18,6 +18,7 @@ import { OrientationEditor } from './orientation/orientation_editor';
import {
getDefaultDynamicProperties,
getDefaultStaticProperties,
LABEL_BORDER_SIZES,
VECTOR_STYLES,
} from '../vector_style_defaults';
import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
@ -145,9 +146,33 @@ export class VectorStyleEditor extends Component {
this.props.handlePropertyChange(propertyName, styleDescriptor);
};
_renderFillColor() {
_hasBorder() {
const width = this.props.styleProperties[VECTOR_STYLES.LINE_WIDTH];
return width.isDynamic() ? width.isComplete() : width.getOptions().size !== 0;
}
_hasMarkerOrIcon() {
const iconSize = this.props.styleProperties[VECTOR_STYLES.ICON_SIZE];
return !iconSize.isDynamic() && iconSize.getOptions().size > 0;
}
_hasLabel() {
const label = this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT];
return label.isDynamic()
? label.isComplete()
: label.getOptions().value != null && label.getOptions().value.length;
}
_hasLabelBorder() {
const labelBorderSize = this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_SIZE];
return labelBorderSize.getOptions().size !== LABEL_BORDER_SIZES.NONE;
}
_renderFillColor(isPointFillColor = false) {
return (
<VectorStyleColorEditor
disabled={isPointFillColor && !this._hasMarkerOrIcon()}
disabledBy={VECTOR_STYLES.ICON_SIZE}
swatches={DEFAULT_FILL_COLORS}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
@ -163,9 +188,12 @@ export class VectorStyleEditor extends Component {
);
}
_renderLineColor() {
_renderLineColor(isPointBorderColor = false) {
const disabledByIconSize = isPointBorderColor && !this._hasMarkerOrIcon();
return (
<VectorStyleColorEditor
disabled={disabledByIconSize || !this._hasBorder()}
disabledBy={disabledByIconSize ? VECTOR_STYLES.ICON_SIZE : VECTOR_STYLES.LINE_WIDTH}
swatches={DEFAULT_LINE_COLORS}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
@ -181,9 +209,11 @@ export class VectorStyleEditor extends Component {
);
}
_renderLineWidth() {
_renderLineWidth(isPointBorderWidth = false) {
return (
<VectorStyleSizeEditor
disabled={isPointBorderWidth && !this._hasMarkerOrIcon()}
disabledBy={VECTOR_STYLES.ICON_SIZE}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_WIDTH]}
@ -198,24 +228,9 @@ export class VectorStyleEditor extends Component {
);
}
_renderSymbolSize() {
return (
<VectorStyleSizeEditor
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_SIZE]}
fields={this._getOrdinalFields()}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
}
defaultDynamicStyleOptions={
this.state.defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options
}
/>
);
}
_renderLabelProperties() {
const hasLabel = this._hasLabel();
const hasLabelBorder = this._hasLabelBorder();
return (
<Fragment>
<VectorStyleLabelEditor
@ -233,6 +248,8 @@ export class VectorStyleEditor extends Component {
<EuiSpacer size="m" />
<VectorStyleColorEditor
disabled={!hasLabel}
disabledBy={VECTOR_STYLES.LABEL_TEXT}
swatches={DEFAULT_LINE_COLORS}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
@ -248,6 +265,8 @@ export class VectorStyleEditor extends Component {
<EuiSpacer size="m" />
<VectorStyleSizeEditor
disabled={!hasLabel}
disabledBy={VECTOR_STYLES.LABEL_TEXT}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_SIZE]}
@ -262,6 +281,8 @@ export class VectorStyleEditor extends Component {
<EuiSpacer size="m" />
<VectorStyleColorEditor
disabled={!hasLabel || !hasLabelBorder}
disabledBy={hasLabel ? VECTOR_STYLES.LABEL_BORDER_SIZE : VECTOR_STYLES.LABEL_TEXT}
swatches={DEFAULT_LINE_COLORS}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
@ -277,6 +298,8 @@ export class VectorStyleEditor extends Component {
<EuiSpacer size="m" />
<VectorStyleLabelBorderSizeEditor
disabled={!hasLabel}
disabledBy={VECTOR_STYLES.LABEL_TEXT}
handlePropertyChange={this.props.handlePropertyChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_SIZE]}
/>
@ -286,12 +309,15 @@ export class VectorStyleEditor extends Component {
}
_renderPointProperties() {
const hasMarkerOrIcon = this._hasMarkerOrIcon();
let iconOrientationEditor;
let iconEditor;
if (this.props.styleProperties[VECTOR_STYLES.SYMBOLIZE_AS].isSymbolizedAsIcon()) {
iconOrientationEditor = (
<Fragment>
<OrientationEditor
disabled={!hasMarkerOrIcon}
disabledBy={VECTOR_STYLES.ICON_SIZE}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_ORIENTATION]}
@ -309,6 +335,8 @@ export class VectorStyleEditor extends Component {
iconEditor = (
<Fragment>
<VectorStyleIconEditor
disabled={!hasMarkerOrIcon}
disabledBy={VECTOR_STYLES.ICON_SIZE}
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
@ -328,6 +356,8 @@ export class VectorStyleEditor extends Component {
return (
<Fragment>
<VectorStyleSymbolizeAsEditor
disabled={!hasMarkerOrIcon}
disabledBy={VECTOR_STYLES.ICON_SIZE}
styleProperty={this.props.styleProperties[VECTOR_STYLES.SYMBOLIZE_AS]}
handlePropertyChange={this.props.handlePropertyChange}
/>
@ -335,18 +365,29 @@ export class VectorStyleEditor extends Component {
{iconEditor}
{this._renderFillColor()}
{this._renderFillColor(true)}
<EuiSpacer size="m" />
{this._renderLineColor()}
{this._renderLineColor(true)}
<EuiSpacer size="m" />
{this._renderLineWidth()}
{this._renderLineWidth(true)}
<EuiSpacer size="m" />
{iconOrientationEditor}
{this._renderSymbolSize()}
<VectorStyleSizeEditor
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_SIZE]}
fields={this._getOrdinalFields()}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
}
defaultDynamicStyleOptions={
this.state.defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options
}
/>
<EuiSpacer size="m" />
{this._renderLabelProperties()}