mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
fix: fixed color pickers that were broken in minified builds, fixes #9549
This commit is contained in:
parent
b86ae3f0e8
commit
574afe8568
@ -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)
|
||||
|
||||
|
@ -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']);
|
||||
|
||||
|
@ -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)}>
|
||||
<i
|
||||
key={paletteColor}
|
||||
className={'pointer fa ' + cssClass}
|
||||
style={{ color: paletteColor }}
|
||||
onClick={this.onColorSelect(paletteColor)}>
|
||||
|
||||
</i>
|
||||
);
|
||||
});
|
||||
@ -40,6 +42,3 @@ export class GfColorPalette extends React.Component<IProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
coreModule.directive('gfColorPalette', function (reactDirective) {
|
||||
return reactDirective(GfColorPalette, ['color', 'onColorSelect']);
|
||||
});
|
||||
|
@ -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 }],
|
||||
]);
|
||||
|
@ -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']);
|
||||
});
|
||||
|
@ -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']);
|
||||
|
@ -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']);
|
||||
});
|
||||
|
@ -5,6 +5,7 @@
|
||||
*/
|
||||
import coreModule from '../../core_module';
|
||||
|
||||
/** @ngInject */
|
||||
export function spectrumPicker() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
|
10
public/app/core/utils/react2angular.ts
Normal file
10
public/app/core/utils/react2angular.ts
Normal 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);
|
||||
}]);
|
||||
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user