More CSS, HTML & JS cleanups

dev/Settings/User/Templates.js

@@ -53,7 +53,7 @@ export class TemplatesUserSettings {
 
 	onBuild(oDom) {
 		oDom.addEventListener('click', event => {
-			const el = event.target.closestWithin('.templates-list .template-item .e-action', oDom);
+			const el = event.target.closestWithin('td.e-action', oDom);
 			el && ko.dataFor(el) && this.editTemplate(ko.dataFor(el));
 		});
 

dev/Stores/User/Settings.js

@@ -20,13 +20,9 @@ export const SettingsUserStore = new class {
 			]
 		});
 
-		this.messagesPerPage = ko.observable(pInt(SettingsGet('MPP'))).extend(
-			{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
-		);
+		this.messagesPerPage = ko.observable(pInt(SettingsGet('MPP'))).extend({ debounce: 999 });
 
-		this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend(
-			{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
-		);
+		this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend({ debounce: 999 });
 
 		addObservablesTo(this, {
 			showImages: !!SettingsGet('ShowImages'),

dev/Styles/User/Attachmnets.less

@@ -47,35 +47,34 @@
 	}
 
 	.attachmentIconParent {
-
 		position: absolute;
 		height: 56px;
 		width: 60px;
 		text-align: center;
+	}
 
-		.iconPreview, .iconBG, .iconMain, .iconProgress {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
+	.iconPreview, .iconBG, .iconMain, .iconProgress {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 
-		.iconProgress {
-			background: #eee;
-			width: 0%;
-		}
+	.iconProgress {
+		background: #eee;
+		width: 0%;
+	}
 
-		.iconBG {
-			font-size: 18px;
-			font-weight: bold;
-			line-height: 55px;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-		}
+	.iconBG {
+		font-size: 18px;
+		font-weight: bold;
+		line-height: 55px;
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+	}
 
-		.iconPreview {
-			display: none;
-		}
+	.iconPreview {
+		display: none;
 	}
 
 	.attachmentNameParent {
@@ -111,20 +110,20 @@
 */
 
 	.showPreview, .showPreplay,
-	.attachmentIconParent.hasPreview:hover .iconMain,
-	.attachmentIconParent.hasPreplay:hover .iconMain,
-	.attachmentIconParent.hasPreview .hidePreview,
-	.attachmentIconParent.hasPreplay .hidePreview {
+	.hasPreview:hover .iconMain,
+	.hasPreplay:hover .iconMain,
+	.hasPreview .hidePreview,
+	.hasPreplay .hidePreview {
 		display: none;
 	}
 
-	.attachmentIconParent.hasPreview:hover .iconPreview,
-	.attachmentIconParent.hasPreplay:hover .iconPreview {
+	.hasPreview:hover .iconPreview,
+	.hasPreplay:hover .iconPreview {
 		display: inline-block;
 	}
 
-	.attachmentIconParent.hasPreview .showPreview,
-	.attachmentIconParent.hasPreplay .showPreplay {
+	.hasPreview .showPreview,
+	.hasPreplay .showPreplay {
 		display: inline;
 		cursor: pointer;
 	}

dev/Styles/User/MessageList.less

@@ -122,8 +122,6 @@ html.rl-no-preview-pane {
 		z-index: 101;
 		scroll-behavior: smooth;
 
-		box-sizing: border-box;
-
 		background-color: #fff;
 
 		.listClear {

dev/Styles/User/SettingsFilters.less

@@ -4,15 +4,15 @@
 	max-width: 720px;
 }
 
-.filter-item td.drag-wrapper {
-	padding: 4px 0;
-}
-
 .b-filter-script .filter-item,
 .b-settings-filters .script-item {
 	white-space: nowrap;
 }
 
+.filter-item td.drag-wrapper {
+	padding: 4px 0;
+}
+
 .filter-item .delete-filter {
 	cursor: pointer;
 	opacity: 0.5;
@@ -22,7 +22,6 @@
 .filter-item .filter-sub-name {
 	display: inline-block;
 	word-break: break-all;
-	box-sizing: border-box;
 	line-height: 22px;
 	cursor: pointer;
 }

dev/Styles/User/SettingsFolders.less

@@ -20,7 +20,6 @@
 	.folder-name {
 		word-break: break-all;
 		white-space: pre-wrap;
-		box-sizing: border-box;
 	}
 
 	.folder-system-name {

dev/Styles/User/SettingsOpenPGP.less

@@ -1,7 +1,11 @@
 
 .b-settings-open-pgp {
 
-	.list-table {
+	td + td {
+		width: 1%;
+	}
+
+	table {
 
 		.open-pgp-key-img {
 			margin-right: 10px;

dev/Styles/User/SettingsTemplates.less

@@ -1,13 +1,14 @@
 
 .b-settings-templates {
 
-	.template-img {
-		font-size: 12px;
-		margin-right: 5px;
+	td + td {
+		width: 150px;
+	}
+	td + td + td {
+		width: 1%;
 	}
 
 	.template-name {
-		box-sizing: border-box;
 		display: inline-block;
 		line-height: 22px;
 		word-break: break-all;

dev/View/Popup/Contacts.js

@@ -192,7 +192,6 @@ class ContactsPopupView extends AbstractViewPopup {
 				case 'bcc':
 					bccEmails = aE;
 					break;
-				case 'to':
 				default:
 					toEmails = aE;
 					break;
@@ -496,8 +495,8 @@ class ContactsPopupView extends AbstractViewPopup {
 	}
 
 	onShow(bBackToCompose, sLastComposeFocusedField) {
-		this.bBackToCompose = undefined === bBackToCompose ? false : !!bBackToCompose;
-		this.sLastComposeFocusedField = undefined === sLastComposeFocusedField ? '' : sLastComposeFocusedField;
+		this.bBackToCompose = !!bBackToCompose;
+		this.sLastComposeFocusedField = sLastComposeFocusedField;
 
 		rl.route.off();
 		this.reloadContactList(true);

dev/View/Popup/SieveScript.js

@@ -124,7 +124,7 @@ class SieveScriptPopupView extends AbstractViewPopup {
 
 	onBuild(oDom) {
 		oDom.addEventListener('click', event => {
-			const el = event.target.closestWithin('.filter-item .e-action', oDom),
+			const el = event.target.closestWithin('td.e-action', oDom),
 				filter = el && ko.dataFor(el);
 			filter && this.editFilter(filter);
 		});