Reduce MessageList html/css footprint

This commit is contained in:
djmaze 2021-08-10 12:22:55 +02:00
parent 48e8138764
commit 6a903bc9b2
3 changed files with 19 additions and 18 deletions

View file

@ -142,20 +142,15 @@ html.rl-no-preview-pane {
line-height: 13px; line-height: 13px;
} }
.listEmptyList, .listEmptyListLoading, .listDragOver, .listError, .listEmptySearchList { .listEmptyMessage, .listLoading, .listDragOver, .listError {
color: #999; color: #999;
text-align: center; text-align: center;
padding: 60px 10px; padding: 60px 10px;
font-size: 24px; font-size: 24px;
line-height: 30px; line-height: 30px;
.e-icon {
font-size: 24px;
line-height: 30px;
}
} }
.listEmptyListLoading .icon-spinner { .listLoading .icon-spinner {
width: 0.75em; width: 0.75em;
height: 0.75em; height: 0.75em;
margin: 0; margin: 0;

View file

@ -84,7 +84,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.messageListEndThreadUid = MessageUserStore.listEndThreadUid; this.messageListEndThreadUid = MessageUserStore.listEndThreadUid;
this.messageListCheckedOrSelected = MessageUserStore.listCheckedOrSelected;
this.messageListCompleteLoadingThrottle = MessageUserStore.listCompleteLoading; this.messageListCompleteLoadingThrottle = MessageUserStore.listCompleteLoading;
initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT')); initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT'));
@ -549,7 +548,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
this.setActionForAll( this.setActionForAll(
FolderUserStore.currentFolderFullNameRaw(), FolderUserStore.currentFolderFullNameRaw(),
MessageSetAction.SetSeen, MessageSetAction.SetSeen,
this.messageListEndThreadUid() MessageUserStore.listEndThreadUid()
); );
} }
@ -658,11 +657,21 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
} }
} }
listEmptyMessage() {
if (!this.dragOver()
&& !MessageUserStore.list().length
&& !MessageUserStore.listCompleteLoading()
&& !MessageUserStore.listError()) {
return i18n('MESSAGE_LIST/EMPTY_' + (MessageUserStore.listSearch() ? 'SEARCH_' : '') + 'LIST');
}
return '';
}
clearListIsVisible() { clearListIsVisible() {
return ( return (
!this.messageListSearchDesc() && !this.messageListSearchDesc() &&
!this.messageListError() && !MessageUserStore.listError() &&
!this.messageListEndThreadUid() && !MessageUserStore.listEndThreadUid() &&
MessageUserStore.list().length && MessageUserStore.list().length &&
(this.isSpamFolder() || this.isTrashFolder()) (this.isSpamFolder() || this.isTrashFolder())
); );
@ -820,7 +829,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
if (this.messageListSearchDesc()) { if (this.messageListSearchDesc()) {
this.cancelSearch(); this.cancelSearch();
return false; return false;
} else if (this.messageListEndThreadUid()) { } else if (MessageUserStore.listEndThreadUid()) {
this.cancelThreadUid(); this.cancelThreadUid();
return false; return false;
} }

View file

@ -175,22 +175,19 @@
</div> </div>
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div> <div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div>
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea"> <div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
<i class="fontastic e-icon"></i> <i class="fontastic"></i>
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span> <span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
</div> </div>
<div class="listClear" data-bind="visible: clearListIsVisible()"> <div class="listClear" data-bind="visible: clearListIsVisible()">
<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></a> <a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></a>
</div> </div>
<div class="listError error" data-bind="visible: !dragOver() && '' !== messageListError(), text: messageListError"></div> <div class="listError error" data-bind="visible: !dragOver() && '' !== messageListError(), text: messageListError"></div>
<div class="listEmptyList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' === messageListSearch()" <div class="listEmptyMessage" data-bind="visible: listEmptyMessage(), text: listEmptyMessage()"></div>
data-i18n="MESSAGE_LIST/EMPTY_LIST"></div> <div class="listLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
<div class="listEmptyListLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
messageListCompleteLoadingThrottle() && '' === messageListError()"> messageListCompleteLoadingThrottle() && '' === messageListError()">
<i class="icon-spinner"></i> <i class="icon-spinner"></i>
<span data-i18n="GLOBAL/LOADING"></span> <span data-i18n="GLOBAL/LOADING"></span>
</div> </div>
<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()"
data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></div>
<div data-bind="dragmessages: getDragData"> <div data-bind="dragmessages: getDragData">
<div class="messageListPlace" data-bind="foreach: messageList"> <div class="messageListPlace" data-bind="foreach: messageList">