[IMP] mail: MessageInReplyToView, redesign

This commit redesigns the `MessageInReplyToView` component.
Part of the ChatWindow/Discuss redesign

task-2823627

Part-of: odoo/odoo#92872

addons/mail/static/src/components/message/message.scss

@@ -50,10 +50,10 @@
 // ------------------------------------------------------------------
 
 .o_Message {
-    transition: background-color .5s ease-out;
+    transition: background-color .2s ease-out, opacity .5s ease-out, box-shadow .5s ease-out, transform .2s ease-out;
 
-    &.o-not-discussion.o-selected {
-        border-bottom: 1px solid darken(map-get($grays, '400'), 5%);
+    &.o-isReplyHighlighted {
+        transform: translateY(-#{map-get($spacers, 3)});
     }
 }
 

addons/mail/static/src/components/message/message.xml

@@ -10,6 +10,7 @@
                     'o-discussion': messageView.message.isDiscussionOrNotification,
                     'o-has-message-selection': messageView.messageListViewMessageViewItemOwner and messageView.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.replyingToMessageView,
                     'o-highlighted': messageView.message.isHighlighted or messageView.isHighlighted,
+                    'o-isReplyHighlighted bg-white shadow-lg': messageView.isHighlighted,
                     'o-isDeviceSmall': messaging.device.isSmall,
                     'o-not-discussion': !messageView.message.isDiscussionOrNotification,
                     'o-notification': messageView.message.message_type === 'notification',
@@ -25,9 +26,8 @@
                 }" t-attf-class="{{ messageView.extraClass }} {{ className }}" role="group" t-att-aria-label="messageView.message.messageTypeText" t-on-click="messageView.onClick" t-on-mouseenter="messageView.onMouseenter" t-on-mouseleave="messageView.onMouseleave" t-att-data-id="messageView.message.id" t-att-data-message-local-id="messageView.message.localId"
                 t-ref="root"
             >
-                <MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView"/>
-                <div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute top-0 end-0 mt-n3 px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
-                    <MessageActionList record="messageView.messageActionList"/>
+                <div class="o_Message_inReplyToWrap" t-att-class="{ 'me-5': messageView.isInDiscuss or messageView.isInChatWindowAndIsAlignedLeft, 'd-flex justify-content-end ms-5': messageView.isInChatWindowAndIsAlignedRight }">
+                    <MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView" className="'mb-1'" classNameObj="{ 'me-5': messageView.isInChatWindowAndIsAlignedLeft, 'ms-5': messageView.isInChatWindowAndIsAlignedRight }"/>
                 </div>
                 <div class="position-relative d-flex flex-shrink-0" t-att-class="{ 'flex-row-reverse': messageView.isInChatWindowAndIsAlignedRight }">
                     <div class="o_Message_sidebar d-flex flex-shrink-0" t-att-class="{ 'o-message-squashed align-items-start': messageView.isSquashed, 'justify-content-center': messageView.isInChatWindow }">

addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.scss

@@ -1,17 +1,27 @@
-.o_MessageInReplyToView {
-    padding-left: $o-mail-message-sidebar-width;
+.o_MessageInReplyToView_corner {
+    &.o-isLeftAlign {
+        left: $o-mail-message-sidebar-width / 2;
+        border-radius: $o-mail-rounded-rectangle-border-radius-sm 0 0 0;
+    }
+    
+    &.o-isRightAlign {
+        right: $o-mail-message-sidebar-width / 2;
+        border-radius: 0 $o-mail-rounded-rectangle-border-radius-sm 0 0;
+    }
 }
 
-.o_MessageInReplyToView_corner {
-    left: $o-mail-message-sidebar-width / 2;
-    border-left: $border-width solid currentColor;
-    border-top: $border-width solid currentColor;
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm 0 0 0;
+.o_MessageInReplyToView_avatar {
+    width: $o-mail-thread-avatar-size / 2;
+    height: $o-mail-thread-avatar-size / 2;
+}
+
+.o_MessageInReplyToView_wrapInner {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 }
 
 .o_MessageInReplyToView_body {
-    @include o-hover-text-color($o-main-color-muted, inherit);
-
     // Make the body single line when possible
     p, div {
         display: inline;

addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml

@@ -2,18 +2,23 @@
 <templates xml:space="preserve">
     <t t-name="mail.MessageInReplyToView" owl="1">
         <t t-if="messageInReplyToView">
-            <small class="o_MessageInReplyToView position-relative d-block pt-1 pe-2 text-small text-truncate" t-attf-class="{{ className }}" t-ref="root">
-                <span class="o_MessageInReplyToView_corner position-absolute bottom-0 mb-1 pe-4 pb-2 opacity-50"/>
+            <small class="o_MessageInReplyToView position-relative d-block text-small" t-attf-class="{{ className }} {{ messageInReplyToView.messageView.isInChatWindowAndIsAlignedRight ? 'justify-content-end pe-5': 'ps-5' }}" t-ref="root">
+                <span class="o_MessageInReplyToView_corner position-absolute bottom-0 top-50 pe-4 border-top text-300" t-attf-class="{{  messageInReplyToView.messageView.isInChatWindowAndIsAlignedRight ? 'o-isRightAlign border-end' : 'o-isLeftAlign border-start' }}" t-att-class="{ 'ms-n2': messageInReplyToView.messageView.isInDiscuss }"/>
                 <t t-if="!messageInReplyToView.messageView.message.parentMessage.isEmpty">
-                    <b class="o_MessageInReplyToView_author text-muted ms-2">@<t t-esc="messageInReplyToView.messageView.message.parentMessage.authorName"/></b>
-                    <span class="o_MessageInReplyToView_body ms-1 o_cursor_pointer" t-on-click="messageInReplyToView.onClickReply">
-                        <t t-if="messageInReplyToView.hasBodyBackLink">
-                            <t t-out="messageInReplyToView.messageView.message.parentMessage.prettyBodyAsMarkup"/>
-                        </t>
-                        <t t-if="messageInReplyToView.hasAttachmentBackLink">
-                            <span class="fst-italic me-2">Click to see the attachments</span>
-                            <i class="fa fa-image"/>
-                        </t>
+                    <span class="o_MessageInReplyToView_wrapOuter d-flex align-items-center text-muted opacity-75 opacity-100-hover o_cursor_pointer"  t-attf-class="{{ messageInReplyToView.messageView.isInChatWindowAndIsAlignedRight ? 'pe-3': 'ps-3' }}" t-on-click="messageInReplyToView.onClickReply">
+                        <img class="o_MessageInReplyToView_avatar me-2 rounded-circle" t-att-src="messageInReplyToView.messageView.message.parentMessage.avatarUrl" t-att-title="messageInReplyToView.messageView.message.parentMessage.authorName" alt="Avatar"/>
+                        <span class="o_MessageInReplyToView_wrapInner overflow-hidden">
+                            <b class="o_MessageInReplyToView_author">@<t t-out="messageInReplyToView.messageView.message.parentMessage.authorName"/></b>
+                            <span class="o_MessageInReplyToView_body text-break">
+                                <t t-if="messageInReplyToView.hasBodyBackLink">
+                                    <t t-out="messageInReplyToView.messageView.message.parentMessage.prettyBodyAsMarkup"/>
+                                </t>
+                                <t t-if="messageInReplyToView.hasAttachmentBackLink">
+                                    <span class="me-2 fst-italic">Click to see the attachments</span>
+                                    <i class="fa fa-image"/>
+                                </t>
+                            </span>
+                        </span>
                     </span>
                 </t>
                 <t t-if="messageInReplyToView.messageView.message.parentMessage.isEmpty">