experimenting with new func editor

src/app/directives/ngBlur.js

@@ -17,4 +17,21 @@ function (angular) {
       };
     }]);
 
+  angular
+    .module('kibana.directives')
+    .directive('dynamicWidth', function() {
+      return {
+        restrict: 'A',
+        link: function postLink(scope, elem, attrs) {
+          var startVal = scope.$eval(attrs.ngModel);
+          elem[0].style.width = ((startVal.length) * 11) + 'px';
+
+          elem.keyup(function() {
+            elem[0].style.width = ((elem.val().length * 11)) + 'px';
+          });
+        }
+      };
+    });
+
+
 });

src/app/partials/graphite/editor.html

@@ -76,9 +76,19 @@
             </ul>
           </li>
           <li ng-repeat="func in functions">
-            <a class="grafana-target-segment grafana-target-function dropdown-toggle" bs-popover="'app/partials/graphite/funcEditor.html'" data-placement="bottom">
-              {{func.text}}
-            </a>
+            <!-- <a  class="grafana-target-segment grafana-target-function dropdown-toggle"
+                bs-popover="'app/partials/graphite/funcEditor.html'"
+                data-placement="bottom">
+              {{func.def.name}}
+            </a> -->
+            <span class="grafana-target-segment grafana-target-function">
+              <span>{{func.def.name}}(</span><span ng-repeat="param in func.def.params">
+                <input  type="text"
+                        class="input-mini grafana-function-param-input"
+                        dynamic-width
+                        ng-model="func.params[$index]"></input>
+              </span><span>)</span>
+            </span>
           </li>
           <li class="dropdown" graphite-add-func>
 

src/css/less/grafana.less

@@ -281,6 +281,13 @@
   }
 }
 
+input[type=text].grafana-function-param-input {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 .grafana-target-controls-left {
   list-style: none;
   float: left;