[IMP] mail: channel seen icon indication ('v' and 'vv')

This commit adds the seen icon next to a message for all channels
except livechat.

It tracks received and seen messages for all members of the channel.
Icon is either 1 or 2 check(s) ('v' or 'vv').

Those are the different states of this 'seen' icon:

  ICON:                           DESCRIPTION:

  no check .................. no one has received the message.
  1 check ................... some members have received the
                              message, no one has seen it.
  2 checks (greyed-out) ..... some members have seen the message,
                              some or everyone has received it
  2 checks (green) .......... all members have seen the message

This icon is not shown for messages preceding the last message seen
by everyone, in order to reduce visual noise.

Task-ID 1881001

1 files changed, 59 insertions, 0 deletions

diff --git a/addons/mail/static/src/js/thread_widget.js b/addons/mail/static/src/js/thread_widget.js
index da74028903e..d812d403007 100644
--- a/addons/mail/static/src/js/thread_widget.js
+++ b/addons/mail/static/src/js/thread_widget.js
@@ -83,6 +83,9 @@ var ThreadWidget = Widget.extend({
         this._selectedMessageID = null;
         this._currentThreadID = null;
         this._messageMailPopover = null;
+        this._messageSeenPopover = null;
+        // used to track popover IDs to destroy on re-rendering of popovers
+        this._openedSeenPopoverIDs = [];
     },
     /**
      * The message mail popover may still be shown at this moment. If we do not
@@ -95,6 +98,10 @@ var ThreadWidget = Widget.extend({
         if (this._messageMailPopover) {
             this._messageMailPopover.popover('hide');
         }
+        if (this._messageSeenPopover) {
+            this._messageSeenPopover.popover('hide');
+        }
+        this._destroyOpenSeenPopoverIDs();
     },
     /**
      * @param {mail.model.AbstractThread} thread the thread to render.
@@ -203,6 +210,9 @@ var ThreadWidget = Widget.extend({
         }
 
         this._renderMessageMailPopover(messages);
+        if (thread.hasSeenFeature()) {
+            this._renderMessageSeenPopover(thread, messages);
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -310,6 +320,15 @@ var ThreadWidget = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * @private
+     */
+    _destroyOpenSeenPopoverIDs: function () {
+        _.each(this._openedSeenPopoverIDs, function (popoverID) {
+            $('#' + popoverID).remove();
+        });
+        this._openedSeenPopoverIDs = [];
+    },
+    /**
      * Modifies $element to add the 'read more/read less' functionality
      * All element nodes with 'data-o-mail-quote' attribute are concerned.
      * All text nodes after a ``#stopSpelling`` element are concerned.
@@ -439,6 +458,46 @@ var ThreadWidget = Widget.extend({
         });
     },
     /**
+     * Render the popover when mouse hovering on the seen icon of a message
+     * in the thread. Only seen icons in non-squashed message have popover,
+     * because squashed messages hides this icon on message mouseover.
+     *
+     * @private
+     * @param {mail.model.AbstractThread} thread with thread seen mixin,
+     *   @see {mail.model.ThreadSeenMixin}
+     * @param {mail.model.Message[]} messages list of messages in the
+     *   rendered thread.
+     */
+    _renderMessageSeenPopover: function (thread, messages) {
+        var self = this;
+        this._destroyOpenSeenPopoverIDs();
+        if (this._messageSeenPopover) {
+            this._messageSeenPopover.popover('hide');
+        }
+        if (!this.$('.o_thread_message_core .o_mail_thread_message_seen_icon').length) {
+            return;
+        }
+        this._messageSeenPopover = this.$('.o_thread_message_core .o_mail_thread_message_seen_icon').popover({
+            html: true,
+            boundary: 'viewport',
+            placement: 'auto',
+            trigger: 'hover',
+            offset: '0, 1',
+            content: function () {
+                var $this = $(this);
+                self._openedSeenPopoverIDs.push($this.attr('aria-describedby'));
+                var messageID = $this.data('message-id');
+                var message = _.find(messages, function (message) {
+                    return message.getID() === messageID;
+                });
+                return QWeb.render('mail.widget.Thread.Message.SeenIconPopoverContent', {
+                    thread: thread,
+                    message: message,
+                });
+            },
+        });
+    },
+    /**
      * @private
      */
     _updateTimestamps: function () {