Merge pull request #600 from plotly/adjust-colorscalepicker

Colorpicker adjustments

Author: VeraZab

dev/App.js

@@ -11,7 +11,6 @@ import Inspector from 'react-inspector';
 import tips from './tips';
 import 'brace/mode/json';
 import 'brace/theme/textmate';
-import {categoryLayout, traceTypes, chartCategory} from 'lib/traceTypes';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';

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.7",
     "react-dropzone": "^4.2.9",
     "react-plotly.js": "^2.2.0",
     "react-rangeslider": "^2.2.0",

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 (
-      <div className={bem('field')}>
+      <div className={containerClassName}>
         {label ? (
           <div className={bem('field', 'title')}>
             {this.context.showFieldTooltips ? (
@@ -98,6 +103,7 @@ Field.propTypes = {
   suppressMultiValuedMessage: PropTypes.bool,
   children: PropTypes.node,
   extraComponent: PropTypes.any,
+  fieldContainerClassName: PropTypes.string,
 };
 
 Field.contextTypes = {

src/components/widgets/ColorscalePicker.js

@@ -1,41 +1,95 @@
-import ColorscalePicker, {Colorscale} from 'react-colorscales';
+import ColorscalePicker, {
+  Colorscale,
+  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';
 
 class Scale extends Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+
     this.state = {
+      selectedColorscaleType: 'sequential',
       showColorscalePicker: false,
     };
-    this.toggle = this.toggle.bind(this);
+
+    this.onChange = this.onChange.bind(this);
+    this.onClick = this.onClick.bind(this);
   }
 
-  toggle() {
+  onClick() {
     this.setState({
       showColorscalePicker: !this.state.showColorscalePicker,
     });
   }
 
+  onChange(selectedColorscaleType) {
+    this.setState({selectedColorscaleType});
+  }
+
   render() {
-    const {selected, onColorscaleChange} = this.props;
+    const {onColorscaleChange, selected} = this.props;
+    const {selectedColorscaleType, showColorscalePicker} = this.state;
+    const description =
+      COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType];
+    const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.map(
+      type => ({
+        label: type + ' scales',
+        value: type,
+      })
+    );
+    const _ = this.context.localize;
+
     return (
-      <div>
-        <Colorscale colorscale={selected} onClick={this.toggle} />
-        {this.state.showColorscalePicker ? (
-          <ColorscalePicker
-            onChange={onColorscaleChange}
-            colorscale={selected}
-          />
+      <Fragment>
+        <Colorscale colorscale={selected} onClick={this.onClick} />
+
+        {showColorscalePicker ? (
+          <div className="customPickerContainer">
+            <Dropdown
+              options={colorscaleOptions}
+              value={selectedColorscaleType}
+              onChange={this.onChange}
+              clearable={false}
+              searchable={false}
+              placeholder={_('Select a Colorscale Type')}
+            />
+            {description ? (
+              <Fragment>
+                <ColorscalePicker
+                  onChange={onColorscaleChange}
+                  colorscale={selected}
+                  width={215}
+                  colorscaleType={this.state.selectedColorscaleType}
+                  onColorscaleTypeChange={this.onColorscaleTypeChange}
+                  disableSwatchControls
+                  scaleLength={7}
+                />
+                <Info>{description}</Info>
+              </Fragment>
+            ) : null}
+          </div>
         ) : null}
-      </div>
+      </Fragment>
     );
   }
 }
 
 Scale.propTypes = {
   onColorscaleChange: PropTypes.func,
   selected: PropTypes.array,
+  label: PropTypes.string,
+};
+
+Scale.contextTypes = {
+  localize: PropTypes.func,
+};
+
+Scale.contextTypes = {
+  localize: PropTypes.func,
 };
 
 export default Scale;

src/styles/components/widgets/_colorscalepicker.scss

@@ -1,26 +1,28 @@
 .colorscalePickerContainer {
+  min-width: 215px;
   position: relative;
-  width: 300px;
-  margin-left: -76px;
+  padding: 0;
+  resize: none;
+  border: none;
+  background: none;
 }
 
 .colorscalePickerContainer::-webkit-scrollbar {
   width: 5px;
 }
 
-.colorscale-selected {
+.colorscalePickerTopContainer {
   display: none;
 }
 
-.rc-slider {
-  width: 254px !important;
+.colorscaleDescription {
+  display: none;
 }
 
-.colorscaleControlPanel {
-  padding: 6px;
-  width: 94%;
+.colorscalePickerContainer input:focus {
+  outline: none;
 }
 
-.colorscale-block {
-  margin: 0 20px !important;
+.customPickerContainer {
+  margin-top: 10px;
 }