From 32c8f495ab9741af847192743692c92802a04d4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 29 Mar 2016 12:32:40 +0200 Subject: [PATCH] ux(): redesign of axis & grid forms --- .../app/core/directives/dropdown_typeahead.js | 114 ++++++++ .../app/plugins/panel/graph/axisEditor.html | 245 +++++++----------- public/sass/components/_gf-form.scss | 18 +- 3 files changed, 228 insertions(+), 149 deletions(-) diff --git a/public/app/core/directives/dropdown_typeahead.js b/public/app/core/directives/dropdown_typeahead.js index ae825c31fca..2dc5111874e 100644 --- a/public/app/core/directives/dropdown_typeahead.js +++ b/public/app/core/directives/dropdown_typeahead.js @@ -119,4 +119,118 @@ function (_, $, coreModule) { } }; }); + + coreModule.default.directive('dropdownTypeahead2', function($compile) { + + var inputTemplate = ''; + + var buttonTemplate = ''; + + 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); + } + }; + }); }); diff --git a/public/app/plugins/panel/graph/axisEditor.html b/public/app/plugins/panel/graph/axisEditor.html index d9b7b4599e0..a0ab07e288e 100644 --- a/public/app/plugins/panel/graph/axisEditor.html +++ b/public/app/plugins/panel/graph/axisEditor.html @@ -1,157 +1,106 @@ +
+
+
Left Y
-
-
-
-
    -
  • - Left Y -
    • -
  • - Unit -
    • -
  • -
    • -
  • - Scale type -
    • -
  • - -
    • -
  • - Label -
    • -
  • - -
    • -
-
+ +
+ +
-
-
    -
  • - -
    • -
  • - Y-Max -
    • -
  • - -
    • -
  • - Y-Min -
    • -
  • - -
    • -
-
+
+ +
+ +
-
-
    -
  • - Right Y -
    • -
  • - Unit -
    • -
  • -
    • -
  • - Scale type -
    • -
  • - -
    • -
  • - Label -
    • -
  • - -
    • -
-
+
+
+ + +
+
+ + +
-
-
    -
  • - -
    • -
  • - Y-Max -
    • -
  • - -
    • -
  • - Y-Min -
    • -
  • - -
    • -
-
+
+ +
-
-
-
-
    -
  • - Show Axis -
    • -
  • - X-Axis  - - -
    • -
  • - Y-Axis  - - -
    • -
-
+
+
Right Y
+ +
+ +
-
-
    -
  • - Thresholds -
    • -
  • - Level 1 -
    • -
  • - -
    • -
  • - -
    • -
  • - Level 2 -
    • -
  • - +
    + +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
+
+ +
+
+
    +
  • + Show Axis +
    • +
  • + X-Axis  + + +
    • +
  • + Y-Axis  + + +
    • +
+
+
+
+
    +
  • + Thresholds +
    • +
  • + Level 1 +
    • +
  • + +
    • +
  • + +
    • +
  • + Level 2 +
    • +
  • +
  • @@ -186,7 +135,7 @@
  • + ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
@@ -231,7 +180,7 @@
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 083ef594f6d..12e1fd2f32f 100644 --- a/public/sass/components/_gf-form.scss +++ b/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; + } +}