Mailbox tree fixed.

see #585

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;
 } 

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) {

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'))
 

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;
 }