From 78b275f54db6efb4b1826604e9be3b3c1dfd5eba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Thu, 4 May 2023 11:01:27 +0000
Subject: [PATCH] [REF] mail: simplify message template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Simplify template so there are less code duplication between
editing state and non-editing state.

Also fixes following small style issues:
- missing opacity-25 when editing message of others
- expanded options of message come on top of jump present alert

closes odoo/odoo#120550

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/message_model.js  |  4 --
 addons/mail/static/src/core_ui/message.js     |  8 ++-
 addons/mail/static/src/core_ui/message.xml    | 61 ++++++++-----------
 .../static/src/core_ui/message_reactions.xml  |  4 +-
 addons/mail/static/src/core_ui/thread.scss    |  2 +-
 addons/mail/static/src/web/message_patch.xml  |  2 +-
 6 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/addons/mail/static/src/core/message_model.js b/addons/mail/static/src/core/message_model.js
index 287db295303..8183f873e20 100644
--- a/addons/mail/static/src/core/message_model.js
+++ b/addons/mail/static/src/core/message_model.js
@@ -118,10 +118,6 @@ export class Message {
         return this.datetime.toLocaleString(DateTime.DATETIME_SHORT);
     }
 
-    get isAutomatedMessage() {
-        return this.type === "auto_comment";
-    }
-
     get isSelfMentioned() {
         return this.recipients.some((recipient) => recipient === this._store.self);
     }
diff --git a/addons/mail/static/src/core_ui/message.js b/addons/mail/static/src/core_ui/message.js
index fe360529f6b..82d82a87828 100644
--- a/addons/mail/static/src/core_ui/message.js
+++ b/addons/mail/static/src/core_ui/message.js
@@ -459,8 +459,12 @@ export class Message extends Component {
         this.state.isEditing = false;
     }
 
-    onClickNotificationIcon(ev) {
-        this.popover.open(ev.target, { message: this.message });
+    onClickNotification(ev) {
+        if (this.message.failureNotifications.length > 0) {
+            this.onClickFailure(ev);
+        } else {
+            this.popover.open(ev.target, { message: this.message });
+        }
     }
 
     onClickFailure(ev) {
diff --git a/addons/mail/static/src/core_ui/message.xml b/addons/mail/static/src/core_ui/message.xml
index a81d71b6644..effc93503bd 100644
--- a/addons/mail/static/src/core_ui/message.xml
+++ b/addons/mail/static/src/core_ui/message.xml
@@ -73,76 +73,65 @@
                                 </span>
                             </div>
                             <div t-if="message.originThread === props.thread and message.notifications.length > 0" t-att-class="{ 'ms-2': !isAlignedRight }">
-                                <span t-if="message.failureNotifications.length > 0" class="o-mail-Message-notification cursor-pointer text-danger" role="button" tabindex="0" t-on-click="onClickFailure">
-                                    <i t-att-class="message.notifications[0].icon" role="img" aria-label="Delivery failure"/> <span t-if="message.notifications[0].label" t-out="message.notifications[0].label"/>
-                                </span>
-                                <span t-else="" class="o-mail-Message-notification text-600 cursor-pointer" t-on-click="onClickNotificationIcon" t-ref="notificationIcon">
+                                <span class="o-mail-Message-notification cursor-pointer text-danger" t-att-class="message.failureNotifications.length > 0 ? 'text-danger' : text-600" role="button" tabindex="0" t-on-click="onClickNotification">
                                     <i t-att-class="message.notifications[0].icon" role="img" aria-label="Delivery failure"/> <span t-if="message.notifications[0].label" t-out="message.notifications[0].label"/>
                                 </span>
                             </div>
                         </div>
-
                         <div
                             class="position-relative d-flex align-items-start"
                             t-att-class="{
                                    'justify-content-end': isAlignedRight,
-                                   'pe-4': env.inChatWindow and !isAlignedRight and !state.isEditing,
                                    'ps-4': env.inChatWindow and isAlignedRight and !state.isEditing,
-                                   'pe-2': env.inChatWindow and !isAlignedRight and composerViewInEditing,
                                    'ps-2': env.inChatWindow and isAlignedRight and state.isEditing,
+                                   'pe-4': env.inChatWindow and !isAlignedRight and !state.isEditing,
+                                   'pe-2': env.inChatWindow and !isAlignedRight and composerViewInEditing,
                                    }"
                         >
-                            <div t-if="!state.isEditing" class="o-mail-Message-content position-relative d-flex">
+                            <div class="o-mail-Message-content position-relative" t-att-class="{ 'd-flex': !state.isEditing, 'w-100': state.isEditing }">
                                 <t t-if="message.type !== 'notification' and !message.isTransient and (message.hasTextContent or message.subtypeDescription)">
-                                    <t t-if="!message.linkPreviewSquash">
+                                    <LinkPreviewList t-if="!state.isEditing and message.linkPreviewSquash" linkPreviews="message.linkPreviews" deletable="false"/>
+                                    <t t-else="">
                                         <div class="position-relative">
                                             <div class="o-mail-Message-bubble rounded-bottom-3 position-absolute top-0 start-0 w-100 h-100" t-att-class="{
-                                                        'bg-info-light border border-info opacity-25': !message.isSelfAuthored and !message.isNote,
-                                                        'bg-success-light border border-success opacity-25': message.isSelfAuthored and !message.isNote,
-                                                        }" t-attf-class="{{ isAlignedRight ? 'rounded-start-3' : 'rounded-end-3' }}"/>
+                                                'border': state.isEditing,
+                                                'bg-info-light border border-info opacity-25': !message.isSelfAuthored and !message.isNote,
+                                                'bg-success-light border border-success opacity-25': message.isSelfAuthored and !message.isNote,
+                                                }" t-attf-class="{{ isAlignedRight ? 'rounded-start-3' : 'rounded-end-3' }}"/>
                                             <div class="position-relative" t-att-class="{
                                                         'p-1': message.isNote,
