wip: UI refactoring

* Webmail: better message display.
* Webmail: added optional Cc and Cci fields.

see #204

extensions/webmail/forms.py

@@ -5,6 +5,7 @@ class ComposeMailForm(forms.Form):
     from_ = forms.CharField(label=_("From"))
     to = forms.CharField(label=_("To"))
     cc = forms.CharField(label=_("Cc"), required=False)
+    cci = forms.CharField(label=_("Cci"), required=False)
     subject = forms.CharField(label=_("Subject"), max_length=255, required=False)
 
     origmsgid = forms.CharField(label="", widget=forms.HiddenInput(), required=False)

extensions/webmail/lib.py

@@ -601,6 +601,9 @@ def send_mail(request, posturl=None):
 
         body = request.POST["id_body"]
         charset = "utf-8"
+
+        print body
+
         if editormode == "html":
             msg = MIMEMultipart(_subtype="related")
             submsg = MIMEMultipart(_subtype="alternative")
@@ -639,9 +642,10 @@ def send_mail(request, posturl=None):
         if form.cleaned_data.has_key("origmsgid"):
             msg["References"] = msg["In-Reply-To"] = form.cleaned_data["origmsgid"]
         rcpts = msg['To'].split(',')
-        if form.cleaned_data["cc"] != "":
-            msg["Cc"] = form.cleaned_data["cc"]
-            rcpts += msg["Cc"].split(",")
+        for hdr in ["cc", "cci"]:
+            if form.cleaned_data[hdr] != "":
+                msg[hdr.capitalize()] = form.cleaned_data[hdr]
+                rcpts += msg[hdr.capitalize()].split(",")
 
         try:
             secmode = parameters.get_admin("SMTP_SECURED_MODE")

extensions/webmail/static/css/webmail.css

@@ -3,15 +3,6 @@ body, html {
     height: 100%;
 }
 
-#leftcol { 
-    /*position: fixed;
-    top: 60px;
-    left: 0;
-    width: 200px;
-    padding-left: 15px;
-    overflow: hidden;*/
-}
-
 #folders {
     position: fixed;
     top: 60px;
@@ -28,7 +19,9 @@ body, html {
 #menubar { 
     position: fixed;
     left: 215px;
+    right: 0;
     padding-left: 15px;
+    padding-right: 15px;
 }
 
 #listing { 
@@ -120,6 +113,14 @@ div.expanded {
     text-align: left;
 }
 
+#mailheader .options {
+    margin-left: 160px;
+}
+
+#add_cc {
+    margin-right: 20px;
+}
+
 #attachments {
     position: relative;
     margin: 1px 0 5px 0;

extensions/webmail/static/js/webmail.js

