From 4c7ab52a67c990316c91a77cc3eb2280b675af88 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 15 Oct 2015 15:03:48 +0200
Subject: [PATCH] [IMP] mail: thread: hide avatar, author and date of
 consecutive messages

... from the same author, written within 1 minute (restricted to comments).

Also:
 - Display stars and needactions on hover only
 - Display the date of messages without avatar and info in the margin on hover
 - Add 'selected' state of messages (mainly for touch screens to replace hover)
 - Fix typo (msg_type -> message_type) on the computation of the avatar url
---
 addons/mail/static/src/js/thread.js     | 22 ++++++++++-
 addons/mail/static/src/less/thread.less | 50 ++++++++++++++++++++-----
 addons/mail/static/src/xml/thread.xml   |  9 +++--
 3 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/addons/mail/static/src/js/thread.js b/addons/mail/static/src/js/thread.js
index 95f02f45077..13dd2114ed8 100644
--- a/addons/mail/static/src/js/thread.js
+++ b/addons/mail/static/src/js/thread.js
@@ -20,13 +20,20 @@ var Thread = Widget.extend({
         "click .o_mail_redirect": "on_click_redirect",
         "click .o_thread_show_more": "on_click_show_more",
         "click .o_thread_message_needaction": function (event) {
+            event.stopPropagation();
             var message_id = $(event.currentTarget).data('message-id');
             this.trigger("mark_as_read", message_id);
         },
         "click .o_thread_message_star": function (event) {
+            event.stopPropagation();
             var message_id = $(event.currentTarget).data('message-id');
             this.trigger("toggle_star_status", message_id);
         },
+        "click .o_thread_message": function (event) {
+            var selected = $(event.currentTarget).hasClass('o_thread_selected_message');
+            this.$('.o_thread_message').removeClass('o_thread_selected_message');
+            $(event.currentTarget).toggleClass('o_thread_selected_message', !selected);
+        },
     },
 
     init: function (parent, options) {
@@ -46,6 +53,19 @@ var Thread = Widget.extend({
         if (this.options.display_order === ORDER.DESC) {
             msgs.reverse();
         }
+
+        // Hide avatar and info of a message if that message and the previous
+        // one are both comments wrote by the same author at the same minute
+        var prev_msg;
+        _.each(msgs, function (msg) {
+            if (!prev_msg || (Math.abs(moment(msg.date).diff(prev_msg.date)) > 60000) ||
+                prev_msg.message_type !== 'comment' || msg.message_type !== 'comment' ||
+                (prev_msg.author_id[0] !== msg.author_id[0])) {
+                msg.display_author = true;
+            }
+            prev_msg = msg;
+        });
+
         this.$el.html(QWeb.render('mail.ChatThread', {
             messages: msgs,
             options: _.extend({}, this.options, options),
@@ -78,7 +98,7 @@ var Thread = Widget.extend({
         // Compute the avatar_url
         if (msg.author_id && msg.author_id[0]) {
             msg.avatar_src = "/web/image/res.partner/" + msg.author_id[0] + "/image_small";
-        } else if (msg.msg_type === 'email') {
+        } else if (msg.message_type === 'email') {
             msg.avatar_src = "/mail/static/src/img/email_icon.png";
         } else {
             msg.avatar_src = "/mail/static/src/img/smiley/avatar.jpg";
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 3cf421299de..74942d87eeb 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -1,4 +1,6 @@
 @mail-thread-avatar-size: 36px;
+@mail-thread-icon-opacity: 0.6;
+@mail-thread-side-date-opacity: 0.6;
 
 .o_mail_thread {
     .o_thread_show_more {
@@ -22,18 +24,26 @@
 
     .o_thread_message {
         .o-flex-display();
-        margin: 10px 0;
+        padding: 4px 0;
 
-        .o_thread_message_avatar {
+        .o_thread_message_sidebar {
             .o-flex(0, 0, @mail-thread-avatar-size);
             margin-right: 10px;
+            text-align: center;
 
-            .o_thread_message_avatar_img {
-                display: block;
-                margin: 0 auto; // center the avatar
+            .o_thread_message_avatar {
                 max-width: @mail-thread-avatar-size;
             }
+
+            .o_thread_message_side_date {
+                font-size: smaller;
+                opacity: 0;
+            }
         }
+        &:hover .o_thread_message_side_date {
+            opacity: @mail-thread-side-date-opacity;
+        }
+
 
         .o_thread_message_core {
             .o-flex(1, 1, auto);
@@ -60,14 +70,36 @@
 
             .o_thread_message_star, .o_thread_message_needaction {
                 cursor: pointer;
-                opacity: 0.5;
-                &:hover {
-                    opacity: 1;
-                }
+                opacity: 0;
                 &.fa-star {
+                    opacity: @mail-thread-icon-opacity;
                     color: gold;
                 }
             }
         }
+
+        &:hover .o_thread_message_core {
+            .o_thread_message_star, .o_thread_message_needaction {
+                opacity: @mail-thread-icon-opacity;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+
+        border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
+        &.o_thread_selected_message {
+            border-bottom: 1px solid @gray-lighter;
+            border-top: 1px solid @gray-lighter;
+
+            .o_thread_message_side_date {
+                opacity: @mail-thread-side-date-opacity;
+            }
+
+            .o_thread_message_star, .o_thread_message_needaction {
+                opacity: @mail-thread-icon-opacity;
+            }
+        }
     }
 }
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 596e06a6419..4fc96dc86e1 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -32,8 +32,11 @@
 
     <t t-name="mail.ChatThread.Message">
         <div class="o_thread_message" t-att-data-message-id="message.id">
-            <div t-if="options.display_avatar" class="o_thread_message_avatar">
-                <img t-if="message.avatar_src" t-att-src="message.avatar_src" class="o_thread_message_avatar_img"/>
+            <div t-if="options.display_avatar" class="o_thread_message_sidebar">
+                <img t-if="message.avatar_src &amp;&amp; message.display_author" t-att-src="message.avatar_src" class="o_thread_message_avatar"/>
+                <span t-if="!message.display_author" t-att-title="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LLL')" class="o_thread_message_side_date">
+                    <t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/>
+                </span>
             </div>
             <div class="o_thread_message_core">
                 <span class="pull-right">
@@ -44,7 +47,7 @@
                         t-att-class="'fa fa-lg o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
                         t-att-data-message-id="message.id" t-att-title="_t('Mark as Todo')"/>
                 </span>
-                <p class="o_mail_info">
+                <p t-if="message.display_author" class="o_mail_info">
                     <t t-if="message.is_note">
                         Note by
                     </t>