From 05f434c222ad2d206e5bf039f5a5ef2a8ad85181 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Fri, 27 Oct 2023 17:04:55 +0200 Subject: [PATCH] [FIX] mail: show original format of email message in white theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before this commit, messages of type email had their style initially altered on the UI to match the theme, notably the background and font color. To see the original format, a floating button "Show Original Format" was shown in the top-right corner of these messages. The main problem with this button is that most email messages do not have a different visual between altered and non-altered, so this button felt useless most of the time. Also, the original style of email message is a annoyance in dark theme but not in white theme. This commit removes the presence on the button and the style of email message is now based on the chosen theme: - white theme: always show the original style of the email - dark theme: always show a slightly altered style of the email This commit also fixes a bug where message of type `email_outgoing` were not properly considered as email messages. To fix this issue, `message.type === "email"` has been replaced with `message.type.includes("email")` to also take these messages into account. Task-3573855 closes odoo/odoo#140176 Signed-off-by: Sébastien Theys (seb) --- addons/mail/i18n/mail.pot | 14 -------- addons/mail/static/src/core/common/message.js | 34 +++++-------------- .../mail/static/src/core/common/message.scss | 8 ----- .../mail/static/src/core/common/message.xml | 6 +--- .../src/core/common/message_in_reply.js | 3 +- 5 files changed, 12 insertions(+), 53 deletions(-) diff --git a/addons/mail/i18n/mail.pot b/addons/mail/i18n/mail.pot index b040c6472c1..8173fdfb904 100644 --- a/addons/mail/i18n/mail.pot +++ b/addons/mail/i18n/mail.pot @@ -2881,13 +2881,6 @@ msgstr "" msgid "Document: \"" 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 #. odoo-javascript #: code:addons/mail/static/src/core/web/activity_list_popover.xml:0 @@ -8238,13 +8231,6 @@ 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/core/common/channel_commands.js:0 diff --git a/addons/mail/static/src/core/common/message.js b/addons/mail/static/src/core/common/message.js index ca1a0187464..ad774c7808f 100644 --- a/addons/mail/static/src/core/common/message.js +++ b/addons/mail/static/src/core/common/message.js @@ -90,11 +90,6 @@ 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({ @@ -102,7 +97,6 @@ export class Message extends Component { isHovered: false, isClicked: false, expandOptions: false, - originalFormat: false, emailHeaderOpen: false, showTranslation: false, }); @@ -132,19 +126,6 @@ export class Message extends Component { }, () => [this.props.messageEdition?.editingMessage] ); - useEffect( - () => { - if (!this.shadowRoot) { - return; - } - if (this.state.originalFormat) { - this.shadowRoot.removeChild(this.shadowStyle); - } else { - this.shadowRoot.insertBefore(this.shadowStyle, this.shadowRoot.firstChild); - } - }, - () => [this.state.originalFormat] - ); onPatched(() => { if (this.props.highlighted && this.root.el) { this.root.el.scrollIntoView({ behavior: "smooth", block: "center" }); @@ -155,14 +136,14 @@ export class Message extends Component { this.prepareMessageBody(this.messageBody.el); } if (this.shadowBody.el) { - this.shadowRoot = this.shadowBody.el.attachShadow({ mode: "open" }); + const shadowRoot = this.shadowBody.el.attachShadow({ mode: "open" }); const body = document.createElement("span"); body.innerHTML = this.props.messageSearch?.highlight(this.message.body) ?? this.message.body; this.prepareMessageBody(body); const color = cookie.get("color_scheme") === "dark" ? "white" : "black"; - this.shadowStyle = document.createElement("style"); - this.shadowStyle.innerHTML = ` + const shadowStyle = document.createElement("style"); + shadowStyle.innerHTML = ` * { background-color: transparent !important; color: ${color} !important; @@ -177,8 +158,10 @@ export class Message extends Component { background: ${this.constructor.SHADOW_HIGHLIGHT_COLOR} !important; } `; - this.shadowRoot.appendChild(this.shadowStyle); - this.shadowRoot.appendChild(body); + if (cookie.get("color_scheme") === "dark") { + shadowRoot.appendChild(shadowStyle); + } + shadowRoot.appendChild(body); } }); } @@ -213,7 +196,8 @@ export class Message extends Component { get authorAvatarUrl() { if ( - this.message.type === "email" && + this.message.type && + this.message.type.includes("email") && !["partner", "guest"].includes(this.message.author?.type) ) { return url("/mail/static/src/img/email_icon.png"); diff --git a/addons/mail/static/src/core/common/message.scss b/addons/mail/static/src/core/common/message.scss index 8f8242901df..e7724af3740 100644 --- a/addons/mail/static/src/core/common/message.scss +++ b/addons/mail/static/src/core/common/message.scss @@ -59,14 +59,6 @@ z-index: $o-mail-NavigableList-zIndex; } -.o-mail-Message-originalFormat { - line-height: 1; - - &:hover { - background-color: rgba(0, 0, 0, 0.075); - } -} - .o-mail-Message-searchHighlight { background: rgba($warning, 0.75); } diff --git a/addons/mail/static/src/core/common/message.xml b/addons/mail/static/src/core/common/message.xml index 8b8f72d401a..ba9818f35b1 100644 --- a/addons/mail/static/src/core/common/message.xml +++ b/addons/mail/static/src/core/common/message.xml @@ -90,12 +90,8 @@ }" t-ref="body"> - Subject: -
+

diff --git a/addons/mail/static/src/core/common/message_in_reply.js b/addons/mail/static/src/core/common/message_in_reply.js index 08372ebcc7a..63e4a23fe5a 100644 --- a/addons/mail/static/src/core/common/message_in_reply.js +++ b/addons/mail/static/src/core/common/message_in_reply.js @@ -17,7 +17,8 @@ export class MessageInReply extends Component { get authorAvatarUrl() { if ( - this.message.type === "email" && + this.message.type && + this.message.type.includes("email") && !["partner", "guest"].includes(this.props.message.author?.type) ) { return url("/mail/static/src/img/email_icon.png");