From 61c32b8578e7aca8f2b3d2f73f9734cf9d9c1697 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Tue, 23 Aug 2022 07:11:07 +0000
Subject: [PATCH] [IMP] mail: `MessageActionList`, adapt padding and items
 order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since ChatWindow messages can be aligned in both directions, the
MessageActionList must adapt its padding and the order of its items when
the menu is expanded according to the message.

This commit adapts the padding and the order of the items.

closes odoo/odoo#98607

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../message_action_list.xml                   |  2 +-
 .../static/src/models/message_action_view.js  | 22 +++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

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 18293288fc4..efe3fcd785f 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,7 +2,7 @@
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
         <t t-if="messageActionList">
-            <div class="o_MessageActionList d-flex rounded-1 bg-white shadow-sm" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall }" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_MessageActionList d-flex rounded-1 bg-white shadow-sm" t-att-class="{ 'o-isDeviceSmall': messaging.device.isSmall, 'flex-row-reverse': messageActionList.messageView.isInChatWindowAndIsAlignedRight }" t-attf-class="{{ className }}" t-ref="root">
                 <t t-foreach="messageActionList.messageActionViews" t-as="messageActionView" t-key="messageActionView.localId">
                     <MessageActionView record="messageActionView"/>
                 </t>
diff --git a/addons/mail/static/src/models/message_action_view.js b/addons/mail/static/src/models/message_action_view.js
index ce79f567c80..f1b4f5c3d60 100644
--- a/addons/mail/static/src/models/message_action_view.js
+++ b/addons/mail/static/src/models/message_action_view.js
@@ -104,12 +104,30 @@ registerModel({
         _computePaddingClassNames() {
             const isDeviceSmall = this.messaging.device.isSmall;
             const paddingClassNames = [];
-            if (this.messageAction.messageActionListOwner.firstActionView === this) {
+            if (
+                (
+                    this.messageAction.messageActionListOwner.firstActionView === this &&
+                    !this.messageAction.messageActionListOwner.messageView.isInChatWindowAndIsAlignedRight
+                ) ||
+                (
+                    this.messageAction.messageActionListOwner.lastActionView === this &&
+                    this.messageAction.messageActionListOwner.messageView.isInChatWindowAndIsAlignedRight
+                )
+            ) {
                 paddingClassNames.push(isDeviceSmall ? 'ps-3' : 'ps-2');
             } else {
                 paddingClassNames.push(isDeviceSmall ? 'ps-2' : 'ps-1');
             }
-            if (this.messageAction.messageActionListOwner.lastActionView === this) {
+            if (
+                (
+                    this.messageAction.messageActionListOwner.lastActionView === this &&
+                    !this.messageAction.messageActionListOwner.messageView.isInChatWindowAndIsAlignedRight
+                ) ||
+                (
+                    this.messageAction.messageActionListOwner.firstActionView === this &&
+                    this.messageAction.messageActionListOwner.messageView.isInChatWindowAndIsAlignedRight
+                )
+            ) {
                 paddingClassNames.push(isDeviceSmall ? 'pe-3' : 'pe-2');
             } else {
                 paddingClassNames.push(isDeviceSmall ? 'pe-2' : 'pe-1');