From fcfe6f5906354dec48a567c7ac4f0d9002f3ddfd Mon Sep 17 00:00:00 2001
From: Thanh Dodeur <tso@odoo.com>
Date: Wed, 5 Jul 2023 08:49:13 +0000
Subject: [PATCH] [FIX] mail: fixes button overflow of the chat window call
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, the fixed margin between buttons wouldn't leave
enough room for all the buttons to fit in one row in the chat window.

This commit fixes this issue by using the flex space-between instead of
fixed margins.

closes odoo/odoo#127424

X-original-commit: c5a121729d5348ff81ef9bb8f58611c9234ef9f9
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../static/src/discuss/call/common/call.xml   |  2 +-
 .../discuss/call/common/call_action_list.xml  | 40 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/addons/mail/static/src/discuss/call/common/call.xml b/addons/mail/static/src/discuss/call/common/call.xml
index 7d721effc0c..7b294a1b16b 100644
--- a/addons/mail/static/src/discuss/call/common/call.xml
+++ b/addons/mail/static/src/discuss/call/common/call.xml
@@ -25,7 +25,7 @@
                     <i t-else="" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi oi-arrow-left" title="Show sidebar" t-on-click="() => this.state.sidebar = true"/>
                 </t>
                 <div t-if="state.overlay or !isControllerFloating" class="o-discuss-Call-overlay d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute bottom-0 pb-3': isControllerFloating }">
-                    <div t-on-mousemove="onMousemoveOverlay">
+                    <div t-att-class="{ 'w-100': props.compact }" t-on-mousemove="onMousemoveOverlay">
                         <CallActionList thread="props.thread" compact="props.compact" fullscreen="{ isActive: state.isFullscreen, enter: () => this.enterFullScreen(), exit: () => this.exitFullScreen() }"/>
                     </div>
                 </div>
diff --git a/addons/mail/static/src/discuss/call/common/call_action_list.xml b/addons/mail/static/src/discuss/call/common/call_action_list.xml
index b652e4f7ebe..5e675ae7ff4 100644
--- a/addons/mail/static/src/discuss/call/common/call_action_list.xml
+++ b/addons/mail/static/src/discuss/call/common/call_action_list.xml
@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.CallActionList" owl="1">
-        <div class="o-discuss-CallActionList d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
-            <div class="d-flex align-items-center flex-wrap">
+        <div class="o-discuss-CallActionList d-flex justify-content-center" t-attf-class="{{ className }}" t-ref="root">
+            <div class="d-flex align-items-center flex-wrap justify-content-between" t-att-class="{ 'w-100 ps-2 pe-2': isSmall }">
                 <t t-if="isOfActiveCall and rtc.state.selfSession">
                     <t t-if="rtc.state?.selfSession.isMute" t-set="micText">Unmute</t>
                     <t t-else="" t-set="micText">Mute</t>
-                    <button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
-                        t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
+                    <button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
                         t-att-aria-label="micText"
                         t-att-title="micText"
                         t-on-click="onClickMicrophone">
@@ -23,8 +23,8 @@
                     </button>
                     <t t-if="rtc.state?.selfSession.isDeaf" t-set="headphoneText">Undeafen</t>
                     <t t-else="" t-set="headphoneText">Deafen</t>
-                    <button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
-                        t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
+                    <button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
                         t-att-aria-label="headphoneText"
                         t-att-title="headphoneText"
                         t-on-click="onClickDeafen">
@@ -39,8 +39,8 @@
                     </button>
                     <t t-if="rtc.state?.selfSession.raisingHand" t-set="handText">Lower hand</t>
                     <t t-else="" t-set="handText">Raise hand</t>
-                    <button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
-                        t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall, 'bg-500' : rtc.state?.selfSession.raisingHand }"
+                    <button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall, 'bg-500' : rtc.state?.selfSession.raisingHand }"
                         t-att-aria-label="handText"
                         t-att-title="handText"
                         t-on-click="onClickRaiseHand">
@@ -50,10 +50,10 @@
                     </button>
                     <t t-if="rtc.state.sendCamera" t-set="cameraText">Stop camera</t>
                     <t t-else="" t-set="cameraText">Turn camera on</t>
-                    <button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                    <button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                         t-att-class="{
                             'p-2': isSmall,
-                            'p-3': !isSmall,
+                            'p-3 m-1': !isSmall,
                         }"
                         t-att-aria-label="cameraText"
                         t-att-title="cameraText"
@@ -64,10 +64,10 @@
                     </button>
                     <t t-if="rtc.state.sendScreen" t-set="screenSharingText">Stop screen sharing</t>
                     <t t-else="" t-set="screenSharingText">Share screen</t>
-                    <button t-if="!isMobileOS" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                    <button t-if="!isMobileOS" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                         t-att-class="{
                             'p-2': isSmall,
-                            'p-3': !isSmall,
+                            'p-3 m-1': !isSmall,
                         }"
                         t-att-aria-label="screenSharingText"
                         t-att-title="screenSharingText"
@@ -76,20 +76,20 @@
                             <i class="fa fa-desktop fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall, 'text-success': rtc.state.sendScreen }"/>
                         </div>
                     </button>
-                    <button t-if="!props.fullscreen.isActive" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                    <button t-if="!props.fullscreen.isActive" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                         aria-label="Enter Full Screen"
                         title="Enter Full Screen"
-                        t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
+                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
                         t-on-click="props.fullscreen.enter"
                     >
                         <div class="fa-stack">
                             <i class="fa fa-arrows-alt fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall }"/>
                         </div>
                     </button>
-                    <button t-if="props.fullscreen.isActive" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                    <button t-if="props.fullscreen.isActive" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
                         aria-label="Exit Full Screen"
                         title="Exit Full Screen"
-                        t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
+                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
                         t-on-click="props.fullscreen.exit"
                     >
                         <div class="fa-stack">
@@ -97,8 +97,8 @@
                         </div>
                     </button>
                 </t>
-                <button t-if="props.thread.rtcInvitingSession and !isOfActiveCall" class="btn btn-danger d-flex m-1 border-0 rounded-circle shadow-none"
-                    t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
+                <button t-if="props.thread.rtcInvitingSession and !isOfActiveCall" class="btn btn-danger d-flex border-0 rounded-circle shadow-none"
+                    t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
                     aria-label="Reject"
                     title="Reject"
                     t-att-disabled="rtc.state.hasPendingRequest"
@@ -109,9 +109,9 @@
                 </button>
                 <t t-if="props.thread === rtc.state.channel" t-set="callText">Disconnect</t>
                 <t t-else="" t-set="callText">Join Call</t>
-                <button class="btn d-flex m-1 border-0 rounded-circle shadow-none"
+                <button class="btn d-flex border-0 rounded-circle shadow-none"
                     t-att-aria-label="callText"
-                    t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3': !isSmall, 'btn-success': !isOfActiveCall }"
+                    t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3 m-1': !isSmall, 'btn-success': !isOfActiveCall }"
                     t-att-disabled="rtc.state.hasPendingRequest"
                     t-att-title="callText"
                     t-on-click="onClickToggleAudioCall">