Explorar el Código

HUE-3157 [metastore] Table headers disappear when scrolling down

Enrico Berti hace 9 años
padre
commit
a9c0e5c4a2

+ 7 - 7
apps/metastore/src/metastore/templates/metastore.mako

@@ -78,7 +78,7 @@ ${ assist.assistPanel() }
 </script>
 
 <script type="text/html" id="metastore-columns-table">
-  <div style="overflow: auto">
+  <div style="overflow-x: auto; overflow-y: hidden">
     <table class="table table-striped table-condensed table-nowrap">
       <thead>
       <tr>
@@ -91,7 +91,7 @@ ${ assist.assistPanel() }
         <th width="50%">${_('Comment')}</th>
       </tr>
       </thead>
-      <tbody data-bind="hueach: {data: $data, itemHeight: 29, scrollable: '.right-panel', scrollableOffset: 200}">
+      <tbody data-bind="hueach: {data: $data, itemHeight: 29, scrollable: '.right-panel', scrollableOffset: 200, disableHueEachRowCount: 5}">
         <tr>
           ## start at 1
           <td data-bind="text: $index()+$indexOffset()+1"></td>
@@ -124,7 +124,7 @@ ${ assist.assistPanel() }
 </script>
 
 <script type="text/html" id="metastore-partition-columns-table">
-  <div style="overflow: auto">
+  <div style="overflow-x: auto; overflow-y: hidden">
     <table class="table table-striped table-condensed table-nowrap">
       <thead>
         <tr>
@@ -147,7 +147,7 @@ ${ assist.assistPanel() }
 </script>
 
 <script type="text/html" id="metastore-partition-values-table">
-  <div style="overflow: auto">
+  <div style="overflow-x: auto; overflow-y: hidden">
     <table class="table table-striped table-condensed table-nowrap">
       <thead>
         <tr>
@@ -175,7 +175,7 @@ ${ assist.assistPanel() }
 </script>
 
 <script type="text/html" id="metastore-samples-table">
-  <div style="overflow: auto">
+  <div style="overflow-x: auto; overflow-y: hidden">
     <table class="table table-striped table-condensed table-nowrap">
       <thead>
         <tr>
@@ -638,7 +638,7 @@ ${ assist.assistPanel() }
     <li><a href="#details" data-toggle="tab" data-bind="click: function(){ $root.currentTab('table-details'); }">${ _('Details') }</a></li>
   </ul>
 
-  <div class="tab-content margin-top-10" style="border: none">
+  <div class="tab-content margin-top-10" style="border: none; overflow: hidden">
     <div class="tab-pane" id="overview">
       <!-- ko if: $root.currentTab() == 'table-overview' -->
       <!-- ko template: 'metastore-overview-tab' --><!-- /ko -->
@@ -717,7 +717,7 @@ ${ assist.assistPanel() }
           }"></div>
       </div>
       <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
-      <div class="right-panel">
+      <div class="right-panel" data-bind="perfectScrollbar">
         <div class="metastore-main">
           <h3>
             <!-- ko template: { if: database() !== null && database().table() !== null, name: 'metastore-describe-table-actions' }--><!-- /ko -->

+ 21 - 16
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3387,35 +3387,40 @@
         itemHeight = valueAccessor().itemHeight || 22,
         scrollable = valueAccessor().scrollable || 'body',
         scrollableOffset = valueAccessor().scrollableOffset || 0,
+        disableHueEachRowCount = valueAccessor().disableHueEachRowCount || 0,
         forceRenderSub = valueAccessor().forceRenderSub || null,
         renderTimeout = -1,
         dataHasChanged = true;
 
       var wrappable = $(element);
-      if ($parent.is('table')) {
-        wrappable = $parent;
-        $parent = wrappable.parent();
-      }
+      if (data.length > disableHueEachRowCount) {
+        if ($parent.is('table')) {
+          wrappable = $parent;
+          $parent = wrappable.parent();
+        }
+
+        if (!wrappable.parent().hasClass('hueach')) {
+          wrappable.wrap('<div class="hueach"></div>');
+          $parent = wrappable.parent();
+          wrappable.css({
+            position: 'absolute',
+            width: '100%'
+          });
+        }
 
-      if (!wrappable.parent().hasClass('hueach')) {
-        wrappable.wrap('<div class="hueach"></div>');
-        $parent = wrappable.parent();
-        wrappable.css({
-          position: 'absolute',
-          width: '100%'
-        });
+        $parent.height(data.length * itemHeight);
+        if (wrappable.is('table')) {
+          $parent.height($parent.height() + (data.length > 0 ? itemHeight : 0));
+        }
       }
 
-      $parent.height(data.length * itemHeight);
-      if (wrappable.is('table')) {
-        $parent.height($parent.height() + (data.length > 0 ? itemHeight : 0));
-      }
       try {
         if (ko.utils.domData.get(element, 'originalData') && JSON.stringify(ko.utils.domData.get(element, 'originalData')) === JSON.stringify(data)) {
           dataHasChanged = false;
         }
       }
-      catch (e) {}
+      catch (e) {
+      }
 
       if (dataHasChanged) {
         ko.utils.domData.set(element, 'originalData', data);

+ 0 - 6
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -866,9 +866,3 @@ h4.header {
   border-bottom: 1px solid #DDD;
   padding-bottom: 3px;
 }
-
-@media screen and ( max-height: 710px ){
-  .table-condensed th, .table-condensed td {
-    padding: 1px 2px;
-  }
-}