瀏覽代碼

HUE-4609 [editor] Resizing the window should resize also the column list/grid

Enrico Berti 9 年之前
父節點
當前提交
0d0def2
共有 1 個文件被更改,包括 47 次插入32 次删除
  1. 47 32
      desktop/libs/notebook/src/notebook/templates/editor_components.mako

+ 47 - 32
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1704,7 +1704,7 @@ ${ hueIcons.symbols() }
 
       <div class="row-fluid table-results" data-bind="visible: result.type() == 'table'" style="display: none; max-height: 400px; min-height: 260px;">
         <div>
-          <div data-bind="visible: isResultSettingsVisible, css:{'span3 result-settings': isResultSettingsVisible, 'hidden': ! isResultSettingsVisible()}" style="position:relative;white-space: nowrap;">
+          <div class="column-side" data-bind="visible: isResultSettingsVisible, css:{'span3 result-settings': isResultSettingsVisible, 'hidden': ! isResultSettingsVisible()}" style="position:relative;white-space: nowrap;">
             <!-- ko template: { name: 'snippet-grid-settings', if: showGrid } --><!-- /ko -->
             <!-- ko template: { name: 'snippet-chart-settings', if: showChart } --><!-- /ko -->
             <div class="resize-bar" style="top: 0; right: -10px; cursor: col-resize;"></div>
@@ -3298,6 +3298,49 @@ ${ hueIcons.symbols() }
         }
       }
 
+      function resetResultsResizer(snippet) {
+        var span3Width = 23.404255319148934;
+        var span9Width = 74.46808510638297;
+
+        $("#snippet_" + snippet.id()).find('.table-results .column-side').width(span3Width + '%').data('newWidth', span3Width);
+        if (snippet.isResultSettingsVisible()){
+          $("#snippet_" + snippet.id()).find('.table-results .grid-side').data('newWidth', span9Width).width(span9Width + '%');
+        }
+        else {
+          $("#snippet_" + snippet.id()).find('.table-results .grid-side').data('newWidth', 100).width('100%');
+        }
+        $("#snippet_" + snippet.id()).find('.resize-bar').css('left', '');
+        try {
+          $("#snippet_" + snippet.id()).find('.resize-bar').draggable('destroy');
+        }
+        catch (e){}
+
+        var initialPosition = 0;
+
+        $("#snippet_" + snippet.id()).find('.resize-bar').draggable({
+          axis: "x",
+          containment: $("#snippet_" + snippet.id()).find('.table-results'),
+          create: function (event, ui) {
+            initialPosition = $("#snippet_" + snippet.id()).find('.resize-bar').position().left;
+            $("#snippet_" + snippet.id()).find('.table-results .column-side').data('newWidth', span3Width);
+          },
+          drag: function (event, ui) {
+            if (initialPosition == 0){
+              initialPosition = $("#snippet_" + snippet.id()).find('.resize-bar').position().left;
+            }
+            ui.position.left = Math.max(150, ui.position.left);
+            var newSpan3Width = ui.position.left * span3Width / initialPosition;
+            var newSpan9Width = 100 - newSpan3Width - 2.127659574468085;
+            $("#snippet_" + snippet.id()).find('.table-results .column-side').width(newSpan3Width + '%').data('newWidth', newSpan3Width);
+            $("#snippet_" + snippet.id()).find('.table-results .grid-side').width(newSpan9Width + '%').data('newWidth', newSpan9Width);
+            $("#snippet_" + snippet.id()).find('.meta-filter').width($("#snippet_" + snippet.id()).find('.table-results .column-side').width() - 28)
+          },
+          stop: function () {
+            redrawFixedHeaders();
+          }
+        });
+      }
+
       $(document).on("toggleResultSettings", function (e, snippet) {
         window.setTimeout(function () {
           $('#snippet_' + snippet.id()).find('.chart').trigger("forceUpdate");
@@ -3307,7 +3350,7 @@ ${ hueIcons.symbols() }
             scrollInertia: 0
           });
           if (snippet.isResultSettingsVisible()){
-            $("#snippet_" + snippet.id()).find('.table-results .grid-side').width((100 - $("#snippet_" + snippet.id()).find('.table-results .span3').data('newWidth') - 2.127659574468085) + '%');
+            $("#snippet_" + snippet.id()).find('.table-results .grid-side').width((100 - $("#snippet_" + snippet.id()).find('.table-results .column-side').data('newWidth') - 2.127659574468085) + '%');
           }
           else {
             $("#snippet_" + snippet.id()).find('.table-results .grid-side').width('100%');
@@ -3377,36 +3420,7 @@ ${ hueIcons.symbols() }
               options.snippet.result.meta.notifySubscribers();
               $("#snippet_" + options.snippet.id()).find("select").trigger("chosen:updated");
               _dt = createDatatable(_el, options.snippet, viewModel);
-
-              var span3Width = 23.404255319148934;
-              var span9Width = 74.46808510638297;
-              var initialPosition = 0;
-
-              try {
-                $("#snippet_" + options.snippet.id()).find('.resize-bar').draggable('destroy');
-                $("#snippet_" + options.snippet.id()).find('.table-results .span3').width(span3Width + '%').data('newWidth', span3Width);
-                $("#snippet_" + options.snippet.id()).find('.table-results .span9').width(span9Width + '%').data('newWidth', span9Width);
-                $("#snippet_" + options.snippet.id()).find('.resize-bar').css('left', '');
-              }
-              catch (e){}
-
-              $("#snippet_" + options.snippet.id()).find('.resize-bar').draggable({
-                axis: "x",
-                containment: $("#snippet_" + options.snippet.id()).find('.table-results'),
-                create: function (event, ui) {
-                  initialPosition = $("#snippet_" + options.snippet.id()).find('.resize-bar').position().left;
-                  $("#snippet_" + options.snippet.id()).find('.table-results .span3').data('newWidth', span3Width);
-                },
-                drag: function (event, ui) {
-                  ui.position.left = Math.max(150, ui.position.left);
-                  var newSpan3Width = ui.position.left * span3Width / initialPosition;
-                  var newSpan9Width = 100 - newSpan3Width - 2.127659574468085;
-                  $("#snippet_" + options.snippet.id()).find('.table-results .span3').width(newSpan3Width + '%').data('newWidth', newSpan3Width);
-                  $("#snippet_" + options.snippet.id()).find('.table-results .span9').width(newSpan9Width + '%').data('newWidth', newSpan9Width);
-                  $("#snippet_" + options.snippet.id()).find('.meta-filter').width($("#snippet_" + options.snippet.id()).find('.table-results .span3').width() - 28)
-                }
-              });
-
+              resetResultsResizer(options.snippet);
             }
             else {
               _dt = _el.hueDataTable();
@@ -3542,6 +3556,7 @@ ${ hueIcons.symbols() }
                     _dt.fnClearTable();
                     _dt.fnAddData(snippet.result.data());
                     resizeToggleResultSettings(snippet);
+                    resetResultsResizer(snippet);
                     $(document).trigger("forceChartDraw", snippet);
                     window.clearInterval(_elCheckerInterval);
                   }