[FIX] mail: show original format of email message in white theme
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) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
@@ -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
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -90,12 +90,8 @@
|
||||
}" t-ref="body">
|
||||
<Composer t-if="state.isEditing" autofocus="true" composer="message.composer" messageComponent="constructor" onDiscardCallback.bind="exitEditMode" onPostCallback.bind="exitEditMode" mode="env.inChatter ? 'extended' : 'compact'" sidebar="false"/>
|
||||
<t t-else="">
|
||||
<button t-if="message.type === 'email'" class="o-mail-Message-originalFormat float-end p-1 mb-1 btn btn-link opacity-75 fst-italic" t-att-class="env.inChatWindow and isAlignedRight ? 'me-3' : 'ms-3'" t-on-click="() => this.state.originalFormat = !this.state.originalFormat">
|
||||
<t t-if="state.originalFormat">Show Custom Format</t>
|
||||
<t t-else="">Show Original Format</t>
|
||||
</button>
|
||||
<em t-if="message.subject and !message.isSubjectSimilarToOriginThreadName and !message.isSubjectDefault" class="mb-1 me-2">Subject: <t t-out="props.messageSearch?.highlight(message.subject) ?? message.subject"/></em>
|
||||
<div t-if="message.type === 'email'" t-ref="shadowBody"/>
|
||||
<div t-if="message.type and message.type.includes('email')" t-ref="shadowBody"/>
|
||||
<t t-elif="state.showTranslation" t-out="message.translationValue"/>
|
||||
<t t-elif="message.body" t-out="props.messageSearch?.highlight(message.body) ?? message.body"/>
|
||||
<p class="fst-italic text-muted small" t-if="state.showTranslation">
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user