More excessive DOM reductions

dev/Model/Message.js

@@ -54,8 +54,6 @@ export class MessageModel extends AbstractModel {
 			senderEmailsString: '',
 			senderClearEmailsString: '',
 
-			newForAnimation: false,
-
 			deleted: false,
 			isDeleted: false,
 			isUnseen: false,
@@ -128,8 +126,6 @@ export class MessageModel extends AbstractModel {
 		this.senderEmailsString('');
 		this.senderClearEmailsString('');
 
-		this.newForAnimation(false);
-
 		this.deleted(false);
 		this.isDeleted(false);
 		this.isUnseen(false);
@@ -289,7 +285,6 @@ export class MessageModel extends AbstractModel {
 			focused: this.focused(),
 			important: this.isImportant(),
 			withAttachments: this.hasAttachments(),
-			new: this.newForAnimation(),
 			emptySubject: !this.subject(),
 			// hasChildrenMessage: 1 < this.threadsLen(),
 			hasUnseenSubMessage: this.hasUnseenSubMessage(),

dev/Model/MessageCollection.js

@@ -39,7 +39,6 @@ export class MessageCollectionModel extends AbstractCollectionModel
 			if (message) {
 				if (hasNewMessageAndRemoveFromCache(message.folder, message.uid) && 5 >= newCount) {
 					++newCount;
-					message.newForAnimation(true);
 				}
 
 				message.deleted(false);

dev/Stores/User/Message.js

@@ -196,13 +196,6 @@ export const MessageUserStore = new class {
 			listIsNotCompleted: value =>
 				this.listCompleteLoading(value || this.listLoading()),
 
-			list:
-				(list => {
-					list.forEach(item =>
-						item && item.newForAnimation() && item.newForAnimation(false)
-					)
-				}).debounce(500),
-
 			message: message => {
 				clearTimeout(MessageSeenTimer);
 				if (message) {

dev/Styles/User/MessageList.less

@@ -239,8 +239,6 @@ html.rl-no-preview-pane {
 	}
 
 	.importantMark {
-		display: none;
-
 		color:red;
 		margin-right:5px
 	}
@@ -252,17 +250,8 @@ html.rl-no-preview-pane {
 		}
 	}
 
-	&.important .importantMark {
-		display: inline;
-	}
-
-	&.new {
-		max-height: 0;
-	}
-
 	&.deleted {
-		max-height: 0;
+		opacity: .3;
-		border-color: transparent !important;
 	}
 
 	.checkboxMessage {
@@ -310,22 +299,12 @@ html.rl-no-preview-pane {
 		border-color: #666;
 	}
 
-	.subjectParent .emptySubjectText {
+	&.emptySubject .subjectParent {
-		display: none;
 		font-style: italic;
 		opacity: 0.5;
 	}
 
-	&.emptySubject .subjectParent {
+	.senderParent, .subjectParent {
-		.subject {
-			display: none;
-		}
-		.emptySubjectText {
-			display: inline;
-		}
-	}
-
-	.sender, .subject {
 		margin: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -342,18 +321,9 @@ html.rl-no-preview-pane {
 	}
 
 	.replyFlag, .forwardFlag {
-		display: none;
 		margin-right: 0.25em;
 	}
 
-	&.answered .replyFlag {
-		display: inline-block;
-	}
-
-	&.forwarded .forwardFlag {
-		display: inline-block;
-	}
-
 	&:not(.withAttachments) .attachmentParent {
 		display: none;
 	}
@@ -369,7 +339,7 @@ html.rl-no-preview-pane {
 	&.unseen {
 		background-color: rgba(255, 255, 64, 0.15);
 		border-left-color: orange;
-		.sender, .subjectParent {
+		.senderParent, .subjectParent {
 			font-weight: bold;
 		}
 

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

@@ -3,7 +3,7 @@
 	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': canBeSelected, 'hidden' : hidden, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink },
 	   attr: { 'data-unread': printableUnreadCount }">
 		<i data-bind="css: collapsedCss()"></i>
-		<span class="name" data-bind="text: name"></span>
+		<!-- ko text: name --><!-- /ko -->
 	</a>
 	<!-- ko if: subFolders.length -->
 	<div class="b-sub-folders" data-bind="template: { name: 'MailFolderListItem', foreach: subFolders }, css: { 'collapsed': collapsed() }"></div>

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

@@ -2,7 +2,9 @@
 	<a data-bind="dropmessages: $data,
 		css: { 'selected': selected, 'selectable': selectable, 'anim-action-class': actionBlink },
 		attr: { 'data-unread': printableUnreadCount }">
-		<span class="name" data-bind="text: localName()"></span>
+		<!-- ko text: localName --><!-- /ko -->
-		<span class="inbox-star-icon fontastic" data-bind="visible: isInbox"></span>
+		<!-- ko if: isInbox -->
+		<span class="inbox-star-icon fontastic"></span>
+		<!-- /ko -->
 	</a>
 </div>

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

@@ -196,10 +196,10 @@
 
 						<div class="flagParent fontastic"><!-- ☆★⚐⚑ --></div>
 
-						<div class="senderParent actionHandle">
+						<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}">
-							<i class="replyFlag fontastic">←</i>
+							<!-- ko if: isAnswered --><i class="replyFlag fontastic">←</i><!-- /ko -->
-							<i class="forwardFlag fontastic">→</i>
+							<!-- ko if: isForwarded --><i class="forwardFlag fontastic">→</i><!-- /ko -->
-							<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
+							<!-- ko text: senderEmailsString --><!-- /ko -->
 						</div>
 
 						<div class="attachmentParent actionHandle">
@@ -207,15 +207,14 @@
 						</div>
 
 						<div class="subjectParent actionHandle">
-							<b class="importantMark">!</b>
+							<!-- ko if: isImportant --><b class="importantMark">!</b><!-- /ko -->
-							<span class="emptySubjectText" data-bind="text: $root.emptySubjectValue"></span>
+							<!-- ko text: subject || $root.emptySubjectValue --><!-- /ko -->
-							<span class="subject" data-bind="text: subject"></span>
 						</div>
 
 						<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
 
 						<div class="threads-len" data-bind="visible: 1 < threadsLen()">
-							<span data-bind="text: threadsLen"></span>
+							<!-- ko text: threadsLen --><!-- /ko -->
 							›
 						</div>
 
@@ -228,7 +227,7 @@
 		</div>
 		<div class="b-footer thm-message-list-bottom-toolbar">
 			<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
-				<span data-bind="text: userUsageProc"></span>%
+				<!-- ko text: userUsageProc --><!-- /ko -->%
 			</span>
 			<div class="pull-right">
 				<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->