[IMP] mail: mail_thread layout

4 files changed, 48 insertions, 32 deletions

diff --git a/addons/mail/static/src/less/mail_chat_backend.less b/addons/mail/static/src/less/mail_chat_backend.less
index 71a95a0aacb..d29138bfa0d 100644
--- a/addons/mail/static/src/less/mail_chat_backend.less
+++ b/addons/mail/static/src/less/mail_chat_backend.less
@@ -32,10 +32,17 @@
         .o_mail_chat_messages {
             .o-flex(1, 0, 0);
             overflow: auto;
+            .o-webclient-padding();
+
+            .o_mail_chat_help_message {
+                padding: 25px 0;
+                text-align: justify;
+            }
         }
 
         .o_mail_chat_composer_wrapper {
             .o-flex(0, 0, auto);
+            .o-webclient-padding(@top: 10px, @bottom: 5px);
         }
     }
 }
@@ -113,17 +120,9 @@
     .o_mail_chat_content {
         background-color: white;
 
-        .o_mail_chat_messages {
-            .o_mail_chat_help_message{
-                padding: 25px 0;
-                text-align: justify;
-            }
-        }
-
         .o_mail_chat_composer_wrapper {
             border-top: 1px solid @gray-lighter;
             background-color: @gray-lighter;
-            .o-webclient-padding(@top: 10px, @bottom: 5px);
         }
     }
 }
diff --git a/addons/mail/static/src/less/mail_thread.less b/addons/mail/static/src/less/mail_thread.less
index c51db5c2488..cb61713b710 100644
--- a/addons/mail/static/src/less/mail_thread.less
+++ b/addons/mail/static/src/less/mail_thread.less
@@ -20,27 +20,44 @@
             }
         }
     }
-    .o_mail_thread_message_star, .o_mail_thread_message_needaction {
-        cursor: pointer;
-        opacity: 0.5;
-        &:hover {
-            opacity: 1;
+    @mail_thread_avatar_size: 50px;
+    .o_mail_thread_message {
+        .o-flex-display();
+        margin: 10px 0;
+        .o_mail_thread_message_avatar {
+            .o-flex(0, 0, @mail_thread_avatar_size);
+            margin-right: 10px;
+            @media (max-width: @screen-xs-max) {
+                .o-flex(0, 0, @mail_thread_avatar_size/2);
+            }
+            .o_mail_thread_avatar {
+                display: block;
+                margin: 0 auto; // center the avatar
+                max-width: @mail_thread_avatar_size;
+                @media (max-width: @screen-xs-max) {
+                    max-width: @mail_thread_avatar_size/2;
+                }
+            }
         }
-    }
-    .o_mail_thread_message_star.o_mail_message_starred {
-        color: gold;
-    }
-    .o_mail_thread_avatar {
-        width: 50px;
-        @media (max-width: @screen-xs-max) {
-            display: none;
+        .o_mail_thread_message_core {
+            .o-flex(1, 1, auto);
+            > p {
+                margin: 0 0 9px; // Required by the old design to override a general rule on p's
+            }
+        }
+        .o_mail_thread_message_star, .o_mail_thread_message_needaction {
+            cursor: pointer;
+            opacity: 0.5;
+            &:hover {
+                opacity: 1;
+            }
+        }
+        .o_mail_thread_message_star.o_mail_message_starred {
+            color: gold;
+        }
+        .o_mail_redirect {
+            cursor: pointer;
         }
-    }
-    .o_mail_thread_message_core {
-        padding: 5px;
-    }
-    .o_mail_redirect {
-        cursor: pointer;
     }
 }
 
diff --git a/addons/mail/static/src/xml/mail_chat_backend.xml b/addons/mail/static/src/xml/mail_chat_backend.xml
index 55589892cff..4e7ec58643f 100644
--- a/addons/mail/static/src/xml/mail_chat_backend.xml
+++ b/addons/mail/static/src/xml/mail_chat_backend.xml
@@ -66,7 +66,7 @@
             </div>
             <!-- Content -->
             <div class="o_mail_chat_content">
-                <div class="container-fluid o_mail_chat_messages"/>
+                <div class="o_mail_chat_messages"/>
                 <div class="o_mail_chat_composer_wrapper"/>
             </div>
         </div>
diff --git a/addons/mail/static/src/xml/mail_thread.xml b/addons/mail/static/src/xml/mail_thread.xml
index e056613cd5b..f4aad0754b1 100644
--- a/addons/mail/static/src/xml/mail_thread.xml
+++ b/addons/mail/static/src/xml/mail_thread.xml
@@ -89,7 +89,7 @@
     <t t-name="mail.Thread.messages">
         <t t-set="current_day" t-value="0"/>
         <t t-foreach="widget.get('messages')" t-as="message">
-            <div t-if="current_day != message.date.split(' ')[0]" class="row o_mail_thread_date_separator">
+            <div t-if="current_day != message.date.split(' ')[0]" class="o_mail_thread_date_separator">
                 <div class="o_mail_thread_date_wrapper">
                     <div class="o_mail_thread_date_separator_title">
                         <t t-raw="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LL')"/>
@@ -97,14 +97,14 @@
                 </div>
                 <t t-set="current_day" t-value="message.date.split(' ')[0]"/>
             </div>
-            <div class="row o_mail_thread_message" t-att-data-message-id="message.id">
-                <div class="col-md-1 col-sm-1 o_mail_thread_message_avatar">
+            <div class="o_mail_thread_message" t-att-data-message-id="message.id">
+                <div class="o_mail_thread_message_avatar">
                     <img t-if="message.message_type == 'email' &amp;&amp; (!message.author_id || !message.author_id[0]) &amp;&amp; message.email_from" src="/mail/static/src/img/email_icon.png" alt="avatar" class="o_mail_thread_avatar img-rounded"/>
                     <img t-if="message.message_type == 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0]) &amp;&amp; !message.email_from" t-att-src="'/web/image/res.partner/'+message.author_id[0]+'/image_small'" class="o_mail_thread_avatar img-rounded"/>
                     <img t-if="message.message_type !== 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0])" t-att-src="'/web/image/res.partner/'+message.author_id[0]+'/image_small'" class="o_mail_thread_avatar img-rounded"/>
                     <img t-if="message.message_type !== 'email' &amp;&amp; (!message.author_id || !message.author_id[0])" src="/mail/static/src/img/smiley/avatar.jpg" class="o_mail_thread_avatar img-rounded"/>
                 </div>
-                <div t-att-class="'col-md-11 col-sm-11 o_mail_thread_message_core ' + 'o_mail_thread_message_type_' + message.message_type + ' ' + (message.is_note ? 'o_mail_thread_message_subtype_note' : '')">
+                <div t-att-class="'o_mail_thread_message_core ' + 'o_mail_thread_message_type_' + message.message_type + ' ' + (message.is_note ? 'o_mail_thread_message_subtype_note' : '')">
                     <!-- actions -->
                     <span class="pull-right">
                         <i t-if="message.is_needaction &amp;&amp; widget.options.display_needaction_button" class="fa fa-check o_mail_thread_message_needaction" t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>