From 041e5b3629ae734b80713c97158eac426fec908c Mon Sep 17 00:00:00 2001
From: Nemael <mapa@odoo.com>
Date: Mon, 20 Mar 2023 10:28:13 +0000
Subject: [PATCH] [FIX] mail: css improvements on chatter

This commits makes some improvement on the chatter visuals

-Spacing/styling of various elements
-Missing borders around chatter

closes odoo/odoo#116039

Signed-off-by: Louis Wicket (wil) <wil@odoo.com>
---
 addons/mail/static/src/web/chatter.xml              | 12 +++++-------
 addons/mail/static/tests/composer/composer_tests.js |  4 ++--
 addons/mail/static/tests/web/chatter_tests.js       |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/addons/mail/static/src/web/chatter.xml b/addons/mail/static/src/web/chatter.xml
index c56af91b4f3..110bce5e43b 100644
--- a/addons/mail/static/src/web/chatter.xml
+++ b/addons/mail/static/src/web/chatter.xml
@@ -3,14 +3,14 @@
 
 <t t-name="mail.Chatter" owl="1">
     <div class="o-mail-Chatter bg-view h-100 flex-grow-1 d-flex flex-column overflow-auto" t-att-class="props.threadId === false ? 'o-chatter-disabled' : ''" t-ref="root">
-        <div class="o-mail-Chatter-topbar d-flex flex-shrink-0 flex-grow-0 pe-2">
+        <div class="o-mail-Chatter-topbar d-flex flex-shrink-0 flex-grow-0">
             <button t-if="props.hasMessageList" class="o-mail-Chatter-sendMessage btn text-nowrap me-2" t-att-class="{ 'btn-odoo': state.thread.composer.type !== 'note', 'btn-light': state.thread.composer.type === 'note', 'o-active': state.thread.composer.type === 'message', 'my-2': !props.compactHeight }" t-att-disabled="!state.thread.hasWriteAccess and !(state.thread.hasReadAccess and state.thread.canPostOnReadonly) and props.threadId" data-hotkey="m" t-on-click="() => this.toggleComposer('message')">
                 Send message
             </button>
             <button t-if="props.hasMessageList" class="o-mail-Chatter-logNote btn text-nowrap me-2" t-att-class="{ 'btn-odoo o-active': state.thread.composer.type === 'note', 'btn-light': state.thread.composer.type !== 'note', 'my-2': !props.compactHeight }" data-hotkey="shift+m" t-on-click="() => this.toggleComposer('note')">
                 Log note
             </button>
-            <div class="border-bottom flex-grow-1 d-flex" t-att-class="{ 'border-start ps-2': props.hasActivities }">
+            <div class="border-bottom flex-grow-1 d-flex" t-att-class="{ 'border-start ps-2 pe-4': props.hasActivities }">
                 <button t-if="props.hasActivities" class="btn btn-light text-nowrap" t-att-class="{ 'my-2': !props.compactHeight }" data-hotkey="shift+a" t-on-click="scheduleActivity">
                     <i class="fa fa-clock-o me-1"/>
                     <span>Activities</span>
@@ -74,10 +74,8 @@
         </div>
         <t t-if="state.thread.composer.type">
             <t t-if="state.thread.composer.type === 'message'">
-                <div class="flex-shrink-0 px-3 pb-1 pt-2 text-truncate" style="margin-left:48px;">
-                    <em class="text-muted">
-                        To followers of:
-                    </em>
+                <div class="flex-shrink-0 px-3 pt-3 text-truncate small" style="margin-left:48px;">
+                    <span class="fw-bold">To:</span> <span class="fst-italic">Followers of</span>
                     <b class="px-1">
                         <t t-if="state.thread.displayName or state.thread.name">
                             "<t t-out="state.thread.displayName or state.thread.name"/>"
@@ -91,7 +89,7 @@
             <t t-if="state.thread.composer.type === 'message'" t-set="placeholder">Send a message to followers...</t>
             <t t-else="" t-set="placeholder">Log an internal note...</t>
             <t t-set="type" t-value="state.thread.composer.type === 'message' ? 'message' : 'note'"/>
-            <SuggestedRecipientsList t-if="props.hasFollowers and state.thread.composer.type !== 'note'" className="'px-3 pb-1 pt-2'" styleString="'margin-left:48px;'" thread="state.thread"/>
+            <SuggestedRecipientsList t-if="props.hasFollowers and state.thread.composer.type !== 'note'" className="'px-3'" styleString="'margin-left:48px;'" thread="state.thread"/>
             <Composer composer="state.thread.composer" autofocus="true" mode="'extended'" onPostCallback.bind="onPostCallback" placeholder="placeholder" dropzoneRef="rootRef"/>
             <hr/>
         </t>
diff --git a/addons/mail/static/tests/composer/composer_tests.js b/addons/mail/static/tests/composer/composer_tests.js
index 5419686f27b..592a983ee93 100644
--- a/addons/mail/static/tests/composer/composer_tests.js
+++ b/addons/mail/static/tests/composer/composer_tests.js
@@ -886,7 +886,7 @@ QUnit.test(
         const { openFormView } = await start();
         await openFormView("res.partner", partnerId);
         await click("button:contains(Send message)");
-        assert.containsOnce($, ".o-mail-Chatter:contains(To followers of:  this document)");
+        assert.containsOnce($, ".o-mail-Chatter:contains(To: Followers of this document)");
     }
 );
 
@@ -896,7 +896,7 @@ QUnit.test("Show a thread name in the recipient status text.", async (assert) =>
     const { openFormView } = await start();
     await openFormView("res.partner", partnerId);
     await click("button:contains(Send message)");
-    assert.containsOnce($, '.o-mail-Chatter:contains(To followers of:  "test name")');
+    assert.containsOnce($, '.o-mail-Chatter:contains(To: Followers of "test name")');
 });
 
 QUnit.test(
diff --git a/addons/mail/static/tests/web/chatter_tests.js b/addons/mail/static/tests/web/chatter_tests.js
index 7f5a365e4ef..aafcbf4b1f8 100644
--- a/addons/mail/static/tests/web/chatter_tests.js
+++ b/addons/mail/static/tests/web/chatter_tests.js
@@ -46,7 +46,7 @@ QUnit.test("displayname is used when sending a message", async (assert) => {
     const partnerId = pyEnv["res.partner"].create({ name: "John Doe" });
     await openFormView("res.partner", partnerId);
     await click("button:contains(Send message)");
-    assert.containsOnce($, '.o-mail-Chatter:contains(To followers of:  "John Doe")');
+    assert.containsOnce($, '.o-mail-Chatter:contains(To: Followers of "John Doe")');
 });
 
 QUnit.test("can post a message on a record thread", async (assert) => {