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();