-                                                        'o-mail-Message-body align-self-start text-break mb-0 rounded-end-3 rounded-bottom-3 p-3': !message.isNote,
-                                                        'flex-grow-1': state.isEditing,
+                                                        'o-mail-Message-body mb-0 p-3': !message.isNote,
+                                                        'align-self-start text-break rounded-end-3 rounded-bottom-3': !state.isEditing and !message.isNote,
+                                                        'o-mail-Message-editable flex-grow-1': state.isEditing,
                                                         }" t-ref="body">
-                                                <em t-if="message.subject and !message.isSubjectSimilarToOriginThreadName and !message.isSubjectDefault" class="mb-1 me-2">Subject: <t t-esc="message.subject"/></em>
-                                                <t t-if="message.body" t-out="message.body"/>
-                                                <small t-if="message.editDate" class="ms-2 fst-italic text-muted" t-att-title="message.editDatetimeHuge">(edited)</small>
-                                                <t t-if="showSubtypeDescription" t-out="message.subtypeDescription"/>
+                                                <Composer t-if="state.isEditing" autofocus="true" composer="message.composer" messageComponent="constructor" onDiscardCallback.bind="exitEditMode" onPostCallback.bind="exitEditMode" mode="'compact'"/>
+                                                <t t-else="">
+                                                    <em t-if="message.subject and !message.isSubjectSimilarToOriginThreadName and !message.isSubjectDefault" class="mb-1 me-2">Subject: <t t-esc="message.subject"/></em>
+                                                    <t t-if="message.body" t-out="message.body"/>
+                                                    <small t-if="message.editDate" class="ms-2 fst-italic text-muted" t-att-title="message.editDatetimeHuge">(edited)</small>
+                                                    <t t-if="showSubtypeDescription" t-out="message.subtypeDescription"/>
+                                                </t>
                                             </div>
                                         </div>
                                     </t>
-                                    <LinkPreviewList t-else="" linkPreviews="message.linkPreviews" deletable="false"/>
                                 </t>
                             </div>
-                            <div t-else="" class="position-relative w-100">
-                                <div class="o-mail-Message-bubble border rounded-bottom-3 position-absolute top-0 start-0 w-100 h-100" t-att-class="{
-                                     'bg-info-light border-info': !message.isSelfAuthored,
-                                     'bg-success-light border-success opacity-25': message.isSelfAuthored,
-                                }" t-attf-class="{{ isAlignedRight ? 'rounded-start-3' : 'rounded-end-3' }}"/>
-                                <div class="o-mail-Message-editable position-relative flex-grow-1" t-att-class="{
-                                    'p-1': message.isNote,
-                                    'o-mail-Message-body mb-0 p-3': !message.isNote,
-                                }">
-                                    <Composer autofocus="true" composer="message.composer" messageComponent="constructor" onDiscardCallback.bind="exitEditMode" onPostCallback.bind="exitEditMode" mode="'compact'"/>
-                                </div>
-                            </div>
                             <div t-if="props.hasActions and !message.isTransient" class="o-mail-Message-actions bg-view"
                                 t-att-class="{
                                     'position-absolute top-0': !env.inDiscussApp,
                                     'start-0 ms-3': isAlignedRight,
                                     'end-0 me-3': env.inChatWindow and !isAlignedRight or env.inChatter,
