ux: more work on panel menu

public/app/core/routes/dashboard_loaders.js

@@ -34,7 +34,7 @@ function (coreModule) {
         rows: [
           {
             title: 'Dashboard Row',
-            height: '250px',
+            height: '350px',
             panels:[],
             isNew: true,
           }

public/app/features/dashboard/row/add_panel.ts

@@ -78,7 +78,7 @@ export class AddPanelCtrl {
   }
 
   addPanel(panelPluginInfo) {
-    var defaultSpan = 12;
+    var defaultSpan = 6;
     var span = 12 - this.row.span;
 
     var panel = {

public/app/features/panel/all.js

 define([
-  './panel_menu',
+  './panel_header',
   './panel_directive',
   './solo_panel_ctrl',
   './query_ctrl',

public/app/features/panel/panel_directive.ts

@@ -19,7 +19,7 @@ var panelTemplate = `
         <i class="fa fa-spinner fa-spin"></i>
       </span>
 
-      <div class="panel-title-container drag-handle" panel-menu></div>
+      <panel-header class="panel-title-container drag-handle" panel-ctrl="ctrl"></panel-header>
     </div>
 
     <div class="panel-content">

public/app/features/panel/panel_header.ts

+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import {coreModule} from 'app/core/core';
+
+var template = `
+<span class="panel-title drag-handle">
+  <span class="icon-gf panel-alert-icon"></span>
+  <span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>
+  <span class="panel-menu-container dropdown">
+    <span class="fa fa-caret-down panel-menu-toggle" data-toggle="dropdown"></span>
+    <ul class="dropdown-menu panel-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 class="dropdown-submenu">
+        <a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-cube"></i> Actions</a>
+        <ul class="dropdown-menu panel-menu">
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-flash"></i> Add Annotation</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-bullseye"></i> Toggle Legend</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-download"></i> Export to CSV</a></li>
+          <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-eye"></i> View JSON</a></li>
+        </ul>
+      </li>
+      <li><a ng-click="ctrl.addDataQuery(datasource);"><i class="fa fa-trash"></i> Remove</a></li>
+    </ul>
+  </span>
+  <span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>
+</span>`;
+
+/** @ngInject **/
+function panelHeader() {
+  return {
+    restrict: 'E',
+    template: template,
+    link: function() {
+    }
+  };
+}
+
+coreModule.directive('panelHeader', panelHeader);

public/app/features/panel/panel_menu.js

@@ -16,12 +16,6 @@ function (angular, $, _, Tether) {
             '<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) {

public/sass/_variables.dark.scss

@@ -192,6 +192,8 @@ $dropdownLinkColorActive:       $white;
 $dropdownLinkBackgroundActive:  $dark-4;
 $dropdownLinkBackgroundHover:   $dark-4;
 
+$dropdown-link-color: $gray-3;
+
 // COMPONENT VARIABLES
 // --------------------------------------------------
 

public/sass/_variables.light.scss

@@ -204,6 +204,7 @@ $dropdownLinkColorActive:       $link-color;
 $dropdownLinkBackgroundActive:  $gray-6;
 $dropdownLinkBackgroundHover:   $gray-6;
 
+$dropdown-link-color: $gray-3;
 
 // COMPONENT VARIABLES
 // --------------------------------------------------

public/sass/components/_dropdown.scss

@@ -31,7 +31,7 @@
   width: 0;
   height: 0;
   vertical-align: top;
-  border-top:   4px solid $black;
+  border-top:   4px solid $text-color-weak;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
   content: "";
@@ -192,7 +192,7 @@
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: 0px;
   margin-left: -1px;
   @include border-radius(0 6px 6px 6px);
 }
@@ -218,9 +218,9 @@
   height: 0;
   border-color: transparent;
   border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: darken($dropdownBackground, 20%);
-  margin-top: 5px;
+  border-width: 4px 0 4px 4px;
+  border-left-color: $text-color-weak;
+  margin-top: 4px;
   margin-right: -10px;
 }
 .dropdown-submenu:hover > a::after {

public/sass/components/_row.scss

@@ -147,7 +147,7 @@ $dash-row-menu-animation-speed: 0.20s;
   li a {
     display: block;
     white-space: nowrap;
-    color: $text-muted;
+    color: $dropdown-link-color;
     font-size: $font-size-sm;
     padding: $spacer/2 $spacer;
     border-left: 2px solid $side-menu-bg;

public/sass/pages/_dashboard.scss

@@ -56,22 +56,26 @@ div.flot-text {
 .panel-title-container {
   min-height: 9px;
   padding: 2px 0;
-  cursor: pointer;
+  cursor: move;
   word-wrap: break-word;
+  display: block;
 }
 
 .panel-title {
   border: 0px;
   font-weight: $font-weight-semi-bold;
   position: relative;
-  cursor: pointer;
   width: 100%;
   display: block;
 }
 
-.panel-title-caret {
+.panel-menu-container {
+  margin-left: 8px;
+}
+
+.panel-menu-toggle {
   color: $text-color-faint;
-  margin-left: 10px;
+  cursor: pointer;
   padding: 3px 5px;
 
   &:hover {
@@ -98,18 +102,16 @@ div.flot-text {
   }
 }
 
-.panel-dropdown-menu {
+.panel-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;
+    color: $dropdown-link-color;
     font-size: $font-size-sm;
     padding: $spacer/2 $spacer;
     border-left: 2px solid $side-menu-bg;
@@ -195,37 +197,6 @@ div.flot-text {
   margin-bottom: 20px;
 }
 
-.panel-menu {
-  z-index: 500;
-  position: absolute;
-  background: $tight-form-func-bg;
-  border: $panel-menu-border;
-
-  .panel-menu-row {
-    white-space: nowrap;
-    border-bottom: $panel-menu-border;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .panel-menu-link, .panel-menu-icon {
-    padding: 5px 10px;
-  }
-
-  .panel-menu-link {
-    display: inline-block;
-    border-right: $panel-menu-border;
-    &:last-child {
-      border: none;
-    }
-  }
-
-  .dropdown-menu {
-    text-align: left;
-  }
-}
-
 // .panel-highlight  {
 //   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
 // }