From 2919fe1d6a7d7b4e7a8b3122e0cd5b5349255034 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 27 Nov 2018 15:06:39 +0100
Subject: [PATCH] color picker

---
 .../components/colorpicker/ColorPicker.tsx    | 31 +++------
 public/app/plugins/panel/gauge/Thresholds.tsx | 63 ++++++++++++++-----
 public/sass/components/_thresholds.scss       | 11 ++++
 3 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/public/app/core/components/colorpicker/ColorPicker.tsx
index 6e5083b6d6b..9541001b0a8 100644
--- a/public/app/core/components/colorpicker/ColorPicker.tsx
+++ b/public/app/core/components/colorpicker/ColorPicker.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import $ from 'jquery';
 import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
@@ -11,29 +10,17 @@ export interface Props {
 }
 
 export class ColorPicker extends React.Component<Props, any> {
-  pickerElem: any;
+  pickerElem: HTMLElement;
   colorPickerDrop: any;
 
-  constructor(props) {
-    super(props);
-    this.openColorPicker = this.openColorPicker.bind(this);
-    this.closeColorPicker = this.closeColorPicker.bind(this);
-    this.setPickerElem = this.setPickerElem.bind(this);
-    this.onColorSelect = this.onColorSelect.bind(this);
-  }
-
-  setPickerElem(elem) {
-    this.pickerElem = $(elem);
-  }
-
-  openColorPicker() {
+  openColorPicker = () => {
     const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
 
     const dropContentElem = document.createElement('div');
     ReactDOM.render(dropContent, dropContentElem);
 
     const drop = new Drop({
-      target: this.pickerElem[0],
+      target: this.pickerElem,
       content: dropContentElem,
       position: 'top center',
       classes: 'drop-popover',
@@ -48,23 +35,23 @@ export class ColorPicker extends React.Component<Props, any> {
 
     this.colorPickerDrop = drop;
     this.colorPickerDrop.open();
-  }
+  };
 
-  closeColorPicker() {
+  closeColorPicker = () => {
     setTimeout(() => {
       if (this.colorPickerDrop && this.colorPickerDrop.tether) {
         this.colorPickerDrop.destroy();
       }
     }, 100);
-  }
+  };
 
-  onColorSelect(color) {
+  onColorSelect = color => {
     this.props.onChange(color);
-  }
+  };
 
   render() {
     return (
-      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={this.setPickerElem}>
+      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={element => (this.pickerElem = element)}>
         <div className="sp-preview">
           <div className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
         </div>
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
index bc5d1ff559b..e1ac6fe765e 100644
--- a/public/app/plugins/panel/gauge/Thresholds.tsx
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames/bind';
 import { PanelOptionsProps, Threshold } from 'app/types';
 import { OptionsProps } from './module';
+import { ColorPicker } from '../../../core/components/colorpicker/ColorPicker';
 
 interface State {
   thresholds: Threshold[];
@@ -14,7 +15,7 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
     this.state = {
       thresholds: this.props.options.thresholds || [
-        { index: 0, label: 'Min', value: 0, canRemove: false },
+        { index: 0, label: 'Min', value: 0, canRemove: false, color: '#3aa655' },
         { index: 1, label: 'Max', value: 100, canRemove: false },
       ],
       userAddedThresholds: 0,
@@ -36,7 +37,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
 
     this.setState(prevState => ({
-      thresholds: this.sortThresholds([...newThresholds, { index: index, label: '', value: value, canRemove: true }]),
+      thresholds: this.sortThresholds([
+        ...newThresholds,
+        { index: index, label: '', value: value, canRemove: true, color: '#ff851b' },
+      ]),
       userAddedThresholds: prevState.userAddedThresholds + 1,
     }));
   };
@@ -50,11 +54,26 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
 
   onChangeThresholdValue = (event, threshold) => {
     const { thresholds } = this.state;
-    const value = event.target.value;
 
     const newThresholds = thresholds.map(currentThreshold => {
       if (currentThreshold === threshold) {
-        currentThreshold = { ...currentThreshold, value: value };
+        currentThreshold = { ...currentThreshold, value: event.target.value };
+      }
+
+      return currentThreshold;
+    });
+
+    this.setState({
+      thresholds: newThresholds,
+    });
+  };
+
+  onChangeThresholdColor = (threshold, color) => {
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map(currentThreshold => {
+      if (currentThreshold === threshold) {
+        currentThreshold = { ...currentThreshold, color: color };
       }
 
       return currentThreshold;
@@ -83,9 +102,9 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
     const { thresholds } = this.state;
 
     if (index === 0) {
-      return '#3aa655';
+      return thresholds[0].color;
     } else if (index < thresholds.length) {
-      return '#ff851b';
+      return thresholds[index].color;
     }
 
     return '#d44939';
@@ -94,17 +113,24 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
   renderNoThresholds() {
     const { thresholds } = this.state;
 
+    const min = thresholds[0];
+    const max = thresholds[1];
+
     return [
       <div className="threshold-row threshold-row-min" key="min">
         <div className="threshold-row-inner">
-          <div className="threshold-row-color" />
+          <div className="threshold-row-color">
+            <div className="threshold-row-color-inner">
+              <ColorPicker color={min.color} onChange={color => this.onChangeThresholdColor(min, color)} />
+            </div>
+          </div>
           <input
             className="threshold-row-input"
             onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, thresholds[0])}
-            value={thresholds[0].value}
+            onChange={event => this.onChangeThresholdValue(event, min)}
+            value={min.value}
           />
-          <div className="threshold-row-label">{thresholds[0].label}</div>
+          <div className="threshold-row-label">{min.label}</div>
         </div>
       </div>,
       <div className="threshold-row" key="add">
@@ -121,10 +147,10 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
           <input
             className="threshold-row-input"
             onBlur={this.onBlur}
-            onChange={event => this.onChangeThresholdValue(event, thresholds[1])}
-            value={thresholds[1].value}
+            onChange={event => this.onChangeThresholdValue(event, max)}
+            value={max.value}
           />
-          <div className="threshold-row-label">{thresholds[1].label}</div>
+          <div className="threshold-row-label">{max.label}</div>
         </div>
       </div>,
     ];
@@ -143,7 +169,16 @@ export default class Thresholds extends PureComponent<PanelOptionsProps<OptionsP
       return (
         <div className={rowStyle} key={`${threshold.index}-${index}`}>
           <div className="threshold-row-inner">
-            <div className="threshold-row-color" />
+            <div className="threshold-row-color">
+              {threshold.color && (
+                <div className="threshold-row-color-inner">
+                  <ColorPicker
+                    color={threshold.color}
+                    onChange={color => this.onChangeThresholdColor(threshold, color)}
+                  />
+                </div>
+              )}
+            </div>
             <input
               className="threshold-row-input"
               type="text"
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
index 9faf3a5d03b..bccbe7f51df 100644
--- a/public/sass/components/_thresholds.scss
+++ b/public/sass/components/_thresholds.scss
@@ -33,6 +33,17 @@
 .threshold-row-color {
   width: 36px;
   border-right: 1px solid $input-label-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.threshold-row-color-inner {
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
 }
 
 .threshold-row-input {