Made sidebar subtags remember collapsed state on refresh, fixes #859 #…

…986
mailpile · Oct 24, 2014 · 55f28be · 55f28be
1 parent 045fac5
commit 55f28be
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 30 deletions.
diff --git a/static/default/html/jsapi/ui/events.js b/static/default/html/jsapi/ui/events.js
@@ -1,7 +1,7 @@
-$(document).on('click', '.icon-tags', function(e) {
+$(document).on('click', '.sidebar-tag-expand', function(e) {
   e.preventDefault();
   var tid = $(this).parent().data('tid');
-  Mailpile.UI.SidebarSubtagsToggle(tid, 'toggle');
+  Mailpile.UI.Sidebar.SubtagsToggle(tid);
 });
 
 

diff --git a/static/default/html/jsapi/ui/sidebar.js b/static/default/html/jsapi/ui/sidebar.js
@@ -1,19 +1,20 @@
-Mailpile.UI.Sidebar.SubtagsToggle = function(tid, state) {
-  $.each($('.subtag-of-' + tid), function(key, item) {
-    if ($(this).css('display') === 'none' && state === 'open') {
-      $(this).removeClass('hide');
-    }
-    else if ($(this).css('display') === 'list-item' && state === 'close') {
-      $(this).addClass('hide');
-    }
-    else if (state === 'toggle') {
-      if ($(this).css('display') === 'none') {
-        $(this).removeClass('hide');
-      }
-      else {
-        $(this).addClass('hide');
-      }
-    }
+Mailpile.UI.Sidebar.SubtagsToggle = function(tid) {
+
+  // Show or Hide
+  if (_.indexOf(Mailpile.config.web.subtags_collapsed, tid) > -1) {
+    $('#sidebar-tag-' + tid).find('a.sidebar-tag-expand span').removeClass('icon-expand').addClass('icon-collapse');
+    $('#sidebar-subtags-' + tid).slideDown();
+    var collapsed = _.without(Mailpile.config.web.subtags_collapsed, tid);
+  } else {
+    $('#sidebar-tag-' + tid).find('a.sidebar-tag-expand span').removeClass('icon-collapse').addClass('icon-expand');
+    $('#sidebar-subtags-' + tid).slideUp();
+    Mailpile.config.web.subtags_collapsed.push(tid);
+    var collapsed = Mailpile.config.web.subtags_collapsed;
+  }
+
+  // Save to Config
+  Mailpile.API.settings_set_post({ 'web.subtags_collapsed': collapsed }, function(result) { 
+    Mailpile.config.web.subtags_collapsed = collapsed;
   });
 };
 

diff --git a/static/default/html/partials/sidebar.html b/static/default/html/partials/sidebar.html
@@ -15,24 +15,35 @@
 {% set tag_new_count = tag.stats.new %}
 {% endif %}
   <a href="{{tag.url}}" class="sidebar-tag color-{{tag.label_color}}{% if tag_new_count %} has_unread{% endif %}" title="{{tag.name}} {{tag.stats.all}}" data-tid="{{tag.tid}}">
-    <span class="sidebar-icon {% if tag.get("subtags") %}icon-tags{% else %}{{tag.icon}}{% endif %}" style="color: {{theme_settings().colors[tag.label_color]}};"></span>
+    <span class="sidebar-icon {{tag.icon}}" style="color: {{theme_settings().colors[tag.label_color]}};"></span>
     <span class="sidebar-name">{{tag.name}}</span> 
     <span class="sidebar-notification">{% if tag_new_count %} {{friendly_number(tag_new_count)}}{% endif %}</span>
   </a>
-</li>
-{% if tag.subtags %}{# Render Subtags #}
-{% for subtag in tag.subtags %}
-<li id="sidebar-tag-{{subtag.tid}}" data-tid="{{subtag.tid}}" data-display_order="{{subtag.display_order}}" class="sidebar-subtag sidebar-tags-draggable subtag-of-{{tag.tid}} hide">
-  <a href="{{subtag.url}}" class="sidebar-tag hide" title="{{subtag.name}} {{subtag.stats.all}}" data-tid="{{subtag.tid}}">
-    <span class="sidebar-icon icon-minus"></span>
-    <span class="sidebar-name">{{subtag.name}}</span> 
-    {% if subtag.stats.new %}
-    <span class="sidebar-notification" id="sidebar-notifications-{{tag.tid}}">{{ friendly_number(subtag.stats.new) }}</span>
+  {% if tag.get("subtags") %}
+  <a href="#" class="sidebar-tag-expand" data-tid="{{tag.tid}}">
+    {% if tag.tid in config.web.subtags_collapsed %}
+    <span class="icon-expand"></span>
+    {% else %}
+    <span class="icon-collapse"></span>
     {% endif %}
   </a>
+  {% endif %}
+  {% if tag.subtags %}
+  <ul id="sidebar-subtags-{{tag.tid}}" class="sidebar-subtags {% if tag.tid in config.web.subtags_collapsed %}hide{% endif %}">
+    {% for subtag in tag.subtags %}
+    <li id="sidebar-tag-{{subtag.tid}}" data-tid="{{subtag.tid}}" data-display_order="{{subtag.display_order}}" class="sidebar-subtag sidebar-tags-draggable subtag-of-{{tag.tid}}">
+      <a href="{{subtag.url}}" class="sidebar-tag hide" title="{{subtag.name}} {{subtag.stats.all}}" data-tid="{{subtag.tid}}">
+        <span class="sidebar-icon {{subtag.icon}}" style="color: {{theme_settings().colors[subtag.label_color]}};"></span>
+        <span class="sidebar-name">{{subtag.name}}</span> 
+        {% if subtag.stats.new %}
+        <span class="sidebar-notification" id="sidebar-notifications-{{tag.tid}}">{{ friendly_number(subtag.stats.new) }}</span>
+        {% endif %}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
 </li>
-{% endfor %}
-{% endif %}
 {%- endmacro %}
 
 <!-- FIXME: make "density" class be pulled from user profile setting -->