From 80af1c3d6582bea9577e87c2fd982a3e2bf6e57a Mon Sep 17 00:00:00 2001
From: thsh-odoo <thsh@odoo.com>
Date: Fri, 9 Jun 2023 10:59:32 +0000
Subject: [PATCH] [FIX] mail: add more menu for rtc buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit revert the changes from this PR https://github.com/odoo/odoo/pull/127377

Before this commit:

Chat window shows all 7 rtc buttons due to this the alignment of the button
is not set because there are way too many buttons.

After this commit:

This commit fixes the issue by showing only 5 buttons Mute,Deafen,Video,More,
Close call and other 3 buttons will moved in expandable More menu.

The testcases were changed accordingly.

Task-3346085

closes odoo/odoo#129360

X-original-commit: 909fb073eada42ff22c4ef4b20b44dc5536b250e
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../static/src/discuss/call/common/call.xml   |  2 +-
 .../discuss/call/common/call_action_list.js   | 42 ++++++++++
 .../discuss/call/common/call_action_list.xml  | 78 ++++++-------------
 .../static/tests/discuss/call/call_tests.js   | 16 ++--
 4 files changed, 76 insertions(+), 62 deletions(-)

diff --git a/addons/mail/static/src/discuss/call/common/call.xml b/addons/mail/static/src/discuss/call/common/call.xml
index 7b294a1b16b..7d721effc0c 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-att-class="{ 'w-100': props.compact }" t-on-mousemove="onMousemoveOverlay">
+                    <div 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.js b/addons/mail/static/src/discuss/call/common/call_action_list.js
index 290dc50dd88..6104ec148d1 100644
--- a/addons/mail/static/src/discuss/call/common/call_action_list.js
+++ b/addons/mail/static/src/discuss/call/common/call_action_list.js
@@ -5,8 +5,12 @@ import { useRtc } from "@mail/discuss/call/common/rtc_hook";
 import { Component } from "@odoo/owl";
 
 import { isMobileOS } from "@web/core/browser/feature_detection";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { _t } from "@web/core/l10n/translation";
 
 export class CallActionList extends Component {
+    static components = { Dropdown, DropdownItem };
     static props = ["thread", "fullscreen", "compact?"];
     static template = "discuss.CallActionList";
 
@@ -14,6 +18,44 @@ export class CallActionList extends Component {
         this.rtc = useRtc();
     }
 
+    get MORE() {
+        return _t("More");
+    }
+
+    get moreActions() {
+        const acts = [];
+        acts.push({
+            id: "raiseHand",
+            name: !this.rtc.state?.selfSession.raisingHand ? _t("Raise Hand") : _t("Lower Hand"),
+            icon: "fa fa-fw fa-hand-paper-o",
+            onSelect: (ev) => this.onClickRaiseHand(ev),
+        });
+        if (isMobileOS) {
+            acts.push({
+                id: "shareScreen",
+                name: !this.rtc.state.sendScreen ? _t("Share Screen") : _t("Stop Sharing Screen"),
+                icon: "fa fa-fw fa-desktop",
+                onSelect: () => this.rtc.toggleVideo("screen"),
+            });
+        }
+        if (!this.props.fullscreen.isActive) {
+            acts.push({
+                id: "fullScreen",
+                name: _t("Enter Full Screen"),
+                icon: "fa fa-fw fa-arrows-alt",
+                onSelect: () => this.props.fullscreen.enter(),
+            });
+        } else {
+            acts.push({
+                id: "exitFullScreen",
+                name: _t("Exit Full Screen"),
+                icon: "fa fa-fw fa-compress",
+                onSelect: () => this.props.fullscreen.exit(),
+            });
+        }
+        return acts;
+    }
+
     get isOfActiveCall() {
         return Boolean(this.props.thread.id === this.rtc.state?.channel?.id);
     }
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 5e675ae7ff4..d7b2248e31e 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
@@ -7,8 +7,8 @@
                 <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 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
-                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
+                    <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 }"
                         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 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
-                        t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
+                    <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 }"
                         t-att-aria-label="headphoneText"
                         t-att-title="headphoneText"
                         t-on-click="onClickDeafen">
@@ -37,23 +37,12 @@
                             }"/>
                         </div>
                     </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 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">
-                        <div class="fa-stack">
-                            <i class="fa fa-stack-1x fa-hand-paper-o" t-att-class="{'fa-lg': !isSmall }"/>
-                        </div>
-                    </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 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
+                    <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 m-1': !isSmall,
+                            'p-3': !isSmall,
                         }"
                         t-att-aria-label="cameraText"
                         t-att-title="cameraText"
