From 9c140c48d254f5abff010e1ce8c087441040b6c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Solard?= <mael.solard@laposte.net>
Date: Mon, 4 Aug 2014 14:55:38 +0200
Subject: [PATCH] Modify ui-resizable rules to make the responsivity of the
 webmail page compatible with ui-resizable

---
 .../webmail/static/webmail/js/webmail.js      | 104 +++++++++++++++++-
 .../webmail/templates/webmail/index.html      |   4 +-
 2 files changed, 101 insertions(+), 7 deletions(-)

diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js
index 803295fa5..e43c741e0 100644
--- a/modoboa/extensions/webmail/static/webmail/js/webmail.js
+++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js
@@ -20,6 +20,8 @@ Webmail.prototype = {
         mboxes_col_width: 200
     },
 
+
+
     initialize: function(options) {
         this.options = $.extend({}, this.defaults, options);
         this.rtimer = null;
@@ -40,16 +42,97 @@ Webmail.prototype = {
         $("#mboxactions").css({
             bottom: $("#bottom-bar").outerHeight(true) + 10
         });
+
+
+
+        /* Responsive */
+
+        /* Responsive -> init */
+
+        /*if ($( window ).width()<760){
+            $("tr td[name='from']").css({
+                width: 35 + '%'
+            });
+        }*/
+
+        if ($( window ).width()<1198){
+            $("#leftcol").addClass(
+                "leftcol-display-none"
+            );
+            $("#listing").addClass(
+                "col-lg-12 col-md-12 col-ms-12 col-xs-12"
+            );
+            $("#listing").css({
+                height: $(window).height() - 200 + 'px'
+            });
+        }
+
         if ($( window ).width()>1198){
             $("#folders").css({
                 bottom: $("#bottom-bar").outerHeight(true),
                 width: this.options.mboxes_col_width + 'px'
             });
+            $("#listing").addClass(
+                "listing-up-1198"
+            );
+
+            $("#listing").css({
+                height: $(window).height() - 180 + 'px'
+            });
+
             $("#rightcol").css({
                 marginLeft: 200 + 48 + 'px'
             });
         }
 
+        /* Responsive -> on resizing window */
+        var that = this;
+        $(window).resize(function(){
+
+            if ($( window ).width()<760){
+                $("tr td[name='from']").css({
+                    width: 35 + '%'
+                });
+            }
+
+            if ($( window ).width()<1198){
+                $("#leftcol").addClass(
+                    "leftcol-display-none"
+                );
+                $("#listing").addClass(
+                    "col-lg-12 col-md-12 col-ms-12 col-xs-12"
+                );
+                $("#listing").css({
+                    height: $(window).height() - 200 + 'px'
+                });
+                $("#listing").removeClass(
+                    "listing-up-1198"
+                );
+                $("#rightcol").css({
+                    marginLeft: 0 + 'px',
+                    paddingRight: 0 + 'px'
+                });
+            }
+
+            if ($( window ).width()>1198){
+                $("#folders").css({
+                    bottom: $("#bottom-bar").outerHeight(true),
+                    width: that.options.mboxes_col_width + 'px'
+                });
+                $("#listing").addClass(
+                    "listing-up-1198"
+                );
+                $("#listing").css({
+                    height: $(window).height() - 180 + 'px'
+                });
+
+                $("#rightcol").css({
+                    marginLeft: 200 + 48 + 'px'
+                });
+            }
+        });
+
+        /* Responsive -> on resizing folders (leftcol) */
         $("#folders").resizable({
             start: function(event, ui) {
                 $('#listing iframe').css('pointer-events','none');
@@ -64,15 +147,26 @@ Webmail.prototype = {
 
         $( "#folders" ).resizable({
             resize: function(event, ui) {
-                if ($( window ).width()>760){
+                if ($( window ).width()>1198){
                     var width = ui.size.width;
                     $("#rightcol").css({
-                        marginLeft: width + 48 + 'px',
-                        paddingRight: width - 260 + 'px'
+                        marginLeft: width + 48 + 'px'
                     });
+                    $("#folders").css({
+                        width : width + 'px'
+                    });
+                    $("#rightcol").css({
+                        paddingRight: width - 250 + 'px'
+                    });
+                    if ($( window ).width()<1800){
+                        $("#rightcol").css({
+                            paddingRight: width - 180 + 'px'
+                        });
+                    }
                 }
             }
         });
+        /* end Responsive */
 
         this.resize();
 
@@ -202,7 +296,7 @@ Webmail.prototype = {
     page_update: function(response) {
         var curmb = this.get_current_mailbox();
 
-        $(window).unbind("resize");
+//       $(window).unbind("resize");
         if (!$('li[name="' + curmb + '"]').hasClass("active")) {
             this.load_and_select_mailbox(curmb);
         }
@@ -316,7 +410,7 @@ Webmail.prototype = {
             href: mailbox
         });
         var parts = mailbox.split(this.options.hdelimiter);
-        var linkcontent = "<i class='icon-folder-close'></i> ";
+        var linkcontent = "<i class='glyphicon glyphicon-folder-close'></i> ";
         var displayname = linkcontent + parts[parts.length - 1];
 
         $li.append($link);
diff --git a/modoboa/extensions/webmail/templates/webmail/index.html b/modoboa/extensions/webmail/templates/webmail/index.html
index 5758dc504..c5b4f2ba3 100644
--- a/modoboa/extensions/webmail/templates/webmail/index.html
+++ b/modoboa/extensions/webmail/templates/webmail/index.html
@@ -35,9 +35,9 @@ $(document).ready(function() {
     <div id="leftcol" class="col-lg-2 col-md-3 col-ms-3 col-xs-0">
       <div id="folders" class="well sidebar-nav">{{ mboxes }}</div>
     </div>
-    <div id="rightcol" class="col-lg-9 col-md-12 col-ms-12 col-xs-12">
+    <div id="rightcol" class="col-lg-10 col-md-12 col-ms-12 col-xs-12">
         <div id="menubar" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
-        <div id="listing" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
+        <div id="listing" class=""></div>
     </div>
 </div>
 {% endblock %}