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

[REF] mail: MessageList, review and simplify scss

Browse Source 
Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2826936

closes odoo/odoo#89683

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
2022-04-27 18:38:06 +02:00
parent 5d6e40ad05
commit 9797338944
2 changed files with 16 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/message_list/message_list.scss
-111
View File
@@ -1,121 +1,13 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_MessageList {
display: flex;
flex-flow: column;
overflow: auto;
&.o-empty {
align-items: center;
justify-content: center;
}
&:not(.o-empty) {
padding-bottom: map-get($spacers, 4);
}
}
.o_MessageList_empty {
flex: 1 1 auto;
height: map-get($sizes, 100);
width: map-get($sizes, 100);
align-self: center;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
padding: map-get($spacers, 4);
line-height: 2.5rem;
}
.o_MessageList_isLoadingMore {
align-self: center;
}
.o_MessageList_isLoadingMoreIcon {
margin-right: map-get($spacers, 1);
}
.o_MessageList_loadMore {
align-self: center;
}
.o_MessageList_separator {
display: flex;
align-items: center;
padding: map-get($spacers, 0) map-get($spacers, 0);
flex: 0 0 auto;
}
.o_MessageList_separatorLine {
flex: 1 1 auto;
width: auto;
}
.o_MessageList_separatorNewMessages {
// bug with safari: container does not auto-grow from child size
padding: map-get($spacers, 0) map-get($spacers, 0);
margin-right: map-get($spacers, 4);
}
.o_MessageList_separatorLabel {
padding: map-get($spacers, 0) map-get($spacers, 3);
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_MessageList {
background-color: $white;
}
.o_MessageList_empty {
text-align: center;
font-style: italic;
color: $text-muted;
}
.o_MessageList_emptyTitle {
font-weight: bold;
font-size: 1.3rem;
&.o-neutral-face-icon:before {
@extend %o-nocontent-init-image;
@include size(120px, 140px);
background: transparent url(/web/static/img/neutral_face.svg) no-repeat center;
}
}
.o_MessageList_loadMore {
cursor: pointer;
}
.o_MessageList_message.o-has-message-selection:not(.o-selected) {
opacity: 0.5;
}
.o_MessageList_separator {
font-weight: bold;
}
.o_MessageList_separatorLine {
border-color: $border-color;
}
.o_MessageList_separatorLineNewMessages {
border-color: lighten($o-brand-odoo, 15%);
}
.o_MessageList_separatorNewMessages {
color: lighten($o-brand-odoo, 15%);
}
.o_MessageList_separatorLabel {
background-color: $white;
}
// ------------------------------------------------------------------
@@ -124,7 +16,4 @@
.o_MessageList_separatorNewMessages:not(.o-disable-animation) {
transition: opacity 0.5s;
&.o-fade-leave {
opacity: 0;
}
}
addons/mail/static/src/components/message_list/message_list.xml
+16 -15
View File
@@ -3,26 +3,27 @@
<t t-name="mail.MessageList" owl="1">
<t t-if="messageListView">
<div class="o_MessageList" t-att-class="{ 'o-empty': messageListView.threadViewOwner.messages.length === 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
<div class="o_MessageList d-flex flex-column bg-white overflow-auto" t-att-class="{ 'o-empty align-items-center justify-content-center': messageListView.threadViewOwner.messages.length === 0, 'pb-4': messageListView.threadViewOwner.messages.length !== 0 }" t-attf-class="{{ className }}" t-on-scroll="onScroll" t-ref="root">
<!-- No result messages -->
<t t-if="messageListView.threadViewOwner.threadCache.orderedNonEmptyMessages.length === 0">
<div class="o_MessageList_empty o_MessageList_item">
<div class="o_MessageList_empty o_MessageList_item d-flex flex-grow-1 flex-column align-items-center justify-content-center align-self-center w-100 h-100 p-4 text-center text-muted font-italic">
<t t-if="messageListView.threadViewOwner.thread === messaging.inbox">
<div class="o_MessageList_emptyTitle">
<h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
Congratulations, your inbox is empty
</div>
</h4>
New messages appear here.
</t>
<t t-elif="messageListView.threadViewOwner.thread === messaging.starred">
<div class="o_MessageList_emptyTitle">
<h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
No starred messages
</div>
</h4>
You can mark any message as 'starred', and it shows up in this mailbox.
</t>
<t t-elif="messageListView.threadViewOwner.thread === messaging.history">
<div class="o_MessageList_emptyTitle o-neutral-face-icon">
<img src="/web/static/img/neutral_face.svg" alt="History"/>
<h4 class="o_MessageList_emptyTitle mb-3 font-weight-bolder">
No history messages
</div>
</h4>
Messages marked as read will appear in the history.
</t>
<t t-else="">
@@ -49,15 +50,15 @@
<t t-set="current_day" t-value="0"/>
<t t-foreach="messageListView.threadViewOwner.messageViews" t-as="messageView" t-key="messageView.localId">
<Transition visible="messageView.message === messageListView.threadViewOwner.thread.messageAfterNewMessageSeparator" name="'o-fade'" t-slot-scope="transition">
<div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': messaging.disableAnimation }" t-attf-class="{{transition.className}}">
<hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span>
<div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item d-flex flex-shrink-0 align-items-center mr-4 p-0 font-weight-bolder" t-att-class="{ 'o-disable-animation': messaging.disableAnimation, 'opacity-0': transition.className.includes('o-fade-leave') }" t-attf-class="{{transition.className}}">
<hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages flex-grow-1 w-auto"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages px-3">New messages</span>
</div>
</Transition>
<t t-if="!messageView.message.isEmpty">
<t t-set="message_day" t-value="messageView.message.dateDay"/>
<t t-if="current_day !== message_day">
<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"/>
<div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item d-flex flex-shrink-0 align-items-center pt-4 pb-0 px-0 font-weight-bolder">
<hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate px-3"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine flex-grow-1 w-auto border-top"/>
<t t-set="current_day" t-value="message_day"/>
</div>
</t>
@@ -74,13 +75,13 @@
<t t-name="mail.MessageList.loadMore" owl="1">
<t t-if="messageListView.threadViewOwner.threadCache.isLoadingMore">
<div class="o_MessageList_item o_MessageList_isLoadingMore">
<i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch"/>
<div class="o_MessageList_item o_MessageList_isLoadingMore align-self-center">
<i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-circle-o-notch me-1"/>
Loading...
</div>
</t>
<t t-elif="!messageListView.threadViewOwner.threadCache.isAllHistoryLoaded and !messageListView.threadViewOwner.thread.isTemporary">
<a class="o_MessageList_item o_MessageList_loadMore" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore">
<a class="o_MessageList_item o_MessageList_loadMore align-self-center" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore">
Load more
</a>
</t>