From e42fa83b2f1e0532835d1ff8a0151747ca2ced14 Mon Sep 17 00:00:00 2001 From: VeraZab Date: Thu, 19 Jul 2018 17:06:43 -0400 Subject: [PATCH 1/6] Colorpicker adjustments --- dev/App.js | 3 +- package.json | 2 +- src/components/fields/Colorscale.js | 11 ++- src/components/fields/Field.js | 8 +- src/components/widgets/ColorscalePicker.js | 79 ++++++++++++++----- .../components/widgets/_colorscalepicker.scss | 31 +++++--- 6 files changed, 100 insertions(+), 34 deletions(-) diff --git a/dev/App.js b/dev/App.js index 51260be8e..1c814810d 100644 --- a/dev/App.js +++ b/dev/App.js @@ -10,8 +10,7 @@ import PlotlyEditor, {DefaultEditor, Panel} from '../src'; import Inspector from 'react-inspector'; import tips from './tips'; import 'brace/mode/json'; -import 'brace/theme/textmate'; -import {categoryLayout, traceTypes, chartCategory} from 'lib/traceTypes'; +import 'brace/theme/textmate'; // // https://github.com/plotly/react-chart-editor#mapbox-access-tokens import ACCESS_TOKENS from '../accessTokens'; diff --git a/package.json b/package.json index e788bdc44..5b5a320e2 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "prop-types": "^15.5.10", "raf": "^3.4.0", "react-color": "^2.13.8", - "react-colorscales": "^0.4.2", + "react-colorscales": "0.5.4", "react-dropzone": "^4.2.9", "react-plotly.js": "^2.2.0", "react-rangeslider": "^2.2.0", diff --git a/src/components/fields/Colorscale.js b/src/components/fields/Colorscale.js index f8f817b2a..ff39f7653 100644 --- a/src/components/fields/Colorscale.js +++ b/src/components/fields/Colorscale.js @@ -30,11 +30,20 @@ class Colorscale extends Component { ? fullValue.map(v => v[1]) : null; + // removing label prop on colorscales, not enough space + const adjustedProps = {...this.props}; + let fullWidth = false; + if (adjustedProps.label) { + fullWidth = true; + delete adjustedProps.label; + } + return ( - + ); diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js index e7eca2d95..749ec2895 100644 --- a/src/components/fields/Field.js +++ b/src/components/fields/Field.js @@ -27,6 +27,7 @@ class Field extends Component { suppressMultiValuedMessage, units, extraComponent, + fieldContainerClassName, } = this.props; const {localize: _} = this.context; @@ -48,8 +49,12 @@ class Field extends Component { ' – ' + this.context.description.replace(/`/g, '"').replace(/\*/g, '"'); } + const containerClassName = classnames(bem('field'), { + [fieldContainerClassName]: Boolean(fieldContainerClassName), + }); + return ( -
+
{label ? (
{this.context.showFieldTooltips ? ( @@ -98,6 +103,7 @@ Field.propTypes = { suppressMultiValuedMessage: PropTypes.bool, children: PropTypes.node, extraComponent: PropTypes.any, + fieldContainerClassName: PropTypes.string, }; Field.contextTypes = { diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js index dcf303850..20fc2dbd4 100644 --- a/src/components/widgets/ColorscalePicker.js +++ b/src/components/widgets/ColorscalePicker.js @@ -1,34 +1,66 @@ -import ColorscalePicker, {Colorscale} from 'react-colorscales'; +import ColorscalePicker, {COLOR_PICKER_CONSTANTS} from 'react-colorscales'; +import Dropdown from './Dropdown'; +import Info from '../fields/Info'; import PropTypes from 'prop-types'; -import React, {Component} from 'react'; +import React, {Component, Fragment} from 'react'; +import classnames from 'classnames'; class Scale extends Component { - constructor(props) { - super(props); + constructor() { + super(); + this.state = { - showColorscalePicker: false, + selectedColorscaleType: 'sequential', }; - this.toggle = this.toggle.bind(this); + + this.onChange = this.onChange.bind(this); } - toggle() { - this.setState({ - showColorscalePicker: !this.state.showColorscalePicker, - }); + onChange(selectedColorscaleType) { + this.setState({selectedColorscaleType}); } render() { - const {selected, onColorscaleChange} = this.props; + const {onColorscaleChange, selected, fullWidth} = this.props; + const description = + COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[ + this.state.selectedColorscaleType + ]; + const _ = this.context.localize; + + const infoClassnames = classnames('colorscalePickerInfo', { + fullWidth: fullWidth ? 'fullWidth' : '', + }); + const colorPickerClassnames = classnames('', { + fullWidth: fullWidth ? 'fullWidth' : '', + }); + return ( -
- - {this.state.showColorscalePicker ? ( - + + t !== 'custom' + )} + value={this.state.selectedColorscaleType} + onChange={this.onChange} + clearable={false} + searchable={false} + placeholder={_('Select a Colorscale')} + /> + + {description && description.length ? ( + {description} ) : null} -
+ ); } } @@ -36,6 +68,15 @@ class Scale extends Component { Scale.propTypes = { onColorscaleChange: PropTypes.func, selected: PropTypes.array, + fullWidth: PropTypes.bool, +}; + +Scale.contextTypes = { + localize: PropTypes.func, +}; + +Scale.contextTypes = { + localize: PropTypes.func, }; export default Scale; diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index f845259dd..c250da744 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -1,26 +1,37 @@ .colorscalePickerContainer { position: relative; - width: 300px; - margin-left: -76px; + margin-left: -42px; + padding: 0; + resize: none; + border: none; + background: none; +} + +.colorscalePickerContainer.fullWidth { + margin-left: 0; } .colorscalePickerContainer::-webkit-scrollbar { width: 5px; } -.colorscale-selected { +.colorscalePickerTopContainer { + display: none; +} + +.colorscaleDescription { display: none; } -.rc-slider { - width: 254px !important; +.colorscalePickerContainer input:focus { + outline: none; } -.colorscaleControlPanel { - padding: 6px; - width: 94%; +.colorscalePickerInfo { + margin-left: -42px; + width: 295px; } -.colorscale-block { - margin: 0 20px !important; +.colorscalePickerInfo.fullWidth { + margin-left: 0; } From 44eda56c4db431af055c4153e30d7a244bde764d Mon Sep 17 00:00:00 2001 From: VeraZab Date: Fri, 20 Jul 2018 10:58:31 -0400 Subject: [PATCH 2/6] Remove fullWidth prop and related css: instead make container of smaller width and improve initial state --- src/components/fields/Colorscale.js | 11 +--- src/components/widgets/ColorscalePicker.js | 51 ++++++++----------- .../components/widgets/_colorscalepicker.scss | 7 +-- 3 files changed, 22 insertions(+), 47 deletions(-) diff --git a/src/components/fields/Colorscale.js b/src/components/fields/Colorscale.js index ff39f7653..faef4e21e 100644 --- a/src/components/fields/Colorscale.js +++ b/src/components/fields/Colorscale.js @@ -30,20 +30,11 @@ class Colorscale extends Component { ? fullValue.map(v => v[1]) : null; - // removing label prop on colorscales, not enough space - const adjustedProps = {...this.props}; - let fullWidth = false; - if (adjustedProps.label) { - fullWidth = true; - delete adjustedProps.label; - } - return ( - + ); diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js index 20fc2dbd4..370521ad9 100644 --- a/src/components/widgets/ColorscalePicker.js +++ b/src/components/widgets/ColorscalePicker.js @@ -3,14 +3,13 @@ import Dropdown from './Dropdown'; import Info from '../fields/Info'; import PropTypes from 'prop-types'; import React, {Component, Fragment} from 'react'; -import classnames from 'classnames'; class Scale extends Component { constructor() { super(); this.state = { - selectedColorscaleType: 'sequential', + selectedColorscaleType: null, }; this.onChange = this.onChange.bind(this); @@ -21,45 +20,35 @@ class Scale extends Component { } render() { - const {onColorscaleChange, selected, fullWidth} = this.props; + const {onColorscaleChange, selected} = this.props; + const {selectedColorscaleType} = this.state; const description = - COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[ - this.state.selectedColorscaleType - ]; + COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType]; const _ = this.context.localize; - const infoClassnames = classnames('colorscalePickerInfo', { - fullWidth: fullWidth ? 'fullWidth' : '', - }); - const colorPickerClassnames = classnames('', { - fullWidth: fullWidth ? 'fullWidth' : '', - }); - return ( t !== 'custom' - )} - value={this.state.selectedColorscaleType} + options={COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES} + value={selectedColorscaleType} onChange={this.onChange} clearable={false} searchable={false} - placeholder={_('Select a Colorscale')} - /> - - {description && description.length ? ( - {description} + + {selectedColorscaleType ? ( + ) : null} + + {description && description.length ? {description} : null} ); } @@ -68,7 +57,7 @@ class Scale extends Component { Scale.propTypes = { onColorscaleChange: PropTypes.func, selected: PropTypes.array, - fullWidth: PropTypes.bool, + label: PropTypes.string, }; Scale.contextTypes = { diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index c250da744..3fbf9b924 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -1,6 +1,6 @@ .colorscalePickerContainer { + min-width: 250px; position: relative; - margin-left: -42px; padding: 0; resize: none; border: none; @@ -27,11 +27,6 @@ outline: none; } -.colorscalePickerInfo { - margin-left: -42px; - width: 295px; -} - .colorscalePickerInfo.fullWidth { margin-left: 0; } From 1c7252ce8c0d490fba01603e1f7e06d156135393 Mon Sep 17 00:00:00 2001 From: VeraZab Date: Fri, 20 Jul 2018 10:59:32 -0400 Subject: [PATCH 3/6] Not needed comment --- dev/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev/App.js b/dev/App.js index 1c814810d..593f6aec8 100644 --- a/dev/App.js +++ b/dev/App.js @@ -10,7 +10,7 @@ import PlotlyEditor, {DefaultEditor, Panel} from '../src'; import Inspector from 'react-inspector'; import tips from './tips'; import 'brace/mode/json'; -import 'brace/theme/textmate'; // +import 'brace/theme/textmate'; // https://github.com/plotly/react-chart-editor#mapbox-access-tokens import ACCESS_TOKENS from '../accessTokens'; From 9e5284873aac218643cf8a7b01aa17687fac88be Mon Sep 17 00:00:00 2001 From: VeraZab Date: Tue, 24 Jul 2018 15:53:58 -0400 Subject: [PATCH 4/6] Add back colorpicker toggle --- package.json | 2 +- src/components/fields/Colorscale.js | 2 +- src/components/widgets/ColorscalePicker.js | 68 +++++++++++++------ .../components/widgets/_colorscalepicker.scss | 10 +-- 4 files changed, 51 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 5b5a320e2..6f4377780 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "prop-types": "^15.5.10", "raf": "^3.4.0", "react-color": "^2.13.8", - "react-colorscales": "0.5.4", + "react-colorscales": "0.5.5", "react-dropzone": "^4.2.9", "react-plotly.js": "^2.2.0", "react-rangeslider": "^2.2.0", diff --git a/src/components/fields/Colorscale.js b/src/components/fields/Colorscale.js index faef4e21e..f8f817b2a 100644 --- a/src/components/fields/Colorscale.js +++ b/src/components/fields/Colorscale.js @@ -31,7 +31,7 @@ class Colorscale extends Component { : null; return ( - + ({ + label: type + ' scale', + value: type, + }) + ); const _ = this.context.localize; return ( - + - {selectedColorscaleType ? ( - + {showColorscalePicker ? ( +
+ + {description ? ( + + + {description} + + ) : null} +
) : null} - - {description && description.length ? {description} : null} ); } diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index 3fbf9b924..d39469f80 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -1,5 +1,5 @@ .colorscalePickerContainer { - min-width: 250px; + min-width: 200px; position: relative; padding: 0; resize: none; @@ -7,10 +7,6 @@ background: none; } -.colorscalePickerContainer.fullWidth { - margin-left: 0; -} - .colorscalePickerContainer::-webkit-scrollbar { width: 5px; } @@ -27,6 +23,6 @@ outline: none; } -.colorscalePickerInfo.fullWidth { - margin-left: 0; +.customPickerContainer { + margin-top: 10px; } From 1d8817e538efcd76d1b70f5155e2f16eb36090c8 Mon Sep 17 00:00:00 2001 From: VeraZab Date: Tue, 24 Jul 2018 16:00:11 -0400 Subject: [PATCH 5/6] Change label --- src/components/widgets/ColorscalePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js index b1c6e06ff..6f44268c5 100644 --- a/src/components/widgets/ColorscalePicker.js +++ b/src/components/widgets/ColorscalePicker.js @@ -37,7 +37,7 @@ class Scale extends Component { COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType]; const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.map( type => ({ - label: type + ' scale', + label: type + ' scales', value: type, }) ); From e860bb2f555612d99e96558079721cd613ee4ba8 Mon Sep 17 00:00:00 2001 From: VeraZab Date: Tue, 24 Jul 2018 17:55:48 -0400 Subject: [PATCH 6/6] Include latest color fixes --- package.json | 2 +- src/components/widgets/ColorscalePicker.js | 4 ++-- src/styles/components/widgets/_colorscalepicker.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6f4377780..fe263c5b2 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "prop-types": "^15.5.10", "raf": "^3.4.0", "react-color": "^2.13.8", - "react-colorscales": "0.5.5", + "react-colorscales": "0.5.7", "react-dropzone": "^4.2.9", "react-plotly.js": "^2.2.0", "react-rangeslider": "^2.2.0", diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js index 6f44268c5..37f344538 100644 --- a/src/components/widgets/ColorscalePicker.js +++ b/src/components/widgets/ColorscalePicker.js @@ -62,11 +62,11 @@ class Scale extends Component { {description} diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index d39469f80..a6ac60709 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/src/styles/components/widgets/_colorscalepicker.scss @@ -1,5 +1,5 @@ .colorscalePickerContainer { - min-width: 200px; + min-width: 215px; position: relative; padding: 0; resize: none;