move func left right, remove, and link to graphite docs works

src/app/directives/graphiteFuncEditor.js

@@ -15,12 +15,12 @@ function (angular, _, $) {
                           ' class="input-mini grafana-function-param-input"></input>';
 
       var funcControlsTemplate =
-         '<span class="graphite-func-controls">' +
+         '<div class="graphite-func-controls">' +
            '<span class="pointer icon-arrow-left"></span>' +
            '<span class="pointer icon-info-sign"></span>' +
            '<span class="pointer icon-remove" ></span>' +
            '<span class="pointer icon-arrow-right"></span>' +
-         '</span>';
+         '</div>';
 
       return {
         restrict: 'A',
@@ -111,19 +111,6 @@ function (angular, _, $) {
             };
           }
 
-          function getPosition() {
-            var el = elem[0];
-            var pos = {};
-            if (typeof el.getBoundingClientRect === 'function') {
-              pos = el.getBoundingClientRect();
-            }
-            else {
-              pos = { width: el.offsetWidth, height: el.offsetHeight };
-            }
-
-            return $.extend(pos, elem.offset());
-          }
-
           function toggleFuncControls() {
             var targetDiv = elem.closest('.grafana-target-inner');
 
@@ -137,18 +124,11 @@ function (angular, _, $) {
             elem.addClass('show-function-controls');
             targetDiv.addClass('has-open-function');
 
-            setTimeout(function() {
+            $funcControls.show();
-              var pos = getPosition();
-              $funcControls.css('position', 'absolute');
-              $funcControls.css('top', (pos.top - 78) + 'px');
-              $funcControls.css('left', pos.left + 'px');
-              $funcControls.css('width', pos.width + 'px');
-              console.log(pos);
-              $funcControls.show();
-            }, 10);
           }
 
           function addElementsAndCompile() {
+            $funcControls.appendTo(elem);
             $funcLink.appendTo(elem);
 
             _.each(funcDef.params, function(param, index) {
@@ -175,8 +155,6 @@ function (angular, _, $) {
 
             $('<span>)</span>').appendTo(elem);
 
-            elem.append($funcControls);
-
             $compile(elem.contents())($scope);
           }
 
@@ -201,6 +179,26 @@ function (angular, _, $) {
                 $scope.$apply(function() {
                   $scope.removeFunction($scope.func);
                 });
+                return;
+              }
+
+              if ($target.hasClass('icon-arrow-left')) {
+                $scope.$apply(function() {
+                  _.move($scope.functions, $scope.$index, $scope.$index - 1);
+                });
+                return;
+              }
+
+              if ($target.hasClass('icon-arrow-right')) {
+                $scope.$apply(function() {
+                  _.move($scope.functions, $scope.$index, $scope.$index + 1);
+                });
+                return;
+              }
+
+              if ($target.hasClass('icon-info-sign')) {
+                window.open("http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions." + funcDef.name,'_blank');
+                return;
               }
             });
           }

src/css/less/grafana.less

@@ -227,10 +227,6 @@
   border-right: 1px solid @grafanaTargetBorder;
   background: @grafanaTargetBackground;
   width: 100%;
-
-  &.has-open-function {
-    margin-top: 35px;
-  }
 }
 
 .grafana-target-onoff {
@@ -262,6 +258,10 @@
   color: @grafanaTargetColor;
   display: inline-block;
 
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
   .grafana-target-hidden & {
     color: @grafanaTargetColorHide;
   }
@@ -284,6 +284,7 @@
   }
 
   &.show-function-controls {
+    padding-top: 5px;
     min-width: 100px;
     text-align: center;
   }