From 0d7083f76632cd284dee52aca9c23a6e424f1930 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 27 Aug 2015 14:38:19 +0200
Subject: [PATCH] [REF] mail: chatter

DOM and LESS simplification
New design integration
---
 addons/mail/static/src/js/mail_chatter.js     |   9 +-
 .../static/src/less/mail_chat_backend.less    |  67 +--------
 addons/mail/static/src/less/mail_chatter.less |  63 +++-----
 addons/mail/static/src/less/mail_thread.less  |  24 +++-
 addons/mail/static/src/xml/mail_chatter.xml   | 136 ++++++++----------
 5 files changed, 102 insertions(+), 197 deletions(-)

diff --git a/addons/mail/static/src/js/mail_chatter.js b/addons/mail/static/src/js/mail_chatter.js
index 026959d486d..c865a7209fa 100644
--- a/addons/mail/static/src/js/mail_chatter.js
+++ b/addons/mail/static/src/js/mail_chatter.js
@@ -44,6 +44,7 @@ var ChatterMailComposeMessage = mail_thread.MailComposeMessage.extend({
     },
     start: function(){
         this.$input = this.$('.o_mail_compose_message_input');
+        autosize(this.$input);
         this.$input.focus();
         return this._super.apply(this, arguments);
     },
@@ -359,8 +360,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
     // composer toggle
     on_open_composer: function(event){
         var self = this;
-        this.$('.o_mail_chatter_compose_buttons').hide();
-        this.$('.o_mail_chatter_compose_message_wrap').show();
+        this.$('.o_mail_chatter_compose_message').show();
         // destroy existing composer
         if(this.message_composer){
             this.message_composer.destroy();
@@ -373,7 +373,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
             'context': this.context,
             'record_name': this.record_name,
         });
-        this.message_composer.appendTo(this.$('.o_mail_chatter_compose_message_wrap'));
+        this.message_composer.appendTo(this.$('.o_mail_chatter_compose_message'));
         this.message_composer.on('message_sent', this, this.on_message_post);
         this.message_composer.on('need_refresh', this, function(){
             self.message_refresh();
@@ -382,8 +382,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
     },
     on_close_composer: function(){
         if(this.message_composer && this.message_composer.is_empty() && !this.stay_open){
-            this.$('.o_mail_chatter_compose_buttons').show();
-            this.$('.o_mail_chatter_compose_message_wrap').hide();
+            this.$('.o_mail_chatter_compose_message').hide();
         }
     },
     /**
diff --git a/addons/mail/static/src/less/mail_chat_backend.less b/addons/mail/static/src/less/mail_chat_backend.less
index 55d12bd6971..71a95a0aacb 100644
--- a/addons/mail/static/src/less/mail_chat_backend.less
+++ b/addons/mail/static/src/less/mail_chat_backend.less
@@ -3,11 +3,7 @@
 // Layout
 // ------------------------------------------------------------------
 .o_mail_chat {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    .o-position-absolute(0, 0, 0, 0);
     height: 100%;
 
     @media (max-width: @screen-xs-max) {
@@ -21,6 +17,7 @@
     .o_mail_chat_sidebar {
         .o-flex(0, 0, 15%);
         overflow: auto;
+        padding: 1%;
     }
 
     .o_mail_chat_content {
@@ -49,7 +46,6 @@
 .o_mail_chat {
     .o_mail_chat_sidebar {
         background-color: @gray;
-        padding: 1%;
 
         > .nav-pills {
             > li {
@@ -122,75 +118,16 @@
                 padding: 25px 0;
                 text-align: justify;
             }
-
-            .o_mail_thread_date_separator, .o_mail_thread_message {
-                margin: auto; // override the margin-{left,right}: -15px defined on .row
-            }
-
-            .o_mail_thread_date_separator{
-                .o_mail_thread_date_wrapper {
-                    border-bottom: solid @gray-lighter 2px;
-                    margin-bottom: 15px;
-                    .o_mail_thread_date_separator_title {
-                        display: table;
-                        position: relative;
-                        top: 10px;
-                        margin: 0 auto;
-                        padding: 0 10px 0 10px;
-                        font-weight: bold;
-                        background: white;
-                    }
-                }
-            }
         }
 
-
-
-        .o_mail_thread_message{
-            //border-bottom: solid WhiteSmoke 1px;
-        }
-        /*
-        .o_mail_chat_messages {
-            .o_slack_message {
-                .o_slack_message_avatar {
-                    > img {
-
-                    }
-                }
-                .o_slack_message_content {
-                    .o_slack_message_author {
-                        font-weight: bold;
-                        .o_slack_message_time {
-                            font-weight: normal;
-                            color: @gray-light;
-                        }
-                    }
-
-                }
-            }
-        }
-        */
-
         .o_mail_chat_composer_wrapper {
             border-top: 1px solid @gray-lighter;
             background-color: @gray-lighter;
             .o-webclient-padding(@top: 10px, @bottom: 5px);
-            /*
-            > img {
-                background-image: url(/web/static/src/img/placeholder.png);
-            }
-            > input {
-                padding-left: 15px;
-                resize: none;
-                border: 0;
-                outline: none;
-            }
-            */
         }
     }
 }
 
