[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:
committed by
Louis Wicket (wil)
parent
70a412f325
commit
041e5b3629
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user