ux: tweaks to new panel menu

public/app/features/panel/panel_ctrl.ts

@@ -145,7 +145,7 @@ export class PanelCtrl {
     menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"});
 
     let extendedMenu = this.getExtendedMenu();
-    menu.push({text: 'Actions', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
+    menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu});
 
     if (!this.fullscreen) {
       menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" });

public/app/features/panel/panel_header.ts

@@ -103,11 +103,6 @@ function panelHeader($compile) {
           evt.stopPropagation();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }
-
-        // var toggleAttribute = evt.getAttribute('data-toggle');
-        // if (!toggleAttribute) {
-        //   elem.find('[data-toggle=dropdown]').click();
-        // }
       });
     }
   };

public/app/features/panel/panel_menu.js

-define([
-  'angular',
-  'jquery',
-  'lodash',
-  'tether',
-],
-function (angular, $, _, Tether) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('panelMenu', function($compile) {
-      var linkTemplate =
-          '<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>' +
-          '</span>';
-
-      function createMenuTemplate(ctrl) {
-        var template = '<div class="panel-menu small">';
-
-        if (ctrl.dashboard.meta.canEdit) {
-          template += '<div class="panel-menu-inner">';
-          template += '<div class="panel-menu-row">';
-          if (!ctrl.dashboard.meta.fullscreen) {
-            template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
-            template += '<a class="panel-menu-icon pull-left" ng-click="ctrl.updateColumnSpan(1)"><i class="fa fa-plus"></i></a>';
-          }
-          template += '<a class="panel-menu-icon pull-right" ng-click="ctrl.removePanel()"><i class="fa fa-trash"></i></a>';
-          template += '<div class="clearfix"></div>';
-          template += '</div>';
-        }
-
-        template += '<div class="panel-menu-row">';
-        template += '<a class="panel-menu-link" gf-dropdown="extendedMenu"><i class="fa fa-bars"></i></a>';
-
-        _.each(ctrl.getMenu(), function(item) {
-          // skip edit actions if not editor
-          if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
-            return;
-          }
-
-          template += '<a class="panel-menu-link" ';
-          if (item.click) { template += ' ng-click="' + item.click + '"'; }
-          if (item.href) { template += ' href="' + item.href + '"'; }
-          template += '>';
-          template += item.text + '</a>';
-        });
-
-        template += '</div>';
-        template += '</div>';
-        template += '</div>';
-        return template;
-      }
-
-      function getExtendedMenu(ctrl) {
-        return ctrl.getExtendedMenu();
-      }
-
-      return {
-        restrict: 'A',
-        link: function($scope, elem) {
-          var $link = $(linkTemplate);
-          var $panelContainer = elem.parents(".panel-container");
-          var menuScope = null;
-          var ctrl = $scope.ctrl;
-          var timeout = null;
-          var $menu = null;
-          var teather;
-
-          elem.append($link);
-
-          function dismiss(time, force) {
-            clearTimeout(timeout);
-            timeout = null;
-
-            if (time) {
-              timeout = setTimeout(dismiss, time);
-              return;
-            }
-
-            // if hovering or draging pospone close
-            if (force !== true) {
-              if ($menu.is(':hover') || $scope.ctrl.dashboard.$$panelDragging) {
-                dismiss(2200);
-                return;
-              }
-            }
-
-            if (menuScope) {
-              teather.destroy();
-              $menu.unbind();
-              $menu.remove();
-              menuScope.$destroy();
-              menuScope = null;
-              $menu = null;
-              $panelContainer.removeClass('panel-highlight');
-            }
-          }
-
-          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;
-            }
-
-            if ($menu) {
-              dismiss();
-              return;
-            }
-
-            var menuTemplate;
-            menuTemplate = createMenuTemplate(ctrl);
-
-            $menu = $(menuTemplate);
-            $menu.mouseleave(function() {
-              dismiss(1000);
-            });
-
-            menuScope = $scope.$new();
-            menuScope.extendedMenu = getExtendedMenu(ctrl);
-            menuScope.dismiss = function() {
-              dismiss(null, true);
-            };
-
-            $(".panel-container").removeClass('panel-highlight');
-            $panelContainer.toggleClass('panel-highlight');
-
-            $('.panel-menu').remove();
-
-            elem.append($menu);
-
-            $scope.$apply(function() {
-              $compile($menu.contents())(menuScope);
-
-              teather = new Tether({
-                element: $menu,
-                target: $panelContainer,
-                attachment: 'bottom center',
-                targetAttachment: 'top center',
-                constraints: [
-                  {
-                    to: 'window',
-                    attachment: 'together',
-                    pin: true
-                  }
-                ]
-              });
-            });
-
-            dismiss(2200);
-          };
-
-          elem.click(showMenu);
-          $compile(elem.contents())($scope);
-        }
-      };
-    });
-});

public/sass/pages/_dashboard.scss

@@ -41,7 +41,6 @@ div.flot-text {
 .panel-container {
   background-color: $panel-bg;
   position: relative;
-  border: $panel-border;
 
   &.panel-transparent {
     background-color: transparent;
@@ -55,7 +54,6 @@ div.flot-text {
 
 .panel-title-container {
   min-height: 9px;
-  padding: 2px 0;
   cursor: move;
   word-wrap: break-word;
   display: block;
@@ -67,6 +65,15 @@ div.flot-text {
   position: relative;
   width: 100%;
   display: block;
+  padding-bottom: 2px;
+}
+
+.panel-title-text {
+  cursor: pointer;
+
+  &:hover {
+    color: $link-hover-color;
+  }
 }
 
 .panel-menu-container {
@@ -77,6 +84,17 @@ div.flot-text {
   color: $text-color-weak;
   cursor: pointer;
   padding: 3px 5px;
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 0;
+
+  &:hover {
+    color: $link-hover-color;
+  }
 }
 
 .panel-loading {
@@ -84,19 +102,16 @@ div.flot-text {
   top: -3px;
   right: 0px;
   z-index: 800;
+  font-size: $font-size-sm;
+  color: $text-color-weak;
 }
 
 .panel-header {
   text-align: center;
 
   &:hover {
-    background: $panel-header-hover-bg;
-
-    .panel-menu-toggle {
-      color: $text-color;
-      background: $panel-header-menu-hover-bg;
-    }
-
+    transition: background-color 0.1s ease-in-out;
+    background-color: $panel-header-hover-bg;
   }
 }
 
@@ -178,9 +193,19 @@ div.flot-text {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8)
 }
 
-// .panel-hover-highlight  {
-//   box-shadow: inset 0 1px 1px rgba(0,0,0,0.025), 0 0 1px rgba(82,168,236,0.5)
-// }
+.panel-hover-highlight  {
+  .panel-menu-toggle {
+    visibility: visible;
+    transition: opacity 0.1s ease-in 0.2s;
+    opacity: 1;
+  }
+
+  .resize-panel-handle {
+    visibility: visible;
+    transition: opacity 0.1s ease-in 0.2s;
+    opacity: 1;
+  }
+}
 
 .on-drag-hover {
   .panel-container {
@@ -190,6 +215,7 @@ div.flot-text {
 
 .panel-drop-zone {
   display: none;
+
   .panel-container {
     border: $panel-border;
     display: flex;
@@ -227,7 +253,8 @@ div.flot-text {
   right: 0;
   width: 15px;
   height: 15px;
-  display: block;
+  visibility: hidden;
+  opacity: 0;
   color: $text-color-faint;
 
   &:before {