From bd43df539ff08c3caa4799226922633a928e37a2 Mon Sep 17 00:00:00 2001
From: Siddarth Gajjar <sga@odoo.com>
Date: Thu, 23 Aug 2018 16:23:31 +0530
Subject: [PATCH] [IMP] mail: improve envelop icon tooltip style

This commit improves the style of the tooltip on the mail envelop
icon next to a message related to an email. To do so, we have removed
existing CSS and custom tooltip UI and replaced them with boostrap
popover.

This commit also removes most flickering issue when mouse hovering
on gaps between the tooltip and message icons.

Note that there are still corner cases that produce flickers.
This is unfortunately a known issue with bootstrap 4, as this glitch
can also be observed on bootstrap website.

Task-ID 1879282
Closes #26546
---
 addons/mail/static/src/js/thread_widget.js | 39 ++++++++++++++++++
 addons/mail/static/src/scss/thread.scss    | 48 ++--------------------
 addons/mail/static/src/xml/thread.xml      | 31 ++++++++------
 3 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/addons/mail/static/src/js/thread_widget.js b/addons/mail/static/src/js/thread_widget.js
index bf49857d96c..03b3706892d 100644
--- a/addons/mail/static/src/js/thread_widget.js
+++ b/addons/mail/static/src/js/thread_widget.js
@@ -79,12 +79,19 @@ var ThreadWidget = Widget.extend({
         };
         this._selectedMessageID = null;
         this._currentThreadID = null;
+        this._messageMailPopover = null;
     },
     /**
+     * The message mail popover may still be shown at this moment. If we do not
+     * remove it, it stays visible on the page until a page reload.
+     *
      * @override
      */
     destroy: function () {
         clearInterval(this._updateTimestampsInterval);
+        if (this._messageMailPopover) {
+            this._messageMailPopover.popover('hide');
+        }
     },
     /**
      * @param {mail.model.AbstractThread} thread the thread to render.
@@ -195,6 +202,8 @@ var ThreadWidget = Widget.extend({
                 self._updateTimestamps();
             }, 1000*60);
         }
+
+        this._renderMessageMailPopover(messages);
     },
 
     //--------------------------------------------------------------------------
@@ -419,6 +428,36 @@ var ThreadWidget = Widget.extend({
             this.trigger('redirect', options.model, options.id);
         }
     }, 500, true),
+    /**
+     * Render the popover when mouse-hovering on the mail icon of a message
+     * in the thread. There is at most one such popover at any given time.
+     *
+     * @private
+     * @param {mail.model.AbstractMessage[]} messages list of messages in the
+     *   rendered thread, for which popover on mouseover interaction is
+     *   permitted.
+     */
+    _renderMessageMailPopover: function (messages) {
+        if (this._messageMailPopover) {
+            this._messageMailPopover.popover('hide');
+        }
+        this._messageMailPopover = this.$('.o_thread_tooltip').popover({
+            html: true,
+            boundary: 'viewport',
+            placement: 'auto',
+            trigger: 'hover',
+            offset: '0, 1',
+            content: function () {
+                var messageID = $(this).data('message-id');
+                var message = _.find(messages, function (message) {
+                    return message.getID() === messageID;
+                });
+                return QWeb.render('mail.widget.Thread.Message.MailTooltip', {
+                    data: message.getCustomerEmailData()
+                });
+            },
+        });
+    },
     /**
      * @private
      */
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 46ac09a932b..c1922747177 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -36,28 +36,6 @@
     .o_thread_tooltip_container {
         display: inline;
         position: relative;
-
-        .o_thread_tooltip_content {
-            top: 10px;
-            background: gray('200');
-            padding: 4px;
-            border: solid gray('200') 1px;
-            border-radius: 5px;
-            color: gray;
-            width: 300px;
-            display: none;
-            opacity: 0;
-            position: absolute;
-            transition: opacity 0.5s;
-            i.fa-exclamation {
-                color: red;
-            }
-        }
-
-        .o_thread_tooltip:hover + .o_thread_tooltip_content {
-            display: inline;
-            opacity: 1;
-        }
     }
 
     .o_thread_date_separator {
@@ -235,28 +213,6 @@
             .o_thread_tooltip_container {
                 display: inline;
                 position: relative;
-
-                .o_thread_tooltip_content {
-                    top: 10px;
-                    background: theme-color('light');
-                    padding: 4px;
-                    border: solid theme-color('light') 1px;
-                    border-radius: 5px;
-                    color: gray;
-                    width: 300px;
-                    display: none;
-                    opacity: 0;
-                    position: absolute;
-                    transition: opacity 0.5s;
-                    i.fa-exclamation {
-                        color: red;
-                    }
-                }
-
-                .o_thread_tooltip:hover + .o_thread_tooltip_content {
-                    display: inline;
-                    opacity: 1;
-                }
             }
         }
     }
