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/app/plugins/panel/graph/axisEditor.html

@@ -1,157 +1,106 @@
+<div class="editor-row gf-form-group">
+	<div class="section">
+		<h5 class="section-heading">Left Y</h5>
 
-<div class="editor-row">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Left Y
-				</li>
-				<li class="tight-form-item" style="width: 40px">
-					Unit
-				</li>
-				<li class="dropdown" style="width: 140px;"
-					ng-model="ctrl.panel.y_formats[0]"
-					dropdown-typeahead="ctrl.unitFormats"
-					dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)">
-				</li>
-				<li class="tight-form-item">
-					Scale type
-				</li>
-				<li>
-					<select class="input-small tight-form-input" style="width: 113px" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Label
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input last"
-					ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Unit</label>
+			<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)"></div>
 		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<i class="fa fa-remove invisible"></i>
-				</li>
-				<li class="tight-form-item">
-					Y-Max
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input" placeholder="auto"
-					empty-to-null ng-model="ctrl.panel.grid.leftMax"
-					ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				<li class="tight-form-item" style="width: 115px; text-align: right;">
-					Y-Min
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input" placeholder="auto" style="width: 113px;"
-					empty-to-null ng-model="ctrl.panel.grid.leftMin"
-					ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				</ul>
-			<div class="clearfix"></div>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Scale</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+			</div>
 		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Right Y
-				</li>
-				<li class="tight-form-item" style="width: 40px">
-					Unit
-				</li>
-				<li class="dropdown" style="width: 140px"
-					ng-model="ctrl.panel.y_formats[1]"
-					dropdown-typeahead="ctrl.unitFormats"
-					dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)">
-				</li>
-				<li class="tight-form-item">
-					Scale type
-				</li>
-				<li>
-					<select class="input-small tight-form-input" style="width: 113px" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
-				</li>
-				<li class="tight-form-item">
-					Label
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input last"
-					ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="gf-form-inline">
+			<div class="gf-form max-width-10">
+				<label class="gf-form-label width-5">Y-Min</label>
+				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMin" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+			<div class="gf-form max-width-10">
+				<label class="gf-form-label width-5">Y-Max</label>
+				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
 		</div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					<i class="fa fa-remove invisible"></i>
-				</li>
-				<li class="tight-form-item">
-					Y-Max
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input" placeholder="auto"
-					empty-to-null ng-model="ctrl.panel.grid.rightMax"
-					ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				<li class="tight-form-item" style="width: 115px; text-align: right;">
-					Y-Min
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input" placeholder="auto" style="width: 113px;"
-					empty-to-null ng-model="ctrl.panel.grid.rightMin"
-					ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Label</label>
+			<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
 		</div>
-
 	</div>
 
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Show Axis
-				</li>
-				<li class="tight-form-item">
-					X-Axis&nbsp;
-					<input class="cr1" id="hideXAxis" type="checkbox"
-					ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
-					<label for="hideXAxis" class="cr1"></label>
-				</li>
-				<li class="tight-form-item last">
-					Y-Axis&nbsp;
-					<input class="cr1" id="hideYAxis" type="checkbox"
-					ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
-					<label for="hideYAxis" class="cr1"></label>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+	<div class="section">
+		<h5 class="section-heading">Right Y</h5>
+		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Unit</label>
+			<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)"></div>
 		</div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Thresholds
-				</li>
-				<li class="tight-form-item">
-					Level 1
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input"
-					ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				<li class="tight-form-item">
-					<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
-				</li>
-				<li class="tight-form-item">
-					Level 2
-				</li>
-				<li>
-					<input type="number" class="input-small tight-form-input"
-					ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Scale</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+			</div>
+		</div>
+		<div class="gf-form-inline">
+			<div class="gf-form max-width-10">
+				<label class="gf-form-label width-5">Y-Min</label>
+				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMin" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+			<div class="gf-form max-width-10">
+				<label class="gf-form-label width-5">Y-Max</label>
+				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMax" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+		</div>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Label</label>
+			<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
+		</div>
+	</div>
+</div>
+
+<div class="section" style="margin-bottom: 20px">
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item" style="width: 80px">
+				Show Axis
+			</li>
+			<li class="tight-form-item">
+				X-Axis&nbsp;
+				<input class="cr1" id="hideXAxis" type="checkbox"
+																			ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
+				<label for="hideXAxis" class="cr1"></label>
+			</li>
+			<li class="tight-form-item last">
+				Y-Axis&nbsp;
+				<input class="cr1" id="hideYAxis" type="checkbox"
+																			ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
+				<label for="hideYAxis" class="cr1"></label>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+	<div class="tight-form last">
+		<ul class="tight-form-list">
+			<li class="tight-form-item" style="width: 80px">
+				Thresholds
+			</li>
+			<li class="tight-form-item">
+				Level 1
+			</li>
+			<li>
+				<input type="number" class="input-small tight-form-input"
+												 ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
+			</li>
+			<li class="tight-form-item">
+				<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
+			</li>
+			<li class="tight-form-item">
+				Level 2
+			</li>
+			<li>
+				<input type="number" class="input-small tight-form-input"
+													ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
 				</li>
 				<li class="tight-form-item">
 					<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
@@ -186,7 +135,7 @@
 				</li>
 				<li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
 					<input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
-					ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
+																																																																								ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -231,7 +180,7 @@
 				</li>
 				<li style="width: 105px">
 					<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
-					ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
+																																																																															ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
 				</li>
 			</ul>
 			<div class="clearfix"></div>

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;
+  }
+}