Browse Source

HUE-3294 [editor] Made table result scrolling work in embedded mode

Enrico Berti 9 years ago
parent
commit
80595b7

+ 8 - 2
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -29,7 +29,7 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
-  overflow-y: hidden;
+  overflow: hidden;
 }
 
 .main-page {
@@ -42,7 +42,7 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
-  overflow-y: hidden;
+  overflow: hidden;
 }
 
 .content-wrapper {
@@ -65,6 +65,7 @@ body {
   position: relative;
   background-color: #338BB8;
   width: 100%;
+  z-index: 100;
 }
 
 .top-nav-left {
@@ -300,6 +301,11 @@ body {
   -ms-flex: 1;
   flex: 1;
   position: relative;
+  /*overflow-y: auto;*/
+}
+
+.page-content .content-panel {
+  overflow-y: auto;
 }
 
 .left-nav {

+ 2 - 2
desktop/core/src/desktop/templates/responsive.mako

@@ -90,7 +90,7 @@ ${ hueIcons.symbols() }
         <span class="hamburger-inner"></span>
       </span>
       </a>
-      <a class="brand nav-tooltip pull-left" title="${_('Homepage')}" rel="navigator-tooltip" href="/home"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
+      <a class="nav-tooltip pull-left" title="${_('Homepage')}" rel="navigator-tooltip" href="/home"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
       <div class="compose-action btn-group">
         <button class="btn">${ _('Compose') }</button>
         <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -255,7 +255,7 @@ ${ hueIcons.symbols() }
     }"><div class="resize-bar">&nbsp;</div></div>
 
 
-    <div class="page-content">
+    <div class="page-content" data-bind="niceScroll">
       <!-- ko ifnot: currentApp() -->
       Load
       <a href="#" data-bind="click: function(){ currentApp('editor') }">editor</a> |

+ 25 - 16
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -27,9 +27,9 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 
 <%namespace name="hueIcons" file="/hue_icons.mako" />
 
-<%def name="includes(is_responsive=False)">
+<%def name="includes(is_embeddable=False)">
 <link rel="stylesheet" href="${ static('desktop/css/common_dashboard.css') }">
-% if not is_responsive:
+% if not is_embeddable:
 <link rel="stylesheet" href="${ static('notebook/css/notebook-layout.css') }">
 % endif
 <link rel="stylesheet" href="${ static('notebook/css/notebook.css') }">
@@ -45,7 +45,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 <link rel="stylesheet" href="${ static('desktop/css/bootstrap-medium-editor.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/css/jquery.mCustomScrollbar.min.css') }">
 
-% if not is_responsive:
+% if not is_embeddable:
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }"></script>
 <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }"></script>
@@ -1026,7 +1026,7 @@ ${ hueIcons.symbols() }
   </div>
   <div class="resizer" data-bind="visible: isLeftPanelVisible() && assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: isLeftPanelVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
   % endif
-  <div class="content-panel" data-bind="event: { scroll: function(){ var ls = $('.content-panel').data('lastScroll'); if (ls && ls != $('.content-panel').scrollTop()){ $(document).trigger('hideAutocomplete'); }; $('.content-panel').data('lastScroll', $('.content-panel').scrollTop()) } }, with: selectedNotebook">
+  <div class="content-panel" data-bind="event: { scroll: function(){ var ls = $(MAIN_SCROLLABLE).data('lastScroll'); if (ls && ls != $(MAIN_SCROLLABLE).scrollTop()){ $(document).trigger('hideAutocomplete'); }; $(MAIN_SCROLLABLE).data('lastScroll', $(MAIN_SCROLLABLE).scrollTop()) } }, niceScroll, with: selectedNotebook">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
         sortable: {
@@ -1041,10 +1041,10 @@ ${ hueIcons.symbols() }
             'greedy': true,
             'stop': function(event, ui) {
               var $element = $(event.target);
-              $element.find('.snippet-body').slideDown('fast', function () { $('.content-panel').scrollTop(lastWindowScrollPosition); });
+              $element.find('.snippet-body').slideDown('fast', function () { $(MAIN_SCROLLABLE).scrollTop(lastWindowScrollPosition); });
             },
             'helper': function(event) {
-              lastWindowScrollPosition = $('.content-panel').scrollTop();
+              lastWindowScrollPosition = $(MAIN_SCROLLABLE).scrollTop();
               var $element = $(event.target);
               $element.find('.snippet-body').slideUp('fast', function () {
                 $('.sortable-snippets').sortable('refreshPositions')
@@ -1069,7 +1069,7 @@ ${ hueIcons.symbols() }
             }
           },
           dragged: function (widget) {
-            $('.snippet-body').slideDown('fast', function () { $('.content-panel').scrollTop(lastWindowScrollPosition); });
+            $('.snippet-body').slideDown('fast', function () { $(MAIN_SCROLLABLE).scrollTop(lastWindowScrollPosition); });
           }
         }">
       </div>
@@ -2420,9 +2420,14 @@ ${ hueIcons.symbols() }
 </%def>
 
 
-<%def name="commonJS(is_responsive=False)">
+<%def name="commonJS(is_embeddable=False)">
 
 <script type="text/javascript" charset="utf-8">
+  % if is_embeddable:
+  var MAIN_SCROLLABLE = '.page-content';
+  % else:
+  var MAIN_SCROLLABLE = '.content-panel';
+  % endif
 
   function authorizeGithub() {
     if ($("#importGithubUrl").val().trim() != "") {
@@ -2536,7 +2541,7 @@ ${ hueIcons.symbols() }
           }
         }
       },
