Lots of progress on new panel edit menu, very tricky to get this right but think I am getting close to something that is good and will work long term

'

@@ -1,79 +0,0 @@
-.panel {
-  display: inline-block;
-  float: left;
-  vertical-align: top;
-}
-
-.panel-container {
-  padding: 0px 0px 0px 0px;
-  background: @grafanaPanelBackground;
-  margin: 5px;
-  position: relative;
-}
-
-.panel-content {
-  padding: 0px 10px 5px 10px;
-}
-
-.panel-title {
-  border: 0px;
-  font-weight: bold;
-  position: relative;
-}
-
-.panel-loading {
-  position:absolute;
-  top: 0px;
-  right: 4px;
-  z-index: 800;
-}
-
-.panel-header {
-  text-align: center;
-}
-
-
-.panel-error {
-  color: @white;
-  position: absolute;
-  left: 0;
-  padding: 0px 17px 6px 5px;
-  top: 0;
-  i {
-    position: relative;
-    top: -2px;
-  }
-}
-
-.panel-error-arrow {
-  width: 0;
-  height: 0;
-  position: absolute;
-  border-left: 31px solid transparent;
-  border-right: 30px solid transparent;
-  border-bottom: 27px solid @grafanaPanelBackground;
-  left: 0;
-  bottom: 0;
-}
-
-.panel-menu {
-  display: inline-block;
-  vertical-align: top;
-  a {
-    font-size: 1.2em;
-    float: left;
-    padding: 7px 10px;
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    border-bottom: 1px solid black;
-    background: @grayDark;
-  }
-  a:first-child {
-    border-left: 1px solid black;
-  }
-}
-
-.panel-highlight  {
-  border: 1px solid @blue;
-  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-}

src/app/directives/grafanaPanel.js

