ux: panel title ux improvements poc

public/app/features/panel/panel_menu.js

@@ -11,10 +11,17 @@ function (angular, $, _, Tether) {
     .module('grafana.directives')
     .directive('panelMenu', function($compile) {
       var linkTemplate =
-          '<span class="panel-title drag-handle pointer">' +
+          '<span class="panel-title drag-handle pointer dropdown">' +
             '<span class="icon-gf panel-alert-icon"></span>' +
             '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
+            '<span class="fa fa-caret-down panel-title-caret" data-toggle="dropdown"></span>' +
             '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
+            '<ul class="dropdown-menu panel-dropdown-menu" role="menu">' +
+              '<li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cog"></i> Edit <span class="dropdown-menu-item-shortcut">e</span></a></li>' +
+              '<li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-eye"></i> View</a></li>' +
+              '<li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-share-square-o"></i> Share</a></li>' +
+              '<li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-trash"></i> Remove</a></li>' +
+            '</ul>' +
           '</span>';
 
       function createMenuTemplate(ctrl) {
@@ -100,6 +107,9 @@ function (angular, $, _, Tether) {
           }
 
           var showMenu = function(e) {
+            if (true) {
+              return;
+            }
             // if menu item is clicked and menu was just removed from dom ignore this event
             if (!$.contains(document, e.target)) {
               return;

public/sass/_variables.dark.scss

@@ -89,7 +89,8 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 $panel-bg: 				      $dark-2;
-$panel-border:  	      solid 1px $dark-3;
+$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;
 

public/sass/_variables.light.scss

@@ -96,7 +96,8 @@ $component-active-bg:    $brand-primary !default;
 // -------------------------
 
 $panel-bg: 		       $gray-7;
-$panel-border:       solid 1px $gray-6;
+$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;
 

public/sass/components/_cards.scss

@@ -27,7 +27,7 @@
 
     &:nth-child(2) {
       border-radius: 3px 0 0 3px;
-      border-right: 1px solid $panel-border;
+      border-right: $panel-border;
     }
 
     &:nth-child(1) {

public/sass/pages/_dashboard.scss

@@ -55,7 +55,7 @@ div.flot-text {
 
 .panel-title-container {
   min-height: 9px;
-  padding-top: 4px;
+  padding: 2px 0;
   cursor: pointer;
   word-wrap: break-word;
 }
@@ -69,6 +69,16 @@ div.flot-text {
   display: block;
 }
 
+.panel-title-caret {
+  color: $text-color-faint;
+  margin-left: 10px;
+  padding: 3px 5px;
+
+  &:hover {
+    background: $dark-4;
+  }
+}
+
 .panel-loading {
   position:absolute;
   top: -3px;
@@ -78,8 +88,43 @@ div.flot-text {
 
 .panel-header {
   text-align: center;
+
+  &:hover {
+    background: $side-menu-bg;
+
+    .panel-title-caret {
+      color: $text-color;
+    }
+  }
 }
 
+.panel-dropdown-menu {
+  border: none;
+  left: 50%;
+  text-align: left;
+  transform: translateX(-50%);
+  background: $side-menu-bg;
+  box-shadow: $search-shadow;
+
+  li a {
+    display: block;
+    white-space: nowrap;
+    color: $text-muted;
+    font-size: $font-size-sm;
+    padding: $spacer/2 $spacer;
+    border-left: 2px solid $side-menu-bg;
+    i {
+      display: inline-block;
+      padding-right: $spacer/2;
+    }
+
+    &:hover {
+      @include left-brand-border-gradient();
+      color: $link-color;
+      background: $input-label-bg;
+    }
+  }
+}
 
 .panel-info-corner-inner {
   width: 0;
@@ -181,13 +226,13 @@ div.flot-text {
   }
 }
 
-.panel-highlight  {
+// .panel-highlight  {
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
+//   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
-}
+// }
-
+//
-.panel-hover-highlight  {
+// .panel-hover-highlight  {
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
+//   box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
-}
+// }
 
 .on-drag-hover {
   .panel-container {