Improved mailbox handling of empty message subject and messagelist folder detection

dev/Model/Message.js

@@ -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()

dev/Screen/User/MailBox.js

@@ -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,

dev/Styles/User/MessageList.less

@@ -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;

dev/Styles/User/MessageView.less

@@ -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;

dev/View/User/MailBox/MessageList.js

@@ -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: () =>
+			mobileCheckedStateShow: () => ThemeStore.isMobile() ? MessagelistUserStore.listChecked().length : 1,
-				!this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
 
-			isUnSpamVisible: () =>
+			mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.listChecked().length : 1,
-				this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
-
-			mobileCheckedStateShow: () => ThemeStore.isMobile() ? 0 < MessagelistUserStore.listChecked().length : true,
-
-			mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.listChecked().length : true,
 
 			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);
+		clearTimeout(iGoToUpOrDownTimeout);
-		this.iGoToUpOrDownTimeout = setTimeout(() => {
+		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;
 			});
 		}

snappymail/v/0.0.0/app/localization/en/user.json

@@ -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%",

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -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>
 

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -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="subject" data-bind="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>
 					<a href="#" class="close" data-bind="click: closeMessage" style="margin-top: -8px;">×</a>
 				</div>
 				<div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">