fix: fixed color pickers that were broken in minified builds, fixes #9549

CHANGELOG.md

@@ -7,6 +7,11 @@
 - UX changes to nav & side menu
 - New dashboard grid layout system
 
+# 4.6.0-beta2 (2017-10-17)
+
+## Fixes
+* **ColorPicker**: Fix for color picker not showing [#9549](https://github.com/grafana/grafana/issues/9549)
+
 # 4.6.0-beta1 (2017-10-13)
 
 ## New Features
@@ -41,7 +46,7 @@
 
 ## Tech
 * **Go**: Grafana is now built using golang 1.9
-* **Webpack**: Changed from systemjs to webpack (see readme or building from source guide for new build instructions). Systemjs is still used to load plugins but now plugins can only import a limited set of dependencies. See [PLUGIN_DEV.md](https://github.com/grafana/grafana/blob/master/PLUGIN_DEV.md) for more details on how this can effect some plugins. 
+* **Webpack**: Changed from systemjs to webpack (see readme or building from source guide for new build instructions). Systemjs is still used to load plugins but now plugins can only import a limited set of dependencies. See [PLUGIN_DEV.md](https://github.com/grafana/grafana/blob/master/PLUGIN_DEV.md) for more details on how this can effect some plugins.
 
 # 4.5.2 (2017-09-22)
 

public/app/core/components/PasswordStrength.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import coreModule from '../core_module';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   password: string;
@@ -33,7 +33,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('passwordStrength', function(reactDirective) {
-  return reactDirective(PasswordStrength, ['password']);
-});
+react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
 

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
 import { sortedColors } from 'app/core/utils/colors';
 
 export interface IProps {
@@ -23,12 +22,15 @@ export class GfColorPalette extends React.Component<IProps, any> {
   }
 
   render() {
-    const colorPaletteItems = this.paletteColors.map((paletteColor) => {
+    const colorPaletteItems = this.paletteColors.map(paletteColor => {
       const cssClass = paletteColor.toLowerCase() === this.props.color.toLowerCase() ? 'fa-circle-o' : 'fa-circle';
       return (
-        <i key={paletteColor} className={"pointer fa " + cssClass}
-          style={{'color': paletteColor}}
-          onClick={this.onColorSelect(paletteColor)}>&nbsp;
+        <i
+          key={paletteColor}
+          className={'pointer fa ' + cssClass}
+          style={{ color: paletteColor }}
+          onClick={this.onColorSelect(paletteColor)}>
+          &nbsp;
         </i>
       );
     });
@@ -40,6 +42,3 @@ export class GfColorPalette extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('gfColorPalette', function (reactDirective) {
-  return reactDirective(GfColorPalette, ['color', 'onColorSelect']);
-});

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

@@ -2,8 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import Drop from 'tether-drop';
-import coreModule from 'app/core/core_module';
 import { ColorPickerPopover } from './ColorPickerPopover';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   color: string;
@@ -27,9 +27,7 @@ export class ColorPicker extends React.Component<IProps, any> {
   }
 
   openColorPicker() {
-    const dropContent = (
-      <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />
-    );
+    const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
 
     let dropContentElem = document.createElement('div');
     ReactDOM.render(dropContent, dropContentElem);
@@ -38,12 +36,12 @@ export class ColorPicker extends React.Component<IProps, any> {
       target: this.pickerElem[0],
       content: dropContentElem,
       position: 'top center',
-      classes: 'drop-popover drop-popover--form',
-      openOn: 'hover',
+      classes: 'drop-popover',
+      openOn: 'click',
       hoverCloseDelay: 200,
       tetherOptions: {
-        constraints: [{ to: 'scrollParent', attachment: "none both" }]
-      }
+        constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+      },
     });
 
     drop.on('close', this.closeColorPicker);
@@ -68,17 +66,14 @@ export class ColorPicker extends React.Component<IProps, any> {
     return (
       <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={this.setPickerElem}>
         <div className="sp-preview">
-          <div className="sp-preview-inner" style={{backgroundColor: this.props.color}}>
-          </div>
+          <div className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
         </div>
       </div>
     );
   }
 }
 
-coreModule.directive('colorPicker', function (reactDirective) {
-  return reactDirective(ColorPicker, [
-    'color',
-    ['onChange', { watchDepth: 'reference', wrapApply: true }]
-  ]);
-});
+react2AngularDirective('colorPicker', ColorPicker, [
+  'color',
+  ['onChange', { watchDepth: 'reference', wrapApply: true }],
+]);

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import $ from 'jquery';
 import tinycolor from 'tinycolor2';
-import coreModule from 'app/core/core_module';
 import { GfColorPalette } from './ColorPalette';
 import { GfSpectrumPicker } from './SpectrumPicker';
 
@@ -115,7 +114,3 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     );
   }
 }
-
-coreModule.directive('gfColorPickerPopover', function (reactDirective) {
-  return reactDirective(ColorPickerPopover, ['color', 'onColorSelect']);
-});

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
-import {ColorPickerPopover} from './ColorPickerPopover';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   series: any;
@@ -50,6 +50,4 @@ export class SeriesColorPicker extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('seriesColorPicker', function(reactDirective) {
-  return reactDirective(SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
-});
+react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 import $ from 'jquery';
 import 'vendor/spectrum';
@@ -71,6 +70,3 @@ export class GfSpectrumPicker extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('gfSpectrumPicker', function (reactDirective) {
-  return reactDirective(GfSpectrumPicker, ['color', 'options', 'onColorSelect']);
-});

public/app/core/components/colorpicker/spectrum_picker.ts

@@ -5,6 +5,7 @@
  */
 import coreModule from '../../core_module';
 
+/** @ngInject */
 export function spectrumPicker() {
   return {
     restrict: 'E',

public/app/core/utils/react2angular.ts

@@ -0,0 +1,10 @@
+import coreModule from 'app/core/core_module';
+
+export function react2AngularDirective(name: string, component: any, options: any) {
+
+  coreModule.directive(name, ['reactDirective', reactDirective => {
+    return reactDirective(component, options);
+  }]);
+
+}
+

public/sass/components/_panel_graph.scss

@@ -211,15 +211,6 @@
     margin-right: 0px;
     line-height: initial;
   }
-  .close {
-    margin-right: 5px;
-    color: $link-color;
-    opacity: 0.7;
-    text-shadow: none;
-  }
-  .editor-row {
-    padding: 5px;
-  }
 }
 
 .annotation-tags {