Przeglądaj źródła

HUE-5011 [editor] Use pure CSS instead of KO binding to fix empty assist popover

Johan Ahlen 9 lat temu
rodzic
commit
20867d9

+ 0 - 40
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1308,46 +1308,6 @@
     }
   };
 
-  /**
-   * This one has to be used when using flex for Safari, 100% height has no impact on flex: 1 1 100%
-   */
-  ko.bindingHandlers.matchParentHeight = {
-    init: function (element, valueAccessor) {
-      var $element = $(element);
-      var $parent = $element.parent();
-
-      var lastParentHeight = -1;
-      var random = Math.random();
-      var setHeightToParentHeight = function () {
-        if (lastParentHeight !== $parent.height()) {
-          lastParentHeight = $parent.height();
-          $element.css('height', lastParentHeight + 'px');
-        }
-      };
-
-      setHeightToParentHeight();
-
-      if (valueAccessor.resizeElement) {
-        $(valueAccessor().resizeElement).on('resize', setHeightToParentHeight);
-        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
-          $(valueAccessor().resizeElement).off('resize', setHeightToParentHeight);
-        });
-      }
-
-      if (valueAccessor().refreshPubSubId) {
-        var pubSub = huePubSub.subscribe(valueAccessor().refreshPubSubId, setHeightToParentHeight);
-        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
-          pubSub.remove();
-        });
-      }
-      var interval = window.setInterval(setHeightToParentHeight, 500);
-
-      ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
-        window.clearInterval(interval);
-      });
-    }
-  };
-
   ko.bindingHandlers.assistVerticalResizer = {
     init: function (element, valueAccessor) {
       var $container = $(element);

+ 76 - 69
desktop/core/src/desktop/templates/assist.mako

@@ -72,10 +72,13 @@ from metadata.conf import has_navigator
     }
 
     .assist-inner-panel {
-      position: relative;
-      padding: 0 0 0 10px;
+      position: absolute;
       overflow: hidden;
-      margin-right: 1px;
+      padding-right: 3px;
+      top: 10px;
+      right: 0;
+      bottom: 2px;
+      left: 10px;
     }
 
     .assist-inner-header {
@@ -508,19 +511,21 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="assist-hive-inner-panel">
-    <div class="assist-flex-panel">
-      <!-- ko template: { if: breadcrumb() !== null, name: 'assist-db-breadcrumb' } --><!-- /ko -->
-      <!-- ko template: { ifnot: selectedSource, name: 'assist-sources-template' } --><!-- /ko -->
-      <!-- ko with: selectedSource -->
-      <!-- ko template: { ifnot: selectedDatabase, name: 'assist-databases-template' }--><!-- /ko -->
-      <!-- ko with: selectedDatabase -->
-      <!-- ko template: { name: "assist-tables-template" } --><!-- /ko -->
-      <!-- /ko -->
+    <div class="assist-inner-panel">
+      <div class="assist-flex-panel">
+        <!-- ko template: { if: breadcrumb() !== null, name: 'assist-db-breadcrumb' } --><!-- /ko -->
+        <!-- ko template: { ifnot: selectedSource, name: 'assist-sources-template' } --><!-- /ko -->
+        <!-- ko with: selectedSource -->
+        <!-- ko template: { ifnot: selectedDatabase, name: 'assist-databases-template' }--><!-- /ko -->
+        <!-- ko with: selectedDatabase -->
+        <!-- ko template: { name: "assist-tables-template" } --><!-- /ko -->
+        <!-- /ko -->
+        <!-- /ko -->
+      </div>
+      <!-- ko with: $parents[1] -->
+      <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
       <!-- /ko -->
     </div>
-    <!-- ko with: $parents[1] -->
-    <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
-    <!-- /ko -->
   </script>
 
   <script type="text/html" id="hdfs-details-content">
@@ -548,61 +553,63 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="assist-hdfs-inner-panel">
-    <div class="assist-flex-panel">
-      <!-- ko with: selectedHdfsEntry -->
-      <div class="assist-flex-header assist-breadcrumb" >
-        <!-- ko if: parent !== null -->
-        <a href="javascript: void(0);" data-bind="click: function () { huePubSub.publish('assist.selectHdfsEntry', parent); }">
-          <i class="fa fa-chevron-left" style="font-size: 15px;margin-right:8px;"></i>
-          <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px; vertical-align: top; margin-right:4px;"></i>
-          <span style="font-size: 14px;line-height: 16px;vertical-align: top;" data-bind="text: path"></span>
-        </a>
-        <!-- /ko -->
-        <!-- ko if: parent === null -->
-        <div>
-          <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px;vertical-align: top; margin-right:4px;"></i>
-          <span style="font-size: 14px;line-height: 16px;vertical-align: top;" data-bind="text: path"></span>
-        </div>
-        <!-- /ko -->
-        <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
-      </div>
-      <div class="assist-flex-fill assist-hdfs-scrollable">
-        <div data-bind="visible: ! loading() && ! hasErrors()">
-          <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-hdfs-scrollable' }">
-            <li class="assist-entry assist-table-link" style="position: relative;" data-bind="visibleOnHover: { 'selector': '.assist-actions' }">
-              <div class="assist-actions table-actions" style="opacity: 0;" >
-                <a style="padding: 0 3px;" class="inactive-action" href="javascript:void(0);" data-bind="templatePopover : { contentTemplate: 'hdfs-details-content', titleTemplate: 'hdfs-details-title', minWidth: '320px' }">
-                  <i class='fa fa-info' title="${ _('Details') }"></i>
-                </a>
-              </div>
-
-              <a href="javascript:void(0)" class="assist-entry assist-table-link" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.name }">
-                <!-- ko if: definition.type === 'dir' -->
-                <i class="fa fa-fw fa-folder-o muted valign-middle"></i>
-                <!-- /ko -->
-                <!-- ko if: definition.type === 'file' -->
-                <i class="fa fa-fw fa-file-o muted valign-middle"></i>
-                <!-- /ko -->
-                <span draggable="true" data-bind="text: definition.name, draggableText: { text: '\'' + path + '\'', meta: {'type': 'hdfs', 'definition': definition} }"></span>
-              </a>
-            </li>
-          </ul>
-          <!-- ko if: !loading() && entries().length === 0 -->
-          <ul class="assist-tables">
-            <li class="assist-entry" style="font-style: italic;">${_('Empty directory')}</li>
-          </ul>
+    <div class="assist-inner-panel">
+      <div class="assist-flex-panel">
+        <!-- ko with: selectedHdfsEntry -->
+        <div class="assist-flex-header assist-breadcrumb" >
+          <!-- ko if: parent !== null -->
+          <a href="javascript: void(0);" data-bind="click: function () { huePubSub.publish('assist.selectHdfsEntry', parent); }">
+            <i class="fa fa-chevron-left" style="font-size: 15px;margin-right:8px;"></i>
+            <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px; vertical-align: top; margin-right:4px;"></i>
+            <span style="font-size: 14px;line-height: 16px;vertical-align: top;" data-bind="text: path"></span>
+          </a>
+          <!-- /ko -->
+          <!-- ko if: parent === null -->
+          <div>
+            <i class="fa fa-folder-o" style="font-size: 14px; line-height: 16px;vertical-align: top; margin-right:4px;"></i>
+            <span style="font-size: 14px;line-height: 16px;vertical-align: top;" data-bind="text: path"></span>
+          </div>
           <!-- /ko -->
+          <!-- ko template: 'assist-hdfs-header-actions' --><!-- /ko -->
         </div>
-        <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
-        <div class="assist-errors" data-bind="visible: ! loading() && hasErrors()">
-          <span>${ _('Error loading contents.') }</span>
+        <div class="assist-flex-fill assist-hdfs-scrollable">
+          <div data-bind="visible: ! loading() && ! hasErrors()">
+            <ul class="assist-tables" data-bind="foreachVisible: {data: entries, minHeight: 20, container: '.assist-hdfs-scrollable' }">
+              <li class="assist-entry assist-table-link" style="position: relative;" data-bind="visibleOnHover: { 'selector': '.assist-actions' }">
+                <div class="assist-actions table-actions" style="opacity: 0;" >
+                  <a style="padding: 0 3px;" class="inactive-action" href="javascript:void(0);" data-bind="templatePopover : { contentTemplate: 'hdfs-details-content', titleTemplate: 'hdfs-details-title', minWidth: '320px' }">
+                    <i class='fa fa-info' title="${ _('Details') }"></i>
+                  </a>
+                </div>
+
+                <a href="javascript:void(0)" class="assist-entry assist-table-link" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.name }">
+                  <!-- ko if: definition.type === 'dir' -->
+                  <i class="fa fa-fw fa-folder-o muted valign-middle"></i>
+                  <!-- /ko -->
+                  <!-- ko if: definition.type === 'file' -->
+                  <i class="fa fa-fw fa-file-o muted valign-middle"></i>
+                  <!-- /ko -->
+                  <span draggable="true" data-bind="text: definition.name, draggableText: { text: '\'' + path + '\'', meta: {'type': 'hdfs', 'definition': definition} }"></span>
+                </a>
+              </li>
+            </ul>
+            <!-- ko if: !loading() && entries().length === 0 -->
+            <ul class="assist-tables">
+              <li class="assist-entry" style="font-style: italic;">${_('Empty directory')}</li>
+            </ul>
+            <!-- /ko -->
+          </div>
+          <!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko -->
+          <div class="assist-errors" data-bind="visible: ! loading() && hasErrors()">
+            <span>${ _('Error loading contents.') }</span>
+          </div>
         </div>
