[IMP] mail: improve label of button to toggle style of email message

Before this commit, when a message is of type email, the button to
toggle between adjusted content style with webclient theme and the
original email style was labelled "Show Original Email" and
"Don't show original Email".

This label is confusing, as it gives the impression that this button
opens a new screen or removes a UI element. This button only alters
the visual of the message, that is the style, so the label should
be better worded to tell that.

This commit rename the label to "Show Original/Custom Format", so that
it's clearer what this button actually does.

closes odoo/odoo#139901

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2023-10-27 11:35:06 +00:00
parent f75fc543bd
commit b88ecba36f
3 changed files with 9 additions and 12 deletions
+4 -10
View File
@@ -86,7 +86,7 @@ export class Message extends Component {
"messageSearch?",
"className?",
"showDates?",
"isFirstMessage?"
"isFirstMessage?",
];
static template = "mail.Message";
@@ -102,7 +102,7 @@ export class Message extends Component {
isHovered: false,
isClicked: false,
expandOptions: false,
originalEmail: false,
originalFormat: false,
emailHeaderOpen: false,
showTranslation: false,
});
@@ -137,13 +137,13 @@ export class Message extends Component {
if (!this.shadowRoot) {
return;
}
if (this.state.originalEmail) {
if (this.state.originalFormat) {
this.shadowRoot.removeChild(this.shadowStyle);
} else {
this.shadowRoot.insertBefore(this.shadowStyle, this.shadowRoot.firstChild);
}
},
() => [this.state.originalEmail]
() => [this.state.originalFormat]
);
onPatched(() => {
if (this.props.highlighted && this.root.el) {
@@ -387,12 +387,6 @@ export class Message extends Component {
});
}
get originalEmailText() {
return this.state.originalEmail
? _t("Don't show Original Email")
: _t("Show Original Email");
}
/**
* @param {MouseEvent} ev
*/
@@ -59,7 +59,7 @@
z-index: $o-mail-NavigableList-zIndex;
}
.o-mail-Message-originalEmailText {
.o-mail-Message-originalFormat {
line-height: 1;
&:hover {
@@ -90,7 +90,10 @@
}" 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-originalEmailText d-block 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-esc="originalEmailText" t-on-click="() => this.state.originalEmail = !this.state.originalEmail"/>
<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"/>
<t t-elif="state.showTranslation" t-out="message.translationValue"/>