Browse Source

[spark] Keep left panel fixed on resize

This change also sets the initial width to 200px instead of 25%.
Johan Ahlen 10 years ago
parent
commit
a16ba45

+ 1 - 1
apps/beeswax/src/beeswax/templates/execute.mako

@@ -201,7 +201,7 @@ ${layout.menubar(section='query')}
       </div>
     </div>
   </div>
-  <div class="resizer" data-bind="splitDraggable : { totalStorageRatioId: 'beeswaxLeftPanelRatio', onPosition: onPanelPosition }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
+  <div class="resizer" data-bind="splitDraggable : { appName: 'beeswax', onPosition: onPanelPosition }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
   <div class="right-panel" id="querySide">
     <div class="alert" data-bind="visible: design.isRedacted">
       ${ _('This query had some sensitive information removed when saved.') }

+ 1 - 1
apps/rdbms/src/rdbms/templates/execute.mako

@@ -66,7 +66,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
 
 
       </div>
-      <div class="resizer" data-bind="splitDraggable : { totalStorageRatioId: 'beeswaxLeftPanelRatio' }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
+      <div class="resizer" data-bind="splitDraggable : { appName: 'rdbms' }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
       <div class="right-panel">
         <div id="query">
           <div class="card card-small">

+ 1 - 1
apps/spark/src/spark/templates/editor_components.mako

@@ -221,7 +221,7 @@ from django.utils.translation import ugettext as _
   <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable()">
     <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, isAssistVisible: $root.isAssistVisible, isAssistAvailable: $root.isAssistAvailable, totalStorageId: 'sparkAssistVisible' }}"></div>
   </div>
-  <div class="resizer" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), splitDraggable : { totalStorageRatioId: 'sparkLeftPanelRatio', leftPanelVisible: $root.isAssistVisible }"><div class="resize-bar">&nbsp;</div></div>
+  <div class="resizer" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), splitDraggable : { appName: 'spark', leftPanelVisible: $root.isAssistVisible }"><div class="resize-bar">&nbsp;</div></div>
   <div class="right-panel">
     <div>
       <div data-bind="css: {'row-fluid row-container sortable-snippets':true, 'is-editing': $root.isEditing},

+ 4 - 5
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -647,7 +647,7 @@ ko.bindingHandlers.daterangepicker = {
 ko.bindingHandlers.splitDraggable = {
   init: function (element, valueAccessor) {
     var options = ko.unwrap(valueAccessor());
-    var leftPanelRatio = $.totalStorage(options.totalStorageRatioId) != null ? $.totalStorage(options.totalStorageRatioId) : 0.25;
+    var leftPanelWidth = $.totalStorage(options.appName + "_left_panel_width") != null ? $.totalStorage(options.appName + "_left_panel_width") : 200;
 
     var containerSelector = options.containerSelector || ".panel-container";
     var leftPanelSelector = options.leftPanelSelector || ".left-panel";
@@ -666,7 +666,7 @@ ko.bindingHandlers.splitDraggable = {
         $rightPanel.css("left", "0");
       } else {
         var totalWidth = $container.width();
-        var leftPanelWidth = Math.round(totalWidth * leftPanelRatio);
+        leftPanelWidth = Math.min(leftPanelWidth, totalWidth - 100);
         var rightPanelWidth = totalWidth - leftPanelWidth - $resizer.width();
         $leftPanel.css("width", leftPanelWidth + "px");
         $rightPanel.css("width", rightPanelWidth + "px");
@@ -689,6 +689,7 @@ ko.bindingHandlers.splitDraggable = {
 
         dragTimeout = window.setTimeout(function () {
           $leftPanel.css("width", ui.position.left + "px");
+          leftPanelWidth = ui.position.left;
           $rightPanel.css("width", $container.width() - ui.position.left - $resizer.width() + "px");
           $rightPanel.css("left", ui.position.left + $resizer.width());
           onPosition();
@@ -696,9 +697,7 @@ ko.bindingHandlers.splitDraggable = {
 
       },
       stop: function () {
-        var totalWidth = $leftPanel.width() + $resizer.width() + $rightPanel.width();
-        leftPanelRatio = $leftPanel.width() / totalWidth;
-        $.totalStorage(options.totalStorageRatioId, leftPanelRatio);
+        $.totalStorage(options.appName + "_left_panel_width", leftPanelWidth);
         positionPanels();
       }
     });