+        <!-- /ko -->
       </div>
+      <!-- ko with: $parents[1] -->
+      <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
       <!-- /ko -->
     </div>
-    <!-- ko with: $parents[1] -->
-    <!-- ko template: { if: (searchInput() !== '' || searchHasFocus()) && navigatorEnabled(), name: 'nav-search-result' } --><!-- /ko -->
-    <!-- /ko -->
   </script>
 
   <script type="text/html" id="file-details-content">
@@ -675,8 +682,10 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="assist-documents-inner-panel">
-    <div class="assist-flex-panel">
-      <!-- ko template: 'assist-file-panel' --><!-- /ko -->
+    <div class="assist-inner-panel">
+      <div class="assist-flex-panel">
+        <!-- ko template: 'assist-file-panel' --><!-- /ko -->
+      </div>
     </div>
   </script>
 
@@ -855,10 +864,8 @@ from metadata.conf import has_navigator
         <!-- /ko -->
       </div>
       <!-- /ko -->
-      <div style="position: relative; flex: 1 1 100%; overflow: hidden; padding-top: 10px;" data-bind="style: { 'padding-top': availablePanels.length > 1 ? '10px' : '5px' }">
-        <div class="assist-inner-panel" data-bind="matchParentHeight: { resizeElement: window, refreshPubSubId: 'assist.forceRender' }, with: visiblePanel">
-          <!-- ko template: { name: templateName, data: panelData } --><!-- /ko -->
-        </div>
+      <div style="position: relative; flex: 1 1 100%; overflow: hidden; padding-top: 10px;" data-bind="style: { 'padding-top': availablePanels.length > 1 ? '10px' : '5px' }, with: visiblePanel">
+        <!-- ko template: { name: templateName, data: panelData } --><!-- /ko -->
       </div>
     </div>
   </script>

