From 3a844d8132a7e7ca35d9be8d5431caad8ff681a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Tue, 24 May 2022 15:02:39 +0000
Subject: [PATCH] [FIX] mail: proper hover feedback of message action list
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up of https://github.com/odoo/odoo/pull/90893

Improvements of message action list introduced a gap of clickable
part of button between button and the container of buttons.

This commit fixes the issue by removing this gap.

Also fixes an issue where the icon buttons were too small in mobile.

Task-2862366

closes odoo/odoo#92196

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../message_action_list/message_action_list.scss   |  2 +-
 .../message_action_list/message_action_list.xml    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.scss b/addons/mail/static/src/components/message_action_list/message_action_list.scss
index 019d8589d49..ca1301b5aab 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.scss
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.scss
@@ -1,4 +1,4 @@
-.o_MessageActionList {
+.o_MessageActionList:not(.o-isDeviceSmall) {
     font-size: 0.9rem;
 }
 
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml
index 4379271a505..18866b07e2e 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.xml
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml
@@ -2,18 +2,18 @@
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
         <t t-if="messageActionList">
-            <div class="o_MessageActionList d-flex border rounded-sm bg-white py-1 px-2" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
-                <i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
+            <div class="o_MessageActionList d-flex border rounded-sm bg-white" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-on-click="messageActionList.onClick" t-ref="root">
+                <i t-if="messageActionList.message.hasReactionIcon" class="o_MessageActionList_action o_MessageActionList_actionReaction fa fa-lg fa-smile-o o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'pl-3 py-3 pr-2' : 'pl-2 py-2 pr-1' }}"  t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
                 <PopoverView t-if="messageActionList.reactionPopoverView" record="messageActionList.reactionPopoverView"/>
-                <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" t-att-class="{
+                <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar o_cursor_pointer"  t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" t-att-class="{
                         'o_MessageActionList_actionStar_active': messageActionList.message.isStarred,
                         'fa fa-lg fa-star': messageActionList.message.isStarred,
                         'fa fa-lg fa-star-o': !messageActionList.message.isStarred,
                     }" title="Mark as Todo" t-on-click="messageActionList.onClickToggleStar"/>
-                <span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" title="Reply" t-on-click="messageActionList.onClickReplyTo"/>
-                <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" title="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
-                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" title="Edit" t-on-click="messageActionList.onClickEdit"/>
-                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'p-2' : 'p-1' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
+                <span t-if="messageActionList.hasReplyIcon" class="o_MessageActionList_action o_MessageActionList_actionReply fa fa-lg fa-reply o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Reply" t-on-click="messageActionList.onClickReplyTo"/>
+                <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Mark as Read" t-on-click="messageActionList.onClickMarkAsRead"/>
+                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionEdit fa fa-lg fa-pencil o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'px-2 py-3' : 'px-1 py-2' }}" title="Edit" t-on-click="messageActionList.onClickEdit"/>
+                <span t-if="messageActionList.message.canBeDeleted" class="o_MessageActionList_action o_MessageActionList_actionDelete fa fa-lg fa-trash o_cursor_pointer" t-attf-class="{{ messaging.device.isSmall ? 'pl-2 py-3 pr-3' : 'pl-1 py-2 pr-2' }}" title="Delete" t-on-click="messageActionList.onClickDelete"/>
             </div>
         </t>
     </t>