瀏覽代碼

[search] Improved loading UX of collection manager

Enrico Berti 12 年之前
父節點
當前提交
c25f8db0ee
共有 2 個文件被更改,包括 9 次插入10 次删除
  1. 6 9
      apps/search/src/search/templates/admin_collections.mako
  2. 3 1
      apps/search/static/js/search.ko.js

+ 6 - 9
apps/search/src/search/templates/admin_collections.mako

@@ -46,23 +46,20 @@ ${ commonheader(_('Search'), "search", user, "40px") | n,unicode }
     </%def>
   </%actionbar:render>
 
-  <div class="row-fluid" data-bind="visible: collections().length == 0">
+  <div class="row-fluid" data-bind="visible: collections().length == 0 && !isLoading()">
     <div class="span10 offset1 center">
-
       <i class="icon-plus-sign waiting"></i>
       <h1 class="emptyMessage">${ _('There are currently no collections defined.') }<br/>${ _('Please click on Import to add one or more.') }</h1>
-
+    </div>
+  </div>
+  <div class="row-fluid" data-bind="visible: isLoading()">
+    <div class="span10 offset1 center">
+      <i class="icon-spinner icon-spin" style="font-size: 60px; color: #DDD"></i>
     </div>
   </div>
   <div class="row-fluid">
     <div class="span12">
       <ul id="collections" data-bind="template: {name: 'collectionTemplate', foreach: filteredCollections}">
-##      % for collection in existing_hue_collections:
-##        <li style="cursor: move" data-collection="${ collection.name }">
-##          <a href="${ collection.get_absolute_url() }" class="pull-right" style="margin-top: 10px;margin-right: 10px"><i class="icon-edit"></i> ${_('Edit')}</a>
-##          <h4><i class="icon-list"></i> ${ collection.name } - ${ collection.is_core_only } -- ${ collection.label } == ${ collection.id }</h4>
-##        </li>
-##      % endfor
       </ul>
     </div>
   </div>

+ 3 - 1
apps/search/static/js/search.ko.js

@@ -54,7 +54,7 @@ var SearchCollectionsModel = function (props) {
   self.DELETE_URL = props.deleteUrl;
   self.COPY_URL = props.copyUrl;
 
-  self.isLoading = ko.observable(false);
+  self.isLoading = ko.observable(true);
   self.isLoadingImportables = ko.observable(false);
   self.allSelected = ko.observable(false);
 
@@ -129,12 +129,14 @@ var SearchCollectionsModel = function (props) {
   };
 
   self.updateCollections = function () {
+    self.isLoading(true);
     $.getJSON(self.LIST_COLLECTIONS_URL, function (data) {
       self.collections(ko.utils.arrayMap(data, function (coll) {
         return new Collection(coll);
       }));
       self.filteredCollections(self.collections());
       $(document).trigger("collectionsRefreshed");
+      self.isLoading(false);
     });
   };