@@ -675,13 +675,14 @@ Webmail.prototype = {
     sendmail: function(e) {
         var $link = $(e.target);
         var $form = $("#composemail");
-        var args = $form.serialize();
 
         e.preventDefault();
         $link.attr("disabled", "disabled");
         if (this.editormode == "html") {
             CKEDITOR.instances[this.editorid].updateElement();
         }
+        var args = $form.serialize();
+
         $.ajax({
             url: $form.attr("action"),
             data: args,
@@ -696,6 +697,7 @@ Webmail.prototype = {
      */
     viewmail_loader: function(e) {
         var $tr = $(e.target).parent();
+        var curmb = this.get_current_mailbox();
 
         e.preventDefault();
         if ($tr.hasClass("unseen")) {
@@ -704,6 +706,7 @@ Webmail.prototype = {
         }
         this.navobject.reset().setparams({
             action: "viewmail",
+            mbox: curmb,
             mailid: $tr.attr("id")
         }).update();
     },
@@ -745,8 +748,20 @@ Webmail.prototype = {
             $("#body_container").outerHeight(true));
     },
 
+    add_field: function(e, name) {
+        e.preventDefault();
+        $("label[for=id_" + name + "]").parent().show();
+        $(e.target).hide();
+        this.position_body();
+        if (this.editormode == "html") {
+            this.resize_editor();
+        }
+    },
+
     compose_callback: function(resp) {
         this.page_update(resp);
+        $("#add_cc").click($.proxy(function(e) { this.add_field(e, "cc"); }, this));
+        $("#add_cci").click($.proxy(function(e) { this.add_field(e, "cci"); }, this));
         this.editormode = resp.editor;
         if (resp.editor == "html") {
             var instance = CKEDITOR.instances[this.editorid];
@@ -796,6 +811,13 @@ Webmail.prototype = {
     viewmail_callback: function(resp) {
         this.page_update(resp);
         $("#listing").css("overflow", "hidden");
+        $("a[name=close]").click($.proxy(function(e) {
+            e.preventDefault();
+            var curmb = this.get_current_mailbox();
+            this.navobject.delparam("mailid")
+                .setparams({action: "listmailbox", name: curmb})
+                .update();
+        }, this));
     },
 
     mark_callback: function(data) {

extensions/webmail/templates/webmail/compose.html

@@ -2,7 +2,14 @@
 <form class="form-horizontal" method="POST" action="{{ posturl }}" id="composemail">
   <div id="compose-container">
     <div id="mailheader" class="well">
-      {% render_form form %}
+      {% render_field form.from_ %}
+      <div class="options">
+        <a id="add_cc" href="#">{% trans "Add Cc field" %}</a> <a id="add_cci" href="#">{% trans "Add Cci field" %}</a>
+      </div>
+      {% render_field form.to %}
+      {% render_and_hide_field form.cc %}
+      {% render_and_hide_field form.cci %}
+      {% render_field form.subject %}
       <div id="attachments" name="{% url modoboa.extensions.webmail.views.attachments %}">
         <div>
           <img src="{{ MEDIA_URL }}pics/attachment.png" />

extensions/webmail/templatetags/webextras.py

@@ -15,10 +15,6 @@ register = template.Library()
 @register.simple_tag
 def viewmail_menu(selection, folder, user, mail_id=None):   
     entries = [
-        {"name" : "back",
-         "url" : "javascript:history.go(-1);",
-         "img" : "icon-arrow-left",
-         "label" : _("Back")},
         {"name" : "reply",
          "url" : "action=reply&mbox=%s&mailid=%s" % (folder, mail_id),
          "img" : "icon-share",
@@ -45,10 +41,17 @@ def viewmail_menu(selection, folder, user, mail_id=None):
                 ]
          }
         ]
-    
-    return render_to_string('common/buttons_list.html', 
+    menu = render_to_string('common/buttons_list.html', 
                             {"selection" : selection, "entries" : entries, 
-                             "user" : user})
+                             "user" : user, "extraclasses" : "pull-left"})
+
+    entries = [{"name" : "close",
+                "title" : _("Close this message"),
+                "img" : "icon-remove"}]
+    menu += render_to_string('common/buttons_list.html', 
+                             {"entries" : entries, "extraclasses" : "pull-right"})
+
+    return menu
 
 @register.simple_tag
 def compose_menu(selection, backurl, user):

extensions/webmail/views.py

@@ -410,8 +410,9 @@ def getmailcontent(request):
             })
 
 def viewmail(request):
+    mbox = request.GET.get("mbox", None)
     mailid = request.GET.get("mailid", None)
-    if mailid is None:
+    if mbox is None or mailid is None:
         raise WebmailError(_("Invalid request"))
     links = request.GET.get("links", None)
     if links is None:
@@ -420,7 +421,7 @@ def viewmail(request):
         links = int(links)
 
     url = reverse(getmailcontent) + "?mbox=%s&mailid=%s&links=%d" % \
-        (request.session["mbox"], mailid, links)
+        (mbox, mailid, links)
     content = Template("""
 <iframe src="{{ url }}" id="mailcontent"></iframe>
 """).render(Context({"url" : url}))

lib/templatetags/libextras.py

@@ -99,6 +99,12 @@ def render_field(field):
             field=field
             ))
 
+@register.simple_tag
+def render_and_hide_field(field):
+    return render_to_string("common/generic_field.html", dict(
+            field=field, hidden=True
+            ))
+
 @register.simple_tag
 def render_fields_group(form, pattern):
     from django.forms import forms

templates/common/generic_field.html

@@ -1,4 +1,4 @@
-<div class="control-group {% if field.errors %}error{% endif %}">
+<div class="control-group {% if field.errors %}error{% endif %}"{% if hidden %}style="display: none"{% endif %}>
   {% if field.label %}<label class="control-label" for="id_{{ field.html_name }}">{{ field.label }}</label>{% endif %}
   <div class="controls spaced">
     {{ field }}{% if field.errors %}<p class="help-block">{% for error in field.errors %}{{ error|safe }}{% endfor %}</p>{% endif %}