浏览代码

HUE-6424 [assist] Show the context popover on hover for the assistant tables

Johan Ahlen 8 年之前
父节点
当前提交
a363ef1cbf

+ 18 - 2
apps/metastore/src/metastore/static/metastore/js/metastore.model.js

@@ -643,8 +643,12 @@ var MetastoreTable = (function () {
     self.fetchDetails();
   };
 
+
+  var contextPopoverTimeout = -1;
+
   MetastoreTable.prototype.showContextPopover = function (entry, event, orientation) {
-    var $source = $(event.target);
+    window.clearTimeout(contextPopoverTimeout);
+    var $source = $(event.currentTarget || event.target);
     var offset = $source.offset();
     huePubSub.publish('sql.context.popover.show', {
       data: {
@@ -658,12 +662,24 @@ var MetastoreTable = (function () {
         element: event.target,
         left: offset.left,
         top: offset.top - 2,
-        right: offset.left + $source.width() + 1,
+        right: offset.left + (orientation === 'left' ? 0 : $source.width() + 1),
         bottom: offset.top + $source.height() - 2
       }
     });
   };
 
+  MetastoreTable.prototype.showContextPopoverDelayed = function (entry, event, orientation) {
+    var self = this;
+    window.clearTimeout(contextPopoverTimeout);
+    contextPopoverTimeout = window.setTimeout(function () {
+      self.showContextPopover(entry, event, orientation);
+    }, 500);
+  };
+
+  MetastoreTable.prototype.clearContextPopoverDelay = function () {
+    window.clearInterval(contextPopoverTimeout);
+  };
+
   return MetastoreTable;
 
 })();

+ 3 - 6
desktop/core/src/desktop/templates/assist.mako

@@ -1794,12 +1794,9 @@ from notebook.conf import get_ordered_interpreters
           <div class="assist-no-entries">${ _('No tables identified.') }</div>
           <!-- /ko -->
           <!-- ko if: activeTables().length > 0 -->
-          <ul data-bind="foreach: activeTables">
-            <li>
-              <span data-bind="text: name"></span>
-              <div class="pull-right margin-right-10">
-                <a class="inactive-action" href="javascript:void(0)" data-bind="click: function (data, event) { showContextPopover(data, event, 'left') }"><i class="fa fa-info"></i></a>
-              </div>
+          <ul class="assist-active-tables" data-bind="foreach: activeTables">
+            <li data-bind="event: { mouseover: function (data, event) { showContextPopoverDelayed(data, event, 'left'); }, mouseout: clearContextPopoverDelay },">
+              <a class="inactive-action-dark" href="javascript:void(0)" data-bind="click: function (data, event) { showContextPopover(data, event, 'left') }, text: name"></a>
             </li>
           </ul>
           <!-- /ko -->