[REF] mail: Message, review and simplify scss
Part of the overall v16 SCSS optimization/restyle, task-2704984 task-2819763 closes odoo/odoo#88535 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
@@ -212,7 +212,7 @@ export class Message extends Component {
|
||||
const index = this._lastReadMoreIndex++;
|
||||
// Insert link just before the first node
|
||||
const $readMoreLess = $('<a>', {
|
||||
class: 'o_Message_readMoreLess',
|
||||
class: 'o_Message_readMoreLess d-block',
|
||||
href: '#',
|
||||
text: READ_MORE,
|
||||
}).insertBefore(group[0]);
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<MessageInReplyToView t-if="messageView.messageInReplyToView" messageInReplyToViewLocalId="messageView.messageInReplyToView.localId"/>
|
||||
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer pl-5 pr-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
|
||||
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute pl-5 pr-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
|
||||
<MessageActionList localId="messageView.messageActionList.localId"/>
|
||||
</div>
|
||||
<div class="d-flex flex-shrink-0">
|
||||
<div class="o_Message_highlightIndicator" t-att-class="{ 'o-active': messageView.message.isHighlighted or messageView.isHighlighted }"/>
|
||||
<div class="o_Message_sidebar" t-att-class="{ 'o-message-squashed align-items-start': messageView.isSquashed }">
|
||||
<div class="o_Message_highlightIndicator h-100" t-att-class="{ 'o-active bg-primary': messageView.message.isHighlighted or messageView.isHighlighted }"/>
|
||||
<div class="o_Message_sidebar d-flex justify-content-center flex-shrink-0" t-att-class="{ 'o-message-squashed align-items-start': messageView.isSquashed }">
|
||||
<t t-if="!messageView.isSquashed">
|
||||
<div class="o_Message_authorAvatarContainer o_Message_sidebarItem">
|
||||
<img class="o_Message_authorAvatar rounded-circle" t-att-class="{ o_Message_authorRedirect: messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.hasAuthorOpenChat ? messageView.authorAvatarTitleText : ''" alt="Avatar"/>
|
||||
<div class="o_Message_authorAvatarContainer o_Message_sidebarItem position-relative mx-1">
|
||||
<img class="o_Message_authorAvatar w-100 h-100 rounded-circle" t-att-class="{ 'o_Message_authorRedirect o_cursor_pointer': messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.hasAuthorOpenChat ? messageView.authorAvatarTitleText : ''" alt="Avatar"/>
|
||||
<t t-if="messageView.message.author and messageView.message.author.im_status">
|
||||
<PartnerImStatusIcon
|
||||
className="'o_Message_partnerImStatusIcon'"
|
||||
className="'o_Message_partnerImStatusIcon d-flex align-items-center justify-content-center'"
|
||||
classNameObj="{
|
||||
'o-message-selected': messageView.isSelected,
|
||||
'o-message-selected text-400': messageView.isSelected,
|
||||
'o_Message_partnerImStatusIcon-mobile': messaging.device.isMobile,
|
||||
'small': !messaging.device.isMobile,
|
||||
'text-white': !messageView.isSelected and (messageView.message.is_discussion or messageView.message.is_notification),
|
||||
'text-100': !(messageView.message.is_discussion or messageView.message.is_notification) and !messageView.isSelected,
|
||||
}"
|
||||
hasOpenChat="messageView.hasAuthorOpenChat"
|
||||
partnerLocalId="messageView.message.author.localId"
|
||||
@@ -45,70 +53,72 @@
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-if="messageView.isActive and messageView.message.date">
|
||||
<div class="o_Message_date o_Message_sidebarItem mt-1" t-att-class="{ 'o-message-selected': messageView.isSelected }">
|
||||
<small class="o_Message_date o_Message_sidebarItem mt-1 mx-1" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
|
||||
<t t-esc="messageView.message.shortTime"/>
|
||||
</div>
|
||||
</small>
|
||||
</t>
|
||||
<t t-if="!messageView.isActive and messageView.messageSeenIndicatorView">
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator'" localId="messageView.messageSeenIndicatorView.localId"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
<div class="o_Message_core flex-grow-1">
|
||||
<div class="o_Message_core flex-grow-1 me-4">
|
||||
<t t-if="!messageView.isSquashed">
|
||||
<div class="o_Message_header ml-2">
|
||||
<div class="o_Message_header d-flex flex-wrap align-items-baseline ml-2">
|
||||
<t t-if="messageView.message.author">
|
||||
<div class="o_Message_authorName o_Message_authorRedirect o_redirect text-truncate" t-on-click="messageView.onClickAuthorName" title="Open profile">
|
||||
<strong class="o_Message_authorName o_Message_authorRedirect o_redirect o_cursor_pointer text-truncate" t-on-click="messageView.onClickAuthorName" title="Open profile">
|
||||
<t t-if="messageView.message.originThread">
|
||||
<t t-esc="messageView.message.originThread.getMemberName(messageView.message.author)"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-esc="messageView.message.author.nameOrDisplayName"/>
|
||||
</t>
|
||||
</div>
|
||||
</strong>
|
||||
</t>
|
||||
<t t-elif="messageView.message.guestAuthor">
|
||||
<div class="o_Message_authorName text-truncate">
|
||||
<strong class="o_Message_authorName text-truncate">
|
||||
<t t-esc="messageView.message.guestAuthor.name"/>
|
||||
</div>
|
||||
</strong>
|
||||
</t>
|
||||
<t t-elif="messageView.message.email_from">
|
||||
<a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ messageView.message.email_from }}?subject=Re: {{ messageView.message.subject ? messageView.message.subject : '' }}">
|
||||
<t t-esc="messageView.message.email_from"/>
|
||||
<strong>
|
||||
<t t-esc="messageView.message.email_from"/>
|
||||
</strong>
|
||||
</a>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="o_Message_authorName text-truncate">
|
||||
<strong class="o_Message_authorName text-truncate">
|
||||
Anonymous
|
||||
</div>
|
||||
</strong>
|
||||
</t>
|
||||
<t t-if="messageView.message.date">
|
||||
<div class="o_Message_date o_Message_headerDate" t-att-class="{ 'o-message-selected': messageView.isSelected }" t-att-title="messageView.message.datetime">
|
||||
<small class="o_Message_date o_Message_headerDate text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
|
||||
- <t t-esc="messageView.message.dateFromNow"/>
|
||||
</div>
|
||||
</small>
|
||||
</t>
|
||||
<t t-if="messageView.messageSeenIndicatorView">
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator'" localId="messageView.messageSeenIndicatorView.localId"/>
|
||||
</t>
|
||||
<t t-if="messageView.threadView and messageView.message.originThread and messageView.message.originThread !== messageView.threadView.thread">
|
||||
<div class="o_Message_originThread" t-att-class="{ 'o-message-selected': messageView.isSelected }">
|
||||
<small class="o_Message_originThread" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
|
||||
<t t-if="messageView.message.originThread.model === 'mail.channel'">
|
||||
(from <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName">#<t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">channel</t></a>)
|
||||
</t>
|
||||
<t t-else="">
|
||||
on <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName"><t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">document</t></a>
|
||||
</t>
|
||||
</div>
|
||||
</small>
|
||||
</t>
|
||||
<t t-if="messageView.threadView and messageView.message.originThread and messageView.message.originThread === messageView.threadView.thread and messageView.message.notifications.length > 0">
|
||||
<t t-if="messageView.message.failureNotifications.length > 0">
|
||||
<span class="o_Message_notificationIconClickable o-error" t-on-click="messageView.onClickFailure">
|
||||
<span class="o_Message_notificationIconClickable o-error o_cursor_pointer text-danger" t-on-click="messageView.onClickFailure">
|
||||
<i name="failureIcon" class="o_Message_notificationIcon fa fa-envelope"/>
|
||||
</span>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<Popover>
|
||||
<span class="o_Message_notificationIconClickable">
|
||||
<span class="o_Message_notificationIconClickable o_cursor_pointer text-600">
|
||||
<i name="notificationIcon" class="o_Message_notificationIcon fa fa-envelope-o"/>
|
||||
</span>
|
||||
<t t-set-slot="opened">
|
||||
@@ -122,9 +132,9 @@
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="messageView.message.subject and !messageView.message.isSubjectSimilarToOriginThreadName">
|
||||
<p class="o_Message_subject mx-2 mb-1">Subject: <t t-esc="messageView.message.subject"/></p>
|
||||
<em class="o_Message_subject mx-2 mb-1">Subject: <t t-esc="messageView.message.subject"/></em>
|
||||
</t>
|
||||
<div class="o_Message_content mx-2" t-ref="content">
|
||||
<div class="o_Message_content mx-2 text-break" t-ref="content">
|
||||
<t t-if="!messageView.composerViewInEditing">
|
||||
<div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- messageView.message.prettyBody is inserted here from _update() -->
|
||||
</t>
|
||||
@@ -138,10 +148,10 @@
|
||||
<p t-esc="messageView.message.subtype_description"/>
|
||||
</t>
|
||||
<t t-if="messageView.message.trackingValues.length > 0">
|
||||
<ul class="o_Message_trackingValues">
|
||||
<ul class="o_Message_trackingValues mt-2">
|
||||
<t t-foreach="messageView.message.trackingValues" t-as="value" t-key="value.id">
|
||||
<li>
|
||||
<div class="o_Message_trackingValue">
|
||||
<div class="o_Message_trackingValue d-flex align-items-center flex-wrap">
|
||||
<div class="o_Message_trackingValueFieldName o_Message_trackingValueItem" t-esc="value.changed_field"/>
|
||||
<t t-if="value.old_value">
|
||||
<div class="o_Message_trackingValueOldValue o_Message_trackingValueItem" t-esc="value.old_value"/>
|
||||
|
||||
Reference in New Issue
Block a user