[REF] mail: review new chatter design

- Use classes instead of repeated mixins
- Add real user avatar instead of fake one
- Reorganize LESS rules

5 files changed, 21 insertions, 30 deletions

diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 42a9c1367bb..35847804a7f 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -1,31 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.activity_items">
-        <div t-if="activities.length" class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
-            <t t-set="today_activities" t-value="0"/>
-            <t t-set="planned_activities" t-value="0"/>
-            <t t-set="overdue_activities" t-value="0"/>
-            <t t-foreach="activities" t-as="a">
-                <t t-if="a.state == 'today'" t-set="today_activities" t-value="today_activities + 1"/>
-                <t t-if="a.state == 'overdue'" t-set="overdue_activities" t-value="overdue_activities + 1"/>
-                <t t-if="a.state == 'planned'" t-set="planned_activities" t-value="planned_activities + 1"/>
-            </t>
+        <div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
             <span class="o_thread_date btn">
                 <i class="fa fa-fw fa-caret-down"/>
                 Planned activities
                 <small class="o_chatter_planned_activities_summary ml8">
-                    <span class="label img-circle label-danger"><t t-esc="overdue_activities"/></span>
-                    <span class="label img-circle label-warning"><t t-esc="today_activities"/></span>
-                    <span class="label img-circle label-success"><t t-esc="planned_activities"/></span>
+                    <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
+                    <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
+                    <span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
                 </small>
             </span>
         </div>
-        <div t-if="activities.length" id="o_chatter_planned_activities" class="collapse in">
+        <div id="o_chatter_planned_activities" class="collapse in">
             <t t-foreach="activities" t-as="activity">
                 <div class="o_thread_message" style="margin-bottom: 10px">
                     <div class="o_thread_message_sidebar">
                         <div class="o_avatar_stack">
-                            <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
+                            <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
                             <i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
                                t-att-title="activity.activity_type_id[1]"/>
                         </div>
@@ -35,7 +27,7 @@
                             <strong><span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /></span></strong>:
                             <strong t-if="activity.summary"> &#8220;<t t-esc="activity.summary"/>&#8221;</strong>
                             <strong t-if="!activity.summary"> <t t-esc="activity.activity_type_id[1]" /></strong>
-                            <i> for </i>
+                            <em> for </em>
                             <t t-esc="activity.user_id[1]" />
                             <a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
                                 <i class="fa fa-info-circle"></i>
@@ -48,17 +40,15 @@
                                     </dd>
                                     <dt>Created By</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image/res.users/#{activity.create_uid[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <img t-attf-src="/web/image#{activity.create_uid[0] >= 0 ? ('/res.users/' + activity.create_uid[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
                                         <b><t t-esc="activity.create_uid[1]"/></b>
-                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
-                                        <i>, on</i> <t t-esc="activity.create_date"/>
+                                        <em>, on</em> <t t-esc="moment(activity.create_date)"/>
                                     </dd>
                                     <dt>Assigned to</dt>
                                     <dd class="mb8">
-                                        <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
+                                        <img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
                                         <b><t t-esc="activity.user_id[1]"/></b>
-                                        <!-- TODO: fomat date as "25 Dec 2017" (no time) -->
-                                        <i>, due to </i><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="activity.date_deadline"/></span>
+                                        <em>, due to </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="moment(activity.date_deadline)"/></span>
                                     </dd>
                                 </dl>
                             </div>
@@ -95,4 +85,4 @@
             </div>
         </div>
     </t>
-</templates>
\ No newline at end of file
+</templates>
diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index b54d8b01bb7..a9117c76bd6 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -12,7 +12,7 @@
             </div>
             <div class="o_chat_content">
             </div>
-            <div t-if='!widget.options.input_less' class="o_chat_composer">
+            <div t-if='!widget.options.input_less' class="o_chat_composer o_chat_mini_composer">
                 <input class="o_composer_text_field" t-att-placeholder="widget.options.placeholder"/>
             </div>
         </div>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 7e6501d0889..68c2730707e 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : ''}">
+     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
          <div class="o_composer_container">
-             <!-- TODO: Use real user avatar -->
-             <img height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" src="https://pbs.twimg.com/profile_images/885832422667038720/NmqlCWGq_400x400.jpg"/>
+             <img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL"/>
              <div t-if="widget.extended" class="o_composer_subject">
                  <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 2a76d9d95f1..d50d334cb4f 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -72,9 +72,12 @@
     -->
     <t t-name="mail.Followers.subtype">
         <li class="o_subtype">
-            <input type="checkbox" t-att-checked="record.followed"
-                   t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
-                   t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
+            <div class="o_checkbox">
+                <input type="checkbox" t-att-checked="record.followed"
+                       t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
+                       t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
+                <span/>
+            </div>
             <span t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
                 <t t-esc="record.name"/>
             </span>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index b15c5251cd0..6f23e4a5e34 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -166,7 +166,6 @@
 
     <t t-name="mail.ChatComposer.Attachments">
         <div t-if="attachments.length > 0" class="o_attachments">
-            <h5 class="mt4 mb0 small text-muted">Attachments:</h5>
             <t t-foreach="attachments" t-as='attachment'>
                 <t t-call="mail.Attachment">
                      <t t-set="editable" t-value="true"/>