pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mail: improve message layout, reduce empty space

Browse Source 
task-2646144

closes odoo/odoo#76518

X-original-commit: 1969b0890317aaa7452bd1e54570a22fae4991c2
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Samuel Degueldre
2021-09-14 16:41:01 +00:00
parent 9e20e7d9c0
commit 55692897c5
7 changed files with 68 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/message/message.scss
+16 -16
View File
@@ -5,9 +5,13 @@
.o_Message {
display: flex;
flex: 0 0 auto;
}
&:not(:first-child) {
margin-top: map-get($spacers, 1);
.o_Message_actionListContainer {
@include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
&.o-squashed {
@include o-position-absolute($top: - map-get($spacers, 4), $right: 0);
}
}
@@ -54,8 +58,6 @@
.o_Message_core {
min-width: 0; // allows this flex child to shrink more than its content
margin-top: map-get($spacers, 1);
margin-bottom: map-get($spacers, 1);
margin-inline-end: map-get($spacers, 4);
}
@@ -92,7 +94,7 @@
.o_Message_prettyBody {
> p:last-of-type {
> p {
margin-bottom: 0;
}
@@ -110,7 +112,6 @@
flex: 0 0 $o-mail-message-sidebar-width;
max-width: $o-mail-message-sidebar-width;
display: flex;
margin-top: map-get($spacers, 2);
justify-content: center;
}
@@ -147,6 +148,10 @@
&.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
}
@@ -171,6 +176,10 @@
&.o-highlighted {
background-color: rgba($o-brand-primary, .1);
}
&.o_Message_active {
background-color: gray('100');
}
}
.o_Message_authorName {
@@ -191,6 +200,7 @@
}
.o_Message_date {
font-size: 0.8em;
color: gray('500');
&.o-message-selected {
@@ -198,16 +208,6 @@
}
}
.o_Message_contentWrapper {
// transparent border to avoid layout moving around when it becomes active
border: $border-width solid transparent;
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
&.o_Message_contentWrapper_active {
border: $border-width solid $border-color;
}
}
.o_Message_highlightIndicator.o-active {
background-color: $o-brand-primary;
}
addons/mail/static/src/components/message/message.xml
+47 -50
View File
@@ -2,8 +2,9 @@
<templates xml:space="preserve">
<t t-name="mail.Message" owl="1">
<div class="o_Message"
<div class="o_Message position-relative pt-1"
t-att-class="{
'o_Message_active': isActive,
'o-clicked': state.isClicked,
'o-discussion': message and (message.is_discussion or message.is_notification),
'o-has-message-selection': threadView and threadView.threadViewer and threadView.threadViewer.selectedMessage,
@@ -14,9 +15,13 @@
'o-selected': isSelected,
'o-squashed': props.isSquashed,
'o-starred': message and message.isStarred,
'mt-3': !props.isSquashed,
}" t-on-click="_onClick" t-on-mouseenter="state.isHovered = true" t-on-mouseleave="state.isHovered = false" t-att-data-message-local-id="message and message.localId"
>
<t t-if="message" name="rootCondition">
<div t-if="(isActive or message.actionList.showDeleteConfirm) and props.showActions" class="o_Message_actionListContainer pl-5 pr-3" t-att-class="{ 'o-squashed': props.isSquashed }">
<MessageActionList actionListLocalId="message.actionList.localId" hasReplyIcon="props.hasReplyIcon" hasMarkAsReadIcon="props.hasMarkAsReadIcon"/>
</div>
<div class="o_Message_highlightIndicator" t-att-class="{ 'o-active': message.isHighlighted }"/>
<div class="o_Message_sidebar" t-att-class="{ 'o-message-squashed align-items-start': props.isSquashed }">
<t t-if="!props.isSquashed">
@@ -37,7 +42,7 @@
</t>
<t t-else="">
<t t-if="isActive and message.date">
<div class="o_Message_date o_Message_sidebarItem d-flex" t-att-class="{ 'o-message-selected': isSelected }">
<div class="o_Message_date o_Message_sidebarItem mt-1" t-att-class="{ 'o-message-selected': isSelected }">
<t t-esc="shortTime"/>
</div>
</t>
@@ -108,55 +113,47 @@
</t>
</div>
</t>
<div class="o_Message_contentWrapper position-relative" t-att-class="{ 'o_Message_contentWrapper_active': isActive and props.showActions }">
<MessageActionList
t-if="(isActive or message.actionList.showDeleteConfirm) and props.showActions"
actionListLocalId="message.actionList.localId"
hasReplyIcon="props.hasReplyIcon"
hasMarkAsReadIcon="props.hasMarkAsReadIcon"
/>
<div class="o_Message_content m-2" t-ref="content">
<div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
<t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
<p t-esc="message.subtype_description"/>
</t>
<t t-if="trackingValues.length > 0">
<ul class="o_Message_trackingValues">
<t t-foreach="trackingValues" t-as="value" t-key="value.id">
<li>
<div class="o_Message_trackingValue">
<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"/>
</t>
<div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/>
<t t-if="value.new_value">
<div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/>
</t>
</div>
</li>
</t>
</ul>
</t>
</div>
<div class="d-flex flex-wrap ml-2">
<t t-foreach="message.messageReactionGroups" t-as="messageReactionGroup" t-key="messageReactionGroup.localId">
<MessageReactionGroup messageReactionGroupLocalId="messageReactionGroup.localId"/>
</t>
</div>
<t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName">
<p class="o_Message_subject m-2 mt-0">Subject: <t t-esc="message.subject"/></p>
<t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName">
<p class="o_Message_subject mx-2 mb-1">Subject: <t t-esc="message.subject"/></p>
</t>
<div class="o_Message_content mx-2" t-ref="content">
<div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
<t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
<p t-esc="message.subtype_description"/>
</t>
<t t-if="message.attachments and message.attachments.length > 0">
<div class="o_Message_footer">
<AttachmentList
class="o_Message_attachmentList"
areAttachmentsDownloadable="true"
areAttachmentsEditable="message.author === messaging.currentPartner"
attachmentLocalIds="message.attachments.map(attachment => attachment.localId)"
attachmentsDetailsMode="props.attachmentsDetailsMode"
/>
</div>
<t t-if="trackingValues.length > 0">
<ul class="o_Message_trackingValues">
<t t-foreach="trackingValues" t-as="value" t-key="value.id">
<li>
<div class="o_Message_trackingValue">
<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"/>
</t>
<div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/>
<t t-if="value.new_value">
<div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/>
</t>
</div>
</li>
</t>
</ul>
</t>
</div>
<t t-if="message.attachments and message.attachments.length > 0">
<div class="o_Message_footer">
<AttachmentList
class="o_Message_attachmentList"
areAttachmentsDownloadable="true"
areAttachmentsEditable="message.author === messaging.currentPartner"
attachmentLocalIds="message.attachments.map(attachment => attachment.localId)"
attachmentsDetailsMode="props.attachmentsDetailsMode"
/>
</div>
</t>
<div t-if="message.messageReactionGroups.length > 0" class="d-flex flex-wrap ml-2">
<t t-foreach="message.messageReactionGroups" t-as="messageReactionGroup" t-key="messageReactionGroup.localId">
<MessageReactionGroup class="mr-1 mb-1" messageReactionGroupLocalId="messageReactionGroup.localId"/>
</t>
</div>
</div>
addons/mail/static/src/components/message_action_list/message_action_list.scss
-1
View File
@@ -1,5 +1,4 @@
.o_MessageActionList {
@include o-position-absolute($top: - map-get($spacers, 3), $right: map-get($spacers, 2));
background-color: $white;
border: $border-width solid $border-color;
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
addons/mail/static/src/components/message_list/message_list.scss
-4
View File
@@ -49,10 +49,6 @@
flex: 0 0 auto;
}
.o_MessageList_separatorDate {
padding: map-get($spacers, 4) map-get($spacers, 0);
}
.o_MessageList_separatorLine {
flex: 1 1 auto;
width: auto;
addons/mail/static/src/components/message_list/message_list.xml
+2 -1
View File
@@ -44,6 +44,7 @@
<t t-elif="props.order === 'asc' and orderedMessages.length > 0">
<t t-call="mail.MessageList.loadMore"/>
</t>
<div t-if="props.order === 'asc' and threadView.nonEmptyMessages.length !== 0" class="flex-grow-1"/>
<!-- MESSAGES -->
<t t-set="current_day" t-value="0"/>
<t t-set="prev_message" t-value="0"/>
@@ -56,7 +57,7 @@
<t t-if="!message.isEmpty">
<t t-set="message_day" t-value="getDateDay(message)"/>
<t t-if="current_day !== message_day">
<div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item">
<div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item pt-4">
<hr class="o_MessageList_separatorLine"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine"/>
<t t-set="current_day" t-value="message_day"/>
<t t-set="isMessageSquashed" t-value="false"/>
addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="mail.MessageReactionGroup" owl="1">
<div class="o_MessageReactionGroup d-flex mr-1 mb-2" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick">
<div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick">
<t t-if="messageReactionGroup">
<span class="o_MessageReactionGroup_content mx-1">
<t t-esc="messageReactionGroup.content"/>
addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
+2
View File
@@ -9,6 +9,8 @@
}
.o_MessageSeenIndicator_icon {
// fa icons have a line height of 1 by default which breaks alignment
line-height: 1.5;
&.o-first {
padding-left: map-get($spacers, 1);