Эх сурвалжийг харах

HUE-5144 [metadata] Tune the timings of the context popover for Nav search results

Slight delay to open, delayed close when mouse is outside unless a click inside the popover is detected.
Johan Ahlen 9 жил өмнө
parent
commit
efec570

+ 17 - 2
desktop/core/src/desktop/templates/assist.mako

@@ -1006,7 +1006,7 @@ from metadata.conf import has_navigator
         <div class="result-entry">${ _('No result found.') }</div>
       <!-- /ko -->
       <div data-bind="foreach: searchResult" style="overflow-x:hidden">
-        <div class="result-entry" data-bind="visibleOnHover: { override: statsVisible, selector: '.table-actions' }, event: { mouseover: showNavContextPopover }">
+        <div class="result-entry" data-bind="visibleOnHover: { override: statsVisible, selector: '.table-actions' }, event: { mouseover: showNavContextPopoverDelayed, mouseout: clearNavContextPopoverDelay }">
           <div class="icon-col">
             <i class="fa fa-fw valign-middle" data-bind="css: icon"></i>
           </div>
@@ -1502,6 +1502,7 @@ from metadata.conf import has_navigator
                 type: entry.type === 'FIELD' ? 'column' : (entry.type === 'DATABASE' ? 'database' : 'table'),
                 identifierChain: $.map(entry.parentPath.substring(1).split('/'), function (part) { return { name: part } }).concat({ name: entry.originalName })
               },
+              delayedHide: '.result-entry',
               orientation: 'right',
               sourceType: entry.sourceType.toLowerCase(),
               defaultDatabase: entry.parentPath.substring(1),
@@ -1519,6 +1520,19 @@ from metadata.conf import has_navigator
             });
           };
 
+          var navContextPopoverTimeout = -1;
+
+          var showNavContextPopoverDelayed = function (entry, event) {
+            window.clearTimeout(navContextPopoverTimeout);
+            navContextPopoverTimeout = window.setTimeout(function () {
+              showNavContextPopover(entry, event);
+            }, 500);
+          };
+
+          var clearNavContextPopoverDelay = function () {
+            window.clearTimeout(navContextPopoverTimeout);
+          };
+
           $.post('/metadata/api/navigator/search_entities', {
             query_s: self.searchInput(),
             limit: 25,
@@ -1526,7 +1540,8 @@ from metadata.conf import has_navigator
           }, function (data) {
             data.entities.forEach(function (entity) {
               entity.statsVisible = ko.observable(false);
-              entity.showNavContextPopover = showNavContextPopover;
+              entity.showNavContextPopoverDelayed = showNavContextPopoverDelayed;
+              entity.clearNavContextPopoverDelay = clearNavContextPopoverDelay;
               entity.icon = NAV_TYPE_ICONS[entity.type];
               switch (entity.type) {
                 case 'DATABASE': {

+ 45 - 3
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -997,6 +997,7 @@ from metadata.conf import has_navigator
 
       function SqlContextPopoverViewModel(params) {
         var self = this;
+        self.disposalFunctions = [];
 
         var apiHelper = ApiHelper.getInstance();
 
@@ -1118,8 +1119,52 @@ from metadata.conf import has_navigator
           self.iconClass = 'fa-info'
         }
         self.orientationClass = 'sql-context-popover-' + orientation;
+
+        if (params.delayedHide) {
+          var hideTimeout = -1;
+          var onLeave = function () {
+            hideTimeout = window.setTimeout(function () {
+              $('.sql-context-popover').fadeOut(200, function () {
+                hidePopover();
+              })
+            }, 1000);
+          };
+
+          var onEnter = function () {
+            window.clearTimeout(hideTimeout);
+          };
+
+          $(params.delayedHide).add($('.sql-context-popover')).on('mouseleave', onLeave).on('mouseenter', onEnter);
+
+          var keepPopoverOpenOnClick = function () {
+            window.clearTimeout(hideTimeout);
+            $(params.delayedHide).add($('.sql-context-popover')).off('mouseleave', onLeave).off('mouseenter', onEnter);
+          };
+
+          $('.sql-context-popover').on('click', keepPopoverOpenOnClick);
+
+          self.disposalFunctions.push(function () {
+            $(params.delayedHide).add($('.sql-context-popover')).off('mouseleave', onLeave).off('mouseenter', onEnter);
+            $('.sql-context-popover').off('click', keepPopoverOpenOnClick);
+          });
+        }
+
+        window.setTimeout(function() {
+          $(document).on('click', hideOnClickOutside);
+        }, 0);
+
+        self.disposalFunctions.push(function () {
+          $(document).off('click', hideOnClickOutside);
+        })
       }
 
+      SqlContextPopoverViewModel.prototype.dispose = function() {
+        var self = this;
+        self.disposalFunctions.forEach(function (fn) {
+          fn();
+        })
+      };
+
       SqlContextPopoverViewModel.prototype.pin = function () {
         var self = this;
         hidePopover();
@@ -1145,9 +1190,6 @@ from metadata.conf import has_navigator
         $('body').append($sqlContextPopover);
         ko.applyBindings(details, $sqlContextPopover[0]);
         huePubSub.publish('sql.context.popover.shown');
-        window.setTimeout(function() {
-          $(document).on('click', hideOnClickOutside);
-        }, 0);
       });
     })();
   </script>