More wort on panel edit menu

src/app/directives/grafanaPanel.js

@@ -3,55 +3,113 @@ define([
   'jquery',
   'lodash',
 ],
-function (angular, $) {
+function (angular, $, _) {
   'use strict';
 
   angular
     .module('grafana.directives')
     .directive('panelTitle', function($compile) {
-      var linkTemplate = '<a class="pointer panel-title">{{panel.title || interpolateTemplateVars}}</div>';
-      var menuTemplate = '<div class="panel-menu">' +
-                            '<a class="pointer"><i class="icon-th-list"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-eye-open"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-cog"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-resize-horizontal"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-move"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-copy"></i></a>  ' +
-                            '<a class="pointer"><i class="icon-share"></i></a>' +
-                            '<a class="pointer"><i class="icon-remove"></i></a>  ' +
-                          '</div>';
+      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);
 
-          $link.click(function(e) {
-            var menuWidth = 452;
-            var windowWidth = $(window).width();
-            var maxPos = windowWidth - menuWidth - 20;
-            var leftPos = e.screenX - (menuWidth / 2);
-            leftPos = Math.min(leftPos, maxPos);
+          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() {
-              $scope.togglePanelMenu(leftPos);
+              $compile($menu.contents())(menuScope);
             });
-            elem.parents(".panel-container").toggleClass('panel-highlight');
-            console.log(e);
-//             var $menu = $(menuTemplate);
-//             var menuScope = $scope.$new();
-//
-//             elem.append($menu);
-//             $compile($menu.contents())(menuScope);
-
-            // setTimeout(function() {
-            //   $menu.remove();
-            //   menuScope.$destroy();
-            //   $link.show();
-            // }, 8000);
-
-            //$link.hide();
+
+
+            $(".panel-container").removeClass('panel-highlight');
+            $panelContainer.toggleClass('panel-highlight');
+
+            //timeout = setTimeout(dismiss, 8000);
           });
 
           $compile(elem.contents())($scope);
@@ -80,7 +138,7 @@ function (angular, $) {
             '<i class="icon-spinner icon-spin icon-large"></i>' +
           '</span>' +
 
-          '<div panel-title></div>' +
+          '<div panel-title ' + '></div>' +
         '</div>'+
       '</div>';
 

src/app/partials/dashboard.html

@@ -74,18 +74,17 @@
 					</div>
 				</div>
 
-				<div class="panel-menu small" ng-show="showPanelMenu" ng-style="{'margin-left': panelMenuPos}">
-					<a class="pointer"><i class="icon-eye-open"></i> <span>view</span></a>
-					<a class="pointer"><i class="icon-cog"></i> <span>edit</span></a>
-					<a class="pointer"><i class="icon-resize-horizontal"></i> <span>span</span></a>
-					<a class="pointer"><i class="icon-copy"></i> <span>duplicate</span></a>
-					<a class="pointer"><i class="icon-share"></i> <span>share</span></a>
-					<a class="pointer"><i class="icon-remove"></i> <span>remove</span></a>
-				</div>
-
-				<div style="padding-top:0px" ng-if="!row.collapse">
+				<div class="panels-wrapper" ng-if="!row.collapse">
 					<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
 					</div>
+					<div class="panel-menu-container" data-menu-container>
+							<!-- <a class="pointer"><i class="icon&#45;eye&#45;open"></i> <span>view</span></a> -->
+							<!-- <a class="pointer"><i class="icon&#45;cog"></i> <span>edit</span></a> -->
+							<!-- <a class="pointer"><i class="icon&#45;resize&#45;horizontal"></i> <span>span</span></a> -->
+							<!-- <a class="pointer"><i class="icon&#45;copy"></i> <span>duplicate</span></a> -->
+							<!-- <a class="pointer"><i class="icon&#45;share"></i> <span>share</span></a> -->
+							<!-- <a class="pointer"><i class="icon&#45;remove"></i> <span>remove</span></a> -->
+					</div>
 
 					<!-- Panels -->
 					<div ng-repeat="(name, panel) in row.panels"

src/app/services/panelSrv.js

@@ -14,55 +14,55 @@ function (angular, _) {
 
       var menu = [
         {
-          text: 'Edit',
-          configModal: "app/partials/paneleditor.html",
+          text: "view",
+          click: 'toggleFullscreen(false)',
+          condition: $scope.panelMeta.fullscreenView
+        },
+        {
+          text: 'edit',
+          editorLink: "app/partials/paneleditor.html",
           condition: !$scope.panelMeta.fullscreenEdit
         },
         {
-          text: 'Edit',
+          text: 'edit',
           click: "toggleFullscreen(true)",
           condition: $scope.panelMeta.fullscreenEdit
         },
         {
-          text: "Fullscreen",
-          click: 'toggleFullscreen(false)',
-          condition: $scope.panelMeta.fullscreenView
-        },
-        {
-          text: 'Duplicate',
+          text: 'duplicate',
           click: 'duplicatePanel(panel)',
           condition: true
         },
+        // {
+        //   text: 'span',
+        //   submenu: [
+        //     { text: '1', click: 'updateColumnSpan(1)' },
+        //     { text: '2', click: 'updateColumnSpan(2)' },
+        //     { text: '3', click: 'updateColumnSpan(3)' },
+        //     { text: '4', click: 'updateColumnSpan(4)' },
+        //     { text: '5', click: 'updateColumnSpan(5)' },
+        //     { text: '6', click: 'updateColumnSpan(6)' },
+        //     { text: '7', click: 'updateColumnSpan(7)' },
+        //     { text: '8', click: 'updateColumnSpan(8)' },
+        //     { text: '9', click: 'updateColumnSpan(9)' },
+        //     { text: '10', click: 'updateColumnSpan(10)' },
+        //     { text: '11', click: 'updateColumnSpan(11)' },
+        //     { text: '12', click: 'updateColumnSpan(12)' },
+        //   ],
+        //   condition: true
+        // },
         {
-          text: 'Span',
-          submenu: [
-            { text: '1', click: 'updateColumnSpan(1)' },
-            { text: '2', click: 'updateColumnSpan(2)' },
-            { text: '3', click: 'updateColumnSpan(3)' },
-            { text: '4', click: 'updateColumnSpan(4)' },
-            { text: '5', click: 'updateColumnSpan(5)' },
-            { text: '6', click: 'updateColumnSpan(6)' },
-            { text: '7', click: 'updateColumnSpan(7)' },
-            { text: '8', click: 'updateColumnSpan(8)' },
-            { text: '9', click: 'updateColumnSpan(9)' },
-            { text: '10', click: 'updateColumnSpan(10)' },
-            { text: '11', click: 'updateColumnSpan(11)' },
-            { text: '12', click: 'updateColumnSpan(12)' },
-          ],
-          condition: true
-        },
-        {
-          text: 'Advanced',
+          text: 'advanced',
           submenu: [
             { text: 'Panel JSON', click: 'editPanelJson()' },
           ],
           condition: true
         },
-        {
-          text: 'Remove',
-          click: 'remove_panel_from_row(row, panel)',
-          condition: true
-        }
+        // {
+        //   text: 'remove',
+        //   click: 'remove_panel_from_row(row, panel)',
+        //   condition: true
+        // }
       ];
 
       $scope.inspector = {};
@@ -73,7 +73,7 @@ function (angular, _) {
       };
 
       $scope.updateColumnSpan = function(span) {
-        $scope.panel.span = span;
+        $scope.panel.span = Math.min(Math.max($scope.panel.span + span, 1), 12);
 
         $timeout(function() {
           $scope.$emit('render');

src/css/less/panel.less

@@ -19,6 +19,7 @@
   border: 0px;
   font-weight: bold;
   position: relative;
+  font-size: 0.9em;
 }
 
 .panel-loading {
@@ -57,22 +58,32 @@
 }
 
 .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;
+  z-index: 10000;
+  width: 277px;
+  position: absolute;
+  background: @grafanaTargetFuncBackground;
+  border: 1px solid black;
+  top: -62px;
+
+  .panel-menu-row {
     border-bottom: 1px solid black;
-    background: @grayDark;
+    &:last-child {
+      border-bottom: none;
+    }
   }
-  a:first-child {
-    border-left: 1px solid black;
+
+  .panel-menu-link, .panel-menu-icon {
+    padding: 5px 10px;
+  }
+
+  .panel-menu-link {
+    border-right: 1px solid black;
+    &:last-child {
+      border: none;
+    }
   }
 }
 
 .panel-highlight  {
-  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236, 0.9)");
+  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)");
 }