Browse Source

[spark] Make the assist panel resizable

This adds resizing to the left panel currently containing the assist panel.
Johan Ahlen 10 years ago
parent
commit
f286d94

+ 14 - 0
apps/spark/src/spark/static/spark/css/spark.css

@@ -43,6 +43,20 @@ body {
   overflow: auto;
 }
 
+.resize {
+  height: 100%;
+  width: 0.5%;
+  cursor: ew-resize;
+  float: left;
+}
+
+.resize-bar {
+  height: 100%;
+  width: 2px;
+  background-color: #F1F1F1;
+  float:left;
+}
+
 .right-panel {
   float: right;
   height: 100%;

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

@@ -750,6 +750,12 @@ 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 - 3
apps/spark/src/spark/templates/editor.mako

@@ -227,17 +227,18 @@ ${ commonheader(_('Query'), 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" data-bind="css: { active: $parent.selectedNotebook() === $data }, template: { name: 'notebook'}">
+      <div class="vertical-full tab-pane row-fluid resize-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(), css:{'span2': $root.isAssistVisible(), 'hidden': !$root.isAssistVisible() }">
+  <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), style: { 'width': $root.leftPanelWidth() + '%' }">
     <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, isAssistVisible: $root.isAssistVisible, isAssistAvailable: $root.isAssistAvailable, totalStorageId: 'sparkAssistVisible' }}"></div>
   </div>
-  <div class="right-panel" data-bind="css:{'span10': $root.isAssistVisible, 'span12 nomargin': ! $root.isAssistVisible()}">
+  <div class="resize" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), draggable: { axis: 'x', limits: { min: 2, max: 98 },horizontalPercent: $root.leftPanelWidth, container: '.resize-container' }"><div class="resize-bar">&nbsp;</div></div>
+  <div class="right-panel" data-bind="style: { 'width': $root.isAssistVisible() ? (99.5 - $root.leftPanelWidth()) + '%' : '100%' }">
     <div>
       <div data-bind="css: {'row-fluid row-container sortable-snippets':true, 'is-editing': $root.isEditing},
         sortable: { template: 'snippet', data: snippets, isEnabled: $root.isEditing,

+ 18 - 9
desktop/core/src/desktop/templates/ko_components.mako

@@ -23,16 +23,18 @@ from django.utils.translation import ugettext as _
 <%def name="assistPanel()">
   <script type="text/html" id="assist-panel-template">
     <div>
-      <div>
+      <div style="position: relative;">
         <ul class="nav nav-list" style="float:left; border: none; padding: 0; background-color: #FFF; margin-bottom: 1px;">
           <li class="nav-header">${_('database')}</li>
         </ul>
-        <a title="${_('Toggle Assist')}" class="pull-right pointer assist-action" data-bind="click: toggleAssist">
-          <i class="fa fa-chevron-left"></i>
-        </a>
-        <a title="${_('Manually refresh the table list')}" rel="tooltip" data-placement="top" class="pull-right pointer assist-action" data-bind="click: reloadAssist">
-          <i class="fa fa-refresh"></i>
-        </a>
+        <div style="position: absolute; right: 0px; background-color: #FFF;">
+          <a title="${_('Toggle Assist')}" class="pull-right pointer assist-action" data-bind="click: toggleAssist">
+            <i class="fa fa-chevron-left"></i>
+          </a>
+          <a title="${_('Manually refresh the table list')}" rel="tooltip" data-placement="top" class="pull-right pointer assist-action" data-bind="click: reloadAssist">
+            <i class="fa fa-refresh"></i>
+          </a>
+        </div>
       </div>
       <!-- ko if: assist.mainObjects().length > 0 -->
       <select data-bind="options: assist.mainObjects, select2: { width: '100%', placeholder: '${ _("Choose a database...") }', update: assist.selectedMainObject}" class="input-medium" data-placeholder="${_('Choose a database...')}"></select>
@@ -40,8 +42,10 @@ from django.utils.translation import ugettext as _
 
       <div data-bind="visible: Object.keys(assist.firstLevelObjects()).length == 0">${_('The selected database has no tables.')}</div>
       <ul data-bind="visible: Object.keys(assist.firstLevelObjects()).length > 0, foreach: assist.filteredFirstLevelObjects()" class="unstyled assist-main">
-        <li data-bind="event: { mouseover: function(){ $('#assistHover_' + $data).show(); }, mouseout: function(){ $('#assistHover_' + $data).hide(); } }">
-          <a href="javascript:void(0)" data-bind="attr: {'id': 'assistHover_' + $data}, click: $parent.showTablePreview" style="float:right; display: none; background-color: #FFF" class="preview-sample"><i class="fa fa-list" title="${'Preview Sample data'}"></i></a>
+        <li data-bind="event: { mouseover: function(){ $('#assistHover_' + $data).show(); }, mouseout: function(){ $('#assistHover_' + $data).hide(); } }" style="position:relative;">
+          <div class="table-actions" data-bind="attr: {'id': 'assistHover_' + $data}" style="position:absolute; right: 0; display: none; padding-left:3px; background-color: #FFF">
+            <a href="javascript:void(0)" data-bind="click: $parent.showTablePreview"  class="preview-sample"><i class="fa fa-list" title="${'Preview Sample data'}"></i></a>
+          </div>
           <a href="javascript:void(0)" data-bind="click: $parent.loadAssistSecondLevel, event: { 'dblclick': function(){ huePubSub.publish('assist.dblClickItem', $data); } }"><span data-bind="text: $data"></span></a>
           <div data-bind="visible: $parent.assist.firstLevelObjects()[$data].loaded() && $parent.assist.firstLevelObjects()[$data].open()">
             <ul data-bind="visible: $parent.assist.firstLevelObjects()[$data].items().length > 0, foreach: $parent.assist.firstLevelObjects()[$data].items()" class="unstyled">
@@ -226,6 +230,11 @@ from django.utils.translation import ugettext as _
           self.isAssistVisible(false);
           self.isAssistAvailable(false);
         }
+
+        var $assistMain = $(".assist-main");
+        $assistMain.scroll(function() {
+          $assistMain.find(".table-actions").css('right', -$assistMain.scrollLeft() + 'px');
+        });
       }
 
       ko.components.register('assist-panel', {