Browse Source

HUE-5923 [assist] Show a spinner when search autocomplete is loading

Johan Ahlen 8 years ago
parent
commit
628a9267b7

BIN
desktop/core/src/desktop/static/desktop/art/spinner-input.gif


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 30 - 12
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -86,6 +86,17 @@
 
       var delay = 400;
 
+      var showSpinner = function () {
+        if (options.showSpinner) {
+          $element.addClass('input-spinner');
+        }
+      };
+
+      var hideSpinner = function () {
+        $element.removeClass('input-spinner');
+      };
+
+      var spinThrottle = -1;
       options = $.extend({
         addCount: false,
         closeOnEnter: true,
@@ -96,7 +107,19 @@
         limitWidthToInput: false,
         minWidth: 200,
         disabled: true,
-        delay: delay
+        delay: delay,
+        search: function(event, ui) {
+          window.clearTimeout(spinThrottle);
+          if (!$element.hueAutocomplete("option", "disabled")) {
+            spinThrottle = window.setTimeout(showSpinner, 50);
+          }
+        },
+        open: function(event, ui) {
+          hideSpinner();
+        },
+        close: function(event, ui) {
+          hideSpinner();
+        }
       }, options);
 
       if (options.addCount) {
@@ -158,6 +181,11 @@
             }
             if (options.closeOnEnter) {
               $element.hueAutocomplete('close');
+              // Prevent autocomplete on enter
+              $element.hueAutocomplete("option", "disabled", true);
+              window.setTimeout(function () {
+                $element.hueAutocomplete("option", "disabled", false);
+              }, delay + 200);
             }
             if (options.valueObservable) {
               options.valueObservable($element.val());
@@ -188,16 +216,6 @@
         } else if (e.which === 32 && e.ctrlKey) {
           $element.hueAutocomplete('search', $element.val());
         }
-        if (e.which === 13) {
-          // Prevent autocomplete on enter
-          $element.hueAutocomplete('close');
-          $element.hueAutocomplete("option", "disabled", true);
-          window.setTimeout(function () {
-            $element.hueAutocomplete("option", "disabled", false);
-          }, delay + 100);
-          e.preventDefault();
-          return false;
-        }
       });
 
       if (options.showOnFocus) {
@@ -236,7 +254,7 @@
       }
 
       $element.hueAutocomplete(options);
-      
+
       ko.bindingHandlers.niceScroll.init($element.data('custom-hueAutocomplete').menu.element, function () {});
 
       // IE 11 trick to prevent it from being shown on page refresh

+ 4 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -661,4 +661,8 @@
   bottom: 0;
   overflow: hidden;
   background-color: @cui-white;
+}
+
+.input-spinner {
+  background: url(/static/desktop/art/spinner-input.gif) no-repeat right -8px center !important;
 }

+ 1 - 0
desktop/core/src/desktop/templates/assist_search.mako

@@ -61,6 +61,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
           valueObservable: searchInput,
           onSelect: performSearch,
           limitWidthToInput: true,
+          showSpinner: true,
           reopenPattern: /.*:$/
         },
         hasFocus: searchHasFocus,

Some files were not shown because too many files changed in this diff