From 29dff7ba1a23b16970b5aecdb2b843e4427bf0f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 12 Apr 2016 11:07:34 -0400
Subject: [PATCH] fix(graph): fixed color picker appearingunder pinned side
 nav, fixes #4556

---
 public/app/core/components/colorpicker.ts           | 13 ++-----------
 public/app/plugins/panel/graph/legend.js            |  1 -
 .../plugins/panel/graph/series_overrides_ctrl.js    |  1 +
 public/sass/components/_drop.scss                   |  1 +
 4 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/public/app/core/components/colorpicker.ts b/public/app/core/components/colorpicker.ts
index 7c35ac7e4ac..1834a1eb8a1 100644
--- a/public/app/core/components/colorpicker.ts
+++ b/public/app/core/components/colorpicker.ts
@@ -7,10 +7,6 @@ import coreModule from 'app/core/core_module';
 
 var template = `
 <div class="graph-legend-popover">
-  <a class="drop-popopver-close" ng-click="ctrl.close();" href="" ng-hide="ctrl.autoClose">
-    <i class="fa fa-times-circle"></i>
-  </a>
-
   <div ng-show="ctrl.series" class="p-b-1">
     <label>Y Axis:</label>
     <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
@@ -31,7 +27,6 @@ var template = `
     ng-style="{color:color}"
     ng-click="ctrl.colorSelected(color);">&nbsp;</i>
   </p>
-
 </div>
 `;
 
@@ -51,21 +46,17 @@ export class ColorPickerCtrl {
   toggleAxis(yaxis) {
     this.$scope.toggleAxis();
 
-    if (!this.$scope.autoClose) {
+    if (this.$scope.autoClose) {
       this.$scope.dismiss();
     }
   }
 
   colorSelected(color) {
     this.$scope.colorSelected(color);
-    if (!this.$scope.autoClose) {
+    if (this.$scope.autoClose) {
       this.$scope.dismiss();
     }
   }
-
-  close() {
-    this.$scope.dismiss();
-  }
 }
 
 export function colorPicker() {
diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js
index 5d9e1c24872..8146617bc22 100644
--- a/public/app/plugins/panel/graph/legend.js
+++ b/public/app/plugins/panel/graph/legend.js
@@ -49,7 +49,6 @@ function (angular, _, $) {
               position: 'bottom center',
               template: '<gf-color-picker></gf-color-picker>',
               model: {
-                autoClose: true,
                 series: series,
                 toggleAxis: function() {
                   ctrl.toggleAxis(series);
diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.js b/public/app/plugins/panel/graph/series_overrides_ctrl.js
index 7a41a650306..940da1a9e4b 100644
--- a/public/app/plugins/panel/graph/series_overrides_ctrl.js
+++ b/public/app/plugins/panel/graph/series_overrides_ctrl.js
@@ -59,6 +59,7 @@ define([
         openOn: 'click',
         template: '<gf-color-picker></gf-color-picker>',
         model: {
+          autoClose: true,
           colorSelected: $scope.colorSelected,
         },
         onClose: function() {
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss
index 0af497f46f2..4045c1daa4b 100644
--- a/public/sass/components/_drop.scss
+++ b/public/sass/components/_drop.scss
@@ -7,6 +7,7 @@ $attachmentOffset: 0%;
 $easing: cubic-bezier(0, 0, 0.265, 1.00);
 
 .drop-element {
+  z-index: 10000;
   position: absolute;
   display: none;
   opacity: 0;