another attempt at improving panel edit menu

'

+.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/controllers/row.js

@@ -22,6 +22,11 @@ function (angular, app, _) {
       $scope.reset_panel();
       $scope.reset_panel();
     };
     };
 
 
+    $scope.togglePanelMenu = function(posX) {
+      $scope.showPanelMenu = !$scope.showPanelMenu;
+      $scope.panelMenuPos = posX;
+    };
+
     $scope.toggle_row = function(row) {
     $scope.toggle_row = function(row) {
       row.collapse = row.collapse ? false : true;
       row.collapse = row.collapse ? false : true;
       if (!row.collapse) {
       if (!row.collapse) {

src/app/directives/grafanaPanel.js

@@ -27,20 +27,31 @@ function (angular, $) {
           var $link = $(linkTemplate);
           var $link = $(linkTemplate);
           elem.append($link);
           elem.append($link);
 
 
-          $link.click(function() {
-            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();
+          $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);
+
+            $scope.$apply(function() {
+              $scope.togglePanelMenu(leftPos);
+            });
+            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();
           });
           });
 
 
           $compile(elem.contents())($scope);
           $compile(elem.contents())($scope);

src/app/partials/dashboard.html

@@ -74,6 +74,15 @@
 					</div>
 					</div>
 				</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 style="padding-top:0px" ng-if="!row.collapse">
 					<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
 					<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
 					</div>
 					</div>

src/css/less/panel.less

@@ -62,7 +62,7 @@
   a {
   a {
     font-size: 1.2em;
     font-size: 1.2em;
     float: left;
     float: left;
-    padding: 2px 10px;
+    padding: 7px 10px;
     border-top: 1px solid black;
     border-top: 1px solid black;
     border-right: 1px solid black;
     border-right: 1px solid black;
     border-bottom: 1px solid black;
     border-bottom: 1px solid black;
@@ -72,3 +72,7 @@
     border-left: 1px solid black;
     border-left: 1px solid black;
   }
   }
 }
 }
+
+.panel-highlight  {
+  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236, 0.9)");
+}