From 2319d9d3395e1ad230e76bc2095a8b7ce43bcd19 Mon Sep 17 00:00:00 2001 From: Rahul Prajapati Date: Mon, 4 Sep 2023 22:13:02 +0200 Subject: [PATCH] [FIX] mail: rendering of emails in chatter odoo/enterprise#46143 Before this commit, messages of type email were not rendered properly in the chatter. For example, the email may display text with dark color even when in dark theme or the layout of bootstrap elements like btn might not look correct. These style issues are caused by combining the style in content of the email (e.g. inline styles) with the style of the webclient, giving the impression that the original visual of the email is buggy. This commit fixes the issue by showing a slightly transformed style of email messages in chatter that is readable and looks nice with the Odoo theme at hand. In particular with dark theme, the background color matches the bubble color and the text is white. Sometimes the exact visual of the original email is desired. A button "Show Original Email" in the top-right corner of the message bubble allows seeing the visual of email in its original intention. Task-3437069 Forward-port-of: #133545 Forward-port-of: #131202 Part-of: odoo/odoo#134234 --- addons/mail/i18n/mail.pot | 14 +++++ .../static/src/core/common/chat_window.scss | 2 +- addons/mail/static/src/core/common/message.js | 53 +++++++++++++++++++ .../mail/static/src/core/common/message.scss | 8 +++ .../mail/static/src/core/common/message.xml | 4 +- .../mail/tests/discuss/test_load_messages.py | 1 + 6 files changed, 80 insertions(+), 2 deletions(-) diff --git a/addons/mail/i18n/mail.pot b/addons/mail/i18n/mail.pot index 65969158324..f6808352dcc 100644 --- a/addons/mail/i18n/mail.pot +++ b/addons/mail/i18n/mail.pot @@ -3107,6 +3107,13 @@ msgstr "" msgid "Do you really want to delete this preview?" msgstr "" +#. module: mail +#. odoo-javascript +#: code:addons/mail/static/src/core/common/message.js:0 +#, python-format +msgid "Don't show Original Email" +msgstr "" + #. module: mail #: model_terms:ir.ui.view,arch_db:mail.mail_activity_view_form #: model_terms:ir.ui.view,arch_db:mail.view_document_file_kanban @@ -8573,6 +8580,13 @@ msgstr "" msgid "Show Member List" msgstr "" +#. module: mail +#. odoo-javascript +#: code:addons/mail/static/src/core/common/message.js:0 +#, python-format +msgid "Show Original Email" +msgstr "" + #. module: mail #. odoo-javascript #: code:addons/mail/static/src/discuss/channel_commands.js:0 diff --git a/addons/mail/static/src/core/common/chat_window.scss b/addons/mail/static/src/core/common/chat_window.scss index d1fcdec3d74..14da6df1532 100644 --- a/addons/mail/static/src/core/common/chat_window.scss +++ b/addons/mail/static/src/core/common/chat_window.scss @@ -15,7 +15,7 @@ .o-mail-ChatWindow-command { color: inherit !important; &:hover { - background-color: rgba(0, 0, 0, 0.075); + background-color: rgba(0, 0, 0, 0.05); } } } diff --git a/addons/mail/static/src/core/common/message.js b/addons/mail/static/src/core/common/message.js index f0df2545fb4..feba6769b6e 100644 --- a/addons/mail/static/src/core/common/message.js +++ b/addons/mail/static/src/core/common/message.js @@ -47,6 +47,9 @@ import { useMessageActions } from "./message_actions"; * @extends {Component} */ export class Message extends Component { + // This is the darken version of #71639e + static SHADOW_LINK_COLOR = "#66598f"; + static SHADOW_LINK_HOVER_COLOR = "#564b79"; static components = { ActionSwiper, AttachmentList, @@ -78,6 +81,11 @@ export class Message extends Component { ]; static template = "mail.Message"; + /** @type {HTMLStyleElement} */ + shadowStyle; + /** @type {ShadowRoot} */ + shadowRoot; + setup() { this.popover = usePopover(this.constructor.components.Popover, { position: "top" }); this.state = useState({ @@ -87,12 +95,15 @@ export class Message extends Component { expandOptions: false, lastReadMoreIndex: 0, isReadMoreByIndex: new Map(), + originalEmail: false, + emailHeaderOpen: false, }); this.root = useRef("root"); this.hasTouch = hasTouch; this.messageBody = useRef("body"); this.messageActions = useMessageActions(); this.store = useState(useService("mail.store")); + this.shadowBody = useRef("shadowBody"); this.rpc = useService("rpc"); this.threadService = useState(useService("mail.thread")); this.messageService = useState(useService("mail.message")); @@ -112,6 +123,19 @@ export class Message extends Component { }, () => [this.props.messageEdition?.editingMessage] ); + useEffect( + () => { + if (!this.shadowRoot) { + return; + } + if (this.state.originalEmail) { + this.shadowRoot.removeChild(this.shadowStyle); + } else { + this.shadowRoot.insertBefore(this.shadowStyle, this.shadowRoot.firstChild); + } + }, + () => [this.state.originalEmail] + ); onPatched(() => { if (this.props.highlighted && this.root.el) { this.root.el.scrollIntoView({ behavior: "smooth", block: "center" }); @@ -122,6 +146,29 @@ export class Message extends Component { $(this.messageBody.el).find(".o-mail-read-more-less").remove(); this.insertReadMoreLess($(this.messageBody.el)); } + if (this.shadowBody.el) { + this.shadowRoot = this.shadowBody.el.attachShadow({ mode: "open" }); + const body = document.createElement("span"); + body.innerHTML = this.message.body; + this.insertReadMoreLess($(body)); + const color = + this.env.services.cookie?.current.color_scheme === "dark" ? "white" : "black"; + this.shadowStyle = document.createElement("style"); + this.shadowStyle.innerHTML = ` + * { + background-color: transparent !important; + color: ${color} !important; + } + a, a * { + color: ${this.constructor.SHADOW_LINK_COLOR} !important; + } + a:hover, a *:hover { + color: ${this.constructor.SHADOW_LINK_HOVER_COLOR} !important; + } + `; + this.shadowRoot.appendChild(this.shadowStyle); + this.shadowRoot.appendChild(body); + } }); onWillUnmount(() => { if (this.messageBody.el) { @@ -320,6 +367,12 @@ export class Message extends Component { }); } + get originalEmailText() { + return this.state.originalEmail + ? _t("Don't show Original Email") + : _t("Show Original Email"); + } + /** * @param {MouseEvent} ev */ diff --git a/addons/mail/static/src/core/common/message.scss b/addons/mail/static/src/core/common/message.scss index 2e26611e1d9..8b92cd99a05 100644 --- a/addons/mail/static/src/core/common/message.scss +++ b/addons/mail/static/src/core/common/message.scss @@ -66,6 +66,14 @@ z-index: $o-mail-NavigableList-zIndex; } +.o-mail-Message-originalEmailText { + line-height: 1; + + &:hover { + background-color: rgba(0, 0, 0, 0.075); + } +} + .o-mail-Message-starred { color: $o-main-favorite-color; } diff --git a/addons/mail/static/src/core/common/message.xml b/addons/mail/static/src/core/common/message.xml index b19e4b567ae..2e4733baf5f 100644 --- a/addons/mail/static/src/core/common/message.xml +++ b/addons/mail/static/src/core/common/message.xml @@ -93,8 +93,10 @@ }" t-ref="body"> +