+ 23 - 17
desktop/core/src/desktop/templates/sql_context_popover.mako

@@ -139,6 +139,13 @@ from metadata.conf import has_navigator
       overflow: hidden;
     }
 
+    .sql-context-tab-pane {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
     .sql-context-popover-arrow, .sql-context-popover-arrow::after {
       position: absolute;
       display: block;
@@ -157,6 +164,7 @@ from metadata.conf import has_navigator
     }
 
     .sql-context-tab-container {
+      position: relative;
       flex: 1 1 100%;
       border: none;
       overflow: auto;
@@ -178,10 +186,12 @@ from metadata.conf import has_navigator
     }
 
     .sql-context-flex {
-      position: relative;
       display: flex;
       flex-flow: column nowrap;
-      height: 100%;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
     }
 
     .sql-context-flex-header {
@@ -260,13 +270,13 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-table-details">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData, nicescroll">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData">
       <!-- ko component: { name: 'sql-columns-table', params: { columns: extended_columns } } --><!-- /ko -->
     </div>
   </script>
 
   <script type="text/html" id="sql-context-column-details">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData, nicescroll">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData, nicescroll">
       <div style="margin: 15px;">
         <a class="pointer" data-bind="text: name, attr: { title: comment }, click: function() { huePubSub.publish('sql.context.popover.scroll.to.column', name); }"></a> (<span data-bind="text: type.indexOf('<') !== -1 ? type.substring(0, type.indexOf('<')) : type, attr: { title: type }"></span>)
         <!-- ko if: comment -->
@@ -278,7 +288,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-table-and-column-tags">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }">
+    <div class="sql-context-flex-fill">
       <div class="sql-context-flex">
         <div class="sql-context-flex-header">
           <div style="margin: 10px 5px 0 10px;">
@@ -293,7 +303,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-table-and-column-sample">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData">
       <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>
@@ -317,7 +327,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-table-analysis">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData, niceScroll">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData, niceScroll">
       <!-- ko if: stats.length > 0 -->
         <table class="table table-striped">
           <tbody data-bind="foreach: stats">
@@ -332,7 +342,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-column-analysis">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData, niceScroll">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData, niceScroll">
       <table class="table table-condensed">
         <tbody data-bind="foreach: stats">
           <tr>
@@ -345,7 +355,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-database-details">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }">
+    <div class="sql-context-flex-fill">
       <div class="sql-context-flex">
         <div class="sql-context-flex-header">
           <div style="margin: 10px 5px 0 10px;">
@@ -360,7 +370,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-function-details">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: details, niceScroll">
+    <div class="sql-context-flex-fill" data-bind="with: details, niceScroll">
       <div style="padding: 8px">
         <p style="margin: 10px 10px 18px 10px;"><span style="white-space: pre; font-family: monospace;" data-bind="text: signature"></span></p>
         <p><span data-bind="text: description"></span></p>
@@ -369,7 +379,7 @@ from metadata.conf import has_navigator
   </script>
 
   <script type="text/html" id="sql-context-table-partitions">
-    <div class="sql-context-flex-fill" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, with: fetchedData, niceScroll">
+    <div class="sql-context-flex-fill" data-bind="with: fetchedData, niceScroll">
       <div style="margin: 10px 5px 0 10px;">
         <span style="font-size: 15px; font-weight: 300;">${_('Columns')}</span>
       </div>
@@ -436,7 +446,7 @@ from metadata.conf import has_navigator
         </li>
       </ul>
       <div class="sql-context-tab-container" data-bind="foreach: tabs">
-        <div class="tab-pane" id="sampleTab" data-bind="matchParentHeight: { refreshPubSubId: 'context.popover.resize' }, visible : $parent.activeTab() === id, attr: { id: id }, css: { 'active' : $parent.activeTab() === id }" style="height: 100%; overflow: hidden; display: none;">
+        <div class="sql-context-tab-pane tab-pane" id="sampleTab" data-bind="visible : $parent.activeTab() === id, attr: { id: id }, css: { 'active' : $parent.activeTab() === id }">
           <div class="sql-context-flex">
             <!-- ko with: templateData -->
             <div class="sql-context-flex-fill" data-bind="visible: loading"><!-- ko hueSpinner: { spin: loading, center: true, size: 'large' } --><!-- /ko --></div>
@@ -843,7 +853,7 @@ from metadata.conf import has_navigator
             width: $('.sql-context-popover').width(),
             height: $('.sql-context-popover').height()
           });
-        };
+        }
 
         self.resizeStart = function (event, ui) {
           preventHide = true;
@@ -929,8 +939,6 @@ from metadata.conf import has_navigator
               if (ui.size.width < 260) {
                 ui.size.width = 260;
                 $('.sql-context-popover').css('width', 260 + 'px');
-              } else {
-                huePubSub.publish('context.popover.resize')
               }
             };
             break;
@@ -941,8 +949,6 @@ from metadata.conf import has_navigator
               if (ui.size.height < 200) {
                 ui.size.height = 200;
                 $('.sql-context-popover').css('height', 200 + 'px');
-              } else {
-                huePubSub.publish('context.popover.resize')
               }
             };
             break;