diff --git a/src/components/fields/ColorPicker.js b/src/components/fields/ColorPicker.js index f14303b83..717fb808a 100644 --- a/src/components/fields/ColorPicker.js +++ b/src/components/fields/ColorPicker.js @@ -33,7 +33,7 @@ export class UnconnectedColorPicker extends Component { } return ( - + + + {!noDefaultIndicator && ( +
+ )} + {!noDefaultIndicator &&
} {label ? (
{mode === 'latlon' ? ( diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js index ea657e50f..6102009db 100644 --- a/src/components/fields/MarkerColor.js +++ b/src/components/fields/MarkerColor.js @@ -112,6 +112,7 @@ class UnconnectedMarkerColor extends Component { setColorScale={this.setColorScale} onConstantColorOptionChange={this.onConstantColorOptionChange} parentSelectedConstantColorOption={this.state.selectedConstantColorOption} + noDefaultIndicator /> ); } @@ -125,8 +126,8 @@ class UnconnectedMarkerColor extends Component { (this.props.container.marker.colorsrc && this.props.container.marker.colorsrc === MULTI_VALUED)); return ( - - + + {this.props.container.marker && this.props.container.marker.colorscale === MULTI_VALUED ? null : ( )} @@ -159,11 +161,11 @@ class UnconnectedMarkerColor extends Component { return ( <> - + {!type ? null : ( - + {type === 'constant' ? _('All points in a trace are colored in the same color.') : _('Each point in a trace is colored according to data.')} diff --git a/src/components/fields/MarkerSize.js b/src/components/fields/MarkerSize.js index def878e00..c6bc1bf77 100644 --- a/src/components/fields/MarkerSize.js +++ b/src/components/fields/MarkerSize.js @@ -77,9 +77,15 @@ class UnconnectedMarkerSize extends Component { attr="marker.size" updatePlot={this.setValue} fullValue={value.constant} + noDefaultIndicator /> ) : multiValued ? null : ( - + )} ); diff --git a/src/components/fields/MultiColorPicker.js b/src/components/fields/MultiColorPicker.js index d5d6657fd..b2739d555 100644 --- a/src/components/fields/MultiColorPicker.js +++ b/src/components/fields/MultiColorPicker.js @@ -90,7 +90,11 @@ class UnconnectedMultiColorPicker extends Component { if (this.context.traceIndexes.length > 1) { return ( - + this.setState({selectedConstantColorOption: value}) } /> - {selectedConstantColorOption === 'single' ? singleMessage : multiMessage} + + {selectedConstantColorOption === 'single' ? singleMessage : multiMessage} + {selectedConstantColorOption === 'single' ? ( - + ) : ( + ); } } @@ -132,6 +143,7 @@ UnconnectedMultiColorPicker.propTypes = { messageKeyWordSingle: PropTypes.string, messageKeyWordPlural: PropTypes.string, tracesToColor: PropTypes.array, + noDefaultIndicator: PropTypes.bool, ...Field.propTypes, }; diff --git a/src/components/fields/Numeric.js b/src/components/fields/Numeric.js index f3a991298..e67e2cd79 100644 --- a/src/components/fields/Numeric.js +++ b/src/components/fields/Numeric.js @@ -14,7 +14,7 @@ export class UnconnectedNumeric extends Component { } return ( - + + - + {_( 'This will position all text values on the plot according to the selected position.' )} - + ) : ( <> diff --git a/src/components/fields/UpdateMenuButtons.js b/src/components/fields/UpdateMenuButtons.js index 3edf503b5..8d9611f15 100644 --- a/src/components/fields/UpdateMenuButtons.js +++ b/src/components/fields/UpdateMenuButtons.js @@ -25,6 +25,7 @@ class UpdateMenuButtons extends Component { updatePlot={index => this.setState({currentButtonIndex: index})} clearable={false} fullValue={this.state.currentButtonIndex} + noDefaultIndicator /> ); } @@ -33,7 +34,11 @@ class UpdateMenuButtons extends Component { return ( {this.renderDropdown()} - + ); } diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index 5250aa280..ff080a886 100644 --- a/src/styles/components/fields/_field.scss +++ b/src/styles/components/fields/_field.scss @@ -11,6 +11,35 @@ padding: var(--spacing-quarter-unit) 0; width: 100%; position: relative; + &__default-indicator { + position: absolute; + top: 0; + height: 100%; + width: var(--spacing-quarter-unit); + z-index: 2; + &__is-default { + background-color: $color-cornflower; + } + &__clear { + position: absolute; + display: flex; + width: 15px; + height: 100%; + top: 0; + left: var(--spacing-quarter-unit); + border-radius: 0 50% 50% 0; + background-color: $color-cornflower; + z-index: 1; + &::before { + content: '\00D7'; + font-size: 20px; + font-weight: 600; + color: white; + display: flex; + align-items: center; + } + } + } &__no-title { width: 100%; padding: 0 var(--spacing-half-unit);