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

HUE-4912 [editor] Add fixed first column to samples in context-popover

This also makes it a bit more snappy when there are few columns.
Johan Ahlen 9 жил өмнө
parent
commit
da9579a

+ 36 - 17
desktop/core/src/desktop/static/desktop/js/jquery.tableextender2.js

@@ -49,13 +49,16 @@
     self.$mainScrollable = $(self.options.mainScrollable);
     self.lastHeaderWidth = 0;
 
-    self.drawHeader(); // Sets self.headerRowContainer
+    self.drawHeader(); // Sets self.headerRowContainer, self.thMapping
     self.drawFirstColumn(); // Sets self.firstColumnInner, self.firstColumnTopCell and self.firstColumn
     self.drawLockedRows();
 
-    var isFireFox = navigator.userAgent.toLowerCase().indexOf("firefox") > 0;
+    var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > 0;
+    var manyColumns = self.thMapping.length > 20;
 
-    var firstCellWidth, leftPosition, th, thi;
+    var sortAdjustment = self.options.noSort ? 10 : 20; // 20 is the sorting css width
+
+    var firstCellWidth, leftPosition, th, thi, leftPadding;
     var throttledHeaderPadding = function () {
       firstCellWidth = self.options.fixedFirstColumn ? self.firstColumnTopCell.outerWidth() : 0;
       for (thi = 0; thi < self.thMapping.length; thi++) {
@@ -65,9 +68,12 @@
         }
         leftPosition = th.clone.position().left - firstCellWidth;
         if (leftPosition + th.clone.outerWidth() > 0 && leftPosition < 0) {
-          if (th.cloneSpan.width() - leftPosition < th.clone.outerWidth() - 20) { // 20 is the sorting css width
-            th.cloneSpan.css('paddingLeft', -leftPosition);
+          if (th.cloneSpan.width() - leftPosition < th.clone.outerWidth() - sortAdjustment) {
+            leftPadding = -leftPosition;
+          } else {
+            leftPadding = th.clone.outerWidth() - sortAdjustment - th.cloneSpan.width();
           }
+          th.cloneSpan.css('paddingLeft', leftPadding);
         } else {
           th.cloneSpan.css('paddingLeft', 0);
         }
@@ -77,8 +83,12 @@
     var scrollTimeout = -1;
     var headerScroll = function () {
       self.headerRowContainer.scrollLeft(self.$parent.scrollLeft());
-      window.clearTimeout(scrollTimeout);
-      scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
+      if (isFirefox || manyColumns) {
+        window.clearTimeout(scrollTimeout);
+        scrollTimeout = window.setTimeout(throttledHeaderPadding, 200);
+      } else {
+        throttledHeaderPadding();
+      }
     };
     self.$parent.on('scroll', headerScroll);
     self.disposeFunctions.push(function () {
@@ -155,7 +165,7 @@
       } else {
         self.$parent.find('.selected').removeClass('selected');
         $(this).addClass('selected');
-        self.$parent.find('.jHueTableExtenderClonedContainerColumn table tbody tr:eq(' + $(this).index() + ')').addClass('selected');
+        self.$parent.find('.fixed-first-column table tbody tr:eq(' + $(this).index() + ')').addClass('selected');
       }
     };
     self.$parent.on('click dblclick', 'table tbody tr', clickHandler);
@@ -175,7 +185,7 @@
     if (!self.options.disableTopPosition) {
       self.repositionHeader();
       var scrollFunction;
-      if (isFireFox) {
+      if (isFirefox) {
         var ffThrottle = -1;
         var throttledPositionClones = function () {
           window.clearTimeout(ffThrottle);
@@ -234,6 +244,7 @@
     }
     var pos = self.options.stickToTopPosition;
     var topPos = 0;
+    var firstColTopPos = 0;
     if (typeof pos === 'function'){
       pos = pos();
     }
@@ -243,16 +254,24 @@
       } else {
         topPos = self.$element.offset().top;
       }
-      self.firstColumn.css("top", self.$element.offset().top + "px");
+      firstColTopPos = self.$element.offset().top;
     } else if (self.options.clonedContainerPosition == 'absolute') {
       topPos = self.$parent.position().top;
-      self.firstColumn.css("top", topPos + "px");
+      firstColTopPos = topPos;
     } else {
       topPos = self.$parent.offset().top;
-      self.firstColumn.css("top", topPos + "px");
+      firstColTopPos = topPos;
+    }
+    self.firstColumn.scrollTop(self.$mainScrollable.scrollTop());
+    if (self.lastFirstColTop !== firstColTopPos) {
+      self.lastFirstColTop = firstColTopPos;
+      self.firstColumn.css("top", firstColTopPos + "px");
+    }
+    if (self.lastTopPos !== topPos) {
+      self.lastTopPos = topPos;
+      self.headerRowContainer.css("top", topPos + "px");
+      self.firstColumnTopCell.css("top", topPos + "px");
     }
-    self.headerRowContainer.css("top", topPos + "px");
-    self.firstColumnTopCell.css("top", topPos + "px");
   };
 
   Plugin.prototype.drawHeader = function () {
@@ -310,7 +329,7 @@
       topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();
     }
     var headerRowContainer = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainer")
-        .addClass("jHueTableExtenderClonedContainer").width(totalThWidth).css("overflow-x", "hidden");
+        .addClass("fixed-header-row").width(totalThWidth).css("overflow-x", "hidden");
     if (!self.options.disableTopPosition) {
       headerRowContainer.css("top", topPosition + "px");
     }
@@ -368,7 +387,7 @@
 
     clonedCell.appendTo(clonedCellContainer);
 
-    var firstColumnTopCell = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainerCell").addClass("jHueTableExtenderClonedContainerCell").width(originalTh.outerWidth()).css("overflow", "hidden").css("top", topPosition + "px");
+    var firstColumnTopCell = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainerCell").addClass("fixed-first-cell").width(originalTh.outerWidth()).css("overflow", "hidden").css("top", topPosition + "px");
     firstColumnTopCell.css("position", self.options.clonedContainerPosition || "fixed");
 
     clonedCellContainer.appendTo(firstColumnTopCell);
@@ -411,7 +430,7 @@
     var firstColumnInner = $("<div>").css("background-color", "#FFFFFF").width(originalTh.outerWidth()).height(self.$parent.get(0).scrollHeight);
     clonedTable.appendTo(firstColumnInner);
 
-    var firstColumn = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainerColumn").addClass("jHueTableExtenderClonedContainerColumn").width(originalTh.outerWidth()).height(self.$parent.height()).css("overflow", "hidden").css("top", topPosition + "px");
+    var firstColumn = $("<div>").attr("id", self.$element.attr("id") + "jHueTableExtenderClonedContainerColumn").addClass("fixed-first-column").width(originalTh.outerWidth()).height(self.$parent.height()).css("overflow", "hidden").css("top", topPosition + "px");
     firstColumn.css("position", self.options.clonedContainerPosition || "fixed");
 
     firstColumnInner.appendTo(firstColumn);

+ 29 - 5
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -225,6 +225,29 @@ from metadata.conf import has_navigator
       color: #737373;
       text-align: center;
     }
+
+    .context-sample th {
+      border-right: 1px solid #e5e5e5;
+    }
+
+    .context-sample td {
+      border-right: 1px solid #e5e5e5;
+      white-space: nowrap;
+    }
+
+    .context-sample .fixed-first-column {
+      margin-top: -1px;
+    }
+
+    .context-sample .fixed-header-row {
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .context-sample .fixed-first-cell {
+      border-right: 1px solid #e5e5e5;
+      margin-top: -1px;
+      margin-left: -1px;
+    }
   </style>
 
   <script type="text/html" id="sql-context-footer">
@@ -256,7 +279,7 @@ from metadata.conf import has_navigator
 
   <script type="text/html" id="sql-context-table-and-column-sample">
     <div class="sql-context-flex-fill" data-bind="with: fetchedData">
-      <div class="sample-scroll" style="text-align: left; padding: 3px; overflow: hidden; height: 100%">
+      <div class="context-sample sample-scroll" style="text-align: left; padding: 3px; overflow: hidden; height: 100%">
         <!-- ko if: rows.length == 0 -->
         <div class="alert">${ _('The selected table has no data.') }</div>
         <!-- /ko -->
@@ -476,7 +499,7 @@ from metadata.conf import has_navigator
       };
 
       var hideOnClickOutside = function (event) {
-        if (!$.contains($('#sqlContextPopover')[0], event.target)) {
+        if (jQuery.contains(document, event.target) && !$.contains($('#sqlContextPopover')[0], event.target)) {
           hidePopover();
         }
       };
@@ -696,12 +719,13 @@ from metadata.conf import has_navigator
 
           $t.jHueTableExtender2({
             fixedHeader: true,
-            fixedFirstColumn: false,
-            fixedFirstColumnTopMargin: -1,
+            fixedFirstColumn: true,
+            fixedFirstColumnTopMargin: -2,
             headerSorting: false,
             includeNavigator: false,
             parentId: 'sampleTab',
-            classToRemove: 'samples-table'
+            noSort: true,
+            mainScrollable: '.sample-scroll > .dataTables_wrapper'
           });
 
           huePubSub.subscribeOnce('sql.context.popover.dispose', function () {