From 3303afec66d2f2259d0f334f6b8e1bf9e5e56679 Mon Sep 17 00:00:00 2001
From: Nemael <mapa@odoo.com>
Date: Mon, 9 May 2022 13:10:52 +0000
Subject: [PATCH] [IMP] mail: improve o_MessageActionList design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Task-2793394

closes odoo/odoo#90893

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../static/src/components/message/message.scss     |  4 ----
 .../mail/static/src/components/message/message.xml |  2 +-
 .../message_action_list/message_action_list.scss   |  4 ++++
 .../message_action_list/message_action_list.xml    | 14 +++++++-------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
index 3852efcbf01..53907fa71be 100644
--- a/addons/mail/static/src/components/message/message.scss
+++ b/addons/mail/static/src/components/message/message.scss
@@ -8,10 +8,6 @@
 .o_Message_actionListContainer {
     @include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
     z-index: 10; // Place the element in front of the Composer when they overlap
-    
-    &.o-squashed {
-        @include o-position-absolute($top: - map-get($spacers, 4), $right: 0);
-    }
 }
 
 .o_Message_authorAvatar {
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 140c5289ae3..53c0b347659 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -26,7 +26,7 @@
                 t-ref="root"
             >
                 <MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView"/>
-                <div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute pl-5 pr-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
+                <div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
                     <MessageActionList record="messageView.messageActionList"/>
                 </div>
                 <div class="d-flex flex-shrink-0">
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 f980119fe85..019d8589d49 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,3 +1,7 @@
+.o_MessageActionList {
+    font-size: 0.9rem;
+}
+
 .o_MessageActionList:hover {
     box-shadow: 0 4px .5rem -.5rem $black;
 }
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 1b0f331b33f..4379271a505 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" 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 p-2 o_cursor_pointer" t-att-title="messageActionList.addReactionText" t-on-click="messageActionList.onClickActionReaction" t-ref="actionReaction"/>
+            <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"/>
                 <PopoverView t-if="messageActionList.reactionPopoverView" record="messageActionList.reactionPopoverView"/>
-                <span t-if="messageActionList.message.canStarBeToggled" class="o_MessageActionList_action o_MessageActionList_actionStar p-2 o_cursor_pointer" 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 ? 'p-2' : 'p-1' }}" 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 p-2 o_cursor_pointer" title="Reply" t-on-click="messageActionList.onClickReplyTo"/>
-                <span t-if="messageActionList.hasMarkAsReadIcon" class="o_MessageActionList_action o_MessageActionList_actionMarkRead fa fa-lg fa-check p-2 o_cursor_pointer" 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 p-2 o_cursor_pointer" 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 p-2 o_cursor_pointer" 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 ? '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"/>
             </div>
         </t>
     </t>