From ebbe8625562606c66956389cade7d8977cf7677b Mon Sep 17 00:00:00 2001 From: Antoine Nguyen Date: Wed, 17 Sep 2014 13:19:33 +0200 Subject: [PATCH] Webmail design update and new icon set (font awesome). --- .../amavis/templatetags/amavis_tags.py | 8 +- modoboa/extensions/webmail/forms.py | 9 + modoboa/extensions/webmail/lib/imapemail.py | 12 +- modoboa/extensions/webmail/lib/imaputils.py | 10 +- .../webmail/static/webmail/css/webmail.css | 66 +- .../webmail/static/webmail/js/webmail.js | 87 +- .../templates/webmail/attachments.html | 26 +- .../webmail/templates/webmail/compose.html | 45 +- .../templates/webmail/compose_menubar.html | 13 + .../webmail/templates/webmail/email_list.html | 10 +- .../webmail/templates/webmail/index.html | 5 +- .../webmail/templatetags/webmail_tags.py | 79 +- modoboa/extensions/webmail/views.py | 31 +- modoboa/lib/templatetags/form_tags.py | 7 +- modoboa/static/css/custom.css | 6 +- .../css/font-awesome/css/font-awesome.css | 1672 +++++++++++++++++ .../css/font-awesome/css/font-awesome.min.css | 4 + .../css/font-awesome/fonts/FontAwesome.otf | Bin 0 -> 85908 bytes .../fonts/fontawesome-webfont.eot | Bin 0 -> 56006 bytes .../fonts/fontawesome-webfont.svg | 520 +++++ .../fonts/fontawesome-webfont.ttf | Bin 0 -> 112160 bytes .../fonts/fontawesome-webfont.woff | Bin 0 -> 65452 bytes modoboa/static/js/editor_config.js | 3 +- modoboa/templates/common/buttons_list.html | 21 +- modoboa/templates/common/email_searchbar.html | 2 +- modoboa/templates/common/generic_field.html | 2 +- modoboa/templates/common/menulist.html | 3 +- modoboa/templates/nlayout.html | 1 + 28 files changed, 2419 insertions(+), 223 deletions(-) create mode 100644 modoboa/extensions/webmail/templates/webmail/compose_menubar.html create mode 100644 modoboa/static/css/font-awesome/css/font-awesome.css create mode 100644 modoboa/static/css/font-awesome/css/font-awesome.min.css create mode 100644 modoboa/static/css/font-awesome/fonts/FontAwesome.otf create mode 100644 modoboa/static/css/font-awesome/fonts/fontawesome-webfont.eot create mode 100644 modoboa/static/css/font-awesome/fonts/fontawesome-webfont.svg create mode 100644 modoboa/static/css/font-awesome/fonts/fontawesome-webfont.ttf create mode 100644 modoboa/static/css/font-awesome/fonts/fontawesome-webfont.woff diff --git a/modoboa/extensions/amavis/templatetags/amavis_tags.py b/modoboa/extensions/amavis/templatetags/amavis_tags.py index 9426a7897..0688b1154 100644 --- a/modoboa/extensions/amavis/templatetags/amavis_tags.py +++ b/modoboa/extensions/amavis/templatetags/amavis_tags.py @@ -12,10 +12,10 @@ register = template.Library() def viewm_menu(mail_id, rcpt): entries = [ {"name": "back", - "url": "javascript:history.go(-2);", - "img": "glyphicon glyphicon-arrow-left", - "class": "btn-primary", - "label": _("Back")}, + "url": "javascript:history.go(-2);", + "img": "glyphicon glyphicon-arrow-left", + "class": "btn-primary", + "label": _("Back")}, {"name": "release", "img": "glyphicon glyphicon-ok", "class": "btn-success", diff --git a/modoboa/extensions/webmail/forms.py b/modoboa/extensions/webmail/forms.py index cb329c9f4..0b88de9b9 100644 --- a/modoboa/extensions/webmail/forms.py +++ b/modoboa/extensions/webmail/forms.py @@ -91,6 +91,15 @@ class ComposeMailForm(forms.Form): origmsgid = forms.CharField(label="", required=False) body = forms.CharField() + def __init__(self, *args, **kwargs): + """Custom constructor.""" + super(ComposeMailForm, self).__init__(*args, **kwargs) + self.field_widths = { + "cc": "11", + "cci": "11", + "subject": "11" + } + def _html_msg(self): """Create a multipart message. diff --git a/modoboa/extensions/webmail/lib/imapemail.py b/modoboa/extensions/webmail/lib/imapemail.py index b087e4f6e..dcdb34b9e 100644 --- a/modoboa/extensions/webmail/lib/imapemail.py +++ b/modoboa/extensions/webmail/lib/imapemail.py @@ -20,9 +20,11 @@ from .utils import decode_payload class ImapEmail(Email): + """ A class to represent an email fetched from an IMAP server. """ + headernames = [ ('From', True), ('To', True), @@ -206,6 +208,9 @@ class ImapEmail(Email): class Modifier(ImapEmail): + + """Message modifier.""" + def __init__(self, form, *args, **kwargs): kwargs["dformat"] = "EDITOR" super(Modifier, self).__init__(*args, **kwargs) @@ -216,7 +221,9 @@ class Modifier(ImapEmail): self.body = re.sub("", "", self.body) def _modify_html(self): - pass + if self.dformat == "html" and self.mformat != self.dformat: + self.body = re.sub("", "", self.body) + self.body = re.sub("\n", "
", self.body) @property def subject(self): @@ -225,6 +232,9 @@ class Modifier(ImapEmail): class ReplyModifier(Modifier): + + """Modify a message to reply to it.""" + headernames = ImapEmail.headernames + \ [("Reply-To", True), ("Message-ID", False)] diff --git a/modoboa/extensions/webmail/lib/imaputils.py b/modoboa/extensions/webmail/lib/imaputils.py index 0a306dd74..5b4447f8c 100644 --- a/modoboa/extensions/webmail/lib/imaputils.py +++ b/modoboa/extensions/webmail/lib/imaputils.py @@ -473,14 +473,14 @@ class IMAPconnector(object): md_mailboxes = [] else: md_mailboxes = [ - {"name": "INBOX", "class": "glyphicon glyphicon-inbox"}, + {"name": "INBOX", "class": "fa fa-inbox"}, {"name": parameters.get_user(user, "DRAFTS_FOLDER"), - "class": "glyphicon glyphicon-file"}, - {"name": 'Junk', "class": "glyphicon glyphicon-fire"}, + "class": "fa fa-file"}, + {"name": 'Junk', "class": "fa fa-fire"}, {"name": parameters.get_user(user, "SENT_FOLDER"), - "class": "glyphicon glyphicon-envelope"}, + "class": "fa fa-envelope"}, {"name": parameters.get_user(user, "TRASH_FOLDER"), - "class": "glyphicon glyphicon-trash"} + "class": "fa fa-trash"} ] if until_mailbox: name, parent = separate_mailbox(until_mailbox, self.hdelimiter) diff --git a/modoboa/extensions/webmail/static/webmail/css/webmail.css b/modoboa/extensions/webmail/static/webmail/css/webmail.css index 59cace3c2..fba46bae9 100644 --- a/modoboa/extensions/webmail/static/webmail/css/webmail.css +++ b/modoboa/extensions/webmail/static/webmail/css/webmail.css @@ -9,62 +9,28 @@ padding-right: 15px; } -td[name=drag], td[name=selection] { - width: 1%; -} - @media (max-width: 400px) { - td#subject, - td[name='subject'] - { - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + } @media (max-width: 500px) { - th#date, - td[name="date"], - #menubar .actions { - display: none; - } + } @media (max-width: 768px) { #searchbox { margin-left: 20px; } - - td[name=from] { - width: 35%; - } } @media (min-width: 768px) { - td[name=from] { - width: 25%; - } + } @media (max-width: 1198px) { .container-fluid { padding:0; } - th#date, - td[name="date"]{ - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - th#withatts, - td[name="withatts"], - th#drag, - td[name="drag"] { - display: none; - } .display-up-1198-webmail { display: none; @@ -152,10 +118,6 @@ body, html { font-weight: bold; } -td[name="date"] { - text-align: right; -} - #left-toolbar { position: absolute; width: 100%; @@ -244,24 +206,14 @@ li.droppable li{ padding-bottom: 5px; } -#mailheader textarea { - width: 99%; - height: 40px; - padding: 2px 0; +#mailheader label { + text-align: left; } -/* #mailheader label { */ -/* text-align: left; */ -/* } */ - #mailheader .options { margin-bottom: 8px; } -#add_cc { - margin-right: 20px; -} - #attachments { position: relative; margin: 1px 0 5px 0; @@ -311,19 +263,13 @@ list { float: left; } -.shortlist { - font-weight: normal !important; - font-style: italic; -} - /* * Drap & Drop */ .dragbox { padding : 5px; text-align : center; - background : white; - z-index : 3; + z-index : 1001; } /* diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js index 683ee4cc4..5825ee9f9 100644 --- a/modoboa/extensions/webmail/static/webmail/js/webmail.js +++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js @@ -150,8 +150,8 @@ Webmail.prototype = { $(document).on("click", "a[name=sendmail]", $.proxy(this.sendmail, this)); - $(document).on("click", "#attachments", $.proxy(function(e) { - modalbox(e, undefined, $("#attachments").attr("name"), + $(document).on("click", "a[name=attachments]", $.proxy(function(e) { + modalbox(e, undefined, $("a[name=attachments]").attr("href"), $.proxy(this.attachments_init, this)); }, this)); }, @@ -340,7 +340,7 @@ Webmail.prototype = { var $link = $('a[href="' + mailbox + '"]'); var parts = mailbox.split(this.options.hdelimiter); var dname = " " + parts[parts.length - 1]; - var $i = $link.children("i:visible"); + var $span = $link.children("span:visible"); this.unseen_counters[mailbox] = value; if (value) { @@ -350,7 +350,7 @@ Webmail.prototype = { $link.html(dname); $link.removeClass("unseen"); } - $link.prepend($i); + $link.prepend($span); }, /* @@ -403,11 +403,10 @@ Webmail.prototype = { }); var $link = $("", { name: linkname, - 'class': "block", href: mailbox }); var parts = mailbox.split(this.options.hdelimiter); - var linkcontent = " "; + var linkcontent = " "; var displayname = linkcontent + parts[parts.length - 1]; $li.append($link); @@ -433,7 +432,7 @@ Webmail.prototype = { }); var $plink = $parent.children("a"); - $parent.append($ul); + $parent.after($ul); if (!$parent.children("div").length) { this.inject_clickbox($parent); } @@ -649,7 +648,7 @@ Webmail.prototype = { $parent = $ul; mailbox = $parent.attr("name") + this.options.hdelimiter + mailbox; } else { - $parent = $("#mboxes_container").children("ul"); + $parent = $("#folders > div > ul"); } var $li = this.inject_mailbox($parent, mailbox, "loadfolder"); this.init_droppables($li); @@ -665,11 +664,11 @@ Webmail.prototype = { var $link = $("#folders").find('a[href="' + oldpattern + '"]'); if (oldname != newname) { - var $i = $link.children("i"); + var $span = $link.children("span"); - $link.html(newname); + $link.html(" " + newname); $link.parent("li").attr("name", newpattern); - $link.prepend($i); + $link.prepend($span); $link.attr("href", newpattern); this.navobject.setparam("mbox", newpattern).update(false, true); } @@ -937,6 +936,7 @@ Webmail.prototype = { if (resp.id !== undefined) { this.navobject.setparam("id", resp.id).update(false, true); } + this.resize_compose_body(); }, @@ -1016,7 +1016,7 @@ Webmail.prototype = { attachments_init: function() { $("#submit").click(function(e) { e.preventDefault(); - if ($("#id_attachment").val() == "") { + if ($("#id_attachment").val() === "") { return; } $("#upload_status").css("display", "block"); @@ -1024,7 +1024,7 @@ Webmail.prototype = { $("#uploadfile").submit(); }); $("a[name=delattachment]").click(this.del_attachment); - $(".modal").one("hide", this.close_attachments); + $(".modal").one("hide.bs.modal", $.proxy(this.close_attachments, this)); }, _reset_upload_form: function() { @@ -1037,10 +1037,12 @@ Webmail.prototype = { var $delbtn = $("", { name: "delattachment", href: this.options.delattachment_url + "?name=" + tmpname, - html: "" + html: "" }); var $label = $("
", {'class': "row"}).append($delbtn, $label); + var $div = $("
", {'class': "row"}).append( + $("
", {"class": "col-sm-12"}).append($delbtn, $label) + ); $delbtn.click(this.del_attachment); $("#id_attachment").val(""); @@ -1063,35 +1065,20 @@ Webmail.prototype = { }); }, + /** + * Update the counter of currently attached files. + */ + update_files_counter: function() { + var nfiles = $("a[name=delattachment]").length; + + $("#attachment_counter").html("(" + nfiles + ")"); + }, + + /** + * Attachments form "on close" callback. + */ close_attachments: function() { - var nfiles = 0; - var shortlist = ""; - var html; - - $("a[name=delattachment]").each(function() { - var $this = $(this); - var $label = $this.next("label"); - - nfiles++; - if (nfiles <= 2) { - if (shortlist != "") { - shortlist += ", "; - } else { - shortlist = "("; - } - shortlist += $label.html(); - return; - } - if (nfiles == 3) { - shortlist += ", ..."; - } - }); - if (shortlist != "") { - shortlist += ")"; - } - html = interpolate(ngettext("%s file", "%s files", nfiles), [nfiles]); - html += " " + shortlist + ""; - $("#list").html(html); + this.update_files_counter(); }, /* @@ -1100,15 +1087,15 @@ Webmail.prototype = { init_draggables: function() { var plug = this; - $("td[name=drag]").draggable({ - opacity: 0.8, + $("img[name=drag]").draggable({ + opacity: 0.9, helper: function(e) { var $this = $(this); - var $tr = $this.parent(); + var $row = $this.parents("div.email"); - if (!plug.htmltable.is_selected($tr)) { - var $input = $tr.find('#selection'); - plug.htmltable.select_row($tr); + if (!plug.htmltable.is_selected($row)) { + var $input = $row.find('input[type=checkbox]'); + plug.htmltable.select_row($row); $input.prop('checked', true); } @@ -1140,7 +1127,7 @@ Webmail.prototype = { drop: function(e, ui) { var $this = $(this); - var selection = new Array(); + var selection = []; var unseen_cnt = 0; var from = plug.get_current_mailbox(); var to = gethref($this.find("a")); diff --git a/modoboa/extensions/webmail/templates/webmail/attachments.html b/modoboa/extensions/webmail/templates/webmail/attachments.html index c11999541..8d3ff362c 100644 --- a/modoboa/extensions/webmail/templates/webmail/attachments.html +++ b/modoboa/extensions/webmail/templates/webmail/attachments.html @@ -2,23 +2,27 @@ {% load i18n %} {% block modalbody %} {{ block.super }} -
- + +
+
+
-{% for att in attachments %} -
- - - - -
-{% endfor %} + {% for att in attachments %} +
+
+ + + + +
+
+ {% endfor %}
{% endblock %} diff --git a/modoboa/extensions/webmail/templates/webmail/compose.html b/modoboa/extensions/webmail/templates/webmail/compose.html index 8dc67a5f1..555d5f402 100644 --- a/modoboa/extensions/webmail/templates/webmail/compose.html +++ b/modoboa/extensions/webmail/templates/webmail/compose.html @@ -1,37 +1,42 @@ {% load i18n form_tags %}{% load url from future %} -
{% csrf_token %} + + + {% csrf_token %}
-
- {% render_field form.to %} -
-
- {% if not form.cc.value %}{% trans "Cc" %}{% endif %} {% trans "Cci" %} -
- {% if form.cc.value %}{% render_field form.cc %}{% else %}{% render_and_hide_field form.cc %}{% endif %} - {% render_and_hide_field form.cci %} - {% render_field form.subject %} -
-
- - {% trans "Attachments" %} +
+ +
+
-
- {% blocktrans count attachments|length as counter %}{{ counter }} file{% plural %}{{ counter }} files{% endblocktrans %} - {{ short_att_list }} + {% if not form.cc.value %} +
+ +
+ {% endif %}
+ {% if form.cc.value %} + {% render_field form.cc label_width="col-sm-1" %} + {% render_field form.cci label_width="col-sm-1" %} + {% else %} + {% render_field form.cc label_width="col-sm-1" hidden=True %} + {% render_field form.cci label_width="col-sm-1" hidden=True %} + {% endif %} + {% render_field form.subject label_width="col-sm-1" %} +
{% if body %} + {{ body }} + {% else %} {% endif %} -
+
+
diff --git a/modoboa/extensions/webmail/templates/webmail/compose_menubar.html b/modoboa/extensions/webmail/templates/webmail/compose_menubar.html new file mode 100644 index 000000000..ea6e795c7 --- /dev/null +++ b/modoboa/extensions/webmail/templates/webmail/compose_menubar.html @@ -0,0 +1,13 @@ +{% extends "common/buttons_list.html" %} + +{% load i18n %} + +{% block extra_buttons %} +
+ + + {% trans "Attachments" %} + {% if attachment_counter %}({{ attachment_counter }}){% endif %} + +
+{% endblock %} diff --git a/modoboa/extensions/webmail/templates/webmail/email_list.html b/modoboa/extensions/webmail/templates/webmail/email_list.html index d7d1a6744..e71abf2b3 100644 --- a/modoboa/extensions/webmail/templates/webmail/email_list.html +++ b/modoboa/extensions/webmail/templates/webmail/email_list.html @@ -4,18 +4,20 @@
{% for email in emails %}
-
+ -
+
{{ email.from|parse_imap_header:"from" }}

{{ email.subject|parse_imap_header:"subject" }}

-
+
{{ email.date|parse_imap_header:"date" }} -

{% if email.answered %}{% endif %}{% if email.attachments %}{% endif %}

+

{% if email.answered %}{% endif %}{% if email.forwarded %} {% endif %}{% if email.attachments %} {% endif %}

{% endfor %} diff --git a/modoboa/extensions/webmail/templates/webmail/index.html b/modoboa/extensions/webmail/templates/webmail/index.html index e3858e965..f6fe217ca 100644 --- a/modoboa/extensions/webmail/templates/webmail/index.html +++ b/modoboa/extensions/webmail/templates/webmail/index.html @@ -37,7 +37,7 @@ $(document).ready(function() { diff --git a/modoboa/templates/common/generic_field.html b/modoboa/templates/common/generic_field.html index 648b920db..1bc249bd8 100644 --- a/modoboa/templates/common/generic_field.html +++ b/modoboa/templates/common/generic_field.html @@ -6,7 +6,7 @@ > {% if field.label %} -