diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ee57bbfc82..210af0d8354 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/public/app/core/components/PasswordStrength.tsx b/public/app/core/components/PasswordStrength.tsx index 6765d2a51c8..3f690f3d239 100644 --- a/public/app/core/components/PasswordStrength.tsx +++ b/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 { } } -coreModule.directive('passwordStrength', function(reactDirective) { - return reactDirective(PasswordStrength, ['password']); -}); +react2AngularDirective('passwordStrength', PasswordStrength, ['password']); diff --git a/public/app/core/components/colorpicker/ColorPalette.tsx b/public/app/core/components/colorpicker/ColorPalette.tsx index 47e0e244e0a..127f2d328ca 100644 --- a/public/app/core/components/colorpicker/ColorPalette.tsx +++ b/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 { } 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 ( -   + +   ); }); @@ -40,6 +42,3 @@ export class GfColorPalette extends React.Component { } } -coreModule.directive('gfColorPalette', function (reactDirective) { - return reactDirective(GfColorPalette, ['color', 'onColorSelect']); -}); diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/public/app/core/components/colorpicker/ColorPicker.tsx index baf3f87cf81..dbba75636d0 100644 --- a/public/app/core/components/colorpicker/ColorPicker.tsx +++ b/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 { } openColorPicker() { - const dropContent = ( - - ); + const dropContent = ; let dropContentElem = document.createElement('div'); ReactDOM.render(dropContent, dropContentElem); @@ -38,12 +36,12 @@ export class ColorPicker extends React.Component { 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 { return (
-
-
+
); } } -coreModule.directive('colorPicker', function (reactDirective) { - return reactDirective(ColorPicker, [ - 'color', - ['onChange', { watchDepth: 'reference', wrapApply: true }] - ]); -}); +react2AngularDirective('colorPicker', ColorPicker, [ + 'color', + ['onChange', { watchDepth: 'reference', wrapApply: true }], +]); diff --git a/public/app/core/components/colorpicker/ColorPickerPopover.tsx b/public/app/core/components/colorpicker/ColorPickerPopover.tsx index 09b6b8ec2c2..270e82ffdd6 100644 --- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx +++ b/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 { ); } } - -coreModule.directive('gfColorPickerPopover', function (reactDirective) { - return reactDirective(ColorPickerPopover, ['color', 'onColorSelect']); -}); diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/public/app/core/components/colorpicker/SeriesColorPicker.tsx index 2ee2d7571b3..6b6d387a2b2 100644 --- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx +++ b/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 { } } -coreModule.directive('seriesColorPicker', function(reactDirective) { - return reactDirective(SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']); -}); +react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']); diff --git a/public/app/core/components/colorpicker/SpectrumPicker.tsx b/public/app/core/components/colorpicker/SpectrumPicker.tsx index 2ea0fc65ddf..254f06cf145 100644 --- a/public/app/core/components/colorpicker/SpectrumPicker.tsx +++ b/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 { } } -coreModule.directive('gfSpectrumPicker', function (reactDirective) { - return reactDirective(GfSpectrumPicker, ['color', 'options', 'onColorSelect']); -}); diff --git a/public/app/core/components/colorpicker/spectrum_picker.ts b/public/app/core/components/colorpicker/spectrum_picker.ts index c262eaac326..183cebffe2b 100644 --- a/public/app/core/components/colorpicker/spectrum_picker.ts +++ b/public/app/core/components/colorpicker/spectrum_picker.ts @@ -5,6 +5,7 @@ */ import coreModule from '../../core_module'; +/** @ngInject */ export function spectrumPicker() { return { restrict: 'E', diff --git a/public/app/core/utils/react2angular.ts b/public/app/core/utils/react2angular.ts new file mode 100644 index 00000000000..ad6f7476d6a --- /dev/null +++ b/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); + }]); + +} + diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 45372f92a65..247ed1e94cc 100644 --- a/public/sass/components/_panel_graph.scss +++ b/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 {