瀏覽代碼

[spark] Move left panel toggle out of assist component

As the layout is controlled from the page it doesn't make sense that the assist component should be involved. For the notebook this has been fine as the assist is the only contents of the left panel but for apps like beeswax there's other stuff there as well, so this change will also make it easier to replace the beeswax assist with this component later.

The icon is now placed in the upper right corner of the left panel instead of next to the database header as before.
Johan Ahlen 10 年之前
父節點
當前提交
0e02a58

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

@@ -242,6 +242,7 @@ body {
 }
 
 .assist {
+  margin-top: 2px;
   padding: 8px;
 }
 
@@ -293,7 +294,7 @@ body {
 .assist-action {
   margin-left: 3px;
   opacity:0;
-  transition: opacity 0.4s linear;
+  transition: opacity 0.2s linear;
 }
 
 .assist-container:hover .assist-action {
@@ -316,12 +317,20 @@ body {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   z-index: 1000;
+  transition: margin-left 0.2s linear;
 }
 
 .show-assist:hover {
   margin-left: 0;
 }
 
+.hide-assist {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  z-index: 1000;
+}
+
 .logs {
   padding: 3px;
   font-size: 11px;

+ 5 - 2
apps/spark/src/spark/static/spark/js/spark.ko.js

@@ -765,9 +765,12 @@ function EditorViewModel(notebooks, options) {
     self.isEditing(!self.isEditing());
   };
 
-  self.isAssistAvailable = ko.observable(true);
+  self.isAssistVisible = ko.observable($.totalStorage('spark_assist_visible') != null && $.totalStorage('spark_assist_visible'));
+
+  self.isAssistVisible.subscribe(function(newValue) {
+    $.totalStorage('spark_assist_visible', newValue);
+  });
 
-  self.isAssistVisible = ko.observable(false);
 
   self.assistContent = ko.observable();
   self.assistSelectedMainObject = ko.observable();

+ 7 - 4
apps/spark/src/spark/templates/editor_components.mako

@@ -203,7 +203,7 @@ from django.utils.translation import ugettext as _
 </div>
 
 
-<a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isAssistVisible() && $root.isAssistAvailable(), click: function() { $root.isAssistVisible(! $root.isAssistVisible()) }">
+<a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isAssistVisible(), click: function() { $root.isAssistVisible(true) }">
   <i class="fa fa-chevron-right"></i>
 </a>
 
@@ -218,10 +218,13 @@ from django.utils.translation import ugettext as _
 </div>
 
 <script type="text/html" id="notebook">
-  <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, appName: 'spark' }}"></div>
+  <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible()">
+    <a title="${_('Toggle Assist')}" class="pointer assist-action hide-assist" data-bind="click: function() { $root.isAssistVisible(false) }">
+      <i class="fa fa-chevron-left"></i>
+    </a>
+    <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, appName: 'spark' }}"></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="resizer" data-bind="visible: $root.isAssistVisible(), 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},

+ 0 - 16
desktop/core/src/desktop/templates/ko_components.mako

@@ -74,7 +74,6 @@ from django.utils.translation import ugettext as _
     <div style="position: relative;">
       <ul class="nav nav-list" style="float:left; border: none; padding: 0; background-color: #FFF; margin-bottom: 1px; width: 100%;">
         <li class="nav-header">${_('database')}
-          <i title="${_('Toggle Assist')}" class="pull-right pointer assist-action fa fa-chevron-left" data-bind="click: toggleAssist"></i>
           <i title="${_('Manually refresh the table list')}" class="pull-right pointer assist-action fa fa-refresh" data-bind="click: reloadAssist"></i>
         </li>
         <!-- ko if: assist.mainObjects().length > 0 -->
@@ -141,20 +140,8 @@ from django.utils.translation import ugettext as _
 
         self.assist = params.assist;
 
-        self.isAssistVisible = params.isAssistVisible;
-        self.isAssistAvailable = params.isAssistAvailable;
         self.isSearchVisible = ko.observable(false);
 
-        self.isAssistVisible($.totalStorage(params.appName + '_assist_visible') != null && $.totalStorage(params.appName + '_assist_visible'));
-
-        self.isAssistVisible.subscribe(function(newValue) {
-          $.totalStorage(params.appName + '_assist_visible', newValue);
-        });
-
-        self.toggleAssist = function () {
-          self.isAssistVisible(!self.isAssistVisible());
-        };
-
         self.toggleSearch = function () {
           self.isSearchVisible(!self.isSearchVisible());
         };
@@ -289,9 +276,6 @@ from django.utils.translation import ugettext as _
 
         if (self.assist.options.baseURL != ""){
           self.loadAssistMain();
-        } else {
-          self.isAssistVisible(false);
-          self.isAssistAvailable(false);
         }
 
         var $assistMain = $(".assist-tables");