mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-28 18:41:34 +08:00
Improved mailbox handling of empty message subject and messagelist folder detection
This commit is contained in:
the-djmaze
parent
9559986499
commit
eb0cd796b0
8 changed files with 56 additions and 73 deletions
|
|
@ -375,7 +375,6 @@ export class MessageModel extends AbstractModel {
|
|||
focused: this.focused(),
|
||||
important: this.isImportant(),
|
||||
withAttachments: !!this.attachments().length,
|
||||
emptySubject: !this.subject(),
|
||||
// hasChildrenMessage: 1 < this.threadsLen(),
|
||||
hasUnseenSubMessage: this.hasUnseenSubMessage(),
|
||||
hasFlaggedSubMessage: this.hasFlaggedSubMessage()
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Scope } from 'Common/Enums';
|
||||
import { Layout, ClientSideKeyNameMessageListSize } from 'Common/EnumsUser';
|
||||
import { doc, leftPanelDisabled, moveAction, Settings, elementById } from 'Common/Globals';
|
||||
import { doc, createElement, leftPanelDisabled, moveAction, Settings, elementById } from 'Common/Globals';
|
||||
import { pString, pInt } from 'Common/Utils';
|
||||
import { setLayoutResizer } from 'Common/UtilsUser';
|
||||
import { getFolderFromCacheList, getFolderFullName, getFolderInboxName } from 'Common/Cache';
|
||||
import { i18n } from 'Common/Translator';
|
||||
import { i18n, initOnStartOrLangChange } from 'Common/Translator';
|
||||
import { SettingsUserStore } from 'Stores/User/Settings';
|
||||
|
||||
import { AppUserStore } from 'Stores/User/App';
|
||||
|
|
@ -22,6 +22,12 @@ import { AbstractScreen } from 'Knoin/AbstractScreen';
|
|||
|
||||
export class MailBoxUserScreen extends AbstractScreen {
|
||||
constructor() {
|
||||
var styleSheet = createElement('style');
|
||||
doc.head.appendChild(styleSheet);
|
||||
initOnStartOrLangChange(() =>
|
||||
styleSheet.innerText = '.subjectParent:empty::after,.subjectParent .subject:empty::after'
|
||||
+'{content:"'+i18n('MESSAGE/EMPTY_SUBJECT_TEXT')+'"}'
|
||||
);
|
||||
super('mailbox', [
|
||||
SystemDropDownUserView,
|
||||
MailFolderList,
|
||||
|
|
|
|||
|
|
@ -246,6 +246,11 @@ html:not(rl-mobile) {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.subjectParent:empty {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.threadsCountParent {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
|
|
@ -266,11 +271,6 @@ html:not(rl-mobile) {
|
|||
border-color: #666;
|
||||
}
|
||||
|
||||
&.emptySubject .subjectParent {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.threads-len {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
|
|
|
|||
|
|
@ -113,12 +113,16 @@ html.rl-no-preview-pane {
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subject, .emptySubjectText {
|
||||
.subject {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.subject:empty {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.messageButtons {
|
||||
margin-top: 5px;
|
||||
|
|
@ -166,12 +170,6 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
.emptySubjectText {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.hasVirus {
|
||||
background: #f00;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { isFullscreen, toggleFullscreen } from 'Common/Fullscreen';
|
|||
import { mailBox, serverRequest } from 'Common/Links';
|
||||
import { Selector } from 'Common/Selector';
|
||||
|
||||
import { i18n, initOnStartOrLangChange } from 'Common/Translator';
|
||||
import { i18n } from 'Common/Translator';
|
||||
|
||||
import {
|
||||
getFolderFromCacheList,
|
||||
|
|
@ -55,14 +55,14 @@ const
|
|||
*/
|
||||
listAction = (...args) => MessagelistUserStore.setAction(...args);
|
||||
|
||||
let
|
||||
iGoToUpOrDownTimeout = 0,
|
||||
sLastSearchValue = '';
|
||||
|
||||
export class MailMessageList extends AbstractViewRight {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.emptySubjectValue = '';
|
||||
|
||||
this.iGoToUpOrDownTimeout = 0;
|
||||
|
||||
this.newMoveToFolder = !!SettingsGet('NewMoveToFolder');
|
||||
|
||||
this.allowSearch = SettingsCapa('Search');
|
||||
|
|
@ -76,19 +76,10 @@ export class MailMessageList extends AbstractViewRight {
|
|||
this.isMobile = ThemeStore.isMobile;
|
||||
this.leftPanelDisabled = leftPanelDisabled;
|
||||
|
||||
this.messageListSearch = MessagelistUserStore.listSearch;
|
||||
this.messageListError = MessagelistUserStore.error;
|
||||
|
||||
this.popupVisibility = arePopupsVisible;
|
||||
|
||||
this.useCheckboxesInList = SettingsUserStore.useCheckboxesInList;
|
||||
|
||||
this.messageListThreadUid = MessagelistUserStore.endThreadUid;
|
||||
|
||||
this.messageListIsLoading = MessagelistUserStore.isLoading;
|
||||
|
||||
initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT'));
|
||||
|
||||
this.userUsageProc = FolderUserStore.quotaPercentage;
|
||||
|
||||
this.addObservables({
|
||||
|
|
@ -99,15 +90,13 @@ export class MailMessageList extends AbstractViewRight {
|
|||
dragOverArea: null,
|
||||
dragOverBodyArea: null,
|
||||
|
||||
inputMessageListSearchFocus: false
|
||||
focusSearch: false
|
||||
});
|
||||
|
||||
// append drag and drop
|
||||
this.dragOver = ko.observable(false).extend({ throttle: 1 });
|
||||
this.dragOverEnter = ko.observable(false).extend({ throttle: 1 });
|
||||
|
||||
this.sLastSearchValue = '';
|
||||
|
||||
this.addComputables({
|
||||
|
||||
sortSupported: () =>
|
||||
|
|
@ -136,9 +125,9 @@ export class MailMessageList extends AbstractViewRight {
|
|||
}
|
||||
},
|
||||
|
||||
inputProxyMessageListSearch: {
|
||||
inputSearch: {
|
||||
read: MessagelistUserStore.mainSearch,
|
||||
write: value => this.sLastSearchValue = value
|
||||
write: value => sLastSearchValue = value
|
||||
},
|
||||
|
||||
isIncompleteChecked: () => {
|
||||
|
|
@ -146,33 +135,28 @@ export class MailMessageList extends AbstractViewRight {
|
|||
return c && MessagelistUserStore().length > c;
|
||||
},
|
||||
|
||||
hasMessages: () => 0 < MessagelistUserStore().length,
|
||||
|
||||
isSpamFolder: () => (FolderUserStore.spamFolder() || 0) === MessagelistUserStore().Folder,
|
||||
|
||||
isSpamDisabled: () => UNUSED_OPTION_VALUE === FolderUserStore.spamFolder(),
|
||||
|
||||
isTrashFolder: () => (FolderUserStore.trashFolder() || 0) === MessagelistUserStore().Folder,
|
||||
|
||||
isDraftFolder: () => (FolderUserStore.draftsFolder() || 0) === MessagelistUserStore().Folder,
|
||||
|
||||
isSentFolder: () => (FolderUserStore.sentFolder() || 0) === MessagelistUserStore().Folder,
|
||||
archiveAllowed: () =>
|
||||
(FolderUserStore.archiveFolder() || 0) !== MessagelistUserStore().Folder
|
||||
&& UNUSED_OPTION_VALUE !== FolderUserStore.archiveFolder()
|
||||
&& !this.isDraftFolder(),
|
||||
|
||||
isArchiveFolder: () => (FolderUserStore.archiveFolder() || 0) === MessagelistUserStore().Folder,
|
||||
spamAllowed: () => UNUSED_OPTION_VALUE !== FolderUserStore.spamFolder()
|
||||
&& (FolderUserStore.sentFolder() || 0) !== MessagelistUserStore().Folder
|
||||
&& !this.isDraftFolder(),
|
||||
|
||||
isArchiveDisabled: () => UNUSED_OPTION_VALUE === FolderUserStore.archiveFolder(),
|
||||
isSpamVisible: () => !this.isSpamFolder() && this.spamAllowed(),
|
||||
|
||||
isArchiveVisible: () => !this.isArchiveFolder() && !this.isArchiveDisabled() && !this.isDraftFolder(),
|
||||
isUnSpamVisible: () => this.isSpamFolder() && this.spamAllowed(),
|
||||
|
||||
isSpamVisible: () =>
|
||||
!this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
|
||||
mobileCheckedStateShow: () => ThemeStore.isMobile() ? MessagelistUserStore.listChecked().length : 1,
|
||||
|
||||
isUnSpamVisible: () =>
|
||||
this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
|
||||
|
||||
mobileCheckedStateShow: () => ThemeStore.isMobile() ? 0 < MessagelistUserStore.listChecked().length : true,
|
||||
|
||||
mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.listChecked().length : true,
|
||||
mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.listChecked().length : 1,
|
||||
|
||||
sortText: () => {
|
||||
let mode = FolderUserStore.sortMode(),
|
||||
|
|
@ -188,8 +172,6 @@ export class MailMessageList extends AbstractViewRight {
|
|||
}
|
||||
});
|
||||
|
||||
this.hasCheckedOrSelectedLines = MessagelistUserStore.hasCheckedOrSelected,
|
||||
|
||||
this.selector = new Selector(
|
||||
MessagelistUserStore,
|
||||
MessagelistUserStore.selectedMessage,
|
||||
|
|
@ -364,8 +346,8 @@ export class MailMessageList extends AbstractViewRight {
|
|||
return false;
|
||||
}
|
||||
|
||||
clearTimeout(this.iGoToUpOrDownTimeout);
|
||||
this.iGoToUpOrDownTimeout = setTimeout(() => {
|
||||
clearTimeout(iGoToUpOrDownTimeout);
|
||||
iGoToUpOrDownTimeout = setTimeout(() => {
|
||||
let prev, next, temp, current;
|
||||
|
||||
this.messageListPaginator().find(item => {
|
||||
|
|
@ -412,7 +394,7 @@ export class MailMessageList extends AbstractViewRight {
|
|||
|
||||
cancelSearch() {
|
||||
MessagelistUserStore.mainSearch('');
|
||||
this.inputMessageListSearchFocus(false);
|
||||
this.focusSearch(false);
|
||||
}
|
||||
|
||||
cancelThreadUid() {
|
||||
|
|
@ -684,7 +666,7 @@ export class MailMessageList extends AbstractViewRight {
|
|||
|
||||
addShortcut('enter,open', '', Scope.MessageList, () => {
|
||||
if (formFieldFocused()) {
|
||||
MessagelistUserStore.mainSearch(this.sLastSearchValue);
|
||||
MessagelistUserStore.mainSearch(sLastSearchValue);
|
||||
return false;
|
||||
}
|
||||
if (MessageUserStore.message() && this.useAutoSelect()) {
|
||||
|
|
@ -778,7 +760,7 @@ export class MailMessageList extends AbstractViewRight {
|
|||
if (SettingsCapa('Search')) {
|
||||
// search input focus
|
||||
addShortcut('/', '', [Scope.MessageList, Scope.MessageView], () => {
|
||||
this.inputMessageListSearchFocus(true);
|
||||
this.focusSearch(true);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,6 @@
|
|||
"EMPTY_SEARCH_LIST": "No messages matched your search.",
|
||||
"SEARCH_RESULT_FOR": "Search results for \"%SEARCH%\"",
|
||||
"BACK_TO_MESSAGE_LIST": "back to message list",
|
||||
"EMPTY_SUBJECT_TEXT": "(No subject)",
|
||||
"PUT_MESSAGE_HERE": "Drop message here to view it in the list",
|
||||
"TODAY_AT": "today at %TIME%",
|
||||
"YESTERDAY_AT": "yesterday at %TIME%",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
<!-- /ko -->
|
||||
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
|
||||
<a class="btn fontastic" data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
|
||||
<a class="btn fontastic" data-bind="visible: archiveAllowed, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
|
||||
<a class="btn fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
|
||||
<a class="btn" data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
|
||||
<i class="icon-check-mark-circle-two"></i>
|
||||
|
|
@ -40,19 +40,19 @@
|
|||
<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
||||
<menu class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !messageList.hasCheckedOrSelected()}">
|
||||
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !messageList.hasCheckedOrSelected()}">
|
||||
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !messageList.hasCheckedOrSelected()}">
|
||||
<a href="#" tabindex="-1" data-icon="★" data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !messageList.hasCheckedOrSelected()}">
|
||||
<a href="#" tabindex="-1" data-icon="☆" data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
|
||||
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !messageList().length}">
|
||||
<a href="#" tabindex="-1" data-icon="" data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
|
||||
|
|
@ -102,25 +102,25 @@
|
|||
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
|
||||
<!-- ko if: allowSearch -->
|
||||
<div class="search-input-wrp">
|
||||
<input type="search" class="inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="textInput: inputProxyMessageListSearch, hasfocus: inputMessageListSearchFocus">
|
||||
<input type="search" class="inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="textInput: inputSearch, hasfocus: focusSearch">
|
||||
<a class="closeSearch" data-bind="click: cancelSearch, visible: messageListSearchDesc()">×</a>
|
||||
</div>
|
||||
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">▼</a>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<div class="b-content" data-bind="initDom: dragOverBodyArea">
|
||||
<div class="listThreadUidDesc" data-bind="visible: messageListThreadUid(), click: cancelThreadUid"
|
||||
<div class="listThreadUidDesc" data-bind="visible: messageList.threadUid(), click: cancelThreadUid"
|
||||
data-icon="⬅" data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></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() && !messageList.error() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea"
|
||||
data-icon="⬇" data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></div>
|
||||
<div class="listClear" data-bind="visible: clearListIsVisible()">
|
||||
<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="click: clear"></a>
|
||||
</div>
|
||||
<div class="listError error" data-bind="visible: !dragOver() && messageListError(), text: messageListError"></div>
|
||||
<div class="listError error" data-bind="visible: !dragOver() && messageList.error(), text: messageList.error"></div>
|
||||
<div class="listEmptyMessage" data-bind="visible: listEmptyMessage(), text: listEmptyMessage()"></div>
|
||||
<div class="listLoading" data-bind="visible: !dragOver() && !messageList().length &&
|
||||
messageListIsLoading() && !messageListError()">
|
||||
messageList.isLoading() && !messageList.error()">
|
||||
<i class="icon-spinner"></i>
|
||||
<span data-i18n="GLOBAL/LOADING"></span>
|
||||
</div>
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
<i data-bind="css: attachmentIconClass"></i>
|
||||
</div>
|
||||
|
||||
<div class="subjectParent actionHandle" data-bind="css: {'priorityHigh': isImportant}, text: subject || $root.emptySubjectValue"></div>
|
||||
<div class="subjectParent actionHandle" data-bind="css: {'priorityHigh': isImportant}, text: subject"></div>
|
||||
|
||||
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -120,13 +120,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === message().subject()}">
|
||||
<div class="messageItemHeader">
|
||||
<div class="subjectParent">
|
||||
<span class="infoParent g-ui-user-select-none fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
|
||||
<span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: message().isFlagged() ? '★' : '☆', css: {'flagOn': message().isFlagged(), 'flagOff': !message().isFlagged()}"></span>
|
||||
<b style="color: red; margin-right: 5px" data-bind="visible: message().isImportant()">!</b>
|
||||
<span class="subject" data-bind="hidden: !message().subject(), text: message().subject, title: message().subject, event: { 'dblclick': toggleFullScreen }"></span>
|
||||
<span class="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="hidden: message().subject(), event: { 'dblclick': toggleFullScreen }"></span>
|
||||
<span class="subject" data-bind="text: message().subject, title: message().subject, event: { 'dblclick': toggleFullScreen }"></span>
|
||||
<a href="#" class="close" data-bind="click: closeMessage" style="margin-top: -8px;">×</a>
|
||||
</div>
|
||||
<div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">
|
||||
|
|
|
|||
Loading…
Reference in a new issue