fix(graph): fixed color picker appearingunder pinned side nav, fixes #4556

public/app/core/components/colorpicker.ts

@@ -7,10 +7,6 @@ import coreModule from 'app/core/core_module';
 
 
 var template = `
 var template = `
 <div class="graph-legend-popover">
 <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">
   <div ng-show="ctrl.series" class="p-b-1">
     <label>Y Axis:</label>
     <label>Y Axis:</label>
     <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
     <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
@@ -31,7 +27,6 @@ var template = `
     ng-style="{color:color}"
     ng-style="{color:color}"
     ng-click="ctrl.colorSelected(color);">&nbsp;</i>
     ng-click="ctrl.colorSelected(color);">&nbsp;</i>
   </p>
   </p>
-
 </div>
 </div>
 `;
 `;
 
 
@@ -51,21 +46,17 @@ export class ColorPickerCtrl {
   toggleAxis(yaxis) {
   toggleAxis(yaxis) {
     this.$scope.toggleAxis();
     this.$scope.toggleAxis();
 
 
-    if (!this.$scope.autoClose) {
+    if (this.$scope.autoClose) {
       this.$scope.dismiss();
       this.$scope.dismiss();
     }
     }
   }
   }
 
 
   colorSelected(color) {
   colorSelected(color) {
     this.$scope.colorSelected(color);
     this.$scope.colorSelected(color);
-    if (!this.$scope.autoClose) {
+    if (this.$scope.autoClose) {
       this.$scope.dismiss();
       this.$scope.dismiss();
     }
     }
   }
   }
-
-  close() {
-    this.$scope.dismiss();
-  }
 }
 }
 
 
 export function colorPicker() {
 export function colorPicker() {

public/app/plugins/panel/graph/legend.js

@@ -49,7 +49,6 @@ function (angular, _, $) {
               position: 'bottom center',
               position: 'bottom center',
               template: '<gf-color-picker></gf-color-picker>',
               template: '<gf-color-picker></gf-color-picker>',
               model: {
               model: {
-                autoClose: true,
                 series: series,
                 series: series,
                 toggleAxis: function() {
                 toggleAxis: function() {
                   ctrl.toggleAxis(series);
                   ctrl.toggleAxis(series);

public/app/plugins/panel/graph/series_overrides_ctrl.js

@@ -59,6 +59,7 @@ define([
         openOn: 'click',
         openOn: 'click',
         template: '<gf-color-picker></gf-color-picker>',
         template: '<gf-color-picker></gf-color-picker>',
         model: {
         model: {
+          autoClose: true,
           colorSelected: $scope.colorSelected,
           colorSelected: $scope.colorSelected,
         },
         },
         onClose: function() {
         onClose: function() {

public/sass/components/_drop.scss

@@ -7,6 +7,7 @@ $attachmentOffset: 0%;
 $easing: cubic-bezier(0, 0, 0.265, 1.00);
 $easing: cubic-bezier(0, 0, 0.265, 1.00);
 
 
 .drop-element {
 .drop-element {
+  z-index: 10000;
   position: absolute;
   position: absolute;
   display: none;
   display: none;
   opacity: 0;
   opacity: 0;