Răsfoiți Sursa

HUE-991 [beeswax] Clicking on 'collapse' on result page misalign the table and its button

Fixed jHueTableExtender and jHueTableScroller plugins
Enrico Berti 13 ani în urmă
părinte
comite
1ab1d80e31

+ 9 - 6
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -129,7 +129,7 @@ ${layout.menubar(section='query')}
             % if expected_first_row != start_row:
                 <div class="alert"><strong>${_('Warning:')}</strong> ${_('Page offset may have incremented since last view.')}</div>
             % endif
-            <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0">
+            <table class="table table-striped table-condensed resultTable" cellpadding="0" cellspacing="0" data-tablescroller-min-height-disable="true" data-tablescroller-enforce-height="true">
             <thead>
             <tr>
               <th>&nbsp;</th>
@@ -243,6 +243,13 @@ ${layout.menubar(section='query')}
         "oLanguage": {
             "sEmptyTable": "${_('No data available')}",
             "sZeroRecords": "${_('No matching records')}",
+        },
+        "fnDrawCallback": function( oSettings ) {
+          $(".resultTable").jHueTableExtender({
+            hintElement: "#jumpToColumnAlert",
+            fixedHeader: true,
+            firstColumnTooltip: true
+          });
         }
       });
       $(".dataTables_wrapper").css("min-height", "0");
@@ -315,11 +322,7 @@ ${layout.menubar(section='query')}
         $(".sidebar-nav").parent().css("margin-left", "0");
       });
 
-      $(".resultTable").jHueTableExtender({
-        hintElement: "#jumpToColumnAlert",
-        fixedHeader: true,
-        firstColumnTooltip: true
-      });
+
 
       resizeLogs();
 

+ 2 - 1
desktop/core/static/js/Source/jHue/jquery.tableextender.js

@@ -136,7 +136,8 @@
 
     if (_this.options.fixedHeader) {
       var clonedTable = $(_this.element).clone();
-      clonedTable.removeClass("resultTable").find("tbody").remove().css("margin-bottom", "0");
+      clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
+      clonedTable.removeClass("resultTable").find("tbody").remove();
       $(_this.element).find("thead>tr th").each(function (i) {
         var originalTh = $(this);
         clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");

+ 15 - 3
desktop/core/static/js/Source/jHue/jquery.tablescroller.js

@@ -21,6 +21,7 @@
  *      overriding the default 500px set by the plugin
  * - data-tablescroller-min-height-disable="true": disable enforcing a minimum height for the table
  * - data-tablescroller-disable="true": disable the plugin for the specific table
+ * - data-tablescroller-enforce-height="true": displays the table at its maximum height accordingly to the page
  */
 ;
 (function ($, window, document, undefined) {
@@ -50,8 +51,12 @@
     var disableScrollingTable = $(_this.element).find("table").eq(0).data("tablescroller-disable");
     if (disableScrollingTable == null || disableScrollingTable != true) {
       resizeScrollingTable(_this.element);
+      var _resizeTimeout = -1;
       $(window).resize(function () {
-        resizeScrollingTable(_this.element);
+        window.clearTimeout(_resizeTimeout);
+        _resizeTimeout = window.setTimeout(function(){
+          resizeScrollingTable(_this.element);
+        }, 400);
       });
     }
 
@@ -61,7 +66,14 @@
       $(el).nextAll(":visible").each(function () {
         heightAfter += $(this).outerHeight(true);
       });
-      if ($(el).height() > ($(window).height() - $(el).offset().top - heightAfter)) {
+
+      var heightCondition = $(el).height() > ($(window).height() - $(el).offset().top - heightAfter);
+      var enforceHeight = $(_this.element).find("table").eq(0).data("tablescroller-enforce-height");
+      if (enforceHeight !== undefined && enforceHeight == true) {
+        heightCondition = true;
+      }
+
+      if (heightCondition) {
         var specificMinHeight = $(el).find("table").eq(0).data("tablescroller-min-height");
         var minHeightVal = _this.options.minHeight;
         if (!isNaN(parseFloat(specificMinHeight)) && isFinite(specificMinHeight)) {
@@ -69,7 +81,7 @@
         }
         var disableMinHeight = $(_this.element).find("table").eq(0).data("tablescroller-min-height-disable");
         if (disableMinHeight != null && disableMinHeight == true) {
-          if ($(el).height() > ($(window).height() - $(el).offset().top - heightAfter)) {
+          if (heightCondition) {
             $(el).css("overflow-y", "auto").height($(window).height() - $(el).offset().top - heightAfter);
           }
         }