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

This commit is contained in:
Torkel Ödegaard 2017-10-17 10:51:42 +02:00
parent b86ae3f0e8
commit 574afe8568
10 changed files with 40 additions and 52 deletions

View File

@ -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)

View File

@ -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']);

View File

@ -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']);
});

View File

@ -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 }],
]);

View File

@ -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']);
});

View File

@ -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']);

View File

@ -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']);
});

View File

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

View File

@ -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);
}]);
}

View File

@ -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 {