Bugfix and cleanup CSS even more

dev/Model/FolderCollection.js

@@ -301,11 +301,9 @@ export class FolderModel extends AbstractModel {
 
 				canBeDeleted: () => !folder.isSystemFolder() && !folder.subFolders.length,
 
-				selectableForFolderList: () => !folder.isSystemFolder() && folder.selectable,
+				canBeSubscribed: () => !folder.isSystemFolder() && folder.selectable && rl.settings.app('useImapSubscribe'),
 
-				canBeSubscribed: () => !folder.isSystemFolder() && folder.selectable,
-
-				canBeChecked: () => !folder.isSystemFolder() && folder.selectable,
+				canBeSelected:   () => !folder.isSystemFolder() && folder.selectable,
 
 				localName: () => {
 					let name = folder.name();

dev/Settings/User/Folders.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { Notification } from 'Common/Enums';
 import { ClientSideKeyName } from 'Common/EnumsUser';
-import { getNotification, i18n } from 'Common/Translator';
+import { getNotification } from 'Common/Translator';
 
 import { removeFolderFromCacheList } from 'Common/Cache';
 
@@ -24,8 +24,6 @@ export class FoldersUserSettings {
 		this.folderListOptimized = FolderStore.folderListOptimized;
 		this.folderListError = FolderStore.folderListError;
 
-		this.folderListHelp = ko.observable('').extend({ throttle: 100 });
-
 		this.loading = ko.computed(() => {
 			const loading = FolderStore.foldersLoading(),
 				creating = FolderStore.foldersCreating(),
@@ -38,8 +36,6 @@ export class FoldersUserSettings {
 		this.folderForDeletion = ko.observable(null).deleteAccessHelper();
 
 		this.folderForEdit = ko.observable(null).extend({ toggleSubscribeProperty: [this, 'edited'] });
-
-		this.useImapSubscribe = !!rl.settings.app('useImapSubscribe');
 	}
 
 	folderEditOnEnter(folder) {
@@ -70,17 +66,10 @@ export class FoldersUserSettings {
 	onShow() {
 		FolderStore.folderListError('');
 	}
-
+/*
 	onBuild(oDom) {
-		oDom.addEventListener('mouseover', event => {
-			const eqs = s => event.target.closestWithin(s, oDom);
-			eqs('.delete-folder-parent') && this.folderListHelp(i18n('SETTINGS_FOLDERS/HELP_DELETE_FOLDER'));
-			eqs('.subscribe-folder-parent') && this.folderListHelp(i18n('SETTINGS_FOLDERS/HELP_SHOW_HIDE_FOLDER'));
-			eqs('.check-folder-parent') && this.folderListHelp(i18n('SETTINGS_FOLDERS/HELP_CHECK_FOR_NEW_MESSAGES'));
-		});
-		oDom.addEventListener('mouseout', () => this.folderListHelp(''));
 	}
-
+*/
 	createFolder() {
 		showScreenPopup(FolderCreatePopupView);
 	}

dev/Styles/Admin.less

@@ -104,13 +104,5 @@
 	.b-settings-content {
 		padding: 20px;
 		padding-left: 30px;
-
-		.legend {
-			width: 670px;
-		}
-
-		.nav-tabs {
-			width: 670px;
-		}
 	}
 }

dev/Styles/AdminDomains.less

@@ -5,10 +5,6 @@
 
 	.e-item {
 
-		.e-action {
-			cursor: pointer;
-		}
-
 		.domain-name {
 			display: inline-block;
 			word-break: break-all;

dev/Styles/AdminPackages.less

@@ -26,10 +26,6 @@
 			font-size: 12px;
 		}
 
-		.e-action {
-			cursor: pointer;
-		}
-
 		.package-release-parent, .package-actions-parent {
 			text-align: center;
 		}

dev/Styles/AdminPlugins.less

@@ -7,10 +7,6 @@
 	}
 
 	.e-item {
-		.e-action {
-			cursor: pointer;
-		}
-
 		.plugin-img {
 			font-size: 12px;
 			margin-right: 2px;

dev/Styles/FolderList.less

@@ -19,9 +19,6 @@
 			transparent 75%, transparent);
 	}
 
-	&.focused .b-content {
-	}
-
 	.b-folders-user {
 		.e-link.print-count.system .badge {
 			display: none !important;

dev/Styles/Settings.less

@@ -112,10 +112,6 @@
 	.b-settings-content {
 		padding: 20px;
 		padding-left: 30px;
-
-		.legend {
-			width: 600px;
-		}
 	}
 
 	td {
@@ -127,7 +123,3 @@
 html.rl-mobile .rl-settings-view-model {
 	margin-right: 15px;
 }
-
-html.rl-mobile .b-settings-content .legend {
-	width: auto;
-}

dev/Styles/SettingsAccounts.less

@@ -3,8 +3,6 @@
 
 	.list-table {
 
-		width: 600px;
-
 		.account-img, .identity-img {
 			font-size: 12px;
 			margin-right: 5px;
@@ -41,10 +39,6 @@
 
 		white-space: nowrap;
 
-		.e-action {
-			cursor: pointer;
-		}
-
 		.delete-account {
 			cursor: pointer;
 			opacity: 0.5;
@@ -55,10 +49,6 @@
 
 		white-space: nowrap;
 
-		.e-action {
-			cursor: pointer;
-		}
-
 		.delete-identity {
 			cursor: pointer;
 			opacity: 0.5;

dev/Styles/SettingsFilters.less

@@ -13,11 +13,6 @@
 	white-space: nowrap;
 }
 
-.b-filter-script .e-action,
-.b-settings-filters .e-action {
-	cursor: pointer;
-}
-
 .filter-item .delete-filter {
 	cursor: pointer;
 	opacity: 0.5;

dev/Styles/SettingsFolders.less

@@ -1,24 +1,12 @@
 
 .b-settings-folders {
 
-	&.ignore-folder-subscribe {
-		.subscribe-folder, .unsubscribe-folder {
-			display: none;
-		}
-	}
-
 	.folders-list-error {
-		width: 550px;
 		margin: 10px 0;
 	}
 
 	.list-table {
-
-		width: 600px;
-
-		.e-action {
-			cursor: pointer;
-		}
+		margin-top: 40px;
 
 		.folder-padding {
 			display: inline-block;
@@ -31,27 +19,17 @@
 			white-space: pre-wrap;
 			box-sizing: border-box;
 			margin-left: 7px;
-			line-height: 22px;
-			cursor: default;
 		}
 
 		.folder-system-name {
 			display: inline-block;
-			line-height: 22px;
-			color: #999;
-			cursor: default;
+			opacity: 0.6;
 		}
 
 		.folder-name.can-be-edited:hover {
-			border-bottom: 1px dashed #333;
+			text-decoration-style: dashed;
 			cursor: pointer;
 		}
-
-		.folder-name-input {
-			border-width: 1px;
-			margin-bottom: 0;
-			margin-left: -4px;
-		}
 	}
 
 	.folder-item {
@@ -60,6 +38,11 @@
 			font-weight: bold;
 		}
 
+		input {
+			border-width: 1px;
+			margin-bottom: 0;
+		}
+
 		.button-delete {
 			margin-right: 15px;
 			margin-top: 5px;
@@ -67,33 +50,24 @@
 			opacity: 0;
 		}
 
-		.delete-folder, .subscribe-folder, .unsubscribe-folder, .check-folder, .uncheck-folder {
-			cursor: pointer;
-			opacity: 0.6;
-		}
-
-		.unsubscribe-folder {
-			opacity: 0.2;
-		}
-
-		.uncheck-folder {
+		.unsubscribed-folder, .unchecked-folder {
 			opacity: 0.2;
 		}
 	}
 
 	.folder-padding.deep-1 {
-		width: 15px * 1 + 10px;
+		width: 25px;
 	}
 	.folder-padding.deep-2 {
-		width: 15px * 2 + 10px;
+		width: 40px;
 	}
 	.folder-padding.deep-3 {
-		width: 15px * 3 + 10px;
+		width: 55px;
 	}
 	.folder-padding.deep-4 {
-		width: 15px * 4 + 10px;
+		width: 70px;
 	}
 	.folder-padding.deep-5 {
-		width: 15px * 5 + 10px;
+		width: 85px;
 	}
 }

dev/Styles/SettingsOpenPGP.less

@@ -3,8 +3,6 @@
 
 	.list-table {
 
-		width: 750px;
-
 		.open-pgp-key-img {
 			margin-right: 10px;
 			vertical-align: top;

dev/Styles/SettingsTemplates.less

@@ -3,8 +3,6 @@
 
 	.list-table {
 
-		width: 600px;
-
 		.template-img {
 			font-size: 12px;
 			margin-right: 5px;
@@ -26,10 +24,6 @@
 
 	.template-item {
 
-		.e-action {
-			cursor: pointer;
-		}
-
 		.delete-template {
 			cursor: pointer;
 			opacity: 0.5;

dev/Styles/Ui.less

@@ -1,10 +1,11 @@
-
+/*
 .g-ui-user-select-none {
-//	webkit-touch-callout: none;
-//	user-select: none;
-//	standard-user-select: none;
-//	touch-callout: none;
+	webkit-touch-callout: none;
+	user-select: none;
+	standard-user-select: none;
+	touch-callout: none;
 }
+*/
 
 .g-ui-link {
 	color: #369;
@@ -155,6 +156,14 @@
 	}
 }
 
+.e-action {
+	cursor: pointer;
+}
+
+.list-table {
+	max-width: 800px;
+}
+
 html.mobile .hide-mobile {
 	display:none;
 }

dev/Styles/_BootstrapFix.less

@@ -278,11 +278,6 @@ select {
 		padding-left: 20px;
 	}
 
-	.list-table {
-		width: 100%;
-		max-width: 100%;
-	}
-
 	.form-horizontal {
 		.control-group {
 			.control-label {

dev/Styles/_FontasticToBoot.less

@@ -23,7 +23,6 @@
 	font-size: 18px;
 	margin-top: -1px;
 	margin-left: -1px;
-	width: 17px;
 }
 
 .iconsize24 {

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

@@ -1,6 +1,6 @@
 <div class="e-item" data-bind="visible: visible, css: { 'i-am-inbox-wrapper': isInbox }">
 	<a class="e-link" data-bind="dropmessages: $data,
-	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': selectableForFolderList, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
+	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': canBeSelected, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
 		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
 		<i data-bind="css: collapsedCss()"></i>
 		<span class="focused-poiner"></span>

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

@@ -75,7 +75,7 @@
 							</td>
 							<td>
 								<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
-									<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
+									<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 								</a>
 							</td>
 							<td>

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

@@ -33,7 +33,7 @@
 						</td>
 						<td>
 							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oAccount) { $root.deleteAccount(oAccount); }">
-								<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/DELETING_ASK"></span>
+								<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 							</a>
 						</td>
 						<td>
@@ -83,7 +83,7 @@
 						</td>
 						<td>
 							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oIdentity) { $root.deleteIdentity(oIdentity); }">
-								<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/DELETING_ASK"></span>
+								<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 							</a>
 						</td>
 						<td>

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

@@ -35,7 +35,7 @@
 						<td class="e-action" class="script-name" data-bind="text: name()"></td>
 						<td>
 							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oScript) { $root.deleteScript(oScript); }">
-								<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
+								<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 							</a>
 						</td>
 						<td>

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

@@ -1,35 +1,28 @@
 <tr class="folder-item" data-bind="css: { 'selectable': selectable, 'system': isSystemFolder }">
 	<td>
-		<span class="folder-padding" data-bind="css: 'deep-' + deep">&nbsp;</span>
-		<span class="folder-name" data-bind="text: name, visible: !edited(), css: { 'e-action': canBeEdited, 'can-be-edited': canBeEdited }, click: function (oFolder) { $root.folderForEdit(oFolder); }"></span>
-		&nbsp;
-		<span class="folder-system-name" data-bind="text: manageFolderSystemName, visible: isSystemFolder"></span>
-		<input type="text" class="folder-name-input"
+		<span class="folder-padding" data-bind="css: 'deep-' + deep"></span>
+		<span class="folder-name" data-bind="text: name, visible: !edited(), css: { 'can-be-edited': canBeEdited }, click: function (oFolder) { oFolder.canBeEdited() && $root.folderForEdit(oFolder); }"></span>
+		<input type="text"
 			autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 			data-bind="value: nameForEdit, visible: edited, hasfocus: edited, onEnter: function () { $root.folderEditOnEnter($data); }, onEsc: function () { $root.folderEditOnEsc($data); }" />
-
+		&nbsp;
+		<span class="folder-system-name" data-bind="text: manageFolderSystemName, visible: isSystemFolder"></span>
 		<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function() { $root.deleteFolder($data); }">
-			<span class="i18n" data-i18n="SETTINGS_FOLDERS/DELETING_ASK"></span>
+			<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 		</a>
 	</td>
-	<td class="delete-folder-parent">
-		<span class="delete-folder" data-bind="visible: canBeDeleted() && !deleteAccess(), click: function (oFolder) { $root.folderForDeletion(oFolder); }">
-			<i class="fontastic">🗑</i>
-		</span>
+	<td data-bind="tooltip: 'SETTINGS_FOLDERS/HELP_DELETE_FOLDER'">
+		<span class="delete-folder e-action fontastic" data-bind="visible: canBeDeleted() && !deleteAccess(), click: function (oFolder) { $root.folderForDeletion(oFolder); }">🗑</span>
 	</td>
-	<td class="subscribe-folder-parent">
-		<span class="unsubscribe-folder" data-bind="visible: canBeSubscribed() && !subscribed(), click: function(oFolder) { $root.subscribeFolder(oFolder); }">
-			<i class="fontastic">👁</i>
-		</span>
-		<span class="subscribe-folder" data-bind="visible: canBeSubscribed() && subscribed(), click: function(oFolder) { $root.unSubscribeFolder(oFolder); }">
-			<i class="fontastic">👁</i>
-		</span>
+	<td data-bind="tooltip: 'SETTINGS_FOLDERS/HELP_SHOW_HIDE_FOLDER'">
+		<span class="unsubscribed-folder e-action fontastic" data-bind="visible: canBeSubscribed() && !subscribed(), click: function(oFolder) { $root.subscribeFolder(oFolder); }">👁</span>
+		<span class="e-action fontastic" data-bind="visible: canBeSubscribed() && subscribed(), click: function(oFolder) { $root.unSubscribeFolder(oFolder); }">👁</span>
 	</td>
-	<td class="check-folder-parent" data-bind="visible: $root.displaySpecSetting">
-		<span class="uncheck-folder" data-bind="visible: canBeChecked() && subscribed() && !checkable(), click: function(oFolder) { $root.checkableTrueFolder(oFolder); }">
+	<td data-bind="visible: $root.displaySpecSetting, tooltip: 'SETTINGS_FOLDERS/HELP_CHECK_FOR_NEW_MESSAGES'">
+		<span class="unchecked-folder e-action" data-bind="visible: canBeSelected() && subscribed() && !checkable(), click: function(oFolder) { $root.checkableTrueFolder(oFolder); }">
 			<i class="icon-check-mark-circle-two"></i>
 		</span>
-		<span class="check-folder" data-bind="visible: canBeChecked() && subscribed() && checkable(), click: function(oFolder) { $root.checkableFalseFolder(oFolder); }">
+		<span class="check-folder e-action" data-bind="visible: canBeSelected() && subscribed() && checkable(), click: function(oFolder) { $root.checkableFalseFolder(oFolder); }">
 			<i class="icon-check-mark-circle-two"></i>
 		</span>
 	</td>

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

@@ -1,45 +1,38 @@
-<div class="b-settings-folders g-ui-user-select-none row" data-bind="css: { 'ignore-folder-subscribe': !useImapSubscribe }">
-	<div class="span8 width100-on-mobile">
-		<div class="form-horizontal">
-			<div class="legend">
-				<span class="i18n" data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
-				&nbsp;&nbsp;&nbsp;
-				<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
-			</div>
+<div class="b-settings-folders">
+	<div class="form-horizontal">
+		<div class="legend">
+			<span class="i18n" data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
+			&nbsp;&nbsp;&nbsp;
+			<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
 		</div>
-		<a class="btn" data-bind="click: createFolder">
-			<i class="icon-folder-add"></i>
-			&nbsp;&nbsp;
-			<span class="i18n" data-i18n="SETTINGS_FOLDERS/BUTTON_CREATE"></span>
-		</a>
+	</div>
+	<a class="btn" data-bind="click: createFolder">
+		<i class="icon-folder-add"></i>
 		&nbsp;&nbsp;
-		<a class="btn" data-bind="click: systemFolder">
-			<i class="fontastic">🔧</i>
-			&nbsp;&nbsp;
-			<span class="i18n" data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
-		</a>
-		<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
-			<b class="i18n" data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_1"></b>
-			<br />
-			<span class="i18n" data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_2"></span>
-		</div>
-		<div class="alert folders-list-error" data-bind="visible: '' !== folderListError()">
-			<button type="button" class="close" data-bind="click: function () { folderListError(''); }">×</button>
-			<span data-bind="text: folderListError"></span>
-		</div>
-		<table class="table table-hover list-table" data-bind="i18nUpdate: folderList" style="margin-top: 40px">
-			<colgroup>
-				<col />
-				<col style="width: 1%" />
-				<col style="width: 1%" />
-				<col style="width: 1%" data-bind="visible: displaySpecSetting" />
-			</colgroup>
-			<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
-		</table>
+		<span class="i18n" data-i18n="SETTINGS_FOLDERS/BUTTON_CREATE"></span>
+	</a>
+	&nbsp;&nbsp;
+	<a class="btn" data-bind="click: systemFolder">
+		<i class="fontastic">🔧</i>
+		&nbsp;&nbsp;
+		<span class="i18n" data-i18n="SETTINGS_FOLDERS/BUTTON_SYSTEM"></span>
+	</a>
+	<div class="alert folders-list-error" data-bind="visible: folderListOptimized">
+		<b class="i18n" data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_1"></b>
+		<br />
+		<span class="i18n" data-i18n="SETTINGS_FOLDERS/TO_MANY_FOLDERS_DESC_2"></span>
 	</div>
-	<div class="span4 hide-on-mobile" style="position: relative" data-bind="visible: '' !== folderListHelp()">
-		<div class="alert alert-info" style="position: fixed">
-			<span data-bind="text: folderListHelp"></span>
-		</div>
+	<div class="alert folders-list-error" data-bind="visible: '' !== folderListError()">
+		<button type="button" class="close" data-bind="click: function () { folderListError(''); }">×</button>
+		<span data-bind="text: folderListError"></span>
 	</div>
+	<table class="table table-hover list-table" data-bind="i18nUpdate: folderList">
+		<colgroup>
+			<col />
+			<col style="width: 1%" />
+			<col style="width: 1%" />
+			<col style="width: 1%" data-bind="visible: displaySpecSetting" />
+		</colgroup>
+		<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
+	</table>
 </div>

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

@@ -48,7 +48,7 @@
 					<!-- /ko -->
 					</span>
 					<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(openPgpKey) { $root.deleteOpenPgpKey(openPgpKey); }">
-						<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/DELETING_ASK"></span>
+						<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 					</a>
 				</td>
 				<td>
@@ -77,7 +77,7 @@
 					<!-- /ko -->
 					</span>
 					<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oOpenPGP) { $root.deleteOpenPgpKey(oOpenPGP); }">
-						<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/DELETING_ASK"></span>
+						<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 					</a>
 				</td>
 				<td>

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

@@ -32,7 +32,7 @@
 						</td>
 						<td>
 							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess}, click: function(oTemplate) { $root.deleteTemplate(oTemplate); }">
-								<span class="i18n" data-i18n="SETTINGS_TEMPLATES/DELETING_ASK"></span>
+								<span class="i18n" data-i18n="GLOBAL/ARE_YOU_SURE"></span>
 							</a>
 						</td>
 						<td>