colorpicker: refactoring the new unififed colorpicker, #9347

public/app/core/components/colorpicker.ts

-///<reference path="../../headers/common.d.ts" />
-
-import coreModule from 'app/core/core_module';
-
-var template = `
-<div class="graph-legend-popover">
-  <div ng-show="ctrl.series" class="p-b-1">
-    <label>Y Axis:</label>
-    <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
-            ng-class="{'btn-success': ctrl.series.yaxis === 1,
-                       'btn-inverse': ctrl.series.yaxis === 2}">
-      Left
-    </button>
-    <button ng-click="ctrl.toggleAxis(yaxis);"
-      class="btn btn-small"
-      ng-class="{'btn-success': ctrl.series.yaxis === 2,
-                 'btn-inverse': ctrl.series.yaxis === 1}">
-      Right
-    </button>
-  </div>
-
-  <p class="m-b-0">
-   <i ng-repeat="color in ctrl.colors" class="pointer fa fa-circle"
-    ng-style="{color:color}"
-    ng-click="ctrl.colorSelected(color);">&nbsp;</i>
-  </p>
-</div>
-`;
-
-export class ColorPickerCtrl {
-  colors: any;
-  autoClose: boolean;
-  series: any;
-  showAxisControls: boolean;
-
-  /** @ngInject */
-  constructor(private $scope, $rootScope) {
-    this.colors = $rootScope.colors;
-    this.autoClose = $scope.autoClose;
-    this.series = $scope.series;
-  }
-
-  toggleAxis(yaxis) {
-    this.$scope.toggleAxis();
-
-    if (this.$scope.autoClose) {
-      this.$scope.dismiss();
-    }
-  }
-
-  colorSelected(color) {
-    this.$scope.colorSelected(color);
-    if (this.$scope.autoClose) {
-      this.$scope.dismiss();
-    }
-  }
-}
-
-export function colorPicker() {
-  return {
-    restrict: 'E',
-    controller: ColorPickerCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    template: template,
-  };
-}
-
-coreModule.directive('gfColorPicker', colorPicker);

public/app/core/components/colorpicker/ColorPickerPopover.tsx

@@ -22,12 +22,6 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
       color: this.props.color,
       colorString: this.props.color
     };
-
-    this.onColorStringChange = this.onColorStringChange.bind(this);
-    this.onColorStringBlur = this.onColorStringBlur.bind(this);
-    this.sampleColorSelected = this.sampleColorSelected.bind(this);
-    this.spectrumColorSelected = this.spectrumColorSelected.bind(this);
-    this.setPickerNavElem = this.setPickerNavElem.bind(this);
   }
 
   setPickerNavElem(elem) {
@@ -89,32 +83,32 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
   render() {
     const paletteTab = (
       <div id="palette">
-        <GfColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected} />
+        <GfColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected.bind(this)} />
       </div>
     );
     const spectrumTab = (
       <div id="spectrum">
-        <GfSpectrumPicker color={this.props.color} onColorSelect={this.spectrumColorSelected} options={{}} />
+        <GfSpectrumPicker color={this.props.color} onColorSelect={this.spectrumColorSelected.bind(this)} options={{}} />
       </div>
     );
     const currentTab = this.state.tab === 'palette' ? paletteTab : spectrumTab;
 
     return (
       <div className="gf-color-picker">
-        <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem}>
+        <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
           <li className="gf-tabs-item-colorpicker">
             <a href="#palette" data-toggle="tab">Colors</a>
           </li>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#spectrum" data-toggle="tab">Spectrum</a>
+            <a href="#spectrum" data-toggle="tab">Custom</a>
           </li>
         </ul>
-        <div className="colorpicker-container">
+        <div className="gf-color-picker__body">
           {currentTab}
         </div>
-        <div className="color-model-container">
-          <input className="gf-form-input" value={this.state.colorString}
-            onChange={this.onColorStringChange} onBlur={this.onColorStringBlur}>
+        <div>
+          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
+            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
           </input>
         </div>
       </div>

public/app/core/components/colorpicker/SeriesColorPicker.tsx

 import React from 'react';
 import coreModule from 'app/core/core_module';
-import { ColorPickerPopover } from './ColorPickerPopover';
+import {ColorPickerPopover} from './ColorPickerPopover';
 
 export interface IProps {
   series: any;
@@ -23,27 +23,33 @@ export class SeriesColorPicker extends React.Component<IProps, any> {
     this.props.onToggleAxis();
   }
 
-  render() {
+  renderAxisSelection() {
     const leftButtonClass = this.props.series.yaxis === 1 ? 'btn-success' : 'btn-inverse';
     const rightButtonClass = this.props.series.yaxis === 2 ? 'btn-success' : 'btn-inverse';
 
     return (
-      <div className="graph-legend-popover">
       <div className="p-b-1">
-          <label>Y Axis:</label>
-          <button onClick={this.onToggleAxis} className={"btn btn-small " + leftButtonClass}>
+        <label className="small p-r-1">Y Axis:</label>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + leftButtonClass}>
           Left
         </button>
-          <button onClick={this.onToggleAxis} className={"btn btn-small " + rightButtonClass}>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + rightButtonClass}>
           Right
         </button>
       </div>
-        <ColorPickerPopover color={this.props.series.color} onColorSelect={this.onColorChange} />
+    );
+  }
+
+  render() {
+    return (
+      <div className="graph-legend-popover">
+        {this.props.series && this.renderAxisSelection()}
+        <ColorPickerPopover color="#7EB26D" onColorSelect={this.onColorChange} />
       </div>
     );
   }
 }
 
-coreModule.directive('seriesColorPicker', function (reactDirective) {
+coreModule.directive('seriesColorPicker', function(reactDirective) {
   return reactDirective(SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
 });

public/app/core/core.ts

@@ -23,7 +23,6 @@ import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
 import {searchDirective} from './components/search/search';
 import {infoPopover} from './components/info_popover';
-import {colorPicker} from './components/colorpicker';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import {liveSrv} from './live/live_srv';
@@ -55,7 +54,6 @@ export {
   sideMenuDirective,
   navbarDirective,
   searchDirective,
-  colorPicker,
   liveSrv,
   layoutSelector,
   switchDirective,

public/app/plugins/panel/graph/series_overrides_ctrl.js

@@ -57,7 +57,7 @@ define([
         element: $element.find(".dropdown")[0],
         position: 'top center',
         openOn: 'click',
-        template: '<gf-color-picker></gf-color-picker>',
+        template: '<series-color-picker onColorChange="colorSelected" />',
         model: {
           autoClose: true,
           colorSelected: $scope.colorSelected,

public/sass/components/_color_picker.scss

@@ -36,8 +36,9 @@
   z-index: 0;
 }
 
-.colorpicker-container {
-  min-height: 190px;
+.gf-color-picker__body {
+  padding-bottom: 10px;
+  padding-left: 6px;
 }
 
 .drop-popover.gf-color-picker {

public/sass/components/_gf-form.scss

@@ -171,6 +171,12 @@ $gf-form-margin: 0.25rem;
       pointer-events: none;
     }
   }
+
+  &--small {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    font-size: $font-size-sm;
+  }
 }
 
 .gf-form-hint {