Skip to content

N
nexpie-grafana-theme
Commit 574afe85 by Torkel Ödegaard
Options

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

parent b86ae3f0
Showing with 40 additions and 52 deletions
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
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
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
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
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
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 → 100644
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment