[IMP] mail: more friendly empty conversation visual

Also center "no message in conversation" in chatter.

closes odoo#180916

Signed-off-by: Zelong Lin (zel) <[email protected]>

Author: alexkuhn

addons/mail/static/src/chatter/web/chatter.xml

@@ -96,7 +96,7 @@
                 <Composer composer="state.thread.composer" autofocus="true" className="state.composerType === 'message' ? '' : 'pt-4'" mode="'extended'" onPostCallback.bind="onPostCallback" onCloseFullComposerCallback.bind="onCloseFullComposerCallback" dropzoneRef="rootRef" type="state.composerType" t-key="props.threadId"/>
             </t>
         </div>
-        <div class="o-mail-Chatter-content">
+        <div class="o-mail-Chatter-content d-flex flex-column flex-grow-1">
             <div t-if="state.isSearchOpen" class="o-mail-Chatter-search">
                 <SearchMessagesPanel
                     closeSearch.bind="closeSearch"

addons/mail/static/src/core/common/thread.xml

@@ -48,9 +48,12 @@
             </div>
         </t>
         <t t-else="">
-            <div class="o-mail-Thread-empty d-flex flex-column align-items-center justify-content-center text-muted fst-italic h-100" t-att-class="{'p-4': props.showEmptyMessage}">
+            <div class="o-mail-Thread-empty d-flex flex-column align-items-center justify-content-center text-muted h-100" t-att-class="{'p-4': props.showEmptyMessage}">
                 <t t-if="props.thread.isLoaded and props.showEmptyMessage">
-                    <span t-ref="empty-message">There are no messages in this conversation.</span>
+                    <t name="empty-message">
+                        <span class="fs-1" style="filter: grayscale(1);">😶</span>
+                        <span class="fst-italic">The conversation is empty.</span>
+                    </t>
                 </t>
             </div>
         </t>

addons/mail/static/src/core/web/thread_patch.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-inherit="mail.Thread" t-inherit-mode="extension">
-        <xpath expr="//*[@t-ref='empty-message']" position="replace">
+        <xpath expr="//*[@name='empty-message']" position="replace">
             <t t-if="props.thread.isEmpty and props.thread.model === 'mail.box'">
                 <t t-if="props.thread.id === 'inbox' and state.mountedAndLoaded">
                     <div t-if="store.self.notification_preference !== 'inbox'" class="align-items-center text-center">

addons/mail/static/tests/chat_bubble/chat_bubble.test.js

@@ -57,7 +57,7 @@ test("'New message' chat window can only be open [REQUIRE FOCUS]", async () => {
     await click(".o-discuss-ChannelSelector-suggestion");
     triggerHotkey("Enter");
     await contains(".o-mail-ChatWindow");
-    await contains(".o-mail-Thread-empty", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread-empty", { text: "The conversation is empty." });
     await click(".o-mail-ChatWindow-command[title='Fold']");
     await contains(".o-mail-ChatBubble", { count: 1 }); // can fold chat
 });
@@ -74,7 +74,7 @@ test("No duplicated chat bubbles [REQUIRE FOCUS]", async () => {
     await click(".o-discuss-ChannelSelector-suggestion");
     triggerHotkey("Enter");
     await contains(".o-mail-ChatWindow", { text: "John" });
-    await contains(".o-mail-ChatWindow", { text: "There are no messages in this conversation." }); // wait fully loaded
+    await contains(".o-mail-ChatWindow", { text: "The conversation is empty." }); // wait fully loaded
     await click("button[title='Fold']");
     await contains(".o-mail-ChatBubble[name='John']");
     // Make bubble of "John" chat again

addons/mail/static/tests/chat_window/chat_window.test.js

@@ -177,9 +177,7 @@ test("chat window: basic rendering", async () => {
     await contains("[title='Open Actions Menu']");
     await contains("[title='Fold']");
     await contains("[title*='Close Chat Window']");
-    await contains(".o-mail-ChatWindow .o-mail-Thread", {
-        text: "There are no messages in this conversation.",
-    });
+    await contains(".o-mail-ChatWindow .o-mail-Thread", { text: "The conversation is empty." });
     await click("[title='Open Actions Menu']");
     await contains(".o-mail-ChatWindow-command", { count: 14 });
     await contains(".o-dropdown-item", { text: "Attachments" });

addons/mail/static/tests/chatter/web/chatter.test.js

@@ -245,7 +245,7 @@ test("should not display user notification messages in chatter", async () => {
     });
     await start();
     await openFormView("res.partner", partnerId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
 });
 

addons/mail/static/tests/discuss_app/discuss.test.js

@@ -882,7 +882,7 @@ test("post a simple message", async () => {
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
     await insertText(".o-mail-Composer-input", "Test");
     await click(".o-mail-Composer-send:enabled");
@@ -911,7 +911,7 @@ test("post several messages with failures", async () => {
     await start();
     await openDiscuss(channelId);
     // post 3 messages
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
     await insertText(".o-mail-Composer-input", "0");
     await click(".o-mail-Composer-send:enabled");

addons/mail/static/tests/discuss_app/sidebar.test.js

@@ -200,7 +200,7 @@ test("default thread rendering", async () => {
     });
     await click(".o-mail-DiscussSidebarChannel", { text: "General" });
     await contains(".o-mail-DiscussSidebarChannel.o-active", { text: "General" });
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
 });
 
 test("sidebar quick search at 20 or more pinned channels", async () => {

addons/mail/static/tests/message/message.test.js

@@ -1590,7 +1590,7 @@ test("message considered empty", async () => {
     ]);
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
 });
 

addons/mail/static/tests/thread/thread.test.js

@@ -171,7 +171,7 @@ test("do not display day separator if all messages of the day are empty", async
     });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-DateSection", { count: 0 });
 });
 
@@ -448,7 +448,7 @@ test("show empty placeholder when thread contains no message", async () => {
     const channelId = pyEnv["discuss.channel"].create({ name: "general" });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
 });
 
@@ -458,7 +458,7 @@ test("show empty placeholder when thread contains only empty messages", async ()
     pyEnv["mail.message"].create({ model: "discuss.channel", res_id: channelId });
     await start();
     await openDiscuss(channelId);
-    await contains(".o-mail-Thread", { text: "There are no messages in this conversation." });
+    await contains(".o-mail-Thread", { text: "The conversation is empty." });
     await contains(".o-mail-Message", { count: 0 });
 });