diff --git a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss index fc26a649c6c..6b8a0e491b2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss +++ b/packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss @@ -210,3 +210,18 @@ $arrowSize: 15px; width: 210px; } } + +// TODO: Remove. This is a temporary solution until color picker popovers are used +// with Drop.js. +.drop-popover.drop-popover--transparent { + .drop-content { + border: none; + background: none; + padding: 0; + max-width: none; + + &:before { + display: none; + } + } +} diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 65eb68966ff..4806275e87d 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -28,6 +28,7 @@ export function registerAngularDirectives() { ['onChange', { watchDepth: 'reference', wrapApply: true }], ]); react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [ + 'color', 'series', 'onColorChange', 'onToggleAxis', diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.ts b/public/app/plugins/panel/graph/series_overrides_ctrl.ts index 934fd835347..90d61a362ab 100644 --- a/public/app/plugins/panel/graph/series_overrides_ctrl.ts +++ b/public/app/plugins/panel/graph/series_overrides_ctrl.ts @@ -53,11 +53,13 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { element: $element.find('.dropdown')[0], position: 'top center', openOn: 'click', - template: '', + template: '', + classNames: 'drop-popover drop-popover--transparent', model: { autoClose: true, colorSelected: $scope.colorSelected, series: fakeSeries, + color, }, onClose: () => { $scope.ctrl.render();