[REF] mail: introduce new chatter/discuss design

- Improve overall design
- Better use of UI colours
- Replace planned activities icon
- Vertically align kanban icons
- Remove the 'bell shtcut' and followers caret
- Use a mixin to style the chatter (inline, not inline, compact)

9 files changed, 132 insertions, 92 deletions

diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index 4cab7bff9ad..42a9c1367bb 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -1,45 +1,86 @@
 <?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">
-            <span class="o_thread_date">Planned</span>
+        <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>
+            <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>
+                </small>
+            </span>
         </div>
-        <t t-foreach="activities" t-as="activity">
-            <div class="o_thread_message">
-                <div class="o_thread_message_sidebar">
-                    <img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small"
-                        class="o_thread_message_avatar mb8"/>
-                    <a href="#" class="o_activity_done o_activity_link" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover"><span class="fa fa-check-circle fa-2x" /></a>
-                </div>
-                <div class="o_thread_message_core o_mail_note">
-                    <div class="o_mail_info">
-                        <strong>
-                            <span t-attf-class="fa #{activity.icon}" />
-                            <t t-esc="activity.activity_type_id[1]" />
-                        </strong>
-                        <span class="fa fa-clock-o ml8" />
-                        <strong>
-                            <span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /> (<t t-esc="activity.date_deadline"/>) </span>
-                        </strong>
-                        planned by <t t-esc="activity.create_uid[1]" />
-                        <t t-if="activity.create_uid[0] != activity.user_id[0]">
-                            for <t t-esc="activity.user_id[1]" />
-                        </t>
-                        - <t t-esc="activity.time_ago"/>
-                        <div class="pull-right">
-                            <a href="#" class="o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">Edit</a> |
-                            <a href="#" class="o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">Remove</a>
+        <div t-if="activities.length" 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]"/>
+                            <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>
                     </div>
-                    <div t-if="activity.summary">
-                        <strong><t t-esc="activity.summary"/></strong>
-                    </div>
-                    <div t-if="activity.note">
-                        <t t-raw="activity.note"/>
+                    <div class="o_thread_message_core o_mail_note">
+                        <div class="o_mail_info">
+                            <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>
+                            <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>
+                            </a>
+                            <div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
+                                <dl class="dl-horizontal well">
+                                    <dt>Activity type</dt>
+                                    <dd class="mb8">
+                                        <t t-esc="activity.activity_type_id[1]"/>
+                                    </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]"/>
+                                        <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"/>
+                                    </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]"/>
+                                        <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>
+                                    </dd>
+                                </dl>
+                            </div>
+                        </div>
+                        <div t-if="activity.note" class="o_thread_message_note small">
+                            <t t-raw="activity.note"/>
+                        </div>
+                        <div class="o_thread_message_tools btn-group">
+                            <a href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
+                                <i class="fa fa-check"/> Mark Done
+                            </a>
+                            <a href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
+                                <i class="fa fa-pencil"/> Edit
+                            </a>
+                            <a href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
+                                <i class="fa fa-times"/> Cancel
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </t>
+            </t>
+        </div>
     </t>
     <t t-name="mail.activity_feedback_form">
         <div>
diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
index d6533da5b34..ef8bf100419 100644
--- a/addons/mail/static/src/xml/chatter.xml
+++ b/addons/mail/static/src/xml/chatter.xml
@@ -6,26 +6,22 @@
     -->
     <t t-name="mail.chatter.ChatComposer" t-extend="mail.ChatComposer">
         <!-- Insert information before the composer -->
-        <t t-jquery=".o_composer_attachments_list" t-operation="before">
-            <!-- Internal note composer -->
-            <t t-if="widget.options.is_log">
-                <span class="o_chatter_composer_info">
-                    Log an internal note which will not be sent to followers, but which can be read
-                    by users accessing this document.
-                </span>
-            </t>
+        <t t-jquery=".o_composer_container" t-operation="before">
             <!-- New message composer -->
             <t t-if="!widget.options.is_log">
                 <!-- Text for followers -->