-      scrollable: vm.editorMode() ? '.content-panel' : '.dataTables_wrapper',
+      scrollable: vm.editorMode() ? MAIN_SCROLLABLE : '.dataTables_wrapper',
       contained: !vm.editorMode()
     });
 
@@ -2544,8 +2549,12 @@ ${ hueIcons.symbols() }
       if (vm.editorMode()) {
         $(el).parents('.dataTables_wrapper').css('overflow-x', 'hidden');
         $(el).jHueTableExtender2({
-          mainScrollable: '.content-panel',
+          mainScrollable: MAIN_SCROLLABLE,
+          % if is_embeddable:
+          stickToTopPosition: function() { return vm.isPlayerMode() ? 1 : 50 },
+          % else:
           stickToTopPosition: function() { return vm.isPlayerMode() ? 1 : 73 },
+          % endif
           parentId: 'snippet_' + snippet.id(),
           clonedContainerPosition: "fixed"
         });
@@ -2602,7 +2611,7 @@ ${ hueIcons.symbols() }
 
     var scrollElement = dataTableEl;
     if (vm.editorMode()) {
-      scrollElement = $('.content-panel');
+      scrollElement = $(MAIN_SCROLLABLE);
     }
 
     if (scrollElement.data('scrollFnDtCreation')) {
@@ -3085,7 +3094,7 @@ ${ hueIcons.symbols() }
     var VIEW_MODEL_OPTIONS = $.extend(${ options_json | n,unicode }, {
       user: '${ user.username }',
       userId: ${ user.id },
-      % if is_responsive:
+      % if is_embeddable:
       responsive: true,
       % endif
       assistAvailable: true,
@@ -3254,8 +3263,8 @@ ${ hueIcons.symbols() }
               tableExtender.repositionHeader();
               tableExtender.drawLockedRows();
             }
-            $('.content-panel').data('lastScroll', $('.content-panel').scrollTop());
-            $('.content-panel').trigger('scroll');
+            $(MAIN_SCROLLABLE).data('lastScroll', $(MAIN_SCROLLABLE).scrollTop());
+            $(MAIN_SCROLLABLE).trigger('scroll');
           }
         });
         $(".jHueTableExtenderClonedContainer").show();
@@ -3270,7 +3279,7 @@ ${ hueIcons.symbols() }
         renderer();
       }
 
-      $('.content-panel').jHueScrollUp();
+      $(MAIN_SCROLLABLE).jHueScrollUp();
     };
 
     var splitDraggableTimeout = -1;
@@ -3295,7 +3304,7 @@ ${ hueIcons.symbols() }
     huePubSub.subscribe('detach.scrolls', function (snippet) {
       var scrollElement = $('#snippet_' + snippet.id()).find('.dataTables_wrapper');
       if (viewModel.editorMode()) {
-        scrollElement = $('.content-panel');
+        scrollElement = $(MAIN_SCROLLABLE);
       }
       if (scrollElement.data('scrollFnDt')) {
         scrollElement.off('scroll', scrollElement.data('scrollFnDt'));

+ 2 - 2
desktop/libs/notebook/src/notebook/templates/editor_embeddable.mako

@@ -25,7 +25,7 @@
 <%namespace name="notebookKoComponents" file="notebook_ko_components.mako" />
 
 <span id="editorComponents">
-${ editorComponents.includes(is_responsive=True) }
+${ editorComponents.includes(is_embeddable=True) }
 
 <style type="text/css">
   .snippet {
@@ -40,6 +40,6 @@ ${ configKoComponents.config() }
 ${ notebookKoComponents.downloadSnippetResults() }
 ${ notebookKoComponents.snippetDbSelection() }
 
-${ editorComponents.commonJS(is_responsive=True) }
+${ editorComponents.commonJS(is_embeddable=True) }
 
 </span>