wip: resizable mailboxes list

Initial work.

see #35

modoboa/extensions/webmail/app_settings.py

@@ -98,6 +98,12 @@ class UserSettings(UserParametersForm):
         help_text=_("Automatic folder refresh rate (in seconds)")
     )
 
+    mboxes_col_width = forms.IntegerField(
+        initial=200,
+        label=_("Mailboxes column width"),
+        help_text=_("The width of the column containing the mailbox list")
+    )
+
     sep2 = SeparatorField(label=_("Mailboxes"))
 
     trash_folder = forms.CharField(
@@ -143,3 +149,14 @@ class UserSettings(UserParametersForm):
     @staticmethod
     def has_access(user):
         return user.mailbox_set.count() != 0
+
+    def clean_mboxes_col_width(self):
+        """Check if the entered value is a positive integer.
+
+        It must also be different from 0.
+        """
+        if self.cleaned_data['mboxes_col_width'] <= 0:
+            raise forms.ValidationError(
+                _('Value must be a positive integer (> 0)')
+            )
+        return self.cleaned_data['mboxes_col_width']

modoboa/extensions/webmail/static/webmail/css/webmail.css

@@ -8,10 +8,29 @@ body, html {
     top: 60px;
     left: 15px;
     width: 200px;
+    background-image: url("../../pics/grippy.png");
+    background-position: right center;
+    background-repeat: no-repeat;
     overflow-y: auto;
     margin-bottom: 5px;
 }
 
+#folders .ui-resizable-n {
+    top: 0px;
+}
+
+#folders .ui-resizable-s {
+    bottom: 0px;
+}
+
+#folders .ui-resizable-e {
+    right: 0px;
+}
+
+#folders .ui-resizable-w {
+    left: 0px;
+}
+
 #mboxes_container { 
     overflow: auto;
 }
@@ -20,6 +39,13 @@ body, html {
     padding-right: 0;
 }
 
+#mboxes_container a[name=loadfolder] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+}
+
 #menubar { 
     position: fixed;
     left: 215px;

modoboa/extensions/webmail/static/webmail/js/webmail.js

@@ -16,7 +16,8 @@ Webmail.prototype = {
         delattachment_url: "",
         ro_mboxes: ["INBOX"],
         trash: "",
-        hdelimiter: '.'
+        hdelimiter: '.',
+        mboxes_col_width: 200
     },
 
     initialize: function(options) {
@@ -36,11 +37,30 @@ Webmail.prototype = {
         this.record_unseen_messages();
 
         $("#folders").css({
-            bottom: $("#bottom-bar").outerHeight(true)
+            bottom: $("#bottom-bar").outerHeight(true),
+            width: this.options.mboxes_col_width + 'px'
         });
         $("#mboxactions").css({
             bottom: $("#bottom-bar").outerHeight(true) + 10
         });
+        $("#folders").resizable({
+            start: function(event, ui) {
+                $('#listing iframe').css('pointer-events','none');
+            },
+            handles: "e",
+            minWidth: parseInt($("#folders").css("width").replace("px", "")),
+            maxWidth: 400,
+            stop: function(event, ui) {
+                $('#listing iframe').css('pointer-events','auto');
+            }
+        });
+        $("#folders").bind("resize", function(event, ui) {
+            if (typeof(ui.size) != "undefined") {
+                $("#menubar").css("left", ui.size.width + 15 + "px");
+                $("#listing").css("left", ui.size.width + 15 + "px");
+            }
+        });
+
         this.resize();
 
         this.init_droppables();

modoboa/extensions/webmail/templates/webmail/index.html

@@ -1,6 +1,7 @@
 {% extends "fixed.html" %}{% load i18n lib_tags %}{% load url from future %}
 {% block pagetitle %}Webmail{% endblock %}
 {% block html_head %}
+<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery-ui.css" />
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}webmail/css/webmail.css" />
 <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-ui.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/ckeditor/ckeditor.js"></script>
@@ -21,7 +22,8 @@ $(document).ready(function() {
         defcallback: "{{ defcallback }}",
         ro_mboxes: {% tolist ro_mboxes %},
         trash: "{{ trash }}",
-        hdelimiter: '{{ hdelimiter }}'
+        hdelimiter: '{{ hdelimiter }}',
+        mboxes_col_width: {{ mboxes_col_width }}
     });
 });
 </script>

modoboa/extensions/webmail/views.py

@@ -548,6 +548,8 @@ def index(request):
             trash,
             parameters.get_user(request.user, "DRAFTS_FOLDER")
         ]
+        response['mboxes_col_width'] = \
+            int(parameters.get_user(request.user, 'MBOXES_COL_WIDTH'))
         return render(request, "webmail/index.html", response)
 
     if action in ["reply", "forward"]:

modoboa/static/css/jquery-ui.css

@@ -0,0 +1,6 @@
+/*! jQuery UI - v1.10.3 - 2013-11-05
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.resizable.css
+* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
+
+.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}