ux: minor progress on panel title menu makover

public/app/features/panel/panel_header.ts

@@ -1,5 +1,6 @@
 ///<reference path="../../headers/common.d.ts" />
 
+import $ from 'jquery';
 import angular from 'angular';
 import {coreModule} from 'app/core/core';
 
@@ -37,7 +38,21 @@ function panelHeader() {
   return {
     restrict: 'E',
     template: template,
-    link: function() {
+    link: function(scope, elem, attrs) {
+
+      elem.click(function(evt) {
+        const targetClass = evt.target.className;
+
+        if (targetClass === 'panel-title-text drag-handle' || targetClass === 'panel-title drag-handle') {
+          evt.stopPropagation();
+          elem.find('[data-toggle=dropdown]').dropdown('toggle');
+        }
+
+        // var toggleAttribute = evt.getAttribute('data-toggle');
+        // if (!toggleAttribute) {
+        //   elem.find('[data-toggle=dropdown]').click();
+        // }
+      });
     }
   };
 }

public/sass/_variables.dark.scss

@@ -92,7 +92,8 @@ $panel-bg: 				      $dark-2;
 $panel-border-color:    $dark-3;
 $panel-border:          solid 1px $panel-border-color;
 $panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
-$panel-menu-border:     solid 1px black;
+$panel-header-hover-bg:       $dark-3;
+$panel-header-menu-hover-bg:  $dark-5;
 
 $divider-border-color:        #555;
 

public/sass/_variables.light.scss

@@ -99,7 +99,8 @@ $panel-bg: 		       $gray-7;
 $panel-border-color: $gray-5;
 $panel-border:       solid 1px $panel-border-color;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
-$panel-menu-border:  solid 1px white;
+$panel-header-hover-bg:       $gray-6;
+$panel-header-menu-hover-bg:  $gray-4;
 
 $divider-border-color:	      $gray-2;
 

public/sass/components/_view_states.scss

@@ -28,6 +28,7 @@
   .panel-drop-zone
   .dashnav-refresh-action,
   .dashnav-zoom-out,
+  .panel-menu-container,
   .dashnav-action-icons,
   .panel-info-corner--info,
   .panel-info-corner--links,

public/sass/pages/_dashboard.scss

@@ -70,17 +70,13 @@ div.flot-text {
 }
 
 .panel-menu-container {
-  margin-left: 8px;
+  margin-left: 6px;
 }
 
 .panel-menu-toggle {
   color: $text-color-faint;
   cursor: pointer;
   padding: 3px 5px;
-
-  &:hover {
-    background: $dark-4;
-  }
 }
 
 .panel-loading {
@@ -94,11 +90,13 @@ div.flot-text {
   text-align: center;
 
   &:hover {
-    background: $side-menu-bg;
+    background: $panel-header-hover-bg;
 
-    .panel-title-caret {
+    .panel-menu-toggle {
       color: $text-color;
+      background: $panel-header-menu-hover-bg;
     }
+
   }
 }
 
@@ -107,6 +105,8 @@ div.flot-text {
   text-align: left;
   background: $side-menu-bg;
   box-shadow: $search-shadow;
+  top: 25px;
+  left: -100px;
 
   li a {
     display: block;