[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)

1 files changed, 75 insertions, 34 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>