[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>
This commit is contained in:
Nemael
2023-03-22 11:06:49 +01:00
committed by Louis Wicket (wil)
parent 70a412f325
commit 041e5b3629
3 changed files with 8 additions and 10 deletions
+5 -7
View File
@@ -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>
@@ -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(
@@ -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) => {