From 40dc29d13506ebf05151c978cff6f056fa941a87 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 24 Jan 2019 12:01:15 +0100
Subject: [PATCH] Make series overrides color picker display correctly

---
 .../src/components/ColorPicker/_ColorPicker.scss  | 15 +++++++++++++++
 public/app/core/angular_wrappers.ts               |  1 +
 .../plugins/panel/graph/series_overrides_ctrl.ts  |  4 +++-
 3 files changed, 19 insertions(+), 1 deletion(-)

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: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
+      template: '<series-color-picker-popover color="color" onColorChange="colorSelected" />',
+      classNames: 'drop-popover drop-popover--transparent',
       model: {
         autoClose: true,
         colorSelected: $scope.colorSelected,
         series: fakeSeries,
+        color,
       },
       onClose: () => {
         $scope.ctrl.render();