@@ -278,6 +234,10 @@
     }
 }
 
+.o_web_client .popover .o_thread_tooltip_icon {
+    min-width: 1rem;
+}
+
 .o_web_client.o_touch_device {
     .o_mail_thread .o_thread_icon {
         opacity: $o-mail-thread-icon-opacity;
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index d88418ee921..242e97449f5 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -315,19 +315,6 @@
                             <t t-set="fatype" t-value="'-o'"/>
                         </t>
                         <i t-att-class="'o_thread_tooltip o_thread_message_email o_thread_message_email_' + message.getCustomerEmailStatus() + ' fa fa-envelope-o'" t-att-data-message-id="message.getID()"/>
-                        <span class="o_thread_tooltip_content">
-                            <t t-foreach="message.getCustomerEmailData()" t-as="customerEmailData">
-                                <span>
-                                    <t t-if="customerEmailData[2] === 'sent'"><i class='fa fa-check' title="Sent" role="img" aria-label="Sent"/></t>
-                                    <t t-if="customerEmailData[2] === 'bounce'"><i class='fa fa-exclamation' title="Bounced" role="img" aria-label="Bounced"/></t>
-                                    <t t-if="customerEmailData[2] === 'exception'"><i class='fa fa-exclamation' title="Error" role="img" aria-label="Error"/></t>
-                                    <t t-if="customerEmailData[2] === 'ready'"><i class='fa fa-send-o' title="Ready" role="img" aria-label="Ready"/></t>
-                                    <t t-if="customerEmailData[2] === 'canceled'"><i class='fa fa-trash-o' title="Canceled" role="img" aria-label="Canceled"/></t>
-                                    <t t-esc="customerEmailData[1]"/>
-                                </span>
-                                <br />
-                            </t>
-                        </span>
                     </span>
                     <span t-attf-class="o_thread_icons">
                         <i t-if="options.displayStars and !message.isSystemNotification() and !message.needsModeration()"
@@ -381,6 +368,24 @@
         </t>
     </t>
 
+    <!--
+        @param {Object[]|undefined} list of customer email data of a given message.
+           A customer email data is a list with the following format:
+           [partnerID, partnerName, emailStatus]
+    -->
+    <t t-name="mail.widget.Thread.Message.MailTooltip">
+        <div t-foreach="data" t-as="customerEmailData">
+            <span class="d-inline-block text-center o_thread_tooltip_icon">
+                <i t-if="customerEmailData[2] === 'sent'" class='fa fa-check' title="Sent" role="img" aria-label="Sent"/>
+                <i t-if="customerEmailData[2] === 'bounce'" class='fa fa-exclamation text-danger' title="Bounced" role="img" aria-label="Bounced"/>
+                <i t-if="customerEmailData[2] === 'exception'" class='fa fa-exclamation text-danger' title="Error" role="img" aria-label="Error"/>
+                <i t-if="customerEmailData[2] === 'ready'" class='fa fa-send-o' title="Ready" role="img" aria-label="Ready"/>
+                <i t-if="customerEmailData[2] === 'canceled'" class='fa fa-trash-o' title="Canceled" role="img" aria-label="Canceled"/>
+            </span>
+            <span t-esc="customerEmailData[1]"/>
+        </div>
+    </t>
+
     <!--
         @param {mail.model.Message} message
     -->