From cf77624e3c6a5dc63da68719b5a34047b29c4f6b Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Wed, 17 Sep 2014 17:14:01 +0200
Subject: [PATCH] Mailbox tree fixed.

see #585
---
 .../webmail/static/webmail/css/webmail.css    |  2 +-
 .../webmail/static/webmail/js/webmail.js      | 32 +++++++++++++------
 modoboa/extensions/webmail/views.py           |  4 +--
 modoboa/static/css/custom.css                 |  8 ++---
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/modoboa/extensions/webmail/static/webmail/css/webmail.css b/modoboa/extensions/webmail/static/webmail/css/webmail.css
index fba46bae9..f3b709d82 100644
--- a/modoboa/extensions/webmail/static/webmail/css/webmail.css
+++ b/modoboa/extensions/webmail/static/webmail/css/webmail.css
@@ -94,7 +94,7 @@ body, html {
     /*overflow: auto;*/
 }
 
-.nav-sidebar > li > a {
+.nav-sidebar li > a {
     padding-top: 7px;
     padding-bottom: 7px;
 } 
diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js
index 5825ee9f9..991bbd736 100644
--- a/modoboa/extensions/webmail/static/webmail/js/webmail.js
+++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js
@@ -424,15 +424,17 @@ Webmail.prototype = {
 
     /*
      * Inject new mailboxes under a given parent in the tree.
+     *
+     * $parent must be a <li> node.
      */
     inject_mailboxes: function($parent, mboxes) {
         var $ul = $("<ul />", {
             name: $parent.attr("name"),
-            'class': "hidden nav nav-sidebar"
+            'class': "hidden nav"
         });
         var $plink = $parent.children("a");
 
-        $parent.after($ul);
+        $parent.append($ul);
         if (!$parent.children("div").length) {
             this.inject_clickbox($parent);
         }
@@ -440,7 +442,9 @@ Webmail.prototype = {
             if ($parent.find('li[name="' + mboxes[i].name + '"]').length) {
                 continue;
             }
-            this.inject_mailbox($ul, mboxes[i].name, $plink.attr("name"), mboxes[i].unseen);
+            this.inject_mailbox(
+                $ul, mboxes[i].name, $plink.attr("name"), mboxes[i].unseen
+            );
             if (mboxes[i].sub !== undefined) {
                 this.inject_clickbox($('li[name="' + mboxes[i].name + '"]'));
             }
@@ -449,8 +453,8 @@ Webmail.prototype = {
         this.toggle_mbox_state($parent.children("div"), $ul);
     },
 
-    /*
-     * Download sub-mailboxes from the server
+    /**
+     * Download mailboxes from the server.
      */
     get_mailboxes: function(parent, async) {
         if (async === undefined) {
@@ -460,14 +464,16 @@ Webmail.prototype = {
             url: this.options.submboxes_url,
             dataType: 'json',
             async: async,
-            data: "topmailbox=" + parent.parents("li").attr("name")
+            data: "topmailbox=" + parent.attr("name")
         }).done($.proxy(function(data) {
             this.inject_mailboxes(parent, data);
         }, this));
     },
 
-    /*
-     * Open/Close a mailbox with children
+    /**
+     * Open/Close a mailbox with children.
+     *
+     * This is an internal method.
      */
     toggle_mbox_state: function($div, $ul) {
         if ($ul.hasClass("hidden")) {
@@ -479,10 +485,16 @@ Webmail.prototype = {
         }
     },
 
+    /**
+     * Open or close a mailbox (user triggered).
+     *
+     * The first time it is opened, sub mailboxes will be downloaded
+     * from the server and injected into the tree.
+     */
     mbox_state_callback: function(e) {
         e.preventDefault();
         var $div = $(e.target);
-        var $parent = $div.parent();
+        var $parent = $div.parents("li");
         var $ul = $parent.find('ul[name="' + $parent.attr("name") + '"]');
 
         if (!$ul.length) {
@@ -499,7 +511,7 @@ Webmail.prototype = {
         $("a[name=loadfolder]").parent().removeClass("active").addClass("droppable");
     },
 
-    /*
+    /**
      * Select a particular mailbox (one already present in the DOM)
      */
     select_mailbox: function(obj) {
diff --git a/modoboa/extensions/webmail/views.py b/modoboa/extensions/webmail/views.py
index c2852bb4f..c75360031 100644
--- a/modoboa/extensions/webmail/views.py
+++ b/modoboa/extensions/webmail/views.py
@@ -324,7 +324,7 @@ def render_mboxes_list(request, imapc):
 
 
 def listmailbox(request, defmailbox="INBOX", update_session=True):
-    """Mailbox content listing
+    """Mailbox content listing.
 
     Return a list of messages contained in the specified mailbox. The
     number of elements returned depends on the ``MESSAGES_PER_PAGE``
@@ -351,7 +351,7 @@ def listmailbox(request, defmailbox="INBOX", update_session=True):
             "emails": lst.mbc.fetch(page.id_start, page.id_stop, mbox, nbelems=40)
         })
     else:
-        content = ""
+        content = "<div class='alert alert-info'>%s</div>" % _("Empty mailbox")
     return {"listing": content, "length": len(content)}
     #return lst.render(request, navparams.get('page'))
 
diff --git a/modoboa/static/css/custom.css b/modoboa/static/css/custom.css
index fe80f3429..c98b7f2b8 100644
--- a/modoboa/static/css/custom.css
+++ b/modoboa/static/css/custom.css
@@ -209,7 +209,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
     margin-right: -21px; /* 20px padding + 1px border */
     margin-left: -20px;
 }
-.nav-sidebar > li > a {
+.nav-sidebar li > a {
     padding-right: 20px;
     padding-left: 20px;
 }
@@ -218,9 +218,9 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
     background-color: #eee;
 }
 
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
+.nav-sidebar .active > a,
+.nav-sidebar .active > a:hover,
+.nav-sidebar .active > a:focus {
     color: #fff;
     background-color: #428bca;
 }