[FIX] mail: message reply-to click area should match cursor feedback

Before this commit, when a message is a reply to another message,
the whole row of the message reply-to was clickable to highlight the
reply-to message.

This is ok when the click happens on the actual reply-to message
above the message, but when the content of the reply-to message
is short, the click area extends to more than the "clickable" cursor
show, so that click on thread view hightlights the reply-to message
when it shouldn't.

The `cursor-pointer` style was already correctly shown only the the
actual part of the reply-to message. But the `t-on-click` was more
generous and considered the whole row in the thread view.

This commit fixes the issue by matching the `t-on-click` with the
intentional clickable area, matching the `cursor-pointer` that was
correct.

closes odoo/odoo#139906

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2023-10-27 11:35:08 +00:00
parent c75147bb1e
commit 47be118fb1
@@ -6,9 +6,9 @@
'me-5': store.discuss.isActive or (env.inChatWindow and !props.alignedRight),
'd-flex justify-content-end ms-5': env.inChatWindow and props.alignedRight,
}">
<small class="position-relative d-block text-small mb-1" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'justify-content-end pe-5': 'ps-5' }}" t-on-click="() => this.props.onClick?.()">
<small class="position-relative d-block text-small mb-1" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'justify-content-end pe-5': 'ps-5' }}">
<span class="o-mail-MessageInReply-corner position-absolute bottom-0 top-50 pe-4 border-top text-300" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'o-isRightAlign border-end' : 'o-isLeftAlign border-start' }}" t-att-class="{ 'ms-n2': store.discuss.isActive }"/>
<span t-if="!message.parentMessage.isEmpty" class="d-inline-flex align-items-center text-muted opacity-75" t-att-class="{ 'cursor-pointer opacity-100-hover': props.onClick }">
<span t-if="!message.parentMessage.isEmpty" class="d-inline-flex align-items-center text-muted opacity-75" t-att-class="{ 'cursor-pointer opacity-100-hover': props.onClick }" t-on-click="() => this.props.onClick?.()">
<img class="o-mail-MessageInReply-avatar me-2 rounded" t-att-src="authorAvatarUrl" t-att-title="message.parentMessage.author?.name ?? message.parentMessage.email_from" alt="Avatar"/>
<span class="o-mail-MessageInReply-content overflow-hidden">
<b>@<t t-out="message.parentMessage.author?.name ?? message.parentMessage.email_from"/></b>: