Simplify message .priorityHigh

dev/Model/Message.js

@@ -156,7 +156,6 @@ export class MessageModel extends AbstractModel {
 		this.addComputables({
 			attachmentIconClass: () => FileInfo.getAttachmentsIconClass(this.attachments()),
 			threadsLen: () => this.threads().length,
-			isImportant: () => MessagePriority.High === this.priority(),
 			hasAttachments: () => this.attachments().hasVisible(),
 
 			isUnseen: () => !this.flags().includes('\\seen'),
@@ -370,7 +369,7 @@ export class MessageModel extends AbstractModel {
 	/**
 	 * @return string
 	 */
-	lineAsCss() {
+	lineAsCss(flags=1) {
 		let classes = [];
 		forEachObjectEntry({
 			deleted: this.deleted(),
@@ -378,13 +377,13 @@ export class MessageModel extends AbstractModel {
 			checked: this.checked(),
 			unseen: this.isUnseen(),
 			focused: this.focused(),
-			important: this.isImportant(),
+			priorityHigh: this.priority() === MessagePriority.High,
 			withAttachments: !!this.attachments().length,
 			// hasChildrenMessage: 1 < this.threadsLen(),
 			hasUnseenSubMessage: this.hasUnseenSubMessage(),
 			hasFlaggedSubMessage: this.hasFlaggedSubMessage()
 		}, (key, value) => value && classes.push(key));
-		this.flags().forEach(value => classes.push('msgflag-'+value));
+		flags && this.flags().forEach(value => classes.push('msgflag-'+value));
 		return classes.join(' ');
 	}
 

dev/Styles/User/MessageList.less

@@ -211,11 +211,10 @@ html:not(rl-mobile) {
 		border-left-color: #ccc;
 	}
 
-	.priorityHigh::before {
-		content: '!'; /*❗*/
+	&.priorityHigh .subjectParent::before {
+		content: '! '; /*❗*/
 		color: red;
 		font-weight: bolder;
-		margin-right: 5px;
 	}
 
 	&.deleted {

dev/Styles/User/MessageView.less

@@ -26,6 +26,12 @@ html.rl-no-preview-pane {
 		color: #fff;
 	}
 
+	.priorityHigh .subject::before {
+		content: '! '; /*❗*/
+		color: red;
+		font-weight: bolder;
+	}
+
 	.b-content {
 		height: 100%;
 	}
@@ -79,7 +85,6 @@ html.rl-no-preview-pane {
 	.flagParent {
 
 		cursor: pointer;
-		margin: 0 0.25em;
 
 		.flagOn {
 			color: orange;
@@ -106,6 +111,10 @@ html.rl-no-preview-pane {
 		padding: 10px;
 		flex-shrink: 0;
 
+		.fontastic + span {
+			margin-left: 0.25em;
+		}
+
 		.subjectParent {
 			display: flex;
 			font-size: 18px;
@@ -118,6 +127,7 @@ html.rl-no-preview-pane {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
+			margin: 0 0.25em;
 		}
 		.subject:empty {
 			font-style: italic;

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

@@ -134,7 +134,7 @@
 					<i data-bind="css: attachmentIconClass"></i>
 				</div>
 
-				<div class="subjectParent actionHandle" data-bind="css: {'priorityHigh': isImportant}, text: subject"></div>
+				<div class="subjectParent actionHandle" data-bind="text: subject"></div>
 
 				<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
 

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

@@ -34,7 +34,7 @@
 		</div>
 
 		<!-- ko if: message -->
-		<div class="b-message" data-bind="i18nUpdate: message">
+		<div class="b-message" data-bind="i18nUpdate: message, css: message().lineAsCss(0)">
 			<div class="message-fixed-button-toolbar">
 				<a class="btn btn-success buttonEdit fontastic hide-mobile" data-bind="visible: isDraftFolder(), command: messageEditCommand">🖉</a>
 				<div class="btn-group" style="margin-right: -8px; display: inline;">
@@ -122,7 +122,6 @@
 				<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="text: message().subject, title: message().subject, event: { 'dblclick': toggleFullScreen }"></span>
 					<a href="#" class="close" data-bind="click: closeMessage" style="margin-top: -8px;">×</a>
 				</div>
@@ -207,7 +206,7 @@
 				</div>
 				<!-- /ko -->
 			</div>
-			<div id="messageItem" data-bind="css: message().lineAsCss()">
+			<div id="messageItem">
 				<div tabindex="0" data-bind="hasfocus: messageDomFocused">
 
 					<span class="buttonFull" data-bind="click: toggleFullScreen">