From 4fd9cfbe8141a3cd3510276d9e8ef1efd170747b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 19 Apr 2023 11:34:54 +0000
Subject: [PATCH] [FIX] mail: make chat window take whole height in mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, chat window take at most 95% of global
height. This is ok in desktop, 5% room allow clicking on
systray menu. In mobile, however, the intend is for chat window
to take whole height.

This commit makes chat window take whole height in mobile, while
preserving the max-height 95% of global height in desktop.

Also fix an issue where chat window were foldable in mobile, when
this feature is desktop-only.

closes odoo/odoo#119058

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../static/src/web/chat_window/chat_window.js     |  6 +++++-
 .../static/src/web/chat_window/chat_window.scss   |  1 -
 .../static/src/web/chat_window/chat_window.xml    |  5 +++--
 .../static/tests/chat_window/chat_window_tests.js | 15 +++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/web/chat_window/chat_window.js b/addons/mail/static/src/web/chat_window/chat_window.js
index b46d6a8645c..700603c914e 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.js
+++ b/addons/mail/static/src/web/chat_window/chat_window.js
@@ -80,11 +80,12 @@ export class ChatWindow extends Component {
     }
 
     get style() {
+        const maxHeight = !this.store.isSmall ? "max-height: 95vh;" : "";
         const textDirection = localization.direction;
         const offsetFrom = textDirection === "rtl" ? "left" : "right";
         const visibleOffset = this.store.isSmall ? 0 : this.props.right;
         const oppositeFrom = offsetFrom === "right" ? "left" : "right";
-        return `${offsetFrom}: ${visibleOffset}px; ${oppositeFrom}: auto`;
+        return `${offsetFrom}: ${visibleOffset}px; ${oppositeFrom}: auto; ${maxHeight}`;
     }
 
     onKeydown(ev) {
@@ -114,6 +115,9 @@ export class ChatWindow extends Component {
     }
 
     toggleFold() {
+        if (this.store.isSmall) {
+            return;
+        }
         if (this.props.chatWindow.hidden) {
             this.chatWindowService.makeVisible(this.props.chatWindow);
         } else {
diff --git a/addons/mail/static/src/web/chat_window/chat_window.scss b/addons/mail/static/src/web/chat_window/chat_window.scss
index 28848e090e3..988139f7aa6 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.scss
+++ b/addons/mail/static/src/web/chat_window/chat_window.scss
@@ -1,5 +1,4 @@
 .o-mail-ChatWindow {
-    max-height: 95vh;
     height: 460px;
     width: $o-mail-ChatWindow-width;
     z-index: 999; // messaging menu is dropdown (1000)
diff --git a/addons/mail/static/src/web/chat_window/chat_window.xml b/addons/mail/static/src/web/chat_window/chat_window.xml
index e0bf156852a..b95d95ff84a 100644
--- a/addons/mail/static/src/web/chat_window/chat_window.xml
+++ b/addons/mail/static/src/web/chat_window/chat_window.xml
@@ -7,12 +7,13 @@
         t-att-class="{
                 'w-100 h-100': store.isSmall,
                 'o-folded': props.chatWindow.folded,
-                'position-absolute bottom-0 rounded-top-3 overflow-hidden d-flex flex-column': !props.chatWindow.hidden
+                'position-absolute bottom-0 overflow-hidden d-flex flex-column': !props.chatWindow.hidden,
+                'rounded-top-3': !props.chatWindow.hidden and !store.isSmall,
                 }"
         t-on-keydown.stop="onKeydown"
         tabindex="1"
     >
-        <div class="o-mail-ChatWindow-header d-flex align-items-center cursor-pointer flex-shrink-0" t-on-click="toggleFold">
+        <div class="o-mail-ChatWindow-header d-flex align-items-center flex-shrink-0" t-on-click="toggleFold" t-att-class="{ 'cursor-pointer': !store.isSmall }">
             <div t-if="store.isSmall" class="cursor-pointer d-flex align-items-center h-100 px-3 py-0 me-2" title="Close conversation" t-on-click="() => this.close()">
                 <i class="fa fa-arrow-left"/>
             </div>
diff --git a/addons/mail/static/tests/chat_window/chat_window_tests.js b/addons/mail/static/tests/chat_window/chat_window_tests.js
index 8d699d47c89..d71c566ce18 100644
--- a/addons/mail/static/tests/chat_window/chat_window_tests.js
+++ b/addons/mail/static/tests/chat_window/chat_window_tests.js
@@ -976,3 +976,18 @@ QUnit.test("folded chat window should hide member-list and settings buttons", as
     assert.containsOnce($, "div[title='Show Member List']");
     assert.containsOnce($, "div[title='Show Call Settings']");
 });
+
+QUnit.test("Chat window in mobile are not foldable", async (assert) => {
+    const pyEnv = await startServer();
+    pyEnv["mail.channel"].create({
+        channel_member_ids: [[0, 0, { fold_state: "open", partner_id: pyEnv.currentPartnerId }]],
+    });
+    patchUiSize({ size: SIZES.SM });
+    await start();
+    await click("button i[aria-label='Messages']");
+    await click(".o-mail-NotificationItem");
+    assert.containsNone($, ".o-mail-ChatWindow-header.cursor-pointer");
+    click(".o-mail-ChatWindow-header").catch(() => {});
+    await nextAnimationFrame();
+    assert.containsOnce($, ".o-mail-ChatWindow-content"); // content => non-folded
+});