@@ -1,123 +1,11 @@
 define([
   'angular',
   'jquery',
-  'lodash',
+  './panelMenu',
 ],
-function (angular, $, _) {
+function (angular, $) {
   'use strict';
 
-  angular
-    .module('grafana.directives')
-    .directive('panelTitle', function($compile) {
-      var linkTemplate = '<a class="pointer panel-title">{{panel.title || interpolateTemplateVars}}</a>';
-      var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
-              ' jqyoui-draggable="'+
-              '{'+
-                'animate:false,'+
-                'mutate:false,'+
-                'index:{{$index}},'+
-                'onStart:\'panelMoveStart\','+
-                'onStop:\'panelMoveStop\''+
-                '}"  ng-model="panel" ';
-
-      function createMenuTemplate($scope) {
-        var template = '<div class="panel-menu small">';
-        template += '<div class="panel-menu-inner">';
-        template += '<div class="panel-menu-row">';
-        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="icon-minus"></i></a>';
-        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="icon-plus"></i></a>';
-        template += '<a class="panel-menu-icon pull-right" ng-click="remove_panel_from_row(row, panel)"><i class="icon-remove"></i></a>';
-        template += '<a class="panel-menu-icon pull-right" ' + moveAttributes + '><i class="icon-move"></i></a>';
-        template += '<div class="clearfix"></div>';
-        template += '</div>';
-
-        template += '<div class="panel-menu-row">';
-
-        _.each($scope.panelMeta.menu, function(item) {
-          template += '<a class="panel-menu-link pull-left" ';
-          if (item.click) { template += ' ng-click="' + item.click + '"'; }
-          template += '>';
-          template += item.text + '</a>';
-        });
-
-        template += '<a class="panel-menu-link pull-left">share</a>';
-
-        template += '</div>';
-        template += '</div>';
-        template += '</div>';
-        return template;
-      }
-
-      return {
-        restrict: 'A',
-        link: function($scope, elem) {
-          var $link = $(linkTemplate);
-          var $panelContainer = elem.parents(".panel-container");
-          var menuTemplate = createMenuTemplate($scope);
-          var menuWidth = 277;
-          var menuScope = null;
-          var timeout = null;
-
-          elem.append($link);
-
-          var dismiss = function() {
-            $('.panel-menu').remove();
-
-            if (menuScope) {
-              menuScope.$destroy();
-              menuScope = null;
-              $panelContainer.removeClass('panel-highlight');
-            }
-            if (timeout) {
-              clearTimeout(timeout);
-              timeout = null;
-            }
-            return;
-          };
-
-          $link.click(function() {
-            if (menuScope) {
-              dismiss();
-              return;
-            }
-
-            dismiss();
-
-            var windowWidth = $(window).width();
-            var panelLeftPos = $(elem).offset().left;
-            var panelWidth = $(elem).width();
-            var menuLeftPos = (panelWidth / 2) - (menuWidth/2);
-            var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth;
-            if (stickingOut > 0) {
-              menuLeftPos -= stickingOut + 10;
-            }
-            if (panelLeftPos + menuLeftPos < 0) {
-              menuLeftPos = 0;
-            }
-
-            var $menu = $(menuTemplate);
-            $menu.css('left', menuLeftPos);
-
-            menuScope = $scope.$new();
-
-            elem.append($menu);
-            $scope.$apply(function() {
-              $compile($menu.contents())(menuScope);
-            });
-
-
-            $(".panel-container").removeClass('panel-highlight');
-            $panelContainer.toggleClass('panel-highlight');
-
-            //timeout = setTimeout(dismiss, 8000);
-          });
-
-          $compile(elem.contents())($scope);
-        }
-      };
-
-    });
-
   angular
     .module('grafana.directives')
     .directive('grafanaPanel', function($compile, $parse) {
@@ -138,7 +26,7 @@ function (angular, $, _) {
             '<i class="icon-spinner icon-spin icon-large"></i>' +
           '</span>' +
 
-          '<div panel-title ' + '></div>' +
+          '<div panel-menu></div>' +
         '</div>'+
       '</div>';
 

src/app/directives/panelMenu.js

@@ -0,0 +1,134 @@
+define([
+  'angular',
+  'jquery',
+  'lodash',
+],
+function (angular, $, _) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('panelMenu', function($compile) {
+      var linkTemplate = '<a class="pointer panel-title">{{panel.title || interpolateTemplateVars}}</a>';
+      var moveAttributes = ' data-drag=true data-jqyoui-options="kbnJqUiDraggableOptions"'+
+              ' jqyoui-draggable="{'+
+                'animate:false,'+
+                'mutate:false,'+
+                'index:{{$index}},'+
+                'onStart:\'panelMoveStart\','+
+                'onStop:\'panelMoveStop\''+
+                '}"  ng-model="panel" ';
+
+      function createMenuTemplate($scope) {
+        var template = '<div class="panel-menu small">';
+        template += '<div class="panel-menu-inner">';
+        template += '<div class="panel-menu-row">';
+        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="icon-minus"></i></a>';
+        template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(1)"><i class="icon-plus"></i></a>';
+        template += '<a class="panel-menu-icon pull-right" ng-click="remove_panel_from_row(row, panel)"><i class="icon-remove"></i></a>';
+        template += '<a class="panel-menu-icon pull-right" ' + moveAttributes + '><i class="icon-move"></i></a>';
+        template += '<div class="clearfix"></div>';
+        template += '</div>';
+
+        template += '<div class="panel-menu-row">';
+
+        _.each($scope.panelMeta.menu, function(item) {
+          template += '<a class="panel-menu-link" ';
+          if (item.click) { template += ' ng-click="' + item.click + '"'; }
+          if (item.editorLink) { template += ' dash-editor-link="' + item.editorLink + '"'; }
+          template += '>';
+          template += item.text + '</a>';
+        });
+
+        template += '<a class="panel-menu-link">share</a>';
+
+        template += '</div>';
+        template += '</div>';
+        template += '</div>';
+        return template;
+      }
+
+      return {
+        restrict: 'A',
+        link: function($scope, elem) {
+          var $link = $(linkTemplate);
+          var $panelContainer = elem.parents(".panel-container");
+          var menuTemplate = createMenuTemplate($scope);
+          var menuWidth = 246;
+          var menuScope = null;
+          var timeout = null;
+          var $menu = null;
+
+          elem.append($link);
+
+          function dismiss(time) {
+            clearTimeout(timeout);
+            timeout = null;
+
+            console.log('dismiss', time);
+
+            if (time) {
+              timeout = setTimeout(dismiss, time);
+              return;
+            }
+
+            // if hovering or draging pospone close
+            if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) {
+              dismiss(2500);
+              return;
+            }
+
+            if (menuScope) {
+              $menu.unbind();
+              $menu.remove();
+              menuScope.$destroy();
+              menuScope = null;
+              $menu = null;
+              $panelContainer.removeClass('panel-highlight');
+            }
+          }
+
+          var showMenu = function() {
+            if ($menu) {
+              dismiss();
+              return;
+            }
+
+            var windowWidth = $(window).width();
+            var panelLeftPos = $(elem).offset().left;
+            var panelWidth = $(elem).width();
+            var menuLeftPos = (panelWidth / 2) - (menuWidth/2);
+            var stickingOut = panelLeftPos + menuLeftPos + menuWidth - windowWidth;
+            if (stickingOut > 0) {
+              menuLeftPos -= stickingOut + 10;
+            }
+            if (panelLeftPos + menuLeftPos < 0) {
+              menuLeftPos = 0;
+            }
+
+            $menu = $(menuTemplate);
+            $menu.css('left', menuLeftPos);
+            $menu.mouseleave(function() {
+              dismiss(1000);
+            });
+
+            menuScope = $scope.$new();
+
+            $('.panel-menu').remove();
+            elem.append($menu);
+            $scope.$apply(function() {
+              $compile($menu.contents())(menuScope);
+            });
+
+            $(".panel-container").removeClass('panel-highlight');
+            $panelContainer.toggleClass('panel-highlight');
+
+            dismiss(2000);
+          };
+
+          $link.click(showMenu);
+          $compile(elem.contents())($scope);
+        }
+      };
+    });
+});

src/app/services/panelSrv.js

@@ -52,10 +52,8 @@ function (angular, _) {
         //   condition: true
         // },
         {
-          text: 'advanced',
+          text: 'json',
-          submenu: [
+          click: 'editPanelJson()',
-            { text: 'Panel JSON', click: 'editPanelJson()' },
-          ],
           condition: true
         },
         // {

src/css/less/panel.less

@@ -59,13 +59,13 @@
 
 .panel-menu {
   z-index: 10000;
-  width: 277px;
   position: absolute;
   background: @grafanaTargetFuncBackground;
   border: 1px solid black;
   top: -62px;
 
   .panel-menu-row {
+    white-space: nowrap;
     border-bottom: 1px solid black;
     &:last-child {
       border-bottom: none;
@@ -77,6 +77,7 @@
   }
 
   .panel-menu-link {
+    display: inline-block;
     border-right: 1px solid black;
     &:last-child {
       border: none;