Introduce component for selecting color scales

ui/src/shared/components/ColorScaleDropdown.js

@@ -0,0 +1,118 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import uuid from 'uuid'
+import classnames from 'classnames'
+
+import OnClickOutside from 'shared/components/OnClickOutside'
+import FancyScrollbar from 'shared/components/FancyScrollbar'
+
+import {LINE_COLOR_SCALES} from 'src/shared/constants/graphColorPalettes'
+
+class ColorScaleDropdown extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  handleToggleMenu = () => {
+    const {disabled} = this.props
+
+    if (disabled) {
+      return
+    }
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  handleClickOutside = () => {
+    this.setState({expanded: false})
+  }
+
+  handleDropdownClick = colorScale => () => {
+    this.props.onChoose(colorScale)
+    this.setState({expanded: false})
+  }
+
+  generateGradientStyle = colors => ({
+    background: `linear-gradient(to right, ${colors[0].hex} 0%,${
+      colors[1].hex
+    } 50%,${colors[2].hex} 100%)`,
+  })
+
+  render() {
+    const {expanded} = this.state
+    const {selected, disabled, stretchToFit} = this.props
+
+    const dropdownClassNames = classnames('color-dropdown', {
+      open: expanded,
+      'color-dropdown--stretch': stretchToFit,
+    })
+    const toggleClassNames = classnames(
+      'btn btn-sm btn-default color-dropdown--toggle',
+      {active: expanded, 'color-dropdown__disabled': disabled}
+    )
+
+    return (
+      <div className={dropdownClassNames}>
+        <div
+          className={toggleClassNames}
+          onClick={this.handleToggleMenu}
+          disabled={disabled}
+        >
+          <div
+            className="color-dropdown--swatches"
+            style={this.generateGradientStyle(selected)}
+          />
+          <div className="color-dropdown--name">{selected[0].name}</div>
+          <span className="caret" />
+        </div>
+        {expanded ? (
+          <div className="color-dropdown--menu">
+            <FancyScrollbar autoHide={false} autoHeight={true}>
+              {LINE_COLOR_SCALES.map(colorScale => (
+                <div
+                  className={
+                    colorScale.name === selected[0].name
+                      ? 'color-dropdown--item active'
+                      : 'color-dropdown--item'
+                  }
+                  key={uuid.v4()}
+                  onClick={this.handleDropdownClick(colorScale)}
+                >
+                  <div
+                    className="color-dropdown--swatches"
+                    style={this.generateGradientStyle(colorScale.colors)}
+                  />
+                  <span className="color-dropdown--name">
+                    {colorScale.name}
+                  </span>
+                </div>
+              ))}
+            </FancyScrollbar>
+          </div>
+        ) : null}
+      </div>
+    )
+  }
+}
+
+const {arrayOf, bool, func, shape, string, number} = PropTypes
+
+ColorScaleDropdown.propTypes = {
+  selected: arrayOf(
+    shape({
+      type: string.isRequired,
+      hex: string.isRequired,
+      id: string.isRequired,
+      name: string.isRequired,
+      value: number.isRequired,
+    }).isRequired
+  ).isRequired,
+  onChoose: func.isRequired,
+  stretchToFit: bool,
+  disabled: bool,
+}
+
+export default OnClickOutside(ColorScaleDropdown)

ui/src/style/components/color-dropdown.scss

@@ -4,6 +4,10 @@
 */
 
 $color-dropdown--circle: 14px;
+$color-dropdown--bar: 104px;
+$color-dropdown--bar-height: 10px;
+$color-dropdown--left-padding: 11px;
+$color-dropdown--name-padding: 20px;
 
 .color-dropdown {
   width: 140px;
@@ -31,11 +35,11 @@ $color-dropdown--circle: 14px;
   position: absolute;
   top: 30px;
   left: 0;
-  z-index: 2;
+  z-index: 5;
   width: 100%;
   border-radius: 4px;
   box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.7);
-  @include gradient-h($g0-obsidian,$g2-kevlar);
+  @include gradient-h($g0-obsidian, $g2-kevlar);
 }
 .color-dropdown--item {
   @include no-user-select();
@@ -43,9 +47,7 @@ $color-dropdown--circle: 14px;
   height: 28px;
   position: relative;
   color: $g11-sidewalk;
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease;
+  transition: color 0.25s ease, background-color 0.25s ease;
 
   &:hover {
     background-color: $g4-onyx;
@@ -67,6 +69,7 @@ $color-dropdown--circle: 14px;
   }
 }
 .color-dropdown--swatch,
+.color-dropdown--swatches,
 .color-dropdown--name {
   position: absolute;
   top: 50%;
@@ -76,21 +79,35 @@ $color-dropdown--circle: 14px;
   width: $color-dropdown--circle;
   height: $color-dropdown--circle;
   border-radius: 50%;
-  left: 11px;
+  left: $color-dropdown--left-padding;
+}
+.color-dropdown--swatches {
+  width: $color-dropdown--bar;
+  height: $color-dropdown--bar-height;
+  border-radius: $color-dropdown--bar-height / 2;
+  left: $color-dropdown--left-padding;
 }
 .color-dropdown--name {
   text-align: left;
-  right: 11px;
-  left: 34px;
+  right: $color-dropdown--name-padding;
+  left: $color-dropdown--circle + $color-dropdown--name-padding;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 13px;
   font-weight: 600;
   text-transform: capitalize;
+
+  .color-dropdown--swatches + & {
+    left: $color-dropdown--bar + $color-dropdown--name-padding;
+  }
 }
-.color-dropdown .color-dropdown--menu .fancy-scroll--container .fancy-scroll--track-v .fancy-scroll--thumb-v {
-  @include gradient-v($g9-mountain,$g7-graphite);
+.color-dropdown
+  .color-dropdown--menu
+  .fancy-scroll--container
+  .fancy-scroll--track-v
+  .fancy-scroll--thumb-v {
+  @include gradient-v($g9-mountain, $g7-graphite);
 }
 .color-dropdown--toggle.color-dropdown__disabled {
   color: $g7-graphite;