-                <span class="o_chatter_composer_info">
-                    To: Followers of
-                    <t t-if="widget.options.record_name">
-                        &quot;<t t-esc="widget.options.record_name"/>&quot;
-                    </t>
-                    <t t-if="!widget.options.record_name">
-                        this document
-                    </t>
-                </span>
+                <small class="o_chatter_composer_info">
+                    <b class="text-muted">To: </b>
+                    <em class="text-muted">Followers of </em>
+                    <b>
+                        <t t-if="widget.options.record_name">
+                            &#32;&quot;<t t-esc="widget.options.record_name"/>&quot;
+                        </t>
+                        <t t-if="!widget.options.record_name">
+                            this document
+                        </t>
+                    </b>
+                </small>
                 <!-- List of followers -->
                 <div class="o_composer_suggested_partners">
                     <t t-foreach='widget.suggested_partners' t-as='recipient'>
@@ -43,7 +39,7 @@
 
         <!-- Add a button to open the full composer dialog -->
         <t t-jquery=".o_composer_button_add_attachment" t-operation="after">
-            <button tabindex="6" class="btn btn-sm btn-icon fa fa-pencil-square-o o_composer_button_full_composer" type="button"/>
+            <button tabindex="6" class="btn btn-sm btn-icon fa fa-expand o_composer_button_full_composer" type="button"/>
         </t>
     </t>
 
@@ -51,14 +47,14 @@
         Chatter (mail_thread widget) buttons
     -->
     <t t-name="mail.Chatter.Buttons">
-        <button t-if="new_message_btn" type="button" class="btn btn-sm btn-primary o_chatter_button_new_message" title="Send a message">
-            New message
+        <button t-if="new_message_btn" type="button" class="btn btn-sm btn-link o_chatter_button_new_message" title="Send a message">
+            Send message
         </button>
         <button t-if="log_note_btn" class="btn btn-sm btn-link o_chatter_button_log_note" title="Log a note. Followers will not be notified.">
-            Log an internal note
+            Log note
         </button>
         <button t-if="schedule_activity_btn" class="btn btn-sm btn-link o_chatter_button_schedule_activity" title="Lor or schedule an activity">
-            Log or schedule an activity
+            <i class="fa fa-clock-o"/> Schedule activity
         </button>
     </t>
 
diff --git a/addons/mail/static/src/xml/client_action.xml b/addons/mail/static/src/xml/client_action.xml
index 952b93af1a0..b4539dd7bb7 100644
--- a/addons/mail/static/src/xml/client_action.xml
+++ b/addons/mail/static/src/xml/client_action.xml
@@ -17,22 +17,24 @@
     </t>
     <t t-name="mail.chat.Sidebar">
         <div class="o_mail_chat_sidebar">
-            <div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
                  data-channel-id="channel_inbox">
-                <span class="o_channel_name"> <i class="fa fa-at"/> Inbox </span>
+                <span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
                 <t t-set="counter" t-value="needaction_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
-            <div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
                  data-channel-id="channel_starred">
-                <span class="o_channel_name"> <i class="fa fa-star-o"/> Starred </span>
+                <span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
                 <t t-set="counter" t-value="starred_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
+            <hr class="mb8"/>
 
             <t t-set="channel_type" t-value="'public'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Channels</t>
+                <t t-set="channel_icon">fa-users</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
                 <t t-set="display_hash" t-value="true"/>
@@ -42,18 +44,20 @@
             <t t-set="channel_type" t-value="'dm'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Direct Messages</t>
+                <t t-set="channel_icon">fa-user</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
                 <t t-set="display_status" t-value="true"/>
-                <t t-set="input_placeholder">Open chat</t>
+                <t t-set="input_placeholder">User name</t>
             </t>
 
             <t t-set="channel_type" t-value="'private'"/>
             <t t-call="mail.chat.SidebarTitle">
                 <t t-set="channel_title">Private Channels</t>
+                <t t-set="channel_icon">fa-eye-slash</t>
             </t>
             <t t-call="mail.chat.SidebarItems">
-                <t t-set="input_placeholder">Add a channel</t>
+                <t t-set="input_placeholder">Add a private channel</t>
                 <t t-set="display_hash" t-value="true"/>
             </t>
         </div>
@@ -76,7 +80,10 @@
         </t>
         <t t-if="!disable_add_channel || !empty">
             <div class="o_mail_sidebar_title">
