Преглед изворни кода

[spark] Use pixel widths and positioning for the panels

Johan Ahlen пре 10 година
родитељ
комит
a12d006

+ 10 - 6
apps/spark/src/spark/static/spark/css/spark.css

@@ -37,28 +37,32 @@ body {
   bottom: 0;
 }
 
+.panel-container {
+  position: relative;
+}
+
 .left-panel {
-  float: left;
+  position: absolute;
   height: 100%;
   overflow: auto;
 }
 
-.resize {
+.resizer {
+  position: absolute;
   height: 100%;
-  width: 0.5%;
+  width: 2px;
   cursor: ew-resize;
-  float: left;
 }
 
 .resize-bar {
+  position: absolute;
   height: 100%;
   width: 2px;
   background-color: #F1F1F1;
-  float:left;
 }
 
 .right-panel {
-  float: right;
+  position: absolute;
   height: 100%;
   overflow: auto;
 }

+ 0 - 6
apps/spark/src/spark/static/spark/js/spark.ko.js

@@ -750,12 +750,6 @@ function EditorViewModel(notebooks, options) {
 
   self.isAssistVisible = ko.observable(false);
 
-  self.leftPanelWidth = ko.observable($.totalStorage('sparkLeftPanelWidth') != null ? $.totalStorage('sparkLeftPanelWidth') : 20);
-
-  self.leftPanelWidth.subscribe(function(newValue) {
-    $.totalStorage('sparkLeftPanelWidth', newValue);
-  });
-
   self.assistContent = ko.observable();
   self.assistSelectedMainObject = ko.observable();
 

+ 4 - 4
apps/spark/src/spark/templates/editor.mako

@@ -227,18 +227,18 @@ ${ commonheader(_('Editor'), app_name, user, "68px") | n,unicode }
 <div class="main-content">
   <div class="vertical-full container-fluid">
     <div class="vertical-full tab-content" data-bind="foreach: notebooks">
-      <div class="vertical-full tab-pane row-fluid resize-container" data-bind="css: { active: $parent.selectedNotebook() === $data }, template: { name: 'notebook'}">
+      <div class="vertical-full tab-pane row-fluid panel-container" data-bind="css: { active: $parent.selectedNotebook() === $data }, template: { name: 'notebook'}">
       </div>
     </div>
   </div>
 </div>
 
 <script type="text/html" id="notebook">
-  <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), style: { 'width': $root.leftPanelWidth() + '%' }">
+  <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="resize" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), splitDraggable: { axis: 'x', limits: { min: 2, max: 98 },horizontalPercent: $root.leftPanelWidth, container: '.resize-container', onStop: function(){ window.setTimeout(redrawFixedHeaders, 100); } }"><div class="resize-bar">&nbsp;</div></div>
-  <div class="right-panel" data-bind="style: { 'width': $root.isAssistVisible() ? (99.5 - $root.leftPanelWidth()) + '%' : '100%' }">
+  <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="right-panel">
     <div>
       <div data-bind="css: {'row-fluid row-container sortable-snippets':true, 'is-editing': $root.isEditing},
         sortable: { template: 'snippet', data: snippets, isEnabled: $root.isEditing,

+ 4 - 4
apps/spark/src/spark/templates/notebook.mako

@@ -227,18 +227,18 @@ ${ commonheader(_('Notebook'), app_name, user, "68px") | n,unicode }
 <div class="main-content">
   <div class="vertical-full container-fluid">
     <div class="vertical-full tab-content" data-bind="foreach: notebooks">
-      <div class="vertical-full tab-pane row-fluid resize-container" data-bind="css: { active: $parent.selectedNotebook() === $data }, template: { name: 'notebook'}">
+      <div class="vertical-full tab-pane row-fluid panel-container" data-bind="css: { active: $parent.selectedNotebook() === $data }, template: { name: 'notebook'}">
       </div>
     </div>
   </div>
 </div>
 
 <script type="text/html" id="notebook">
-  <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), style: { 'width': $root.leftPanelWidth() + '%' }">
+  <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="resize" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), splitDraggable: { axis: 'x', limits: { min: 2, max: 98 },horizontalPercent: $root.leftPanelWidth, container: '.resize-container', onStop: function(){ window.setTimeout(redrawFixedHeaders, 100); } }"><div class="resize-bar">&nbsp;</div></div>
-  <div class="right-panel" data-bind="style: { 'width': $root.isAssistVisible() ? (99.5 - $root.leftPanelWidth()) + '%' : '100%' }">
+  <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="right-panel">
     <div>
       <div data-bind="css: {'row-fluid row-container sortable-snippets':true, 'is-editing': $root.isEditing},
         sortable: { template: 'snippet', data: snippets, isEnabled: $root.isEditing,