-
 // ------------------------------------------------------------------
 // Other components
 // ------------------------------------------------------------------
diff --git a/addons/mail/static/src/less/mail_chatter.less b/addons/mail/static/src/less/mail_chatter.less
index 1f7e9b29018..2d4807bdebb 100644
--- a/addons/mail/static/src/less/mail_chatter.less
+++ b/addons/mail/static/src/less/mail_chatter.less
@@ -1,54 +1,25 @@
+.o_mail_chatter {
+    width: 100%;
 
-.o_mail_chatter{
-    /* Layout for chatter header (buttons and compose message) */
-    .o_mail_chatter_compose_buttons, .o_mail_chatter_compose_message_wrap{
-        padding-left:15px;
-        margin-bottom:20px;
-        //background-color: lightGrey;
-    }
-
-    /* Specific message style for chatter */
-    .o_mail_chatter_messages{
-
-        .o_mail_thread_message{
-            .o_mail_thread_message_type_comment{ // message comment
-                &:not(.o_mail_thread_message_subtype_note){
-                    background-color: white;
-                    box-shadow: 0px 1px #CACACA;
-                }
-            }
-            .o_mail_thread_message_type_email{ // message email
-                background-color: white;
-                box-shadow: 0px 1px #CACACA;
-            }
-            .o_mail_thread_message_type_notification{ // message notification
-
-            }
+    .o_mail_chatter_compose_message {
+        display: none;
+        margin-top: 10px;
+        .o_mail_chatter_compose_message_suggested_partners label {
+            vertical-align: middle;
+            display: block;
+            line-height: 14px;
         }
-
-        .o_mail_thread_date_separator{
-            .o_mail_thread_date_wrapper {
-                height: 20px;
-                .o_mail_thread_date_separator_title {
-                    text-align: center;
-                    font-weight: bold;
-                    color: @gray-light;
-                }
-            }
+        .o_mail_compose_message_buttons  > button {
+            .btn-sm;
         }
     }
-    .o_mail_chatter_show_more_message{
+
+    .o_mail_chatter_messages {
+        margin-top: 10px;
+    }
+
+    .o_mail_chatter_show_more_message {
         text-align: center;
         cursor: pointer;
     }
-
 }
-
-
-.o_mail_chatter_compose_message{
-    .o_mail_chatter_compose_message_suggested_partners label{
-        vertical-align: middle;
-        display: block;
-        line-height: 14px;
-    }
-}
\ No newline at end of file
diff --git a/addons/mail/static/src/less/mail_thread.less b/addons/mail/static/src/less/mail_thread.less
index 89f5ee4b73f..b61683b5e53 100644
--- a/addons/mail/static/src/less/mail_thread.less
+++ b/addons/mail/static/src/less/mail_thread.less
@@ -2,6 +2,24 @@
 // Mail Thread 'Mixin'
 // ------------------------------------------------------------------
 .o_mail_thread {
+    .o_mail_thread_date_separator, .o_mail_thread_message {
+        margin: auto; // override the margin-{left,right}: -15px defined on .row
+    }
+    .o_mail_thread_date_separator {
+        .o_mail_thread_date_wrapper {
+            border-bottom: solid @gray-lighter 2px;
+            margin-bottom: 15px;
+            .o_mail_thread_date_separator_title {
+                display: table;
+                position: relative;
+                top: 10px;
+                margin: 0 auto;
+                padding: 0 10px 0 10px;
+                font-weight: bold;
+                background: white;
+            }
+        }
+    }
     .o_mail_thread_message_star, .o_mail_thread_message_needaction {
         cursor: pointer;
         opacity: 0.5;
@@ -42,11 +60,15 @@
 }
 .o_mail_compose_message {
     width: 100%;
-    .o_mail_compose_message_input {
+    input.o_mail_compose_message_input {
         border: none;
         padding: 5px;
         margin-right: 5px;
     }
+    textarea.o_mail_compose_message_input {
+        width: 100%;
+        margin: 5px 0;
+    }
 }
 .o_mail_mention_partner_tags {
     margin-top: 5px;
diff --git a/addons/mail/static/src/xml/mail_chatter.xml b/addons/mail/static/src/xml/mail_chatter.xml
index 2d2c150aaba..813a07946e5 100644
--- a/addons/mail/static/src/xml/mail_chatter.xml
+++ b/addons/mail/static/src/xml/mail_chatter.xml
@@ -2,98 +2,74 @@
 <templates>
 
     <t t-name="mail.chatter.ComposeMessage">
-        <div class="o_mail_chatter_compose_message">
-            <!-- Log a Note (subtypes)-->
-            <t t-if="widget.options.is_log">
-                <div class="form-group col-md-8">
-                    <span class="text-muted">
-                        Log an internal note which will not be sent to followers.<br/>
-                        Note that users reading the document can read internal notes.
-                    </span>
+        <!-- Log a Note (subtypes)-->
+        <t t-if="widget.options.is_log">
+            <span class="text-muted">
+                Log an internal note which will not be sent to followers.<br/>
+                Note that users reading the document can read internal notes.
+            </span>
+            <!-- Internal subtypes -->
+            <div t-att-class="'form-group col-md-8 ' + (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
+                <label class="col-sm-2 control-label">Activity</label>
+                <div class="col-sm-4">
+                    <select class="form-control o_mail_chatter_compose_message_subtype_select">
+                        <t t-foreach="widget.options.internal_subtypes" t-as="subtype">
+                            <option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
+                        </t>
+                    </select>
                 </div>
-                <!-- Internal subtypes -->
-                <div t-att-class="'form-group col-md-8 ' + (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
-                    <label class="col-sm-2 control-label">Activity</label>
-                    <div class="col-sm-4">
-                        <select class="form-control o_mail_chatter_compose_message_subtype_select">
-                            <t t-foreach="widget.options.internal_subtypes" t-as="subtype">
-                                <option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
-                            </t>
-                        </select>
+            </div>
+        </t>
+        <!-- New Message (list of followers)-->
+        <t t-if="!widget.options.is_log">
+            <!-- Text for followers -->
+            <span class="text-muted">
+                To: Followers of
+                <t t-if="widget.options.record_name">
+                    <t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
+                </t>
+                <t t-if="!widget.options.record_name">
+                    this document
+                </t>
+            </span>
+            <!-- List of followers -->
+            <div class="o_mail_chatter_compose_message_suggested_partners">
+                <t t-foreach='widget.suggested_partners' t-as='recipient'>
+                    <div t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
+                        <input type="checkbox"
+                               t-att-checked="recipient.checked ? 'checked' : undefined"
+                               t-att-data-fullname="recipient.full_name"/>
+                        <t t-esc="recipient.name"/>
+                        <t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
+                        <t t-if="!recipient.email_address">(no email address)</t>
                     </div>
-                </div>
-            </t>
-            <!-- New Message (list of followers)-->
-            <t t-if="!widget.options.is_log">
-                <!-- Text for followers -->
-                <div class="form-group col-md-8 o_mail_chatter_compose_message_all_followers">
-                    <span class="text-muted">
-                        To:
-                        <t t-if="widget.options.record_name">
-                            Followers of
-                            <t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
-                        </t>
-                        <t t-if="!widget.options.record_name">
-                            Followers of this document
-                        </t>
-                    </span>
-                    <!-- List of followers -->
-                    <div class="o_mail_chatter_compose_message_suggested_partners">
-                        <t t-foreach='widget.suggested_partners' t-as='recipient'>
-                            <div class="checkbox">
-                                <label t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
-                                    <input type="checkbox"
-                                           t-att-checked="recipient.checked ? 'checked' : undefined"
-                                           t-att-data-fullname="recipient.full_name"/>
-                                    <t t-esc="recipient.name"/>
-                                    <t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
-                                    <t t-if="!recipient.email_address">(no email address)</t>
-                                </label>
-                            </div>
-                        </t>
-                    </div>
-                </div>
-            </t>
-            <!-- Composer Message -->
-            <t t-call="mail.ComposeMessage"/>
-        </div>
+                </t>
+            </div>
+        </t>
+        <!-- Composer Message -->
+        <t t-call="mail.ComposeMessage"/>
     </t>
 
 
     <t t-name="mail.chatter.ChatterMailThread">
-        <div class="container-fluid o_mail_chatter o_mail_thread">
+        <div class="o_mail_chatter o_mail_thread">
             <!-- Compose buttons ('new message' and 'log a note') -->
-            <div class="row o_mail_chatter_compose_buttons">
-                <div class="col-md-7">
-                    <div class="btn-group btn-group-sm">
-                        <button type="button" class="btn btn-primary o_mail_chatter_button_new_message" title="Send a message">
-                            New message
-                        </button>
-                    </div>
-                    <t t-if="widget.options.display_log_button">
-                        <span class="text-muted">or</span>
-                        <div class="btn-group btn-group-sm">
-                            <button class="btn btn-link btn-small o_mail_chatter_button_log_note" title="Log a note. Followers will not be notified.">
-                                Log an internal note
-                            </button>
-                        </div>
-                    </t>
-                </div>
+            <div class="o_mail_chatter_compose_buttons">
+                <button type="button" class="btn btn-sm btn-primary o_mail_chatter_button_new_message" title="Send a message">
+                    New message
+                </button>
+                <button t-if="widget.options.display_log_button" class="btn btn-sm btn-link o_mail_chatter_button_log_note" title="Log a note. Followers will not be notified.">
+                    Log an internal note
+                </button>
             </div>
+
             <!-- wrap div for ChatterMailComposeMessage -->
-            <div class="row o_mail_chatter_compose_message_wrap" style="display:none;">
-
-            </div>
-
+            <div class="o_mail_chatter_compose_message"/>
             <!-- Message list -->
-            <div class="row">
-                <div class="col-md-10 col-md-offset-1 o_mail_chatter_messages">
-                    <t t-call="mail.chatter.ChatterMailThread.messages"/>
-                </div>
-            </div>
+            <div class="o_mail_chatter_messages"/>
 
             <div t-if="widget.options.display_show_more_message" class="o_mail_chatter_show_more_message text-muted">
-                ----------- Show more message -----------
+                ----------- Show more messages -----------
             </div>
         </div>
     </t>