@@ -62,43 +51,22 @@
                             <i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall, 'text-success': rtc.state.sendCamera }"/>
                         </div>
                     </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 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="screenSharingText"
-                        t-att-title="screenSharingText"
-                        t-on-click="() => this.rtc.toggleVideo('screen')">
-                        <div class="fa-stack">
-                            <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 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 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 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 m-1': !isSmall }"
-                        t-on-click="props.fullscreen.exit"
-                    >
-                        <div class="fa-stack">
-                            <i class="fa fa-compress fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall }"/>
-                        </div>
-                    </button>
+                    <Dropdown position="'top-end'" togglerClass="`btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover ${ isSmall ? 'p-2' : 'p-3' }`" menuClass="'d-flex flex-column py-0'" title="MORE">
+                        <t t-set-slot="toggler">
+                            <div class="fa-stack">
+                                <i class="fa fa-ellipsis-v fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall }"/>
+                            </div>
+                        </t>
+                        <t t-set-slot="default">
+                            <DropdownItem t-foreach="moreActions" t-as="action" t-key="action.id" class="'btn rounded-0 d-flex align-items-center px-2 py-2 m-0 opacity-75 opacity-100-hover'" title="action.name" onSelected="action.onSelect">
+                                <i t-att-class="action.icon"/>
+                                <span class="mx-2" t-out="action.name"/>
+                            </DropdownItem>
+                        </t>
+                    </Dropdown>
                 </t>
-                <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 }"
+                <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 }"
                     aria-label="Reject"
                     title="Reject"
                     t-att-disabled="rtc.state.hasPendingRequest"
@@ -109,9 +77,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 border-0 rounded-circle shadow-none"
+                <button class="btn d-flex m-1 border-0 rounded-circle shadow-none"
                     t-att-aria-label="callText"
-                    t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3 m-1': !isSmall, 'btn-success': !isOfActiveCall }"
+                    t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3': !isSmall, 'btn-success': !isOfActiveCall }"
                     t-att-disabled="rtc.state.hasPendingRequest"
                     t-att-title="callText"
                     t-on-click="onClickToggleAudioCall">
diff --git a/addons/mail/static/tests/discuss/call/call_tests.js b/addons/mail/static/tests/discuss/call/call_tests.js
index 11113c16e27..6e9d791025c 100644
--- a/addons/mail/static/tests/discuss/call/call_tests.js
+++ b/addons/mail/static/tests/discuss/call/call_tests.js
@@ -28,14 +28,16 @@ QUnit.test("basic rendering", async (assert) => {
     assert.containsOnce($, ".o-discuss-CallParticipantCard[aria-label='Mitchell Admin']");
     assert.containsOnce($, ".o-discuss-CallActionList");
     assert.containsOnce($, ".o-discuss-CallMenu-buttonContent");
-    assert.containsN($, ".o-discuss-CallActionList button", 7);
+    assert.containsN($, ".o-discuss-CallActionList button", 5);
     assert.containsOnce($, "button[aria-label='Unmute'], button[aria-label='Mute']"); // FIXME depends on current browser permission
     assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Deafen']");
-    assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Raise hand']");
     assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Turn camera on']");
-    assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Share screen']");
-    assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Enter Full Screen']");
+    assert.containsOnce($, "button[title='More']");
     assert.containsOnce($, ".o-discuss-CallActionList button[aria-label='Disconnect']");
+    await click("button[title='More']");
+    assert.containsOnce($, "[title='Raise Hand']");
+    assert.containsOnce($, "[title='Share Screen']");
+    assert.containsOnce($, "[title='Enter Full Screen']");
 });
 
 QUnit.test("no call with odoobot", async (assert) => {
@@ -177,9 +179,11 @@ QUnit.test("can share screen", async (assert) => {
     const { openDiscuss } = await start();
     await openDiscuss(channelId);
     await click(".o-mail-Discuss-header button[title='Start a Call']");
-    await click(".o-discuss-CallActionList button[title='Share screen']");
+    await click(".o-discuss-CallActionList [title='More']");
+    await click("[title='Share Screen']");
     assert.containsOnce($, ".o-discuss-CallParticipantCard video");
-    await click(".o-discuss-CallActionList button[title='Stop screen sharing']");
+    await click(".o-discuss-CallActionList [title='More']");
+    await click("[title='Stop Sharing Screen']");
     assert.containsNone($, ".o-discuss-CallParticipantCard video");
 });