ux(): redesign of axis & grid forms

public/app/core/directives/dropdown_typeahead.js

@@ -119,4 +119,118 @@ function (_, $, coreModule) {
       }
     };
   });
+
+  coreModule.default.directive('dropdownTypeahead2', function($compile) {
+
+    var inputTemplate = '<input type="text"'+
+      ' class="gf-form-input"' +
+      ' spellcheck="false" style="display:none"></input>';
+
+    var buttonTemplate = '<a class="gf-form-input dropdown-toggle"' +
+      ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
+      ' data-placement="top"><i class="fa fa-plus"></i></a>';
+
+    return {
+      scope: {
+        menuItems: "=dropdownTypeahead2",
+        dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect",
+        model: '=ngModel'
+      },
+      link: function($scope, elem, attrs) {
+        var $input = $(inputTemplate);
+        var $button = $(buttonTemplate);
+        $input.appendTo(elem);
+        $button.appendTo(elem);
+
+        if (attrs.linkText) {
+          $button.html(attrs.linkText);
+        }
+
+        if (attrs.ngModel) {
+          $scope.$watch('model', function(newValue) {
+            _.each($scope.menuItems, function(item) {
+              _.each(item.submenu, function(subItem) {
+                if (subItem.value === newValue) {
+                  $button.html(subItem.text);
+                }
+              });
+            });
+          });
+        }
+
+        var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) {
+          if (!value.submenu) {
+            value.click = 'menuItemSelected(' + index + ')';
+            memo.push(value.text);
+          } else {
+            _.each(value.submenu, function(item, subIndex) {
+              item.click = 'menuItemSelected(' + index + ',' + subIndex + ')';
+              memo.push(value.text + ' ' + item.text);
+            });
+          }
+          return memo;
+        }, []);
+
+        $scope.menuItemSelected = function(index, subIndex) {
+          var menuItem = $scope.menuItems[index];
+          var payload = {$item: menuItem};
+          if (menuItem.submenu && subIndex !== void 0) {
+            payload.$subItem = menuItem.submenu[subIndex];
+          }
+          $scope.dropdownTypeaheadOnSelect(payload);
+        };
+
+        $input.attr('data-provide', 'typeahead');
+        $input.typeahead({
+          source: typeaheadValues,
+          minLength: 1,
+          items: 10,
+          updater: function (value) {
+            var result = {};
+            _.each($scope.menuItems, function(menuItem) {
+              _.each(menuItem.submenu, function(submenuItem) {
+                if (value === (menuItem.text + ' ' + submenuItem.text)) {
+                  result.$subItem = submenuItem;
+                  result.$item = menuItem;
+                }
+              });
+            });
+
+            if (result.$item) {
+              $scope.$apply(function() {
+                $scope.dropdownTypeaheadOnSelect(result);
+              });
+            }
+
+            $input.trigger('blur');
+            return '';
+          }
+        });
+
+        $button.click(function() {
+          $button.hide();
+          $input.show();
+          $input.focus();
+        });
+
+        $input.keyup(function() {
+          elem.toggleClass('open', $input.val() === '');
+        });
+
+        $input.blur(function() {
+          $input.hide();
+          $input.val('');
+          $button.show();
+          $button.focus();
+          // clicking the function dropdown menu wont
+          // work if you remove class at once
+          setTimeout(function() {
+            elem.removeClass('open');
+          }, 200);
+        });
+
+        $compile(elem.contents())($scope);
+      }
+    };
+  });
 });

public/sass/components/_gf-form.scss

@@ -112,7 +112,6 @@ $gf-form-margin: 0.25rem;
   margin-right: $gf-form-margin;
   position: relative;
   background-color: $input-bg;
-  margin-right: $gf-form-margin;
 
   select.gf-form-input {
     text-indent: .01px;
@@ -166,3 +165,20 @@ $gf-form-margin: 0.25rem;
   }
 }
 
+.gf-form-dropdown-typeahead {
+  margin-right: $gf-form-margin;
+  position: relative;
+  background-color: $input-bg;
+  padding-right: $input-padding-x;
+
+  &:after {
+    position: absolute;
+    top: 35%;
+    right: $input-padding-x/2;
+    background-color: transparent;
+    color: $input-color;
+    font: normal normal normal $font-size-sm/1 FontAwesome;
+    content: '\f0d7';
+    pointer-events: none;
+  }
+}