-                                    'mt-n4': env.inChatter and (message.isDiscussion or message.isNotification or message.isAutomatedMessage),
-                                    'mt-n5': env.inChatter and !(message.isDiscussion or message.isNotification or message.isAutomatedMessage),
-                                    'mt-2': env.inDiscussApp and (message.isDiscussion or message.isNotification or message.isAutomatedMessage),
+                                    'mt-n4': env.inChatter and (message.isDiscussion or message.isNotification),
+                                    'mt-n5': env.inChatter and !(message.isDiscussion or message.isNotification),
+                                    'mt-2': env.inDiscussApp and (message.isDiscussion or message.isNotification),
                                     'mt-n3': env.inChatWindow,
                                     'ms-2': env.inDiscussApp,
                                     'invisible': !isActive,
                                     'o-expanded': state.expandOptions
                                 }"
                             >
-                                <div class="d-flex rounded-1 shadow-sm overflow-hidden alignedRight" t-att-class="{
-                                        'mt-3': env.inChatter and !(message.isDiscussion or message.isNotification or message.isAutomatedMessage),
+                                <div class="d-flex rounded-1 shadow-sm overflow-hidden" t-att-class="{
+                                        'mt-3': env.inChatter and !(message.isDiscussion or message.isNotification),
                                         'flex-row-reverse': env.inChatWindow and isAlignedRight,
                                     }"
                                 >
diff --git a/addons/mail/static/src/core_ui/message_reactions.xml b/addons/mail/static/src/core_ui/message_reactions.xml
index 261a09a3f83..924a72d4610 100644
--- a/addons/mail/static/src/core_ui/message_reactions.xml
+++ b/addons/mail/static/src/core_ui/message_reactions.xml
@@ -4,9 +4,9 @@
     <div class="position-relative d-flex flex-wrap"
         t-att-class="{
             'flex-row-reverse me-3': env.inChatWindow and env.alignedRight,
-            'ms-3': !(env.inChatWindow and env.alignedRight) and (props.message.isDiscussion or props.message.isAutomatedMessage),
+            'ms-3': !(env.inChatWindow and env.alignedRight) and (props.message.isDiscussion),
         }"
-        t-attf-class="{{ (props.message.isDiscussion or props.message.isAutomatedMessage) ? 'mt-n2' : 'mt-1' }}">
+        t-attf-class="{{ props.message.isDiscussion ? 'mt-n2' : 'mt-1' }}">
         <button t-foreach="props.message.reactions" t-as="reaction" t-key="reaction.content" class="o-mail-MessageReaction btn d-flex p-0 border rounded-1 mb-1"
             t-on-click="() => this.onClickReaction(reaction)"
             t-on-contextmenu="onContextMenu"
diff --git a/addons/mail/static/src/core_ui/thread.scss b/addons/mail/static/src/core_ui/thread.scss
index eaff1ddf805..d32f572c49d 100644
--- a/addons/mail/static/src/core_ui/thread.scss
+++ b/addons/mail/static/src/core_ui/thread.scss
@@ -23,5 +23,5 @@
 
 .o-mail-Thread-jumpPresent {
     background-color: mix(map-get($theme-colors, 'info'), $o-webclient-background-color, 5%);
-    z-index: $o-mail-NavigableList-zIndex - 1;
+    z-index: $o-mail-NavigableList-zIndex - 2;
 }
diff --git a/addons/mail/static/src/web/message_patch.xml b/addons/mail/static/src/web/message_patch.xml
index d443b048dbe..c4e4516c16c 100644
--- a/addons/mail/static/src/web/message_patch.xml
+++ b/addons/mail/static/src/web/message_patch.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
     <t t-inherit="mail.Message" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('o-mail-Message-content')]/*[1]" position="before">
-            <t name="hasTrackingValue" t-if="message.type === 'notification' or message.isTransient or message.trackingValues.length > 0">
+            <t t-if="message.type === 'notification' or message.isTransient or message.trackingValues.length > 0" name="hasTrackingValue">
                 <t t-if="message.subtypeDescription">
                     <p class="mb-0">
                         <t t-esc="message.subtypeDescription"/>