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(
+		this.messagesPerPage = ko.observable(pInt(SettingsGet('MPP'))).extend({ debounce: 999 });
-			{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
-		);
 
-		this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend(
+		this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend({ debounce: 999 });
-			{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
-		);
 
 		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 {
+	.iconPreview, .iconBG, .iconMain, .iconProgress {
-			position: absolute;
+		position: absolute;
-			top: 0;
+		top: 0;
-			left: 0;
+		left: 0;
-			width: 100%;
+		width: 100%;
-			height: 100%;
+		height: 100%;
-		}
+	}
 
-		.iconProgress {
+	.iconProgress {
-			background: #eee;
+		background: #eee;
-			width: 0%;
+		width: 0%;
-		}
+	}
 
-		.iconBG {
+	.iconBG {
-			font-size: 18px;
+		font-size: 18px;
-			font-weight: bold;
+		font-weight: bold;
-			line-height: 55px;
+		line-height: 55px;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-		}
+	}
 
-		.iconPreview {
+	.iconPreview {
-			display: none;
+		display: none;
-		}
 	}
 
 	.attachmentNameParent {
@@ -111,20 +110,20 @@
 */
 
 	.showPreview, .showPreplay,
-	.attachmentIconParent.hasPreview:hover .iconMain,
+	.hasPreview:hover .iconMain,
-	.attachmentIconParent.hasPreplay:hover .iconMain,
+	.hasPreplay:hover .iconMain,
-	.attachmentIconParent.hasPreview .hidePreview,
+	.hasPreview .hidePreview,
-	.attachmentIconParent.hasPreplay .hidePreview {
+	.hasPreplay .hidePreview {
 		display: none;
 	}
 
-	.attachmentIconParent.hasPreview:hover .iconPreview,
+	.hasPreview:hover .iconPreview,
-	.attachmentIconParent.hasPreplay:hover .iconPreview {
+	.hasPreplay:hover .iconPreview {
 		display: inline-block;
 	}
 
-	.attachmentIconParent.hasPreview .showPreview,
+	.hasPreview .showPreview,
-	.attachmentIconParent.hasPreplay .showPreplay {
+	.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 {
+	td + td {
-		font-size: 12px;
+		width: 150px;
-		margin-right: 5px;
+	}
+	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.bBackToCompose = !!bBackToCompose;
-		this.sLastComposeFocusedField = undefined === sLastComposeFocusedField ? '' : sLastComposeFocusedField;
+		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);
 		});

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

@@ -4,18 +4,18 @@
 		<h3>
 			<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_CREATE" data-bind="visible: !exists()"></span>
 			<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_EDIT" data-bind="visible: exists"></span>
+			<span data-bind="visible: exists">: <!-- ko text: name--><!-- /ko --></span>
 		</h3>
 	</div>
 	<div class="modal-body">
 
-		<div class="control-group" data-bind="css: {'error': nameError}">
+		<div class="control-group" data-bind="css: {'error': nameError}, hidden: exists">
 			<div class="controls">
 				<input type="text" class="span5"
-					data-bind="value: name, hasfocus: !exists(), visible: !exists()"
+					data-bind="value: name, hasfocus: !exists()"
 					autocorrect="off" autocapitalize="off" spellcheck="false"
 					data-i18n="[placeholder]GLOBAL/NAME"
 				/>
-				<span data-bind="text: name, visible: exists"></span>
 			</div>
 		</div>
 
@@ -57,12 +57,8 @@
 				</colgroup>
 				<tbody data-bind="foreach: filters">
 					<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $parent.filters }">
-						<td>
+						<td class="fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></td>
-							<span class="disabled-filter fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></span>
+						<td class="drag-wrapper fontastic drag-handle">⬍</td>
-						</td>
-						<td class="drag-wrapper">
-							<span class="fontastic drag-handle">⬍</span>
-						</td>
 						<td class="e-action">
 							<span class="filter-name" data-bind="text: name()"></span>
 							&nbsp;&nbsp;

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

@@ -24,11 +24,6 @@
 	</div>
 	<br />
 	<table class="table table-hover list-table" data-bind="i18nUpdate: openpgpkeys">
-		<colgroup>
-			<col />
-			<col style="width: 1%" />
-			<col style="width: 1%" />
-		</colgroup>
 		<tbody data-bind="foreach: openpgpkeysPrivate">
 			<tr class="open-pgp-key-item">
 				<td>

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

@@ -9,15 +9,9 @@
 		<span data-i18n="SETTINGS_TEMPLATES/BUTTON_ADD_TEMPLATE"></span>
 	</a>
 	<table class="table table-hover list-table templates-list" data-bind="i18nUpdate: templates">
-		<colgroup>
-			<col />
-			<col style="width: 150px" />
-			<col style="width: 1%" />
-		</colgroup>
 		<tbody data-bind="foreach: templates">
-			<tr class="template-item" draggable="true" data-bind="sortableItem: { list: $root.templates }">
+			<tr draggable="true" data-bind="sortableItem: { list: $root.templates }">
 				<td class="e-action">
-					<span class="template-img fontastic">👤</span>
 					<i class="fontastic drag-handle">⬍</i>
 					<span class="template-name" data-bind="text: name"></span>
 				</td>