diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js index ac5c448c57c..78a9ca53152 100644 --- a/addons/mail/static/src/components/message/message.js +++ b/addons/mail/static/src/components/message/message.js @@ -212,7 +212,7 @@ export class Message extends Component { const index = this._lastReadMoreIndex++; // Insert link just before the first node const $readMoreLess = $('', { - class: 'o_Message_readMoreLess', + class: 'o_Message_readMoreLess d-block', href: '#', text: READ_MORE, }).insertBefore(group[0]); diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss index 832889fd540..6f68a28a827 100644 --- a/addons/mail/static/src/components/message/message.scss +++ b/addons/mail/static/src/components/message/message.scss @@ -2,6 +2,9 @@ // Layout // ------------------------------------------------------------------ +// TODO : When the migration to BS5 for the backend AND the frontend +// will be done, we could use BS5 classes to handle the position values +// (eg. position-absolute top-0 end-0 mt-n3) .o_Message_actionListContainer { @include o-position-absolute($top: - map-get($spacers, 3), $right: 0); @@ -11,29 +14,21 @@ } .o_Message_authorAvatar { - height: map-get($sizes, 100); - width: map-get($sizes, 100); object-fit: cover; } .o_Message_authorAvatarContainer { - position: relative; - height: 36px; - width: 36px; + height: $o-mail-thread-avatar-size; + width: $o-mail-thread-avatar-size; } .o_Message_authorName { + // Could be replaced by "me-2" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 2); } -.o_Message_Composer { - flex: 1 1 auto; -} - .o_Message_content { - word-wrap: break-word; - word-break: break-word; - *:not(li):not(li div) { // Message content can contain arbitrary HTML that might overflow and break // the style without this rule. @@ -53,77 +48,55 @@ .o_Message_core { min-width: 0; // allows this flex child to shrink more than its content + // Could be replaced by "me-4" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 4); } -.o_Message_header { - display: flex; - flex-flow: row wrap; - align-items: baseline; -} - .o_Message_headerDate { + // Could be replaced by "me-2" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 2); - font-size: 0.8em; } .o_Message_highlightIndicator { + // Could be replaced by "position absolute top-0 start-0" + // after the migration to BS5 for the backend AND the frontend @include o-position-absolute($top: 0, $left: 0); - height: 100%; width: $o-mail-discuss-message-highlight-indicator-width; transition: background-color .5s ease-out; } .o_Message_originThread { + // Could be replaced by "me-2" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 2); } .o_Message_partnerImStatusIcon { + // Could be replaced by "position absolute bottom-0 end-0" + // after the migration to BS5 for the backend AND the frontend @include o-position-absolute($bottom: 0, $right: 0); - display: flex; - align-items: center; - justify-content: center; } -.o_Message_prettyBody { - - > p { - margin-bottom: 0; - } - -} - -.o_Message_readMoreLess { - display: block; +.o_Message_prettyBody > p { + margin-bottom: 0; } .o_Message_seenIndicator { + // Could be replaced by "me-1" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 1); } .o_Message_sidebar { - flex: 0 0 $o-mail-message-sidebar-width; + flex-basis: $o-mail-message-sidebar-width; max-width: $o-mail-message-sidebar-width; - display: flex; - justify-content: center; -} - -.o_Message_sidebarItem { - margin-left: map-get($spacers, 1); - margin-right: map-get($spacers, 1); -} - -.o_Message_trackingValues { - margin-top: map-get($spacers, 2); -} - -.o_Message_trackingValue { - display: flex; - align-items: center; - flex-wrap: wrap; } .o_Message_trackingValueItem { + // Could be replaced by "me-1" after the migration to BS5 + // for the backend AND the frontend margin-inline-end: map-get($spacers, 1); } @@ -132,86 +105,18 @@ // ------------------------------------------------------------------ .o_Message { - background-color: $white; transition: background-color .5s ease-out; - .o_Message_partnerImStatusIcon { - color: $white; - } - - &.o-not-discussion { - background-color: gray('100'); - - &.o_Message_active { - background-color: mix(gray('100'), gray('200')); - } - - .o_Message_partnerImStatusIcon { - color: gray('100'); // same color as background of parent - } - - &.o-selected { - border-bottom: 1px solid darken(gray('400'), 5%); - } - } - - &.o-selected { - background-color: gray('400'); - - .o_Message_partnerImStatusIcon { - color: gray('400'); - } - } - - &.o-has-message-selection:not(.o-selected) { - opacity: 0.5; + &.o-not-discussion.o-selected { + border-bottom: 1px solid darken(gray('400'), 5%); } &.o-highlighted { background-color: rgba($o-brand-primary, .1); - } - &.o_Message_active { - background-color: gray('100'); - } -} - -.o_Message_authorName { - font-weight: $font-weight-bold; -} - -.o_Message_authorRedirect { - cursor: pointer; -} - -.o_Message_content .o_mention { - color: $o-brand-primary; - cursor: pointer; - - &:hover { - color: darken($o-brand-primary, 15%); - } -} - -.o_Message_date { - font-size: 0.8em; - color: gray('500'); - - &.o-message-selected { - color: gray('600'); - } -} - -.o_Message_highlightIndicator.o-active { - background-color: $o-brand-primary; -} - -.o_Message_originThread { - font-size: 0.8em; - color: gray('500'); - - &.o-message-selected { - color: gray('600'); + &.o_Message_active { + background-color: rgba($o-brand-primary, .2); + } } } @@ -219,23 +124,6 @@ font-size: 1.25em; // original size } -.o_Message_partnerImStatusIcon:not(.o_Message_partnerImStatusIcon-mobile) { - font-size: x-small; -} - -.o_Message_notificationIconClickable { - color: gray('600'); - cursor: pointer; - - &.o-error { - color: o-text-color('danger'); - } -} - -.o_Message_subject { - font-style: italic; -} - // Used to hide buttons on rating emails in chatter // FIXME: should use a better approach for not having such buttons // in chatter of such messages, but keep having them in emails. diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml index 9595f15d7ce..111199088cb 100644 --- a/addons/mail/static/src/components/message/message.xml +++ b/addons/mail/static/src/components/message/message.xml @@ -17,25 +17,33 @@ 'o-squashed': messageView.isSquashed, 'o-starred': messageView.message.isStarred, 'mt-3': !messageView.isSquashed and messageView.threadView, + 'bg-white': (messageView.message.is_discussion or messageView.message.is_notification) and !messageView.isSelected and !(messageView.message.isHighlighted or messageView.isHighlighted) and !messageView.isActive, + 'bg-100': (!(messageView.message.is_discussion or messageView.message.is_notification) and !messageView.isActive and !messageView.isSelected) or (messageView.isActive and !messageView.isSelected and (messageView.message.is_discussion or messageView.message.is_notification) and !(messageView.message.isHighlighted or messageView.isHighlighted)), + 'bg-200': !(messageView.message.is_discussion or messageView.message.is_notification) and messageView.isActive and !messageView.isSelected, + 'bg-400': messageView.isSelected and !(messageView.message.isHighlighted or messageView.isHighlighted), + 'opacity-50': (messageView.threadView and messageView.threadView.replyingToMessageView) and !messageView.isSelected, }" t-attf-class="{{ messageView.extraClass }} {{ className }}" t-on-click="messageView.onClick" t-on-mouseenter="messageView.onMouseenter" t-on-mouseleave="messageView.onMouseleave" t-att-data-message-local-id="messageView.message.localId" t-ref="root" > -
+
-
-
+
+
-
- Avatar +
+ Avatar -
+ -
+
-
+
-
+
-
+ -
+ -
+ -
+ - + + + -
+ Anonymous -
+ -
+ - -
+ -
+ (from #channel) on document -
+ - + - + @@ -122,9 +132,9 @@
-

Subject:

+ Subject: -
+
@@ -138,10 +148,10 @@

-

    +
    • -
      +