-                <h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''"><t t-esc="channel_title"/></h4>
+                <h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''">
+                    <i t-if="channel_icon" t-attf-class="mr4 fa-fw fa #{channel_icon}"></i>
+                    <b><t t-esc="channel_title"/></b>
+                </h4>
                 <span t-if="!disable_add_channel" class="fa fa-plus o_add" title="Add" t-attf-data-type="#{channel_type}"/>
             </div>
         </t>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 032a71edbcd..7e6501d0889 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -1,31 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-     <div t-name="mail.ChatComposer" class="o_chat_composer">
-         <div class="o_composer_attachments_list"/>
-         <t t-if="widget.extended">
-             <div class="o_composer_subject">
-                 <input tabindex="1" type="text" class="o_input" placeholder="Subject"></input>
-                 <div class="btn-group o_composer_buttons">
-                    <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
-                    <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                    <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                 </div>
+     <div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : ''}">
+         <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"/>
+             <div t-if="widget.extended" class="o_composer_subject">
+                 <input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
              </div>
-         </t>
-         <div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
-             <div class="o_composer_input">
-                 <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
+             <div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
+                <div class="o_composer_input">
+                    <textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
+                    <div class="o_chatter_composer_tools">
+                        <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
+                        <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
+                    </div>
+                </div>
              </div>
-             <t t-if="!widget.extended">
-                 <div class="btn-group o_composer_buttons">
-                    <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
-                    <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
-                    <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
-                 </div>
-             </t>
+             <div class="o_composer_attachments_list"/>
+         </div>
+         <div class="o_composer_send">
+             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
          </div>
-
          <span class="hide">
             <t t-call="HiddenInputFile">
                 <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
diff --git a/addons/mail/static/src/xml/extended_chat_window.xml b/addons/mail/static/src/xml/extended_chat_window.xml
index 51da2b9cb32..5548688d462 100644
--- a/addons/mail/static/src/xml/extended_chat_window.xml
+++ b/addons/mail/static/src/xml/extended_chat_window.xml
@@ -5,7 +5,7 @@
         <t t-jquery=".o_chat_header" t-operation="after">
             <div t-if="widget.options.thread_less" class="o_chat_search_input">
                 <span> To: </span>
-                <input type="text"/>
+                <input type="text" placeholder="User name"/>
             </div>
         </t>
     </t>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 5d3b9d491a9..2a76d9d95f1 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -11,7 +11,6 @@
                         data-toggle="dropdown" aria-expanded="false">
                     <i class="fa fa-user"></i>
                     <span class="o_followers_count"/>
-                    <span class="caret"/>
                 </button>
                 <ul class="dropdown-menu o_followers_list" role="menu"></ul>
             </div>
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 77f356be27f..8e7e9b161d4 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -81,7 +81,7 @@
     <t t-name="mail.chat.ActivityMenu">
         <li class="o_mail_navbar_item">
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
-                <i class="fa fa-check-square-o"/> <span class="o_notification_counter badge"/>
+                <i class="fa fa-clock-o"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
                 <li class="o_mail_navbar_dropdown_channels"/>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index bdee6c580df..b15c5251cd0 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -53,12 +53,12 @@
                         t-att-src="message.avatar_src"
                         data-oe-model="res.partner"
                         t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
-                        t-attf-class="o_thread_message_avatar #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
+                        t-attf-class="o_thread_message_avatar img-circle #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
                 </t>
                 <t t-if="message.mailto || !message.author_id[0]">
                     <img t-if="message.avatar_src &amp;&amp; message.display_author"
                         t-att-src="message.avatar_src"
-                        class="o_thread_message_avatar"/>
+                        class="o_thread_message_avatar img-circle"/>
                 </t>
                 <span t-if="!message.display_author" t-att-title="message.date" class="o_thread_message_side_date">
                     <t t-esc="message.date.format('hh:mm')"/>
@@ -165,7 +165,8 @@
     </t>
 
     <t t-name="mail.ChatComposer.Attachments">
-        <div class="o_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"/>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index c022f078ea0..46cf3786de3 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -4,7 +4,7 @@
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
         <a class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
-            <span class="fa fa-chevron-circle-right fa-lg fa-fw"/>
+            <span class="fa fa-clock-o fa-lg fa-fw"/>
         </a>
         <ul class="dropdown-menu o_activity" role="menu">
         </ul>