From aa1fc1d4126a8b199c68293bc1f300f15ee6950b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Mon, 20 Nov 2017 18:16:05 -0800
Subject: [PATCH] Introduce color dropdown component

Intended for choosing a color from a list; displays the color and its
name in the dropdown
---
 ui/src/shared/components/ColorDropdown.js   | 97 +++++++++++++++++++++
 ui/src/style/chronograf.scss                |  1 +
 ui/src/style/components/color-dropdown.scss | 88 +++++++++++++++++++
 3 files changed, 186 insertions(+)
 create mode 100644 ui/src/shared/components/ColorDropdown.js
 create mode 100644 ui/src/style/components/color-dropdown.scss

diff --git a/ui/src/shared/components/ColorDropdown.js b/ui/src/shared/components/ColorDropdown.js
new file mode 100644
index 0000000000..e231463899
--- /dev/null
+++ b/ui/src/shared/components/ColorDropdown.js
@@ -0,0 +1,97 @@
+import React, {Component, PropTypes} from 'react'
+
+import OnClickOutside from 'shared/components/OnClickOutside'
+import FancyScrollbar from 'shared/components/FancyScrollbar'
+
+class ColorDropdown extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      visible: false,
+    }
+  }
+
+  handleToggleMenu = () => {
+    this.setState({visible: !this.state.visible})
+  }
+
+  handleClickOutside = () => {
+    this.setState({visible: false})
+  }
+
+  handleColorClick = color => () => {
+    this.props.onChoose(color)
+    this.setState({visible: false})
+  }
+
+  render() {
+    const {visible} = this.state
+    const {colors, selected} = this.props
+
+    const dropdownClassNames = visible
+      ? 'color-dropdown open'
+      : 'color-dropdown'
+    const toggleClassNames = visible
+      ? 'btn btn-sm btn-default color-dropdown--toggle active'
+      : 'btn btn-sm btn-default color-dropdown--toggle'
+
+    return (
+      <div className={dropdownClassNames}>
+        <div className={toggleClassNames} onClick={this.handleToggleMenu}>
+          <div
+            className="color-dropdown--swatch"
+            style={{backgroundColor: selected.hex}}
+          />
+          <div className="color-dropdown--name">
+            {selected.text}
+          </div>
+          <span className="caret" />
+        </div>
+        {visible
+          ? <div className="color-dropdown--menu">
+              <FancyScrollbar autoHide={false} autoHeight={true}>
+                {colors.map((color, i) =>
+                  <div
+                    className={
+                      color.text === selected.text
+                        ? 'color-dropdown--item active'
+                        : 'color-dropdown--item'
+                    }
+                    key={i}
+                    onClick={this.handleColorClick(color)}
+                  >
+                    <span
+                      className="color-dropdown--swatch"
+                      style={{backgroundColor: color.hex}}
+                    />
+                    <span className="color-dropdown--name">
+                      {color.text}
+                    </span>
+                  </div>
+                )}
+              </FancyScrollbar>
+            </div>
+          : null}
+      </div>
+    )
+  }
+}
+
+const {arrayOf, func, shape, string} = PropTypes
+
+ColorDropdown.propTypes = {
+  selected: shape({
+    hex: string.isRequired,
+    text: string.isRequired,
+  }).isRequired,
+  onChoose: func.isRequired,
+  colors: arrayOf(
+    shape({
+      hex: string.isRequired,
+      text: string.isRequired,
+    })
+  ).isRequired,
+}
+
+export default OnClickOutside(ColorDropdown)
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 2be5b0290f..bf0249b723 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -30,6 +30,7 @@
 @import 'components/ceo-display-options';
 @import 'components/confirm-buttons';
 @import 'components/code-mirror-theme';
+@import 'components/color-dropdown';
 @import 'components/custom-time-range';
 @import 'components/dygraphs';
 @import 'components/fancy-scrollbars';
diff --git a/ui/src/style/components/color-dropdown.scss b/ui/src/style/components/color-dropdown.scss
new file mode 100644
index 0000000000..276077f7c3
--- /dev/null
+++ b/ui/src/style/components/color-dropdown.scss
@@ -0,0 +1,88 @@
+/*
+  Color Dropdown
+  ------------------------------------------------------------------------------
+*/
+
+$color-dropdown--circle: 14px;
+
+.color-dropdown {
+  width: 140px;
+  height: 30px;
+  position: relative;
+}
+
+.color-dropdown--toggle {
+  width: 100%;
+  position: relative;
+}
+.color-dropdown--toggle span.caret {
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  transform: translateY(-50%);
+}
+
+.color-dropdown--menu {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  z-index: 2;
+  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);
+}
+.color-dropdown--item {
+  @include no-user-select();
+  width: 100%;
+  height: 28px;
+  position: relative;
+  color: $g11-sidewalk;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+
+  &:hover {
+    background-color: $g4-onyx;
+    color: $g18-cloud;
+  }
+  &:hover,
+  &:hover > * {
+    cursor: pointer !important;
+  }
+  &.active {
+    background-color: $g3-castle;
+    color: $g15-platinum;
+  }
+  &:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+  &:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}
+.color-dropdown--swatch,
+.color-dropdown--name {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.color-dropdown--swatch {
+  width: $color-dropdown--circle;
+  height: $color-dropdown--circle;
+  border-radius: 50%;
+  left: 11px;
+}
+.color-dropdown--name {
+  text-align: left;
+  right: 11px;
+  left: 34px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+}
+.color-dropdown .color-dropdown--menu .fancy-scroll--container .fancy-scroll--track-v .fancy-scroll--thumb-v {
+  @include gradient-v($g9-mountain,$g7-graphite);
+}