[FIX] mail: fix folded new message chat window style

task-2272492

closes odoo/odoo#53565

X-original-commit: dcaa91ffb84a7d9ca433fff1913df47513bb365a
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

2 files changed, 72 insertions, 35 deletions

diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index c4f6117a25d..6a951d1827d 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -20,34 +20,36 @@
                     t-on-o-clicked="_onClickedHeader"
                     t-ref="header"
                 />
-                <t t-if="chatWindow.thread">
-                    <ThreadViewer
-                        class="o_ChatWindow_thread"
-                        composerAttachmentsDetailsMode="'card'"
-                        hasComposer="chatWindow.thread.model !== 'mail.box'"
-                        hasComposerCurrentPartnerAvatar="false"
-                        hasComposerSendButton="env.messaging.device.isMobile"
-                        hasSquashCloseMessages="chatWindow.thread.model !== 'mail.box'"
-                        haveMessagesAuthorRedirect="chatWindow.thread.channel_type !== 'chat'"
-                        threadViewerLocalId="chatWindow.threadViewer.localId"
-                        t-on-focusin="_onFocusinThread"
-                        t-ref="thread"
-                    />
-                </t>
-                <t t-else="">
-                    <div class="o_ChatWindow_newMessageForm">
-                        <span class="o_ChatWindow_newMessageFormLabel">
-                            To:
-                        </span>
-                        <AutocompleteInput
-                            class="o_ChatWindow_newMessageFormInput"
-                            isHtml="true"
-                            placeholder="newMessageFormInputPlaceholder"
-                            select="_onAutocompleteSelect"
-                            source="_onAutocompleteSource"
-                            t-ref="input"
+                <t t-if="!chatWindow.isFolded">
+                    <t t-if="chatWindow.thread">
+                        <ThreadViewer
+                            class="o_ChatWindow_thread"
+                            composerAttachmentsDetailsMode="'card'"
+                            hasComposer="chatWindow.thread.model !== 'mail.box'"
+                            hasComposerCurrentPartnerAvatar="false"
+                            hasComposerSendButton="env.messaging.device.isMobile"
+                            hasSquashCloseMessages="chatWindow.thread.model !== 'mail.box'"
+                            haveMessagesAuthorRedirect="chatWindow.thread.channel_type !== 'chat'"
+                            threadViewerLocalId="chatWindow.threadViewer.localId"
+                            t-on-focusin="_onFocusinThread"
+                            t-ref="thread"
                         />
-                    </div>
+                    </t>
+                    <t t-else="">
+                        <div class="o_ChatWindow_newMessageForm">
+                            <span class="o_ChatWindow_newMessageFormLabel">
+                                To:
+                            </span>
+                            <AutocompleteInput
+                                class="o_ChatWindow_newMessageFormInput"
+                                isHtml="true"
+                                placeholder="newMessageFormInputPlaceholder"
+                                select="_onAutocompleteSelect"
+                                source="_onAutocompleteSource"
+                                t-ref="input"
+                            />
+                        </div>
+                    </t>
                 </t>
             </t>
         </div>
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
index f987a40db46..a4723f65201 100644
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
@@ -174,7 +174,7 @@ QUnit.test('chat window new message: close', async function (assert) {
 });
 
 QUnit.test('chat window new message: fold', async function (assert) {
-    assert.expect(3);
+    assert.expect(6);
 
     await this.start({
         async mockRPC(route, args) {
@@ -188,22 +188,40 @@ QUnit.test('chat window new message: fold', async function (assert) {
     await afterNextRender(() =>
         document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
     );
-    assert.notOk(
-        document.querySelector(`.o_ChatWindow`).classList.contains('o-folded'),
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
         "chat window should not be folded by default"
     );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should have new message form"
+    );
 
     await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
-    assert.ok(
-        document.querySelector(`.o_ChatWindow`).classList.contains('o-folded'),
+    assert.hasClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
         "chat window should become folded"
     );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should not have new message form"
+    );
 
     await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
-    assert.notOk(
-        document.querySelector(`.o_ChatWindow`).classList.contains('o-folded'),
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
         "chat window should become unfolded"
     );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should have new message form"
+    );
 });
 
 QUnit.test('chat window: basic rendering', async function (assert) {
@@ -305,7 +323,7 @@ QUnit.test('chat window: basic rendering', async function (assert) {
 });
 
 QUnit.test('chat window: fold', async function (assert) {
-    assert.expect(24);
+    assert.expect(27);
 
     let foldCall = 0;
     Object.assign(this.data.initMessaging, {
@@ -385,13 +403,30 @@ QUnit.test('chat window: fold', async function (assert) {
     await afterNextRender(() =>
         document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
     );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should have a thread viewer"
+    );
     assert.verifySteps(['rpc:channel_fold/open']);
+
     // Fold chat window
     await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
     assert.verifySteps(['rpc:channel_fold/folded']);
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should not have any thread viewer"
+    );
+
     // Unfold chat window
     await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
     assert.verifySteps(['rpc:channel_fold/open']);
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should have a thread viewer"
+    );
 });
 
 QUnit.test('chat window: open / close', async function (assert) {