[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
This commit is contained in:
Siddarth Gajjar
committed by
Alexandre Kühn
Alexandre Kühn
parent
c7c6f911a8
commit
bd43df539f
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
-->
|
||||
|
||||
Reference in New Issue
Block a user