Drop bootstrap modal.less by using <dialog> <header> and <footer>

https://snappymail.eu/demo/ updated for testing

dev/Knoin/AbstractViews.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
 import { Scope } from 'Common/Enums';
-import { keyScope } from 'Common/Globals';
+import { keyScope, Settings } from 'Common/Globals';
 import { ViewType } from 'Knoin/Knoin';
 
 class AbstractView {
@@ -12,6 +12,7 @@ class AbstractView {
 		this.viewModelTemplateID = templateID;
 		this.viewType = type;
 		this.viewModelDom = null;
+		this.viewNoUserSelect = false;
 
 		this.keyScope = {
 			scope: Scope.None,
@@ -122,3 +123,23 @@ export class AbstractViewSettings
 	viewModelDom
 }
 */
+
+export class AbstractViewLogin extends AbstractViewCenter {
+	constructor(templateID) {
+		super(templateID);
+		this.hideSubmitButton = Settings.app('hideSubmitButton');
+		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
+	}
+
+	onBuild(dom) {
+		dom.classList.add('LoginView');
+	}
+
+	onShow() {
+		rl.route.off();
+	}
+
+	submitForm() {
+//		return false;
+	}
+}

dev/Knoin/Knoin.js

@@ -32,21 +32,48 @@ const
 			let vmDom = null;
 			const vm = new ViewModelClass(vmScreen),
 				position = vm.viewType || '',
+				dialog = ViewType.Popup === position,
 				vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
 
 			ViewModelClass.__builded = true;
 			ViewModelClass.__vm = vm;
 
 			if (vmPlace) {
-				vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
+				vmDom = dialog
+					? Element.fromHTML('<dialog id="V-'+ vm.viewModelTemplateID + '"></dialog>')
+					: Element.fromHTML('<div id="V-'+ vm.viewModelTemplateID + '" hidden=""></div>');
 				vmPlace.append(vmDom);
 
 				vm.viewModelDom = vmDom;
 				ViewModelClass.__dom = vmDom;
 
+				if (vm.viewNoUserSelect) {
+					vmDom.classList.add('g-ui-user-select-none');
+				}
+
 				if (ViewType.Popup === position) {
 					vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass));
 
+					// Firefox / Safari HTMLDialogElement not defined
+					if (!vmDom.showModal) {
+						vmDom.classList.add('polyfill');
+						vmDom.showModal = () => {
+							if (!vmDom.backdrop) {
+								vmDom.before(vmDom.backdrop = Element.fromHTML('<div class="dialog-backdrop"></div>'));
+							}
+							vmDom.setAttribute('open','');
+							vmDom.open = true;
+							vmDom.returnValue = null;
+							vmDom.backdrop.hidden = false;
+						};
+						vmDom.close = v => {
+							vmDom.backdrop.hidden = true;
+							vmDom.returnValue = v;
+							vmDom.removeAttribute('open', null);
+							vmDom.open = false;
+						};
+					}
+
 					// show/hide popup/modal
 					const endShowHide = e => {
 						if (e.target === vmDom) {
@@ -54,7 +81,7 @@ const
 								autofocus(vmDom);
 								vm.onShowWithDelay && vm.onShowWithDelay();
 							} else {
-								vmDom.hidden = true;
+								vmDom.close();
 								vm.onHideWithDelay && vm.onHideWithDelay();
 							}
 						}
@@ -63,10 +90,12 @@ const
 					vm.modalVisibility.subscribe(value => {
 						if (value) {
 							visiblePopups.add(vm);
-							vmDom.style.zIndex = 3000 + visiblePopups.size + 10;
-							vmDom.hidden = false;
+							vmDom.style.zIndex = 3000 + (visiblePopups.size * 2);
+							vmDom.showModal();
+							if (vmDom.backdrop) {
+								vmDom.backdrop.style.zIndex = 3000 + visiblePopups.size;
+							}
 							vm.keyScope.set();
-							arePopupsVisible(true);
 							requestAnimationFrame(() => { // wait just before the next paint
 								vmDom.offsetHeight; // force a reflow
 								vmDom.classList.add('show'); // trigger the transitions
@@ -74,11 +103,10 @@ const
 						} else {
 							visiblePopups.delete(vm);
 							vm.onHide && vm.onHide();
-							vmDom.classList.remove('show');
 							vm.keyScope.unset();
-							arePopupsVisible(0 < visiblePopups.size);
+							vmDom.classList.remove('show'); // trigger the transitions
 						}
-						vmDom.setAttribute('aria-hidden', !value);
+						arePopupsVisible(0 < visiblePopups.size);
 /*
 						// the old ko.bindingHandlers.modal
 						const close = vmDom.querySelector('.close'),

dev/Screen/User/MailBox.js

@@ -1,6 +1,6 @@
 import { Scope } from 'Common/Enums';
 import { Layout, ClientSideKeyName } from 'Common/EnumsUser';
-import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
+import { doc, leftPanelDisabled, moveAction, Settings, elementById } from 'Common/Globals';
 import { pString, pInt } from 'Common/Utils';
 import { setLayoutResizer } from 'Common/UtilsUser';
 import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
@@ -104,8 +104,8 @@ export class MailBoxUserScreen extends AbstractScreen {
 	onBuild() {
 		setTimeout(() => {
 			// initMailboxLayoutResizer
-			const top = doc.querySelector('.RL-MailMessageList'),
-				bottom = doc.querySelector('.RL-MailMessageView'),
+			const top = elementById('V-MailMessageList'),
+				bottom = elementById('V-MailMessageView'),
 				fToggle = () => {
 					let layout = SettingsUserStore.layout();
 					setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,

dev/Stores/User/App.js

@@ -1,5 +1,5 @@
 import { Scope } from 'Common/Enums';
-import { doc, keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals';
+import { keyScope, leftPanelDisabled, SettingsGet, elementById } from 'Common/Globals';
 import { addObservablesTo } from 'Common/Utils';
 import { ThemeStore } from 'Stores/Theme';
 
@@ -25,7 +25,7 @@ AppUserStore.focusedState.subscribe(value => {
 			break;
 	}
 	['FolderList','MessageList','MessageView'].forEach(name => {
-		let dom = doc.querySelector('.RL-Mail'+name);
+		let dom = elementById('V-Mail'+name);
 		dom && dom.classList.toggle('focused', name === value);
 	});
 });

dev/Styles/@Admin.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/buttons.less";
 @import "../../vendors/bootstrap/less/button-groups.less";
 @import "../../vendors/bootstrap/less/alerts.less";
-@import "../../vendors/bootstrap/less/modals.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 @import "../../vendors/bootstrap/less/wells.less";
 

dev/Styles/@Main.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/buttons.less";
 @import "../../vendors/bootstrap/less/button-groups.less";
 @import "../../vendors/bootstrap/less/alerts.less";
-@import "../../vendors/bootstrap/less/modals.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 @import "../../vendors/bootstrap/less/navs.less";
 

dev/Styles/Admin/Domain.less

@@ -1,18 +1,14 @@
-.b-domain-alias-content {
-	&.modal {
-		max-width: 330px;
-	}
+#V-PopupsDomainAlias {
+	max-width: 330px;
 
 	.error-desc {
 		color: red;
 	}
 }
 
-.b-domain-content {
+#V-PopupsDomain {
 
-	&.modal {
-		max-width: 810px;
-	}
+	max-width: 810px;
 
 	.domain-desc {
 		color: #666;

dev/Styles/Admin/Layout.less

@@ -91,17 +91,6 @@
 	padding-right: 12px;
 }
 
-#rl-popups > .rl-view-model {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1100;
-	overflow: auto;
-	background-color: rgba(0,0,0,0.3);
-}
-
 #rl-settings-subscreen {
 	padding: 20px;
 }

dev/Styles/Admin/Plugin.less

@@ -1,8 +1,6 @@
-.b-plugin-content {
+#V-PopupsPlugin {
 
-	&.modal {
-		max-width: 660px;
-	}
+	max-width: 660px;
 
 	.modal-body {
 		overflow: auto;

dev/Styles/Animations.less

@@ -18,22 +18,22 @@
 
 @media screen and (min-width: 1000px) {
 
-	html.rl-started-trigger .b-login-content {
+	html.rl-started-trigger .LoginView {
 		/*transform: scale(1.1);*/
 		transform: translateY(-20px);
 		opacity: 0.5;
 	}
 
-	.b-login-content .errorAnimated {
+	.LoginView .errorAnimated {
 		animation: login-form-shake 400ms ease-in-out;
 	}
 
-	.b-login-content .errorAnimated .buttonLogin {
+	.LoginView .errorAnimated .buttonLogin {
 		color: #b94a48;
 		font-weight: bold;
 	}
 
-	.b-login-content {
+	.LoginView {
 		transition: all 0.3s ease-out;
 	}
 
@@ -41,23 +41,4 @@
 		transition: all 0.2s linear;
 	}
 
-	#rl-popups > .rl-view-model .modal {
-		transition: all .2s ease-out;
-	}
-	#rl-popups > .rl-view-model:not(.show) .modal {
-		top: -25%;
-	}
-	#rl-popups > .rl-view-model .modal.fade {
-		opacity: 1;
-	}
-	#rl-popups > .rl-view-model:not(.show) .modal.fade {
-		opacity: 0;
-	}
-}
-
-#rl-popups > .rl-view-model {
-	transition: background-color 0.2s linear;
-}
-#rl-popups > .rl-view-model:not(.show) {
-	background-color: rgba(0,0,0,0);
 }

dev/Styles/Ask.less

@@ -1,4 +1,4 @@
-.b-ask-content {
+#V-PopupsAsk {
 
 	.modal-body {
 		font-size: 18px;

dev/Styles/Languages.less

@@ -1,8 +1,6 @@
-.b-languages-content {
+#V-PopupsLanguages {
 
-	&.modal {
-		max-width: 700px;
-	}
+	max-width: 710px;
 
 	label {
 		display: inline-block;
@@ -37,7 +35,7 @@
 }
 
 @media screen and (max-width: 999px) {
-	.b-languages-content label {
+	#V-PopupsLanguages label {
 		width: calc(100% - 40px);
 	}
 }

dev/Styles/Login.less

@@ -1,4 +1,4 @@
-.RL-Login, .RL-AdminLogin {
+#V-Login, #V-AdminLogin {
 	position: fixed;
 	left: 50%;
 	top: 50%;
@@ -13,7 +13,7 @@
 @glass-error-color: #f76260;
 @glass-m-color: rgba(255, 255, 255, .8);
 
-.b-login-content {
+.LoginView {
 
 	position: relative;
 
@@ -163,7 +163,7 @@
 }
 
 @media screen and (max-width: 480px) {
-	.b-login-content {
+	.LoginView {
 		form {
 			padding: 30px 4vw 10px;
 		}

dev/Styles/Ui.less

@@ -124,3 +124,96 @@ textarea + .settings-save-trigger {
 .tabs [id^="tab"]:checked + label + .tab-content {
 	visibility: visible;
 }
+
+.dialog-backdrop {
+	background: rgba(0,0,0,0.5);
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+/*
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(0,0,0,0.5);
+
+	z-index: 1000000000;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1100;
+	overflow: auto;
+	background-color: rgba(0,0,0,0.3);
+*/
+}
+
+dialog {
+	border: 0;
+	background-color: @white;
+	border: 1px solid rgba(0,0,0,.3);
+	border-radius: 6px;
+	box-shadow: 0 5px 80px rgba(0,0,0,0.3);
+	margin: 10px auto;
+	max-height: calc(100vh - 20px);
+	max-width: 560px;
+	overflow: auto;
+	padding: 0;
+	transition: all .2s ease-out;
+	top: 0;
+	width: calc(100% - 20px);
+}
+dialog:not([open]) {
+	display: none !important;
+}
+dialog.show {
+	opacity: 1;
+}
+dialog:not(.show) {
+	background-color: rgba(0,0,0,0);
+	opacity: 0;
+	top: -25%;
+}
+
+dialog header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+  // Close icon
+  .close { margin-top: 2px; }
+  // Heading
+  h3 {
+    margin: 0;
+    line-height: 30px;
+  }
+}
+
+// Body (where all modal content resides)
+dialog .modal-body {
+  overflow-y: auto;
+  padding: 15px;
+}
+
+// Footer (for actions)
+dialog footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right; // right align buttons
+  border-top: 1px solid #ddd;
+  border-radius: 0 0 6px 6px;
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: 5px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+}

dev/Styles/User/AdvancedSearch.less

@@ -1,7 +1,7 @@
-.b-advanced-search-content {
-	&.modal {
-		max-width: 780px;
-	}
+#V-PopupsAdvancedSearch {
+
+	max-width: 780px;
+
 	.control-label {
 		width: 110px;
 	}

dev/Styles/User/Animations.less

@@ -34,7 +34,7 @@
 		}
 	}
 
-	.b-compose.loading .b-header-toolbar {
+	#V-PopupsCompose header.loading {
 		background-size: 60px 60px;
 		background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%,
 			transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%,

dev/Styles/User/Compose.less

@@ -1,13 +1,10 @@
 
-.b-compose {
-
-	&.modal {
-		display: flex;
-		flex-direction: column;
-		height: calc(100% - 52px);
-		max-width: 1000px;
-		width: 98%;
-	}
+#V-PopupsCompose {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - 52px);
+	max-width: 1000px;
+	width: 98%;
 
 	.modal-body {
 		padding: 0;
@@ -32,22 +29,23 @@
 		border-top: 1px solid #ccc;
 		overflow-y: auto;
 		padding: 10px;
-
-		.no-attachments-desc {
-			padding-top: 50px;
-			text-align: center;
-			font-size: 24px;
-			color: #666;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-		}
-
-		.attachmentList {
-			margin: 0;
-			padding: 10px;
-		}
 	}
 
-	.b-header-toolbar {
+	.attachmentName {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.no-attachments-desc {
+		padding-top: 50px;
+		text-align: center;
+		font-size: 24px;
+		color: #666;
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	}
+
+	header {
 
 		background-color: rgba(0,0,0,0.8);
 
@@ -160,7 +158,7 @@
 }
 
 @media screen and (max-width: 999px) {
-	.b-compose.modal {
+	#V-PopupsCompose {
 		border: 0;
 		width: 100%;
 	}

dev/Styles/User/Contacts.less

@@ -1,7 +1,14 @@
 
 @contacts-popup-left-width: 25%;
 
-.RL-PopupsContacts {
+#V-PopupsContacts {
+
+	bottom: 0;
+	width: auto;
+	min-width: 550px;
+	max-width: 900px;
+	min-height: 300px;
+	max-height: 700px;
 
 	.control-group {
 		.control-label {
@@ -10,15 +17,6 @@
 		}
 	}
 
-	.modal {
-		bottom: 0;
-		width: auto;
-		min-width: 550px;
-		max-width: 900px;
-		min-height: 300px;
-		max-height: 700px;
-	}
-
 	.modal-body {
 		height: calc(100% - 49px);
 		padding: 0;

dev/Styles/User/Filter.less

@@ -1,4 +1,4 @@
-.b-filter-content {
+#V-PopupsFilter {
 
 	max-width: 750px;
 

dev/Styles/User/Identity.less

@@ -1,8 +1,6 @@
-.b-identity-content {
+#V-PopupsIdentity {
 
-	&.modal {
-		max-width: 770px;
-	}
+	max-width: 770px;
 
 	.modal-body {
 		overflow: hidden;

dev/Styles/User/Layout.less

@@ -75,7 +75,7 @@ html:not(.rl-left-panel-disabled) #rl-left {
 }
 
 #rl-left > .resizer,
-.rl-side-preview-pane .RL-MailMessageList > .resizer {
+.rl-side-preview-pane #V-MailMessageList > .resizer {
 	cursor: ew-resize;
 	height: 100%;
 	right: 0;
@@ -83,17 +83,17 @@ html:not(.rl-left-panel-disabled) #rl-left {
 	width: 5px;
 }
 
-.rl-side-preview-pane .RL-MailMessageList {
+.rl-side-preview-pane #V-MailMessageList {
 	resize: horizontal;
 	min-width: 320px;
 	max-width: 60%;
 }
-.rl-bottom-preview-pane .RL-MailMessageList {
+.rl-bottom-preview-pane #V-MailMessageList {
 	resize: vertical;
 	min-height: 200px;
 	max-height: 60%;
 }
-.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
+.rl-bottom-preview-pane #V-MailMessageList > .resizer {
 	cursor: ns-resize;
 	height: 5px;
 	left: 0;
@@ -102,11 +102,11 @@ html:not(.rl-left-panel-disabled) #rl-left {
 }
 
 html:not(.rl-left-panel-disabled) #rl-left > .resizer,
-.RL-MailMessageList > .resizer {
+#V-MailMessageList > .resizer {
 	display: block;
 }
 
-.RL-MailMessageList {
+#V-MailMessageList {
 	position: absolute;
 	top: 0;
 	bottom: @rlBottomMargin;
@@ -114,7 +114,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 	width: 50%;
 }
 
-.RL-MailMessageView {
+#V-MailMessageView {
 	position: absolute;
 	top: 50px + @rlLowMargin;
 	bottom: 13px;
@@ -148,30 +148,11 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 }
 
 html.rl-side-preview-pane {
-	.RL-MailMessageView {
+	#V-MailMessageView {
 		left: 50%;
 	}
 }
 
-/*
-	#rl-popups > dialog {
-		top: 0;
-		margin: 10px auto;
-		padding: 0;
-		border: 0;
-	}
-*/
-#rl-popups > .rl-view-model {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1100;
-	overflow: auto;
-	background-color: rgba(0,0,0,0.3);
-}
-
 #rl-settings-subscreen {
 	padding:20px;
 }
@@ -256,12 +237,12 @@ html.rl-side-preview-pane {
 		left: @rlLeftWidth + 20;
 	}
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		width: 40%;
 	}
 
 	html.rl-side-preview-pane {
-		.RL-MailMessageView {
+		#V-MailMessageView {
 			left: 40%;
 		}
 	}
@@ -317,7 +298,7 @@ html.rl-left-panel-disabled {
 
 html.rl-no-preview-pane {
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		right: @rlBottomMargin !important;
 		width: inherit;
 	}
@@ -331,14 +312,14 @@ html.rl-no-preview-pane #rl-right .resizer {
 
 html.rl-bottom-preview-pane {
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		bottom: inherit;
 		width: inherit;
 		height: 300px;
 		right: 0;
 	}
 
-	.RL-MailMessageView {
+	#V-MailMessageView {
 		left: 0;
 		top: 356px;
 	}

dev/Styles/User/MessageList.less

@@ -1,12 +1,12 @@
 
 html.rl-mobile,
 html.rl-no-preview-pane {
-	.message-selected .RL-MailMessageList {
+	.message-selected #V-MailMessageList {
 		display: none;
 	}
 }
 
-.RL-MailMessageList.focused .messageList {
+#V-MailMessageList.focused .messageList {
 	border-color: #9d9d9d;
 }
 
@@ -15,7 +15,7 @@ html.rl-no-preview-pane {
 	padding-right: 6px;
 }
 
-.RL-MailMessageList .btn-toolbar {
+#V-MailMessageList .btn-toolbar {
 	height: 30px;
 	padding: 10px 1px;
 	white-space: nowrap;
@@ -42,15 +42,13 @@ html.rl-no-preview-pane {
 		border-top: 1px solid #bbb;
 
 		.e-quota {
+			border-bottom: 1px dashed #333;
 			display: inline-block;
 			margin-top: 5px;
 			margin-left: 5px;
 			font-size: 18px;
 			cursor: help;
 		}
-		.e-quota:hover {
-			border-bottom: 1px dashed #333;
-		}
 	}
 
 	.btn.buttonMoreSearch {

dev/Styles/User/MessageView.less

@@ -1,11 +1,11 @@
 
 html.rl-no-preview-pane {
-	#rl-right:not(.message-selected) .RL-MailMessageView {
+	#rl-right:not(.message-selected) #V-MailMessageView {
 		display: none;
 	}
 }
 
-.RL-MailMessageView.focused .messageView {
+#V-MailMessageView.focused .messageView {
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 	border-color: darken(@rlMainDarkColor, 5%);
 }
@@ -501,10 +501,10 @@ html.rl-message-fullscreen {
 	}
 
 	#rl-right {
-		.RL-MailMessageList,
-		.RL-SettingsPane,
-		.RL-SystemDropDown,
-		.RL-MailMessageView .messageView .toolbar {
+		#V-MailMessageList,
+		#V-SettingsPane,
+		#V-SystemDropDown,
+		#V-MailMessageView .messageView .toolbar {
 			display: none !important;
 		}
 	}

dev/Styles/User/OpenPgpKey.less

@@ -1,20 +1,16 @@
-.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
-	&.modal {
-		max-width: 570px;
-	}
+#V-PopupsViewOpenPgpKey, #V-PopupsNewOpenPgpKey {
+	max-width: 570px;
 }
 
-.b-open-pgp-key-view-content {
+#V-PopupsViewOpenPgpKey {
 	.key-viewer {
 		max-height: 500px;
 		overflow: auto;
 	}
 }
 
-.b-compose-open-pgp-content {
-	&.modal {
-		max-width: 800px;
-	}
+#V-PopupsComposeOpenPgp {
+	max-width: 800px;
 
 	.key-list {
 
@@ -95,10 +91,8 @@
 	}
 }
 
-.b-message-open-pgp-content {
-	&.modal {
-		max-width: 700px;
-	}
+#V-PopupsMessageOpenPgp {
+	max-width: 700px;
 
 	.key-list {
 
@@ -132,10 +126,9 @@
 	}
 }
 
-.b-open-pgp-key-add-content {
-	&.modal {
-		max-width: 645px;
-	}
+#V-PopupsAddOpenPgpKey {
+	max-width: 645px;
+
 	.inputKey {
 		font-family: var(--fontMono);
 		width: 600px;

dev/Styles/User/SettingsFilters.less

@@ -1,10 +1,10 @@
 
-.b-filter-script {
+#V-PopupsSieveScript {
 	width: auto;
 	max-width: 720px;
 }
 
-.b-filter-script .filter-item,
+#V-PopupsSieveScript .filter-item,
 .b-settings-filters .script-item {
 	white-space: nowrap;
 }
@@ -30,7 +30,7 @@
 	color: #aaa;
 }
 
-.b-filter-script textarea {
+#V-PopupsSieveScript textarea {
 	height: 300px;
 	font-family: var(--fontMono);
 }

dev/Styles/User/Shortcuts.less

@@ -1,7 +1,5 @@
-.b-shortcuts-content {
-	&.modal {
-		max-width: 700px;
-	}
+#V-PopupsKeyboardShortcutsHelp {
+	max-width: 700px;
 
 	td[class^="icon-"] {
 		display: table-cell;

dev/Styles/User/SquireUI.less

@@ -175,14 +175,14 @@ Secondly, we can't rely on MUA's what to do with :empty
 	}
 }
 
-.rl-mobile .b-compose.modal,
-.rl-mobile .b-identity-content.modal {
+.rl-mobile #V-PopupsCompose,
+.rl-mobile #V-PopupsIdentity {
 	margin-bottom: 50px;
 }
-.rl-mobile .b-compose.modal {
+.rl-mobile #V-PopupsCompose {
 	min-height: calc(100% - 62px);
 }
 
-.RL-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
+#V-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
 	display: none;
 }

dev/Styles/User/SystemDropDown.less

@@ -10,7 +10,7 @@
 	top: 40px;
 }
 
-.RL-SystemDropDown {
+#V-SystemDropDown {
 
 	position: absolute;
 	top: 0;

dev/View/Admin/Login.js

@@ -1,19 +1,14 @@
-import ko from 'ko';
-
-import { Settings } from 'Common/Globals';
 import { getNotification } from 'Common/Translator';
 
 import Remote from 'Remote/Admin/Fetch';
 
 import { decorateKoCommands } from 'Knoin/Knoin';
-import { AbstractViewCenter } from 'Knoin/AbstractViews';
+import { AbstractViewLogin } from 'Knoin/AbstractViews';
 
-class LoginAdminView extends AbstractViewCenter {
+class LoginAdminView extends AbstractViewLogin {
 	constructor() {
 		super('AdminLogin');
 
-		this.hideSubmitButton = Settings.app('hideSubmitButton');
-
 		this.addObservables({
 			login: '',
 			password: '',
@@ -26,8 +21,6 @@ class LoginAdminView extends AbstractViewCenter {
 			submitError: ''
 		});
 
-		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
-
 		this.addSubscribables({
 			login: () => this.loginError(false),
 			password: () => this.passwordError(false)
@@ -67,14 +60,6 @@ class LoginAdminView extends AbstractViewCenter {
 
 		return valid;
 	}
-
-	onShow() {
-		rl.route.off();
-	}
-
-	submitForm() {
-//		return false;
-	}
 }
 
 export { LoginAdminView };

dev/View/Popup/Account.js

@@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AccountPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Account');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			isNew: true,

dev/View/Popup/AddOpenPgpKey.js

@@ -6,6 +6,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AddOpenPgpKeyPopupView extends AbstractViewPopup {
 	constructor() {
 		super('AddOpenPgpKey');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			key: '',

dev/View/Popup/AdvancedSearch.js

@@ -11,6 +11,7 @@ import { FolderUserStore } from 'Stores/User/Folder';
 class AdvancedSearchPopupView extends AbstractViewPopup {
 	constructor() {
 		super('AdvancedSearch');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			from: '',

dev/View/Popup/Ask.js

@@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AskPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Ask');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			askDesc: '',

dev/View/Popup/ComposeOpenPgp.js

@@ -18,6 +18,7 @@ const KEY_NAME_SUBSTR = -8,
 class ComposeOpenPgpPopupView extends AbstractViewPopup {
 	constructor() {
 		super('ComposeOpenPgp');
+		this.viewNoUserSelect = true;
 
 		this.publicKeysOptionsCaption = i18nPGP('ADD_A_PUBLICK_KEY');
 		this.privateKeysOptionsCaption = i18nPGP('SELECT_A_PRIVATE_KEY');

dev/View/Popup/Domain.js

@@ -11,6 +11,7 @@ import { DomainAdminStore } from 'Stores/Admin/Domain';
 class DomainPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Domain');
+		this.viewNoUserSelect = true;
 
 		this.addObservables(this.getDefaults());
 		this.addObservables({

dev/View/Popup/Filter.js

@@ -16,6 +16,7 @@ import { folderListOptionsBuilder } from 'Common/UtilsUser';
 class FilterPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Filter');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			isNew: true,

dev/View/Popup/FolderClear.js

@@ -11,6 +11,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderClearPopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderClear');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			selectedFolder: null,

dev/View/Popup/FolderCreate.js

@@ -15,6 +15,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderCreatePopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderCreate');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			folderName: '',

dev/View/Popup/FolderSystem.js

@@ -13,6 +13,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderSystemPopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderSystem');
+		this.viewNoUserSelect = true;
 
 		this.sChooseOnText = '';
 		this.sUnuseText = '';

dev/View/Popup/Languages.js

@@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class LanguagesPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Languages');
+		this.viewNoUserSelect = true;
 
 		this.fLang = null;
 		this.userLanguage = ko.observable('');

dev/View/Popup/MessageOpenPgp.js

@@ -9,6 +9,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class MessageOpenPgpPopupView extends AbstractViewPopup {
 	constructor() {
 		super('MessageOpenPgp');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			notification: '',

dev/View/Popup/NewOpenPgpKey.js

@@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class NewOpenPgpKeyPopupView extends AbstractViewPopup {
 	constructor() {
 		super('NewOpenPgpKey');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			email: '',

dev/View/Popup/SieveScript.js

@@ -16,6 +16,7 @@ import { FilterPopupView } from 'View/Popup/Filter';
 class SieveScriptPopupView extends AbstractViewPopup {
 	constructor() {
 		super('SieveScript');
+		this.viewNoUserSelect = true;
 
 		addObservablesTo(this, {
 			saveError: false,

dev/View/User/Login.js

@@ -1,8 +1,6 @@
-import ko from 'ko';
-
 import { Notification } from 'Common/Enums';
 import { ClientSideKeyName } from 'Common/EnumsUser';
-import { Settings, SettingsGet } from 'Common/Globals';
+import { SettingsGet } from 'Common/Globals';
 import { getNotification, translatorReload, convertLangName } from 'Common/Translator';
 
 import { LanguageStore } from 'Stores/Language';
@@ -12,7 +10,7 @@ import * as Local from 'Storage/Client';
 import Remote from 'Remote/User/Fetch';
 
 import { decorateKoCommands, showScreenPopup } from 'Knoin/Knoin';
-import { AbstractViewCenter } from 'Knoin/AbstractViews';
+import { AbstractViewLogin } from 'Knoin/AbstractViews';
 
 import { LanguagesPopupView } from 'View/Popup/Languages';
 
@@ -21,12 +19,10 @@ const SignMeOff = 0,
 	SignMeUnused = 2;
 
 
-class LoginUserView extends AbstractViewCenter {
+class LoginUserView extends AbstractViewLogin {
 	constructor() {
 		super('Login');
 
-		this.hideSubmitButton = Settings.app('hideSubmitButton');
-
 		this.addObservables({
 			loadingDesc: SettingsGet('LoadingDescription'),
 
@@ -46,8 +42,6 @@ class LoginUserView extends AbstractViewCenter {
 			signMeType: SignMeUnused
 		});
 
-		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
-
 		this.allowLanguagesOnLogin = !!SettingsGet('AllowLanguagesOnLogin');
 
 		this.language = LanguageStore.language;
@@ -129,11 +123,9 @@ class LoginUserView extends AbstractViewCenter {
 		return valid;
 	}
 
-	onShow() {
-		rl.route.off();
-	}
+	onBuild(dom) {
+		super.onBuild(dom);
 
-	onBuild() {
 		const signMeLocal = Local.get(ClientSideKeyName.LastSignMe),
 			signMe = (SettingsGet('SignMe') || '').toLowerCase();
 
@@ -161,10 +153,6 @@ class LoginUserView extends AbstractViewCenter {
 		}
 	}
 
-	submitForm() {
-//		return false;
-	}
-
 	selectLanguage() {
 		showScreenPopup(LanguagesPopupView, [this.language, this.languages(), LanguageStore.userLanguage()]);
 	}

snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html

@@ -1,41 +1,39 @@
-<div class="b-login-content">
-	<div class="alert" data-bind="hidden: !submitError()">
-		<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
-		<span data-bind="text: submitError"></span>
+<div class="alert" data-bind="hidden: !submitError()">
+	<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
+	<span data-bind="text: submitError"></span>
+</div>
+<form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
+	<div class="controls" data-bind="css: {'error': loginError}">
+		<div class="input-append">
+			<input required="" type="text" class="input-block-level inputIcon"
+				autofocus="" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-bind="textInput: login, disable: submitRequest"
+				data-i18n="[placeholder]LOGIN/LABEL_LOGIN" />
+			<span class="add-on fontastic">👤</span>
+		</div>
 	</div>
-	<form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
-		<div class="controls" data-bind="css: {'error': loginError}">
-			<div class="input-append">
-				<input required="" type="text" class="input-block-level inputIcon"
-					autofocus="" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="textInput: login, disable: submitRequest"
-					data-i18n="[placeholder]LOGIN/LABEL_LOGIN" />
-				<span class="add-on fontastic">👤</span>
-			</div>
+	<div class="controls" data-bind="css: {'error': passwordError}">
+		<div class="input-append">
+			<input required="" type="password" class="input-block-level inputIcon"
+				autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-bind="textInput: password, disable: submitRequest"
+				data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
+			<span class="add-on fontastic">🔑</span>
 		</div>
-		<div class="controls" data-bind="css: {'error': passwordError}">
-			<div class="input-append">
-				<input required="" type="password" class="input-block-level inputIcon"
-					autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="textInput: password, disable: submitRequest"
-					data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
-				<span class="add-on fontastic">🔑</span>
-			</div>
+	</div>
+	<div class="controls">
+		<div class="input-append">
+			<input type="text" pattern="[0-9]*" inputmode="numeric" class="input-block-level inputIcon"
+				autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-bind="textInput: totp, disable: submitRequest"
+				data-i18n="[placeholder]LOGIN/LABEL_TOTP" />
+			<button type="submit" class="add-on btn-submit-icon-wrp login-submit-icon fontastic" data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_LOGIN">❯</button>
 		</div>
-		<div class="controls">
-			<div class="input-append">
-				<input type="text" pattern="[0-9]*" inputmode="numeric" class="input-block-level inputIcon"
-					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="textInput: totp, disable: submitRequest"
-					data-i18n="[placeholder]LOGIN/LABEL_TOTP" />
-				<button type="submit" class="add-on btn-submit-icon-wrp login-submit-icon fontastic" data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_LOGIN">❯</button>
-			</div>
-		</div>
-		<div id="plugin-Login-BottomControlGroup"></div>
-		<div class="controls" data-bind="hidden: hideSubmitButton">
-			<button type="submit" class="btn btn-large btn-block buttonLogin"
-				data-bind="command: submitCommand"
-				data-i18n="LOGIN/BUTTON_LOGIN"></button>
-		</div>
-	</form>
-<div>
+	</div>
+	<div id="plugin-Login-BottomControlGroup"></div>
+	<div class="controls" data-bind="hidden: hideSubmitButton">
+		<button type="submit" class="btn btn-large btn-block buttonLogin"
+			data-bind="command: submitCommand"
+			data-i18n="LOGIN/BUTTON_LOGIN"></button>
+	</div>
+</form>

snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html

@@ -1,9 +1,8 @@
-<div class="modal fade b-domain-content g-ui-user-select-none"
-	data-bind="css: {'domain-edit': edit}">
-	<div class="modal-header">
+<div data-bind="css: {'domain-edit': edit}">
+	<header>
 		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 		<h3 data-bind="text: headerText"></h3>
-	</div>
+	</header>
 	<div class="modal-body">
 		<div class="row" data-bind="visible: !edit()" style="margin-bottom: 20px;">
 			<div class="span5">
@@ -187,7 +186,7 @@
 			</div>
 		</form>
 	</div>
-	<div class="modal-footer">
+	<footer>
 		<a class="btn button-test-connection pull-left" data-bind="command: testConnectionCommand, css: {
 		   'btn-success': testingDone() && !testingImapError() && !testingSmtpError(),
 		   'btn-danger': testingDone() && (testingImapError() || testingSmtpError()) }">
@@ -206,5 +205,5 @@
 			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✚</i>
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
 		</a>
-	</div>
+	</footer>
 </div>

snappymail/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html

@@ -1,47 +1,45 @@
-<div class="modal fade b-domain-alias-content">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="control-group" data-bind="css: {error: '' !== savingError()}">
-			<label class="control-label" data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_ALIAS"></label>
-			<div class="controls">
-				<div data-bind="component: {
-					name: 'Input',
-					params: {
-						value: name,
-						size: 4
-					}
-				}"></div>
-				<div data-bind="visible: '' !== savingError()">
-					<span class="error-desc" data-bind="text: savingError"></span>
-				</div>
-			</div>
-		</div>
-		<div class="control-group">
-			<label class="control-label" data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_DOMAIN"></label>
-			<div class="controls" data-bind="component: {
-				name: 'Select',
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>
+</header>
+<div class="modal-body">
+	<div class="control-group" data-bind="css: {error: '' !== savingError()}">
+		<label class="control-label" data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_ALIAS"></label>
+		<div class="controls">
+			<div data-bind="component: {
+				name: 'Input',
 				params: {
-					options: domainsOptions,
-					value: alias,
-					optionsText: 'optText',
-					optionsValue: 'optValue',
+					value: name,
 					size: 4
 				}
 			}"></div>
+			<div data-bind="visible: '' !== savingError()">
+				<span class="error-desc" data-bind="text: savingError"></span>
+			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="fontastic">✖</i>
-			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
-		</a>
-		<a class="btn" data-bind="command: createCommand">
-			<i class="fontastic" data-bind="visible: !saving()">✚</i>
-			<i class="icon-spinner" data-bind="visible: saving"></i>
-			<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>
-		</a>
+	<div class="control-group">
+		<label class="control-label" data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_DOMAIN"></label>
+		<div class="controls" data-bind="component: {
+			name: 'Select',
+			params: {
+				options: domainsOptions,
+				value: alias,
+				optionsText: 'optText',
+				optionsValue: 'optValue',
+				size: 4
+			}
+		}"></div>
 	</div>
 </div>
+<footer>
+	<a class="btn buttonClose" data-bind="command: cancelCommand">
+		<i class="fontastic">✖</i>
+		<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
+	</a>
+	<a class="btn" data-bind="command: createCommand">
+		<i class="fontastic" data-bind="visible: !saving()">✚</i>
+		<i class="icon-spinner" data-bind="visible: saving"></i>
+		<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>
+	</a>
+</footer>

snappymail/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html

@@ -1,33 +1,31 @@
-<div class="modal fade b-plugin-content">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h4>
-			<span data-i18n="POPUPS_PLUGIN/TITLE_PLUGIN"></span>
-			&nbsp;
-			"<span data-bind="text: name"></span>"
-		</h4>
-		<span data-bind="visible: hasReadme, text: readme"></span>
-	</div>
-	<div class="modal-body">
-		<form class="form-horizontal plugin-form" action="#/" onsubmit="return false;">
-			<div class="well" data-bind="visible: !hasConfiguration()" data-i18n="POPUPS_PLUGIN/DESC_NOTHING_TO_CONFIGURE"></div>
-			<div class="alert" data-bind="visible: '' !== saveError()">
-				<button type="button" class="close" data-bind="click: function () { saveError('') }">×</button>
-				<span data-bind="text: saveError"></span>
-			</div>
-			<div data-bind="foreach: configures, visible: hasConfiguration">
-				<div data-bind="template: { name: 'AdminSettingsPluginProperty' }"></div>
-			</div>
-		</form>
-	</div>
-	<div class="modal-footer">
-		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="fontastic">✖</i>
-			<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
-		</a>
-		<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
-			<i class="fontastic">✔</i>
-			<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
-		</a>
-	</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h4>
+		<span data-i18n="POPUPS_PLUGIN/TITLE_PLUGIN"></span>
+		&nbsp;
+		"<span data-bind="text: name"></span>"
+	</h4>
+	<span data-bind="visible: hasReadme, text: readme"></span>
+</header>
+<div class="modal-body">
+	<form class="form-horizontal plugin-form" action="#/" onsubmit="return false;">
+		<div class="well" data-bind="visible: !hasConfiguration()" data-i18n="POPUPS_PLUGIN/DESC_NOTHING_TO_CONFIGURE"></div>
+		<div class="alert" data-bind="visible: '' !== saveError()">
+			<button type="button" class="close" data-bind="click: function () { saveError('') }">×</button>
+			<span data-bind="text: saveError"></span>
+		</div>
+		<div data-bind="foreach: configures, visible: hasConfiguration">
+			<div data-bind="template: { name: 'AdminSettingsPluginProperty' }"></div>
+		</div>
+	</form>
 </div>
+<footer>
+	<a class="btn buttonClose" data-bind="command: cancelCommand">
+		<i class="fontastic">✖</i>
+		<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
+	</a>
+	<a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
+		<i class="fontastic">✔</i>
+		<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
+	</a>
+</footer>

snappymail/v/0.0.0/app/templates/Views/Common/PopupsAsk.html

@@ -1,13 +1,11 @@
-<div class="modal fade b-ask-content g-ui-user-select-none">
-	<div class="modal-body" data-bind="html: askDesc"></div>
-	<div class="modal-footer">
-		<button class="btn buttonYes" data-bind="click: yesClick">
-			<i class="fontastic">✔</i>
-			<span data-bind="text: yesButton"></span>
-		</button>
-		<button class="btn buttonNo" data-bind="click: noClick">
-			<i class="fontastic">✖</i>
-			<span data-bind="text: noButton"></span>
-		</button>
-	</div>
-</div>
+<div class="modal-body" data-bind="html: askDesc"></div>
+<footer>
+	<button class="btn buttonYes" data-bind="click: yesClick">
+		<i class="fontastic">✔</i>
+		<span data-bind="text: yesButton"></span>
+	</button>
+	<button class="btn buttonNo" data-bind="click: noClick">
+		<i class="fontastic">✖</i>
+		<span data-bind="text: noButton"></span>
+	</button>
+</footer>

snappymail/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html

@@ -1,12 +1,10 @@
-<div class="modal fade b-languages-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3>
-	</div>
-	<div class="modal-body" style="min-height: 150px;" data-bind="foreach: languages">
-		<label data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
-			attr: { title: $root.languageTooltipName(key) },
-			text: fullName">
-		</label>
-	</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3>
+</header>
+<div class="modal-body" style="min-height: 150px;" data-bind="foreach: languages">
+	<label data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
+		attr: { title: $root.languageTooltipName(key) },
+		text: fullName">
+	</label>
 </div>

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

@@ -1,57 +1,55 @@
-<div class="b-login-content">
-	<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
-	<div class="alert" data-bind="hidden: !submitError()" hidden="">
-		<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
-		<span data-bind="text: submitError"></span>
-		<p data-bind="visible: '' !== submitErrorAddidional(), text: submitErrorAddidional"></p>
-	</div>
-	<form action="#/"
-		data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
-		<div class="controls" data-bind="css: {'error': emailError}">
-			<div class="input-append">
-				<input name="Email" required="" type="text" class="input-block-level inputIcon" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
-					autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="textInput: email, disable: submitRequest"
-					data-i18n="[placeholder]GLOBAL/EMAIL" />
-				<span class="add-on icon-mail"></span>
-			</div>
-		</div>
-		<div class="controls" data-bind="css: {'error': passwordError}">
-			<div class="input-append">
-				<input name="Password" required="" type="password" class="input-block-level inputIcon"
-					autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-bind="textInput: password, disable: submitRequest"
-					data-i18n="[placeholder]GLOBAL/PASSWORD" />
-				<span class="add-on" tabindex="-1"
-					data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_SIGN_IN">
-					<i class="fontastic" data-bind="visible: '' === password()">🔑</i>
-					<button type="submit" class="btn-submit-icon-wrp login-submit-icon fontastic" data-bind="visible: '' !== password()">❯</button>
-				</span>
-			</div>
-		</div>
-		<div id="plugin-Login-BottomControlGroup"></div>
-		<div class="controls" data-bind="hidden: hideSubmitButton">
-			<button type="submit" class="btn btn-large btn-block buttonLogin"
-				data-bind="command: submitCommand"
-				data-i18n="LOGIN/BUTTON_SIGN_IN"></button>
-		</div>
-		<div class="controls clearfix" style="margin-bottom: 10px">
-			<div class="pull-right language-buttons">
-				<a href="#" tabindex="-1" class="language-button fontastic"
-					data-bind="visible: allowLanguagesOnLogin, click: selectLanguage, css: { 'icon-spinner' : langRequest }"
-					data-i18n="[title]POPUPS_LANGUAGES/TITLE_LANGUAGES">
-					🌍
-				</a>
-			</div>
-
-			<div class="signMeLabel" data-bind="visible: signMeVisibility, component: {
-				name: 'CheckboxSimple',
-				params: {
-					label: 'LOGIN/LABEL_SIGN_ME',
-					value: signMe
-				}
-			}"></div>
-
-		</div>
-	</form>
+<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
+<div class="alert" data-bind="hidden: !submitError()" hidden="">
+	<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
+	<span data-bind="text: submitError"></span>
+	<p data-bind="visible: '' !== submitErrorAddidional(), text: submitErrorAddidional"></p>
 </div>
+<form action="#/"
+	data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
+	<div class="controls" data-bind="css: {'error': emailError}">
+		<div class="input-append">
+			<input name="Email" required="" type="text" class="input-block-level inputIcon" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
+				autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-bind="textInput: email, disable: submitRequest"
+				data-i18n="[placeholder]GLOBAL/EMAIL" />
+			<span class="add-on icon-mail"></span>
+		</div>
+	</div>
+	<div class="controls" data-bind="css: {'error': passwordError}">
+		<div class="input-append">
+			<input name="Password" required="" type="password" class="input-block-level inputIcon"
+				autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-bind="textInput: password, disable: submitRequest"
+				data-i18n="[placeholder]GLOBAL/PASSWORD" />
+			<span class="add-on" tabindex="-1"
+				data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_SIGN_IN">
+				<i class="fontastic" data-bind="visible: '' === password()">🔑</i>
+				<button type="submit" class="btn-submit-icon-wrp login-submit-icon fontastic" data-bind="visible: '' !== password()">❯</button>
+			</span>
+		</div>
+	</div>
+	<div id="plugin-Login-BottomControlGroup"></div>
+	<div class="controls" data-bind="hidden: hideSubmitButton">
+		<button type="submit" class="btn btn-large btn-block buttonLogin"
+			data-bind="command: submitCommand"
+			data-i18n="LOGIN/BUTTON_SIGN_IN"></button>
+	</div>
+	<div class="controls clearfix" style="margin-bottom: 10px">
+		<div class="pull-right language-buttons">
+			<a href="#" tabindex="-1" class="language-button fontastic"
+				data-bind="visible: allowLanguagesOnLogin, click: selectLanguage, css: { 'icon-spinner' : langRequest }"
+				data-i18n="[title]POPUPS_LANGUAGES/TITLE_LANGUAGES">
+				🌍
+			</a>
+		</div>
+
+		<div class="signMeLabel" data-bind="visible: signMeVisibility, component: {
+			name: 'CheckboxSimple',
+			params: {
+				label: 'LOGIN/LABEL_SIGN_ME',
+				value: signMe
+			}
+		}"></div>
+
+	</div>
+</form>

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

@@ -1,46 +1,44 @@
-<div class="modal fade b-account-add-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3>
-			<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></span>
-			<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
-		</h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="alert" data-bind="visible: '' !== submitError()">
-				<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
-				<span data-bind="text: submitError"></span>
-				<div data-bind="visible: submitErrorAdditional">
-					<br />
-					<span data-bind="text: submitErrorAdditional"></span>
-				</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3>
+		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></span>
+		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
+	</h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="alert" data-bind="visible: '' !== submitError()">
+			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
+			<span data-bind="text: submitError"></span>
+			<div data-bind="visible: submitErrorAdditional">
+				<br />
+				<span data-bind="text: submitErrorAdditional"></span>
 			</div>
-			<br />
-			<div class="control-group" data-bind="css: {'error': emailError}">
-				<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
-				<div class="controls">
-					<label style="margin-top: 5px;" data-bind="visible: !isNew()"><strong data-bind="text: email"></strong></label>
-					<input type="email" class="input-xlarge"
-						autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="visible: isNew, textInput: email, onEnter: addAccountCommand" />
-				</div>
+		</div>
+		<br />
+		<div class="control-group" data-bind="css: {'error': emailError}">
+			<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
+			<div class="controls">
+				<label style="margin-top: 5px;" data-bind="visible: !isNew()"><strong data-bind="text: email"></strong></label>
+				<input type="email" class="input-xlarge"
+					autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="visible: isNew, textInput: email, onEnter: addAccountCommand" />
 			</div>
-			<div class="control-group" data-bind="css: {'error': passwordError}">
-				<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
-				<div class="controls">
-					<input type="password" class="inputPassword input-xlarge" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: password, onEnter: addAccountCommand" />
-				</div>
+		</div>
+		<div class="control-group" data-bind="css: {'error': passwordError}">
+			<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
+			<div class="controls">
+				<input type="password" class="inputPassword input-xlarge" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: password, onEnter: addAccountCommand" />
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
-			<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
-			<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
-			<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
-			<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
+		<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
+		<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
+	</a>
+</footer>

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

@@ -1,21 +1,19 @@
-<div class="modal fade b-open-pgp-key-add-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/TITLE_IMPORT_OPEN_PGP_KEY"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="alert"  data-bind="visible: keyError() && keyErrorMessage(), text: keyErrorMessage"></div>
-		<div class="form-horizontal">
-			<div class="control-group" data-bind="css: {'error': keyError}">
-				<textarea class="inputKey input-xxlarge" rows="14" autofocus="" autocomplete="off" data-bind="value: key"></textarea>
-			</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/TITLE_IMPORT_OPEN_PGP_KEY"></h3>
+</header>
+<div class="modal-body">
+	<div class="alert"  data-bind="visible: keyError() && keyErrorMessage(), text: keyErrorMessage"></div>
+	<div class="form-horizontal">
+		<div class="control-group" data-bind="css: {'error': keyError}">
+			<textarea class="inputKey input-xxlarge" rows="14" autofocus="" autocomplete="off" data-bind="value: key"></textarea>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonAddAccount" data-bind="command: addOpenPgpKeyCommand">
-			<i class="icon-list-add"></i>
-			&nbsp;&nbsp;
-			<span data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/BUTTON_IMPORT_OPEN_PGP_KEY"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonAddAccount" data-bind="command: addOpenPgpKeyCommand">
+		<i class="icon-list-add"></i>
+		&nbsp;&nbsp;
+		<span data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/BUTTON_IMPORT_OPEN_PGP_KEY"></span>
+	</a>
+</footer>

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

@@ -1,104 +1,102 @@
-<div class="modal fade b-advanced-search-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
-	</div>
-	<div class="modal-body">
-		<form class="form-horizontal" action="#/" autocomplete="off" onsubmit="return false;" data-bind="command: searchCommand">
-			<div class="row">
-				<div class="span4">
-					<div class="control-group">
-						<label class="control-label" data-i18n="GLOBAL/FROM"></label>
-						<div class="controls">
-							<input type="text" class="uiInput inputFrom"
-								autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-								data-bind="value: from, onEnter: searchCommand, onEsc: cancelCommand" />
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" data-i18n="GLOBAL/TO"></label>
-						<div class="controls">
-							<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-								data-bind="value: to, onEnter: searchCommand, onEsc: cancelCommand" />
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" data-i18n="GLOBAL/SUBJECT"></label>
-						<div class="controls">
-							<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-								data-bind="value: subject, onEnter: searchCommand, onEsc: cancelCommand" />
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label" data-i18n="SEARCH/LABEL_ADV_TEXT"></label>
-						<div class="controls">
-							<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-								data-bind="value: text, onEnter: searchCommand, onEsc: cancelCommand" />
-						</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
+</header>
+<div class="modal-body">
+	<form class="form-horizontal" action="#/" autocomplete="off" onsubmit="return false;" data-bind="command: searchCommand">
+		<div class="row">
+			<div class="span4">
+				<div class="control-group">
+					<label class="control-label" data-i18n="GLOBAL/FROM"></label>
+					<div class="controls">
+						<input type="text" class="uiInput inputFrom"
+							autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+							data-bind="value: from, onEnter: searchCommand, onEsc: cancelCommand" />
 					</div>
 				</div>
-				<div class="span4">
-					<div class="control-group">
-						<label class="control-label" data-i18n="SEARCH/LABEL_ADV_DATE"></label>
-						<div class="controls" data-bind="component: {
-							name: 'Select',
-							params: {
-								options: selectedDates,
-								value: selectedDateValue,
-								optionsText: 'name',
-								optionsValue: 'id'
-							}
-						}"></div>
+				<div class="control-group">
+					<label class="control-label" data-i18n="GLOBAL/TO"></label>
+					<div class="controls">
+						<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+							data-bind="value: to, onEnter: searchCommand, onEsc: cancelCommand" />
 					</div>
-					<!-- ko if: showMultisearch -->
-					<div class="control-group">
-						<label class="control-label" data-i18n="SEARCH/LABEL_ADV_SUBFOLDERS"></label>
-						<div class="controls" data-bind="component: {
-							name: 'Select',
-							params: {
-								options: selectedTree,
-								value: selectedTreeValue,
-								optionsText: 'name',
-								optionsValue: 'id'
-							}
-						}"></div>
+				</div>
+				<div class="control-group">
+					<label class="control-label" data-i18n="GLOBAL/SUBJECT"></label>
+					<div class="controls">
+						<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+							data-bind="value: subject, onEnter: searchCommand, onEsc: cancelCommand" />
 					</div>
-					<!-- /ko -->
-					<div class="control-group">
-						<label class="control-label">
-						</label>
-						<div class="controls">
-							<div data-bind="component: {
-								name: 'Checkbox',
-								params: {
-									label: 'SEARCH/LABEL_ADV_UNSEEN',
-									value: unseen
-								}
-							}"></div>
-							<div data-bind="component: {
-								name: 'Checkbox',
-								params: {
-									label: 'SEARCH/LABEL_ADV_FLAGGED',
-									value: starred
-								}
-							}"></div>
-							<div data-bind="component: {
-								name: 'Checkbox',
-								params: {
-									label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
-									value: hasAttachment
-								}
-							}"></div>
-						</div>
+				</div>
+				<div class="control-group">
+					<label class="control-label" data-i18n="SEARCH/LABEL_ADV_TEXT"></label>
+					<div class="controls">
+						<input type="text" class="uiInput inputFrom" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+							data-bind="value: text, onEnter: searchCommand, onEsc: cancelCommand" />
 					</div>
 				</div>
 			</div>
-		</form>
-	</div>
-	<div class="modal-footer">
-		<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand">
-			<i class="fontastic">🔎</i>
-			<span data-i18n="GLOBAL/SEARCH"></span>
-		</a>
-	</div>
+			<div class="span4">
+				<div class="control-group">
+					<label class="control-label" data-i18n="SEARCH/LABEL_ADV_DATE"></label>
+					<div class="controls" data-bind="component: {
+						name: 'Select',
+						params: {
+							options: selectedDates,
+							value: selectedDateValue,
+							optionsText: 'name',
+							optionsValue: 'id'
+						}
+					}"></div>
+				</div>
+				<!-- ko if: showMultisearch -->
+				<div class="control-group">
+					<label class="control-label" data-i18n="SEARCH/LABEL_ADV_SUBFOLDERS"></label>
+					<div class="controls" data-bind="component: {
+						name: 'Select',
+						params: {
+							options: selectedTree,
+							value: selectedTreeValue,
+							optionsText: 'name',
+							optionsValue: 'id'
+						}
+					}"></div>
+				</div>
+				<!-- /ko -->
+				<div class="control-group">
+					<label class="control-label">
+					</label>
+					<div class="controls">
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: {
+								label: 'SEARCH/LABEL_ADV_UNSEEN',
+								value: unseen
+							}
+						}"></div>
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: {
+								label: 'SEARCH/LABEL_ADV_FLAGGED',
+								value: starred
+							}
+						}"></div>
+						<div data-bind="component: {
+							name: 'Checkbox',
+							params: {
+								label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
+								value: hasAttachment
+							}
+						}"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</form>
 </div>
+<footer>
+	<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand">
+		<i class="fontastic">🔎</i>
+		<span data-i18n="GLOBAL/SEARCH"></span>
+	</a>
+</footer>

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

@@ -1,183 +1,177 @@
-<div class="modal fade b-compose" data-bind="css: {'loading': saving() || sending()}">
-	<div class="modal-header b-header-toolbar g-ui-user-select-none">
-		<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
-			<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>
-			<span class="hide-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
-		</a>
-		<a class="btn button-save" data-bind="command: saveCommand, tooltipErrorTip: savedErrorDesc, css: {'btn-danger': savedError }">
-			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">💾</i>
-			<span class="hide-mobile" data-i18n="GLOBAL/SAVE"></span>
-		</a>
+<header class="g-ui-user-select-none" data-bind="css: {'loading': saving() || sending()}">
+	<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
+		<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>
+		<span class="hide-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
+	</a>
+	<a class="btn button-save" data-bind="command: saveCommand, tooltipErrorTip: savedErrorDesc, css: {'btn-danger': savedError }">
+		<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">💾</i>
+		<span class="hide-mobile" data-i18n="GLOBAL/SAVE"></span>
+	</a>
 
-		<a class="close" data-bind="click: tryToClosePopup" data-i18n="[title]GLOBAL/CANCEL">×</a>
-		<a class="minimize-custom" data-bind="click: skipCommand" data-i18n="[title]COMPOSE/BUTTON_MINIMIZE"></a>
+	<a class="close" data-bind="click: tryToClosePopup" data-i18n="[title]GLOBAL/CANCEL">×</a>
+	<a class="minimize-custom" data-bind="click: skipCommand" data-i18n="[title]COMPOSE/BUTTON_MINIMIZE"></a>
 
-		<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
-			<i class="fontastic">🗑</i>
-		</a>
-		<span class="saved-text hide-mobile" data-bind="text: savedTimeText"></span>
-	</div>
-	<div class="modal-body">
-		<div class="b-header g-ui-user-select-none">
-			<table>
-				<tr>
-					<td data-i18n="GLOBAL/FROM"></td>
-					<td>
-						<div class="dropdown" style="display:inline-block" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
-							<a class="dropdown-toggle e-identity" href="#" tabindex="-1"
-								id="identity-label-id" role="button"
-								data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }">
-							</a>
-							<!-- ko if: 1 < identitiesOptions().length -->
-								<ul class="dropdown-menu" role="menu" aria-labelledby="identity-label-id" data-bind="foreach: identitiesOptions">
-									<li role="presentation">
-										<a tabindex="-1" href="#" data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }, text: optText"></a>
-									</li>
-								</ul>
-							<!-- /ko -->
-						</div>
-						<div class="pull-right">
-							<a class="btn" data-i18n="GLOBAL/BCC"
-								data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
-							<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
-							<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
-								<a class="btn dropdown-toggle fontastic">☰</a>
-								<ul class="dropdown-menu right-edge" role="menu">
-									<li data-bind="click: function () { showBcc(!showBcc()); }">
-										<a>
-											<i class="fontastic" data-bind="text: showBcc() ? '☑' : '☐'"></i>
-											<span data-i18n="GLOBAL/BCC"></span>
-										</a>
-									</li>
-									<li data-bind="click: function () { showCc(!showCc()); }">
-										<a>
-											<i class="fontastic" data-bind="text: showCc() ? '☑' : '☐'"></i>
-											<span data-i18n="GLOBAL/CC"></span>
-										</a>
-									</li>
-									<li data-bind="click: function () { showReplyTo(!showReplyTo()); }">
-										<a>
-											<i class="fontastic" data-bind="text: showReplyTo() ? '☑' : '☐'"></i>
-											<span data-i18n="GLOBAL/REPLY_TO"></span>
-										</a>
-									</li>
-									<li data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
-										<a>
-											<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
-											<span data-i18n="COMPOSE/BUTTON_REQUEST_READ_RECEIPT"></span>
-										</a>
-									</li>
-									<li data-bind="click: function () { requestDsn(!requestDsn()); }">
-										<a>
-											<i class="fontastic" data-bind="text: requestDsn() ? '☑' : '☐'"></i>
-											<span data-i18n="COMPOSE/BUTTON_REQUEST_DSN"></span>
-										</a>
-									</li>
-									<li data-bind="click: function () { markAsImportant(!markAsImportant()); }">
-										<a>
-											<i class="fontastic" data-bind="text: markAsImportant() ? '☑' : '☐'"></i>
-											<span data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span>
-										</a>
-									</li>
-									<li class="dividerbar" data-bind="visible: capaOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
-										<a>
-											<i class="fontastic">🔑</i>
-											<span data-i18n="COMPOSE/BUTTON_OPEN_PGP"></span>
-										</a>
-									</li>
-								</ul>
-							</div>
-						</span>
-					</td>
-				</tr>
-				<tr>
-					<td>
-						<label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
-							data-i18n="GLOBAL/TO"></label>
-					</td>
-					<td>
-						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" />
-					</td>
-				</tr>
-				<tr class="cc-row" data-bind="visible: showCc">
-					<td data-i18n="GLOBAL/CC"></div>
-					<td>
-						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" />
-					</td>
-				</tr>
-				<tr class="bcc-row" data-bind="visible: showBcc">
-					<td data-i18n="GLOBAL/BCC"></div>
-					<td>
-						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" />
-					</td>
-				</tr>
-				<tr class="reply-to-row" data-bind="visible: showReplyTo">
-					<td data-i18n="GLOBAL/REPLY_TO"></div>
-					<td>
-						<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" />
-					</td>
-				</tr>
-				<tr>
-					<td data-i18n="GLOBAL/SUBJECT"></div>
-					<td>
-						<input type="text" size="70" autocomplete="off" data-bind="textInput: subject" />
-					</td>
-				</tr>
-				<tr>
-					<td></td>
-					<td>
-						<div class="btn-group pull-left">
-							<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
-								css: { 'active': !attachmentsPlace() }">
-								<i class="icon-file-text"></i>
-							</button>
-							<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(true); },
-								css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
-								tooltipErrorTip: attachmentsErrorTooltip">
-								<span data-bind="visible: 0 < attachmentsCount()">
-									<b data-bind="text: attachmentsCount"></b>
-									&nbsp;&nbsp;
-								</span>
-								<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
-							</button>
-						</div>
-						<div class="btn-group pull-right">
-							<a class="btn"
-								style="padding-left: 10px; padding-right: 10px;"
-								data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton" data-i18n="[title]COMPOSE/ATTACH_FILES">
-								<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
-							</a>
-						</div>
-					</td>
-				</tr>
-			</table>
-		</div>
-
-		<div class="attachmentAreaParent" data-bind="visible: attachmentsPlace">
-			<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
-				data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
-			<ul class="attachmentList" data-bind="foreach: attachments">
-				<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
-					<div class="attachmentIconParent">
-						<i class="iconMain" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
-						<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
-						<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
+	<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
+		<i class="fontastic">🗑</i>
+	</a>
+	<span class="saved-text hide-mobile" data-bind="text: savedTimeText"></span>
+</header>
+<div class="modal-body">
+	<div class="b-header g-ui-user-select-none">
+		<table>
+			<tr>
+				<td data-i18n="GLOBAL/FROM"></td>
+				<td>
+					<div class="dropdown" style="display:inline-block" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
+						<a class="dropdown-toggle e-identity" href="#" tabindex="-1"
+							id="identity-label-id" role="button"
+							data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }">
+						</a>
+						<!-- ko if: 1 < identitiesOptions().length -->
+							<ul class="dropdown-menu" role="menu" aria-labelledby="identity-label-id" data-bind="foreach: identitiesOptions">
+								<li role="presentation">
+									<a tabindex="-1" href="#" data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }, text: optText"></a>
+								</li>
+							</ul>
+						<!-- /ko -->
 					</div>
-					<div class="attachmentNameParent">
-						<button type="button" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</button>
-						<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
-							<span class="attachmentName" data-bind="text: fileName"></span>&nbsp;
-						</div>
-						<div>
-							<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
+					<div class="pull-right">
+						<a class="btn" data-i18n="GLOBAL/BCC"
+							data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
+						<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
+						<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
+							<a class="btn dropdown-toggle fontastic">☰</a>
+							<ul class="dropdown-menu right-edge" role="menu">
+								<li data-bind="click: function () { showBcc(!showBcc()); }">
+									<a>
+										<i class="fontastic" data-bind="text: showBcc() ? '☑' : '☐'"></i>
+										<span data-i18n="GLOBAL/BCC"></span>
+									</a>
+								</li>
+								<li data-bind="click: function () { showCc(!showCc()); }">
+									<a>
+										<i class="fontastic" data-bind="text: showCc() ? '☑' : '☐'"></i>
+										<span data-i18n="GLOBAL/CC"></span>
+									</a>
+								</li>
+								<li data-bind="click: function () { showReplyTo(!showReplyTo()); }">
+									<a>
+										<i class="fontastic" data-bind="text: showReplyTo() ? '☑' : '☐'"></i>
+										<span data-i18n="GLOBAL/REPLY_TO"></span>
+									</a>
+								</li>
+								<li data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
+									<a>
+										<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
+										<span data-i18n="COMPOSE/BUTTON_REQUEST_READ_RECEIPT"></span>
+									</a>
+								</li>
+								<li data-bind="click: function () { requestDsn(!requestDsn()); }">
+									<a>
+										<i class="fontastic" data-bind="text: requestDsn() ? '☑' : '☐'"></i>
+										<span data-i18n="COMPOSE/BUTTON_REQUEST_DSN"></span>
+									</a>
+								</li>
+								<li data-bind="click: function () { markAsImportant(!markAsImportant()); }">
+									<a>
+										<i class="fontastic" data-bind="text: markAsImportant() ? '☑' : '☐'"></i>
+										<span data-i18n="COMPOSE/BUTTON_MARK_AS_IMPORTANT"></span>
+									</a>
+								</li>
+								<li class="dividerbar" data-bind="visible: capaOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
+									<a>
+										<i class="fontastic">🔑</i>
+										<span data-i18n="COMPOSE/BUTTON_OPEN_PGP"></span>
+									</a>
+								</li>
+							</ul>
 						</div>
+					</span>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
+						data-i18n="GLOBAL/TO"></label>
+				</td>
+				<td>
+					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" />
+				</td>
+			</tr>
+			<tr class="cc-row" data-bind="visible: showCc">
+				<td data-i18n="GLOBAL/CC"></div>
+				<td>
+					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" />
+				</td>
+			</tr>
+			<tr class="bcc-row" data-bind="visible: showBcc">
+				<td data-i18n="GLOBAL/BCC"></div>
+				<td>
+					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" />
+				</td>
+			</tr>
+			<tr class="reply-to-row" data-bind="visible: showReplyTo">
+				<td data-i18n="GLOBAL/REPLY_TO"></div>
+				<td>
+					<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" />
+				</td>
+			</tr>
+			<tr>
+				<td data-i18n="GLOBAL/SUBJECT"></div>
+				<td>
+					<input type="text" size="70" autocomplete="off" data-bind="textInput: subject" />
+				</td>
+			</tr>
+			<tr>
+				<td></td>
+				<td>
+					<div class="btn-group pull-left">
+						<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
+							css: { 'active': !attachmentsPlace() }">
+							<i class="icon-file-text"></i>
+						</button>
+						<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(true); },
+							css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
+							tooltipErrorTip: attachmentsErrorTooltip">
+							<span data-bind="visible: 0 < attachmentsCount()">
+								<b data-bind="text: attachmentsCount"></b>
+								&nbsp;&nbsp;
+							</span>
+							<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
+						</button>
 					</div>
-				</li>
-			</ul>
-			<div class="no-attachments-desc" data-bind="visible: 0 === attachments().length"
-				data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></div>
-		</div>
-
-		<div class="textAreaParent" data-bind="visible: !attachmentsPlace(), initDom: composeEditorArea"></div>
+					<div class="btn-group pull-right">
+						<a class="btn"
+							style="padding-left: 10px; padding-right: 10px;"
+							data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton" data-i18n="[title]COMPOSE/ATTACH_FILES">
+							<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
+						</a>
+					</div>
+				</td>
+			</tr>
+		</table>
 	</div>
+
+	<div class="attachmentAreaParent" data-bind="visible: attachmentsPlace">
+		<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
+			data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
+		<ul class="attachmentList" data-bind="foreach: attachments">
+			<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
+				<div class="attachmentIconParent">
+					<i class="iconMain" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
+					<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
+					<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
+				</div>
+				<div class="attachmentNameParent">
+					<button type="button" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</button>
+					<div class="attachmentName" data-bind="text: fileName"></div>
+					<span class="attachmentSize" data-bind="text: friendlySize"></span>
+				</div>
+			</li>
+		</ul>
+		<div class="no-attachments-desc" data-bind="visible: 0 === attachments().length"
+			data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></div>
+	</div>
+
+	<div class="textAreaParent" data-bind="visible: !attachmentsPlace(), initDom: composeEditorArea"></div>
 </div>

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

@@ -1,92 +1,85 @@
-<div class="modal fade b-compose-open-pgp-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="alert" data-bind="visible: '' !== notification()">
-			<span data-bind="text: notification"></span>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></h3>
+</header>
+
+<div class="modal-body">
+	<div class="alert" data-bind="visible: '' !== notification(), text: notification"></div>
+	<div data-bind="component: {
+			name: 'Checkbox',
+			params: {
+				label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_SIGN',
+				value: sign
+			}
+		}, click: updateCommand"></div>
+
+	<div class="key-list" data-bind="visible: sign">
+		<div class="key-list-wrp empty" data-bind="visible: !signKey()">
+			No private key found
 		</div>
-		<div>
-			<div>
-				<div data-bind="component: {
-						name: 'Checkbox',
-						params: {
-							label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_SIGN',
-							value: sign
-						}
-					}, click: updateCommand"></div>
-
-				<div class="key-list" data-bind="visible: sign">
-					<div class="key-list-wrp empty" data-bind="visible: !signKey()">
-						No private key found
-					</div>
-					<div class="key-list-wrp" data-bind="visible: signKey()">
-						<div class="key-list__item">
-							<div class="key-list__item-hash">
-								(<span data-bind="text: signKey() ? signKey().hash : ''"></span>)
-							</div>
-							<div class="key-list__item-names">
-							<!-- ko if: signKey() -->
-								<!-- ko foreach: signKey().users -->
-									<div class="key-list__item-name" data-bind="text: $data"></div>
-								<!-- /ko -->
-							<!-- /ko -->
-							</div>
-						</div>
-					</div>
+		<div class="key-list-wrp" data-bind="visible: signKey()">
+			<div class="key-list__item">
+				<div class="key-list__item-hash">
+					(<span data-bind="text: signKey() ? signKey().hash : ''"></span>)
 				</div>
-			</div>
-			<div>
-				<div data-bind="component: {
-						name: 'Checkbox',
-						params: {
-							label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_ENCRYPT',
-							value: encrypt
-						}
-					}"></div>
-
-				<div class="key-list" data-bind="visible: encrypt">
-					<div class="key-list-wrp empty" data-bind="visible: encryptKeys().length === 0">
-						No public keys selected
-					</div>
-					<div class="key-list-wrp" data-bind="visible: encryptKeys().length > 0, foreach: encryptKeys">
-						<div class="key-list__item">
-							<div class="key-list__item-hash" data-bind="visible: !empty">
-								(<span data-bind="text: hash"></span>)
-							</div>
-							<div class="key-list__item-names"  data-bind="css: {'empty': empty}, foreach: users">
-								<div class="key-list__item-name" data-bind="text: $data"></div>
-							</div>
-							<div class="key-list__item-error" data-bind="visible: empty">
-								(Public key not found)
-							</div>
-							<div class="key-list__item-delete fontastic" data-bind="click: removable() ? $parent.deletePublickKey : null, css: {'disabled': !removable()}">🗑</div>
-						</div>
-					</div>
+				<div class="key-list__item-names">
+				<!-- ko if: signKey() -->
+					<!-- ko foreach: signKey().users -->
+						<div class="key-list__item-name" data-bind="text: $data"></div>
+					<!-- /ko -->
+				<!-- /ko -->
 				</div>
 			</div>
 		</div>
-		<div class="key-actions">
-			<div data-bind="visible: sign()">
-				<input type="password" class="inputPassword input-block-level"
-					autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-i18n="[placeholder]GLOBAL/PASSWORD"
-					data-bind="textInput: password, onEnter: doCommand" />
-				<select class="input-block-level" data-bind="visible: 0 < privateKeysOptions().length, options: privateKeysOptions, value: selectedPrivateKey,
-					optionsCaption: privateKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
+	</div>
+
+	<div data-bind="component: {
+			name: 'Checkbox',
+			params: {
+				label: 'POPUPS_COMPOSE_OPEN_PGP/LABEL_ENCRYPT',
+				value: encrypt
+			}
+		}"></div>
+
+	<div class="key-list" data-bind="visible: encrypt">
+		<div class="key-list-wrp empty" data-bind="visible: encryptKeys().length === 0">
+			No public keys selected
+		</div>
+		<div class="key-list-wrp" data-bind="visible: encryptKeys().length > 0, foreach: encryptKeys">
+			<div class="key-list__item">
+				<div class="key-list__item-hash" data-bind="visible: !empty">
+					(<span data-bind="text: hash"></span>)
+				</div>
+				<div class="key-list__item-names"  data-bind="css: {'empty': empty}, foreach: users">
+					<div class="key-list__item-name" data-bind="text: $data"></div>
+				</div>
+				<div class="key-list__item-error" data-bind="visible: empty">
+					(Public key not found)
+				</div>
+				<div class="key-list__item-delete fontastic" data-bind="click: removable() ? $parent.deletePublickKey : null, css: {'disabled': !removable()}">🗑</div>
 			</div>
-			<select class="input-block-level" data-bind="visible: encrypt() && 0 < publicKeysOptions().length, options: publicKeysOptions, value: selectedPublicKey,
-				optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<button class="btn buttonDo" data-bind="command: doCommand,
-			enable: (sign() || encrypt()) && (!encrypt() || encrypt() && encryptKeys().length > 0)">
-			<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
-			<span data-bind="visible: sign() && !encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN"></span>
-			<span data-bind="visible: !sign() && encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_ENCRYPT"></span>
-			<span data-bind="visible: (sign() && encrypt()) || (!sign() && !encrypt())" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN_AND_ENCRYPT"></span>
-		</button>
+	<div class="key-actions">
+		<div data-bind="visible: sign()">
+			<input type="password" class="inputPassword input-block-level"
+				autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-i18n="[placeholder]GLOBAL/PASSWORD"
+				data-bind="textInput: password, onEnter: doCommand" />
+			<select class="input-block-level" data-bind="visible: 0 < privateKeysOptions().length, options: privateKeysOptions, value: selectedPrivateKey,
+				optionsCaption: privateKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
+		</div>
+		<select class="input-block-level" data-bind="visible: encrypt() && 0 < publicKeysOptions().length, options: publicKeysOptions, value: selectedPublicKey,
+			optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
 	</div>
 </div>
+
+<footer>
+	<button class="btn buttonDo" data-bind="command: doCommand,
+		enable: (sign() || encrypt()) && (!encrypt() || encrypt() && encryptKeys().length > 0)">
+		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
+		<span data-bind="visible: sign() && !encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN"></span>
+		<span data-bind="visible: !sign() && encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_ENCRYPT"></span>
+		<span data-bind="visible: (sign() && encrypt()) || (!sign() && !encrypt())" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN_AND_ENCRYPT"></span>
+	</button>
+</footer>

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

@@ -1,207 +1,205 @@
-<div class="modal fade">
-	<div class="modal-header b-header-toolbar g-ui-user-select-none">
+<header class="b-header-toolbar g-ui-user-select-none">
 
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 
-		<div class="btn-toolbar">
+	<div class="btn-toolbar">
 
-			<a class="btn button-create-contact" data-bind="command: newCommand">
-				<i class="fontastic">✚</i>
-				<span data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
-			</a>
+		<a class="btn button-create-contact" data-bind="command: newCommand">
+			<i class="fontastic">✚</i>
+			<span data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
+		</a>
 
-			<a class="btn btn-success button-new-message fontastic" data-bind="command: newMessageCommand">✉</a>
+		<a class="btn btn-success button-new-message fontastic" data-bind="command: newMessageCommand">✉</a>
 
-			<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>
+		<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>
 
-			<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
-				<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1">☰</a>
-				<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
-							<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
-							<span data-i18n="CONTACTS/BUTTON_IMPORT"></span>
-						</a>
-					</li>
-					<li class="dividerbar" role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: exportCsv">
-							<i class="icon-export"></i>
-							<span data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
-						</a>
-					</li>
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: exportVcf">
-							<i class="icon-export"></i>
-							<span data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
-						</a>
-					</li>
-					<li class="dividerbar" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
-						<a href="#" tabindex="-1" data-bind="command: syncCommand">
-							<i class="fontastic" data-bind="css: {'icon-spinner': contacts.syncing}">⇆</i>
-							<span data-i18n="CONTACTS/BUTTON_SYNC"></span>
-						</a>
-					</li>
-				</ul>
+		<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
+			<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1">☰</a>
+			<ul class="dropdown-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
+						<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
+						<span data-i18n="CONTACTS/BUTTON_IMPORT"></span>
+					</a>
+				</li>
+				<li class="dividerbar" role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: exportCsv">
+						<i class="icon-export"></i>
+						<span data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
+					</a>
+				</li>
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: exportVcf">
+						<i class="icon-export"></i>
+						<span data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
+					</a>
+				</li>
+				<li class="dividerbar" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
+					<a href="#" tabindex="-1" data-bind="command: syncCommand">
+						<i class="fontastic" data-bind="css: {'icon-spinner': contacts.syncing}">⇆</i>
+						<span data-i18n="CONTACTS/BUTTON_SYNC"></span>
+					</a>
+				</li>
+			</ul>
+		</div>
+		<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
+	</div>
+</header>
+<div class="modal-body">
+	<div class="b-list-toolbar">
+		<input type="search" class="e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
+	</div>
+	<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
+		<div class="content">
+			<div class="listClear" data-bind="visible: viewClearSearch() && '' !== search()">
+				<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="command: clearCommand"></span>
+			</div>
+			<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
+				data-i18n="CONTACTS/EMPTY_LIST"></div>
+			<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
+				<i class="icon-spinner"></i>
+				<span data-i18n="GLOBAL/LOADING"></span>
+			</div>
+			<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
+				data-i18n="CONTACTS/EMPTY_SEARCH"></div>
+			<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: 0 < contacts().length">
+				<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
+					<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
+					<div class="nameParent actionHandle" data-bind="text: display"></div>
+				</div>
 			</div>
-			<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
 		</div>
 	</div>
-	<div class="modal-body">
-		<div class="b-list-toolbar">
-			<input type="search" class="e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
+	<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
+		<div class="footer-pager">
+			<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
 		</div>
-		<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
-			<div class="content">
-				<div class="listClear" data-bind="visible: viewClearSearch() && '' !== search()">
-					<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="command: clearCommand"></span>
+	</div>
+	<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
+		<div class="btn-group">
+			<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
+				<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
+				<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
+				<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
+			</button>
+		</div>
+		<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
+			<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle">
+				<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
+				<span class="caret"></span>
+			</a>
+			<ul class="dropdown-menu right-edge" style="text-align: left" tabindex="-1" role="menu" aria-labelledby="button-add-prop-dropdown-id">
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: addNewEmail">
+						<i class="icon-none"></i>
+						<span data-i18n="GLOBAL/EMAIL"></span>
+					</a>
+				</li>
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: addNewPhone">
+						<i class="icon-none"></i>
+						<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
+					</a>
+				</li>
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: addNewWeb">
+						<i class="icon-none"></i>
+						<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
+					</a>
+				</li>
+				<li class="dividerbar" role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: addNewNickname">
+						<i class="icon-none"></i>
+						<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
+					</a>
+				</li>
+<!-
+				<li role="presentation">
+					<a href="#" tabindex="-1" data-bind="click: addNewAddress">
+						<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
+					</a>
+				</li>-->
+			</ul>
+		</div>
+	</div>
+	<div class="b-view-content" data-bind="css: {'read-only': viewReadOnly}">
+		<div class="b-contact-view-desc" data-bind="visible: emptySelection"
+			data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
+		<div data-bind="visible: !emptySelection()">
+			<div class="form-horizontal top-part">
+				<div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()">
+					<label class="control-label fontastic iconsize24">👤</label>
+					<div class="controls">
+						<div data-bind="foreach: viewPropertiesNames">
+							<div class="property-line">
+								<span data-bind="text: value"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
+							</div>
+						</div>
+						<div data-bind="visible: 0 < viewPropertiesOther().length, foreach: viewPropertiesOther">
+							<div class="property-line">
+								<!-- ko if: !largeValue() -->
+								<span data-bind="text: value"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
+								<!-- /ko -->
+								<!-- ko if: largeValue -->
+								<span data-bind="text: value"></span>
+								<textarea
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}"></textarea>
+								<!-- /ko -->
+							</div>
+						</div>
+					</div>
 				</div>
-				<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
-					data-i18n="CONTACTS/EMPTY_LIST"></div>
-				<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
-					<i class="icon-spinner"></i>
-					<span data-i18n="GLOBAL/LOADING"></span>
+				<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
+					<label class="control-label fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
+					<div class="controls">
+						<div data-bind="foreach: viewPropertiesEmails">
+							<div class="property-line">
+								<span data-bind="text: value"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
+							</div>
+						</div>
+						<a href="#" class="g-ui-link add-link" data-bind="visible: !viewReadOnly(), click: addNewEmail" data-i18n="CONTACTS/LINK_ADD_EMAIL"></a>
+					</div>
 				</div>
-				<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
-					data-i18n="CONTACTS/EMPTY_SEARCH"></div>
-				<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: 0 < contacts().length">
-					<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
-						<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
-						<div class="nameParent actionHandle" data-bind="text: display"></div>
+				<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
+					<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_PHONE">📞</label>
+					<div class="controls">
+						<div data-bind="foreach: viewPropertiesPhones">
+							<div class="property-line">
+								<span data-bind="text: value"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
+					<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_WEB">🌍</label>
+					<div class="controls">
+						<div data-bind="foreach: viewPropertiesWeb">
+							<div class="property-line">
+								<span data-bind="text: value"></span>
+								<input type="text" placeholder="https://"
+									autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+									data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
-			<div class="footer-pager">
-				<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
-			</div>
-		</div>
-		<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
-			<div class="btn-group">
-				<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
-					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
-					<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
-					<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
-				</button>
-			</div>
-			<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
-				<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle">
-					<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
-					<span class="caret"></span>
-				</a>
-				<ul class="dropdown-menu right-edge" style="text-align: left" tabindex="-1" role="menu" aria-labelledby="button-add-prop-dropdown-id">
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: addNewEmail">
-							<i class="icon-none"></i>
-							<span data-i18n="GLOBAL/EMAIL"></span>
-						</a>
-					</li>
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: addNewPhone">
-							<i class="icon-none"></i>
-							<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
-						</a>
-					</li>
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: addNewWeb">
-							<i class="icon-none"></i>
-							<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
-						</a>
-					</li>
-					<li class="dividerbar" role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: addNewNickname">
-							<i class="icon-none"></i>
-							<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
-						</a>
-					</li>
 <!--
-					<li role="presentation">
-						<a href="#" tabindex="-1" data-bind="click: addNewAddress">
-							<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
-						</a>
-					</li>-->
-				</ul>
-			</div>
-		</div>
-		<div class="b-view-content" data-bind="css: {'read-only': viewReadOnly}">
-			<div class="b-contact-view-desc" data-bind="visible: emptySelection"
-				data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
-			<div data-bind="visible: !emptySelection()">
-				<div class="form-horizontal top-part">
-					<div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()">
-						<label class="control-label fontastic iconsize24">👤</label>
-						<div class="controls">
-							<div data-bind="foreach: viewPropertiesNames">
-								<div class="property-line">
-									<span data-bind="text: value"></span>
-									<input type="text"
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
-								</div>
-							</div>
-							<div data-bind="visible: 0 < viewPropertiesOther().length, foreach: viewPropertiesOther">
-								<div class="property-line">
-									<!-- ko if: !largeValue() -->
-									<span data-bind="text: value"></span>
-									<input type="text"
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
-									<!-- /ko -->
-									<!-- ko if: largeValue -->
-									<span data-bind="text: value"></span>
-									<textarea
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}"></textarea>
-									<!-- /ko -->
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
-						<label class="control-label fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
-						<div class="controls">
-							<div data-bind="foreach: viewPropertiesEmails">
-								<div class="property-line">
-									<span data-bind="text: value"></span>
-									<input type="text"
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
-								</div>
-							</div>
-							<a href="#" class="g-ui-link add-link" data-bind="visible: !viewReadOnly(), click: addNewEmail" data-i18n="CONTACTS/LINK_ADD_EMAIL"></a>
-						</div>
-					</div>
-					<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
-						<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_PHONE">📞</label>
-						<div class="controls">
-							<div data-bind="foreach: viewPropertiesPhones">
-								<div class="property-line">
-									<span data-bind="text: value"></span>
-									<input type="text"
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
-						<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_WEB">🌍</label>
-						<div class="controls">
-							<div data-bind="foreach: viewPropertiesWeb">
-								<div class="property-line">
-									<span data-bind="text: value"></span>
-									<input type="text" placeholder="https://"
-										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-<!--
-				<div class="e-read-only-sign fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
+			<div class="e-read-only-sign fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
 -->
-			</div>
 		</div>
 	</div>
 </div>

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

@@ -1,57 +1,53 @@
-<div class="modal fade b-filter-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3>
-			<span data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
-			<span data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
-		</h3>
-	</div>
-	<div class="modal-body">
-		<div class="filter" data-bind="with: filter, i18nInit: filter">
-			<div data-bind="i18nInit: true">
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3>
+		<span data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
+		<span data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
+	</h3>
+</header>
+<div class="modal-body">
+	<div class="filter" data-bind="with: filter, i18nInit: filter">
+		<div data-bind="i18nInit: true">
 
-				<div class="control-group" data-bind="css: {'error': nameError}">
-					<div class="controls">
-						<input type="text" class="span5"
-							data-bind="value: name, hasfocus: nameFocused"
-							autocorrect="off" autocapitalize="off" spellcheck="false"
-							data-i18n="[placeholder]GLOBAL/NAME"
-						/>
-					</div>
+			<div class="control-group" data-bind="css: {'error': nameError}">
+				<div class="controls">
+					<input type="text" class="span5"
+						data-bind="value: name, hasfocus: nameFocused"
+						autocorrect="off" autocapitalize="off" spellcheck="false"
+						data-i18n="[placeholder]GLOBAL/NAME"
+					/>
 				</div>
-
-				<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
-				<div>
-					<div data-bind="visible: 1 < conditions().length">
-						<select class="span4" data-bind="value: conditionsType">
-							<option value="Any"
-								data-i18n="POPUPS_FILTER/SELECT_MATCH_ANY"></option>
-							<option value="All"
-								data-i18n="POPUPS_FILTER/SELECT_MATCH_ALL"></option>
-						</select>
-					</div>
-					<div data-bind="visible: 0 < conditions().length, foreach: conditions">
-						<div data-bind="template: {'name': template(), 'data': $data}"></div>
-					</div>
-					<div data-bind="visible: 0 === conditions().length"
-						data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></div>
-					<br />
-					<a class="btn" data-bind="click: addCondition, i18nInit: true">
-						<i class="fontastic">✚</i>
-						<span data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
-					</a>
-				</div>
-				<br />
-				<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
-				<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
-				<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
 			</div>
+
+			<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
+			<div data-bind="visible: 1 < conditions().length">
+				<select class="span4" data-bind="value: conditionsType">
+					<option value="Any"
+						data-i18n="POPUPS_FILTER/SELECT_MATCH_ANY"></option>
+					<option value="All"
+						data-i18n="POPUPS_FILTER/SELECT_MATCH_ALL"></option>
+				</select>
+			</div>
+			<div data-bind="visible: 0 < conditions().length, foreach: conditions">
+				<div data-bind="template: {'name': template(), 'data': $data}"></div>
+			</div>
+			<div data-bind="visible: 0 === conditions().length"
+				data-i18n="POPUPS_FILTER/ALL_INCOMING_MESSAGES_DESC"></div>
+			<br />
+			<a class="btn" data-bind="click: addCondition, i18nInit: true">
+				<i class="fontastic">✚</i>
+				<span data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
+			</a>
+			<br />
+			<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
+			<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
+			<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonSave" data-bind="command: saveFilterCommand">
-			<i class="fontastic">✔</i>
-			<span data-i18n="GLOBAL/DONE"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonSave" data-bind="command: saveFilterCommand">
+		<i class="fontastic">✔</i>
+		<span data-i18n="GLOBAL/DONE"></span>
+	</a>
+</footer>

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

@@ -1,27 +1,23 @@
-<div class="modal fade b-folder-clear-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3>
-			<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEAR_FOLDER" data-bind="visible: !clearingProcess()"></span>
-			<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEARING_PROCESS" data-bind="visible: clearingProcess"></span>
-		</h3>
-	</div>
-	<div class="modal-body">
-		<div>
-			<i class="fontastic" style="color:red">⚠</i>
-			&nbsp;&nbsp;
-			<strong data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_WARNING"></strong>
-			<br />
-			<br />
-			<span data-bind="html: dangerDescHtml"></span>
-			<br />
-			<span data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_HTML_2"></span>
-		</div>
-	</div>
-	<div class="modal-footer">
-		<a class="btn btn-danger" data-bind="command: clearCommand">
-			<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
-			<span data-i18n="GLOBAL/CLEAR"></span>
-		</a>
-	</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3>
+		<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEAR_FOLDER" data-bind="visible: !clearingProcess()"></span>
+		<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEARING_PROCESS" data-bind="visible: clearingProcess"></span>
+	</h3>
+</header>
+<div class="modal-body">
+	<i class="fontastic" style="color:red">⚠</i>
+	&nbsp;&nbsp;
+	<strong data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_WARNING"></strong>
+	<br />
+	<br />
+	<span data-bind="html: dangerDescHtml"></span>
+	<br />
+	<span data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_HTML_2"></span>
 </div>
+<footer>
+	<a class="btn btn-danger" data-bind="command: clearCommand">
+		<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
+		<span data-i18n="GLOBAL/CLEAR"></span>
+	</a>
+</footer>

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

@@ -1,31 +1,29 @@
-<div class="modal fade b-folder-create-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="control-group">
-				<label class="control-label" data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
-				<div class="controls">
-					<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
-				</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="control-group">
+			<label class="control-label" data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
+			<div class="controls">
+				<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/NAME"></label>
-				<div class="controls">
-					<input type="text" class="uiInput inputName"
-						autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="textInput: folderName, onEnter: createFolderCommand" />
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/NAME"></label>
+			<div class="controls">
+				<input type="text" class="uiInput inputName"
+					autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="textInput: folderName, onEnter: createFolderCommand" />
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonCreate" data-bind="command: createFolderCommand">
-			<i class="icon-folder-add"></i>
-			<span data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonCreate" data-bind="command: createFolderCommand">
+		<i class="icon-folder-add"></i>
+		<span data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
+	</a>
+</footer>

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

@@ -1,46 +1,44 @@
-<div class="modal fade b-folder-system-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_SYSTEM_FOLDERS/TITLE_SYSTEM_FOLDERS"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="alert" data-bind="visible: '' !== notification()" data-bind="text: notification"></div>
-			<br />
-			<div class="control-group">
-				<label class="control-label" data-i18n="FOLDER_LIST/SENT_NAME"></label>
-				<div class="controls">
-					<select data-bind="options: folderSelectList, value: sentFolder,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
-				</div>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_SYSTEM_FOLDERS/TITLE_SYSTEM_FOLDERS"></h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="alert" data-bind="visible: '' !== notification()" data-bind="text: notification"></div>
+		<br />
+		<div class="control-group">
+			<label class="control-label" data-i18n="FOLDER_LIST/SENT_NAME"></label>
+			<div class="controls">
+				<select data-bind="options: folderSelectList, value: sentFolder,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="FOLDER_LIST/DRAFTS_NAME"></label>
-				<div class="controls">
-					<select data-bind="options: folderSelectList, value: draftFolder,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="FOLDER_LIST/DRAFTS_NAME"></label>
+			<div class="controls">
+				<select data-bind="options: folderSelectList, value: draftFolder,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/SPAM"></label>
-				<div class="controls">
-					<select data-bind="options: folderSelectList, value: spamFolder,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/SPAM"></label>
+			<div class="controls">
+				<select data-bind="options: folderSelectList, value: spamFolder,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="FOLDER_LIST/TRASH_NAME"></label>
-				<div class="controls">
-					<select data-bind="options: folderSelectList, value: trashFolder,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="FOLDER_LIST/TRASH_NAME"></label>
+			<div class="controls">
+				<select data-bind="options: folderSelectList, value: trashFolder,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="FOLDER_LIST/ARCHIVE_NAME"></label>
-				<div class="controls">
-					<select data-bind="options: folderSelectList, value: archiveFolder,
-						optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="FOLDER_LIST/ARCHIVE_NAME"></label>
+			<div class="controls">
+				<select data-bind="options: folderSelectList, value: archiveFolder,
+					optionsText: 'name', optionsValue: 'id', optionsAfterRender: $root.defaultOptionsAfterRender"></select>
 			</div>
 		</div>
 	</div>

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

@@ -1,92 +1,90 @@
-<div class="modal fade b-identity-content">
-	<div class="modal-header g-ui-user-select-none">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3>
-			<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></span>
-			<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
-		</h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal g-ui-user-select-none">
-			<div class="alert" data-bind="visible: '' !== submitError()">
-				<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
-				<span data-bind="text: submitError"></span>
-			</div>
-			<br />
-			<div class="control-group" data-bind="visible: !owner(), css: {'error': emailHasError}">
-				<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
-				<div class="controls">
-					<input type="email" class="input-xlarge" autofocus=""
-						autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: email, onEnter: addOrEditIdentityCommand, hasfocus: emailFocused" />
-				</div>
-			</div>
-			<div class="control-group" data-bind="visible: owner">
-				<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
-				<div class="controls">
-					<div class="textEmail" data-bind="text: email"></div>
-				</div>
-			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/NAME"></label>
-				<div class="controls">
-					<input type="text" class="inputName input-xlarge"
-						autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: name, onEnter: addOrEditIdentityCommand" />
-				</div>
-			</div>
-			<div class="control-group" data-bind="visible: showReplyTo, css: {'error': replyToHasError}">
-				<label class="control-label" data-i18n="GLOBAL/REPLY_TO"></label>
-				<div class="controls">
-					<input type="text" class="inputReplyTo input-xlarge"
-						autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: replyTo, onEnter: addOrEditIdentityCommand, hasfocus: replyToFocused" />
-				</div>
-			</div>
-			<div class="control-group" data-bind="visible: showBcc, css: {'error': bccHasError}">
-				<label class="control-label" data-i18n="GLOBAL/BCC"></label>
-				<div class="controls">
-					<input type="text" class="inputBcc input-xlarge"
-						autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: bcc, onEnter: addOrEditIdentityCommand, hasfocus: bccFocused" />
-				</div>
-			</div>
-			<div class="control-group" data-bind="visible: !showReplyTo() || !showBcc()">
-				<div class="controls">
-					<span data-bind="visible: !showReplyTo()">
-						<span class="g-ui-link" data-i18n="GLOBAL/REPLY_TO"
-							data-bind="click: function () { showReplyTo(true); }"></span>
-						&nbsp;&nbsp;
-					</span>
-					<span data-bind="visible: !showBcc()">
-						<span class="g-ui-link" data-i18n="GLOBAL/BCC"
-							data-bind="click: function () { showBcc(true); }"></span>
-					</span>
-				</div>
+<header class="g-ui-user-select-none">
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3>
+		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></span>
+		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
+	</h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal g-ui-user-select-none">
+		<div class="alert" data-bind="visible: '' !== submitError()">
+			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
+			<span data-bind="text: submitError"></span>
+		</div>
+		<br />
+		<div class="control-group" data-bind="visible: !owner(), css: {'error': emailHasError}">
+			<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
+			<div class="controls">
+				<input type="email" class="input-xlarge" autofocus=""
+					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: email, onEnter: addOrEditIdentityCommand, hasfocus: emailFocused" />
 			</div>
 		</div>
-		<hr />
-		<div class="form-horizontal">
-			<div class="control-group g-ui-user-select-none">
-				<div class="controls" data-bind="component: {
-					name: 'Checkbox',
-					params: {
-						label: 'POPUPS_IDENTITY/LABEL_SIGNATURE_INSERT_BEFORE',
-						value: signatureInsertBefore
-					}
-				}"></div>
+		<div class="control-group" data-bind="visible: owner">
+			<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
+			<div class="controls">
+				<div class="textEmail" data-bind="text: email"></div>
 			</div>
-			<div class="control-group">
-				<div class="e-signature-place" data-bind="editor: signature"></div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/NAME"></label>
+			<div class="controls">
+				<input type="text" class="inputName input-xlarge"
+					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: name, onEnter: addOrEditIdentityCommand" />
+			</div>
+		</div>
+		<div class="control-group" data-bind="visible: showReplyTo, css: {'error': replyToHasError}">
+			<label class="control-label" data-i18n="GLOBAL/REPLY_TO"></label>
+			<div class="controls">
+				<input type="text" class="inputReplyTo input-xlarge"
+					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: replyTo, onEnter: addOrEditIdentityCommand, hasfocus: replyToFocused" />
+			</div>
+		</div>
+		<div class="control-group" data-bind="visible: showBcc, css: {'error': bccHasError}">
+			<label class="control-label" data-i18n="GLOBAL/BCC"></label>
+			<div class="controls">
+				<input type="text" class="inputBcc input-xlarge"
+					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: bcc, onEnter: addOrEditIdentityCommand, hasfocus: bccFocused" />
+			</div>
+		</div>
+		<div class="control-group" data-bind="visible: !showReplyTo() || !showBcc()">
+			<div class="controls">
+				<span data-bind="visible: !showReplyTo()">
+					<span class="g-ui-link" data-i18n="GLOBAL/REPLY_TO"
+						data-bind="click: function () { showReplyTo(true); }"></span>
+					&nbsp;&nbsp;
+				</span>
+				<span data-bind="visible: !showBcc()">
+					<span class="g-ui-link" data-i18n="GLOBAL/BCC"
+						data-bind="click: function () { showBcc(true); }"></span>
+				</span>
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
-			<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
-			<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
-			<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
-			<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
-		</a>
+	<hr />
+	<div class="form-horizontal">
+		<div class="control-group g-ui-user-select-none">
+			<div class="controls" data-bind="component: {
+				name: 'Checkbox',
+				params: {
+					label: 'POPUPS_IDENTITY/LABEL_SIGNATURE_INSERT_BEFORE',
+					value: signatureInsertBefore
+				}
+			}"></div>
+		</div>
+		<div class="control-group">
+			<div class="e-signature-place" data-bind="editor: signature"></div>
+		</div>
 	</div>
 </div>
+<footer>
+	<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
+		<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
+		<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
+		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
+	</a>
+</footer>

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

@@ -1,99 +1,97 @@
-<div class="modal fade b-shortcuts-content">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>
-	</div>
-	<div class="modal-body">
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>
+</header>
+<div class="modal-body">
 
-		<div class="tabs">
-
-			<input type="radio" name="helptabs" id="tab-help1" checked />
-			<label for="tab-help1"
-				role="tab"
-				aria-selected="true"
-				aria-controls="panel1"
-				tabindex="0"
-				data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label>
-			<div class="tab-content" role="tabpanel" aria-hidden="false">
-				<table class="table table-striped table-bordered">
-				<tbody>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr>
-					<tr><td class="fontastic">←</td><td data-i18n="SHORTCUTS_HELP/LABEL_REPLY"></td><td>R, Reply</td></tr>
-					<tr><td class="fontastic">↞</td><td data-i18n="SHORTCUTS_HELP/LABEL_REPLY_ALL"></td><td>A, Shift + Reply</td></tr>
-					<tr><td class="fontastic">→</td><td data-i18n="SHORTCUTS_HELP/LABEL_FORWARD"></td><td>F, Fwd</td></tr>
-					<tr><td class="fontastic">→</td><td data-i18n="SHORTCUTS_HELP/LABEL_FORWARD_MULTIPLY"></td><td>Shift + F, Shift + Fwd</td></tr>
-					<tr><td class="icon-help"></td><td data-i18n="SHORTCUTS_HELP/LABEL_HELP"></td><td>F1, Help</td></tr>
-				</tbody>
-				</table>
-			</div>
-
-			<input type="radio" name="helptabs" id="tab-help2" />
-			<label for="tab-help2"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel2"
-				tabindex="0"
-				data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
-			<div class="tab-content" role="tabpanel" aria-hidden="true">
-				<table class="table table-striped table-bordered">
-				<tbody>
-					<tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
-					<tr><td class="icon-archive"></td><td data-i18n="GLOBAL/TO_ARCHIVE"></td><td>Z</td></tr>
-					<tr><td class="fontastic">🗑</td><td data-i18n="SHORTCUTS_HELP/LABEL_DELETE"></td><td>Delete, Shift + Delete</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_THREAD"></td><td>T</td></tr>
-					<tr><td class="fontastic">📁</td><td data-i18n="SHORTCUTS_HELP/LABEL_MOVE"></td><td>Insert</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_READ"></td><td>Q</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_UNREAD"></td><td>U</td></tr>
-					<tr><td class="fontastic">★</td><td data-i18n="SHORTCUTS_HELP/LABEL_IMPORTANT"></td><td>I</td></tr>
-					<tr><td></td><td data-i18n="GLOBAL/SEARCH"></td><td>/</td></tr>
-					<tr><td class="icon-arrows-out"></td><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_ENTER"></td><td>Enter</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_VIEW_MESSAGE_ENTER"></td><td>Enter</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_MESSAGE"></td><td>→, Tab</td></tr>
-					<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_FOLDER_LIST"></td><td>←, Shift + Tab</td></tr>
-				</tbody>
-				</table>
-			</div>
-
-			<input type="radio" name="helptabs" id="tab-help3" />
-			<label for="tab-help3"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel3"
-				tabindex="0"
-				data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
-			<div class="tab-content" role="tabpanel" aria-hidden="true">
-				<table class="table table-striped table-bordered">
-				<tbody>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_BLOCKQUOTES_TOGGLE"></td><td>B</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_PRINT"></td><td><!-- ko text: metaKey --><!-- /ko --> + P</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_EXIT_FULLSCREEN"></td><td>Esc, Close</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_CLOSE_MESSAGE"></td><td>Esc, Close</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_LIST"></td><td>Shift + Tab, Esc</td></tr>
-				</tbody>
-				</table>
-			</div>
-
-			<input type="radio" name="helptabs" id="tab-help4" />
-			<label for="tab-help4"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel4"
-				tabindex="0"
-				data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
-			<div class="tab-content" role="tabpanel" aria-hidden="true">
-				<table class="table table-striped table-bordered">
-				<tbody>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_COMPOSE_POPUP"></td><td>W, C, New</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_IDENTITIES_DROPDOWN"></td><td>Menu, <!-- ko text: metaKey --><!-- /ko --> + M</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SAVE_MESSAGE"></td><td><!-- ko text: metaKey --><!-- /ko --> + S, Save</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SEND_MESSAGE"></td><td>Send, <!-- ko text: metaKey --><!-- /ko --> + Enter</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_MINIMIZE_COMPOSE_POPUP"></td><td>Esc, Close</td></tr>
-					<tr><td data-i18n="SHORTCUTS_HELP/LABEL_CLOSE_COMPOSE"></td><td>Shift + Esc, Shift + Close</td></tr>
-				</tbody>
-				</table>
-			</div>
+	<div class="tabs">
 
+		<input type="radio" name="helptabs" id="tab-help1" checked />
+		<label for="tab-help1"
+			role="tab"
+			aria-selected="true"
+			aria-controls="panel1"
+			tabindex="0"
+			data-i18n="SHORTCUTS_HELP/TAB_MAILBOX"></label>
+		<div class="tab-content" role="tabpanel" aria-hidden="false">
+			<table class="table table-striped table-bordered">
+			<tbody>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_USER_DROPDOWN"></td><td>M, Menu</td></tr>
+				<tr><td class="fontastic">←</td><td data-i18n="SHORTCUTS_HELP/LABEL_REPLY"></td><td>R, Reply</td></tr>
+				<tr><td class="fontastic">↞</td><td data-i18n="SHORTCUTS_HELP/LABEL_REPLY_ALL"></td><td>A, Shift + Reply</td></tr>
+				<tr><td class="fontastic">→</td><td data-i18n="SHORTCUTS_HELP/LABEL_FORWARD"></td><td>F, Fwd</td></tr>
+				<tr><td class="fontastic">→</td><td data-i18n="SHORTCUTS_HELP/LABEL_FORWARD_MULTIPLY"></td><td>Shift + F, Shift + Fwd</td></tr>
+				<tr><td class="icon-help"></td><td data-i18n="SHORTCUTS_HELP/LABEL_HELP"></td><td>F1, Help</td></tr>
+			</tbody>
+			</table>
 		</div>
+
+		<input type="radio" name="helptabs" id="tab-help2" />
+		<label for="tab-help2"
+			role="tab"
+			aria-selected="false"
+			aria-controls="panel2"
+			tabindex="0"
+			data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_LIST"></label>
+		<div class="tab-content" role="tabpanel" aria-hidden="true">
+			<table class="table table-striped table-bordered">
+			<tbody>
+				<tr><td class="fontastic">☑</td><td data-i18n="SHORTCUTS_HELP/LABEL_CHECK_ALL"></td><td><!-- ko text: metaKey --><!-- /ko --> + A</td></tr>
+				<tr><td class="icon-archive"></td><td data-i18n="GLOBAL/TO_ARCHIVE"></td><td>Z</td></tr>
+				<tr><td class="fontastic">🗑</td><td data-i18n="SHORTCUTS_HELP/LABEL_DELETE"></td><td>Delete, Shift + Delete</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_THREAD"></td><td>T</td></tr>
+				<tr><td class="fontastic">📁</td><td data-i18n="SHORTCUTS_HELP/LABEL_MOVE"></td><td>Insert</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_READ"></td><td>Q</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_UNREAD"></td><td>U</td></tr>
+				<tr><td class="fontastic">★</td><td data-i18n="SHORTCUTS_HELP/LABEL_IMPORTANT"></td><td>I</td></tr>
+				<tr><td></td><td data-i18n="GLOBAL/SEARCH"></td><td>/</td></tr>
+				<tr><td class="icon-arrows-out"></td><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_ENTER"></td><td>Enter</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_VIEW_MESSAGE_ENTER"></td><td>Enter</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_MESSAGE"></td><td>→, Tab</td></tr>
+				<tr><td></td><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_FOLDER_LIST"></td><td>←, Shift + Tab</td></tr>
+			</tbody>
+			</table>
+		</div>
+
+		<input type="radio" name="helptabs" id="tab-help3" />
+		<label for="tab-help3"
+			role="tab"
+			aria-selected="false"
+			aria-controls="panel3"
+			tabindex="0"
+			data-i18n="SHORTCUTS_HELP/TAB_MESSAGE_VIEW"></label>
+		<div class="tab-content" role="tabpanel" aria-hidden="true">
+			<table class="table table-striped table-bordered">
+			<tbody>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></td><td>Enter, Open</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_BLOCKQUOTES_TOGGLE"></td><td>B</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_PRINT"></td><td><!-- ko text: metaKey --><!-- /ko --> + P</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_EXIT_FULLSCREEN"></td><td>Esc, Close</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_CLOSE_MESSAGE"></td><td>Esc, Close</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SWITCH_TO_LIST"></td><td>Shift + Tab, Esc</td></tr>
+			</tbody>
+			</table>
+		</div>
+
+		<input type="radio" name="helptabs" id="tab-help4" />
+		<label for="tab-help4"
+			role="tab"
+			aria-selected="false"
+			aria-controls="panel4"
+			tabindex="0"
+			data-i18n="SHORTCUTS_HELP/TAB_COMPOSE"></label>
+		<div class="tab-content" role="tabpanel" aria-hidden="true">
+			<table class="table table-striped table-bordered">
+			<tbody>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_COMPOSE_POPUP"></td><td>W, C, New</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_OPEN_IDENTITIES_DROPDOWN"></td><td>Menu, <!-- ko text: metaKey --><!-- /ko --> + M</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SAVE_MESSAGE"></td><td><!-- ko text: metaKey --><!-- /ko --> + S, Save</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_SEND_MESSAGE"></td><td>Send, <!-- ko text: metaKey --><!-- /ko --> + Enter</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_MINIMIZE_COMPOSE_POPUP"></td><td>Esc, Close</td></tr>
+				<tr><td data-i18n="SHORTCUTS_HELP/LABEL_CLOSE_COMPOSE"></td><td>Shift + Esc, Shift + Close</td></tr>
+			</tbody>
+			</table>
+		</div>
+
 	</div>
 </div>

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

@@ -1,46 +1,40 @@
-<div class="modal fade b-message-open-pgp-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_MESSAGE_OPEN_PGP/TITLE_MESSAGE_OPEN_PGP"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="alert" data-bind="visible: '' !== notification()">
-				<span data-bind="text: notification"></span>
-			</div>
-			<br />
-			<div class="control-group">
-				<label class="control-label" data-i18n="POPUPS_MESSAGE_OPEN_PGP/LABEL_KEY"></label>
-				<div class="controls key-list" data-bind="foreach: privateKeys" style="margin-top: 5px">
-					<div class="key-list__item">
-						<i class="key-list__item__radio fontastic">○</i>
-						<div class="key-list__item__names">
-							<span data-bind="foreach: users">
-								<div>
-								<span class="key-list__item__name">
-									<span data-bind="text: $data"></span>
-									&nbsp;
-									<span>[<span data-bind="text: $parent.id"></span>]</span>
-								</span>
-								</div>
-							</span>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_MESSAGE_OPEN_PGP/TITLE_MESSAGE_OPEN_PGP"></h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="alert" data-bind="visible: '' !== notification()">
+			<span data-bind="text: notification"></span>
+		</div>
+		<br />
+		<div class="control-group">
+			<label class="control-label" data-i18n="POPUPS_MESSAGE_OPEN_PGP/LABEL_KEY"></label>
+			<div class="controls key-list" data-bind="foreach: privateKeys" style="margin-top: 5px">
+				<div class="key-list__item">
+					<i class="key-list__item__radio fontastic">○</i>
+					<div class="key-list__item__names" data-bind="foreach: users">
+						<div class="key-list__item__name">
+							<span data-bind="text: $data"></span>
+							&nbsp;
+							[<span data-bind="text: $parent.id"></span>]
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
-				<div class="controls">
-					<input type="password" class="inputPassword input-xlarge" autofocus="" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="textInput: password, onEnter: doCommand" />
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
+			<div class="controls">
+				<input type="password" class="inputPassword input-xlarge" autofocus="" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="textInput: password, onEnter: doCommand" />
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<button class="btn buttonDo" data-bind="command: doCommand">
-			<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
-			<span data-i18n="POPUPS_MESSAGE_OPEN_PGP/BUTTON_DECRYPT"></span>
-		</button>
-	</div>
 </div>
+<footer>
+	<button class="btn buttonDo" data-bind="command: doCommand">
+		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
+		<span data-i18n="POPUPS_MESSAGE_OPEN_PGP/BUTTON_DECRYPT"></span>
+	</button>
+</footer>

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

@@ -1,51 +1,49 @@
-<div class="modal fade b-open-pgp-key-generate-content g-ui-user-select-none">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/TITLE_GENERATE_OPEN_PGP_KEYS"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="alert" data-bind="visible: '' !== submitError()">
-				<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
-				<span data-bind="text: submitError"></span>
+<header>
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/TITLE_GENERATE_OPEN_PGP_KEYS"></h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="alert" data-bind="visible: '' !== submitError()">
+			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
+			<span data-bind="text: submitError"></span>
+		</div>
+		<br />
+		<div class="control-group" data-bind="css: {'error': emailError}">
+			<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
+			<div class="controls">
+				<input type="email" class="input-large"
+					autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: email" />
 			</div>
-			<br />
-			<div class="control-group" data-bind="css: {'error': emailError}">
-				<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
-				<div class="controls">
-					<input type="email" class="input-large"
-						autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: email" />
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/NAME"></label>
+			<div class="controls">
+				<input type="text" class="inputName input-large"
+					autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: name" />
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/NAME"></label>
-				<div class="controls">
-					<input type="text" class="inputName input-large"
-						autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: name" />
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
+			<div class="controls">
+				<input type="password" class="inputPassword input-large"
+					autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+					data-bind="value: password" />
 			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="GLOBAL/PASSWORD"></label>
-				<div class="controls">
-					<input type="password" class="inputPassword input-large"
-						autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-						data-bind="value: password" />
-				</div>
-			</div>
-			<div class="control-group">
-				<label class="control-label" data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/LABEL_KEY_BIT_LENGTH"></label>
-				<div class="controls">
-					<select data-bind="value: keyBitLength, options: [2048, 4096]"></select>
-				</div>
+		</div>
+		<div class="control-group">
+			<label class="control-label" data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/LABEL_KEY_BIT_LENGTH"></label>
+			<div class="controls">
+				<select data-bind="value: keyBitLength, options: [2048, 4096]"></select>
 			</div>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonHenerateOpenPgpKey" data-bind="command: generateOpenPgpKeyCommand">
-			<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
-			<span data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonHenerateOpenPgpKey" data-bind="command: generateOpenPgpKeyCommand">
+		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
+		<span data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
+	</a>
+</footer>

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

@@ -1,84 +1,84 @@
-<div class="modal fade b-filter-script g-ui-user-select-none" data-bind="with: script">
-	<div class="modal-header">
-		<button type="button" class="close" data-bind="command: $root.cancelCommand">×</button>
-		<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">
+<!-- ko with: script -->
+<header>
+	<button type="button" class="close" data-bind="command: $root.cancelCommand">×</button>
+	<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>
+</header>
+<div class="modal-body">
 
-		<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()"
-					autocorrect="off" autocapitalize="off" spellcheck="false"
-					data-i18n="[placeholder]GLOBAL/NAME"
-				/>
-			</div>
-		</div>
-
-		<div class="alert g-ui-user-select-none" data-bind="visible: hasChanges">
-			<i class="fontastic">⚠</i>
-			<span data-i18n="POPUPS_SIEVE_SCRIPT/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
-		</div>
-		<div class="alert alert-error g-ui-user-select-none" data-bind="visible: $root.saveError">
-			<i class="fontastic">⚠</i>
-			<span data-bind="text: $root.saveErrorText"></span>
-		</div>
-
-		<div class="control-group" data-bind="visible: $root.rawActive">
-			<div class="controls">
-				<pre>
-					<b data-i18n="POPUPS_SIEVE_SCRIPT/CAPABILITY_LABEL"></b>:
-					<span data-bind="text: $root.sieveCapabilities"></span>
-				</pre>
-				<textarea style="width:100%" data-bind="value: body, valueUpdate: 'input'"></textarea>
-			</div>
-		</div>
-		<div data-bind="visible: !$root.rawActive()">
-			<table class="table table-hover list-table filters-list g-ui-user-select-none"
-				data-bind="i18nUpdate: filters">
-				<colgroup>
-					<col style="width: 30px" />
-					<col style="width: 16px" />
-					<col />
-					<col style="width: 140px" />
-					<col style="width: 1%" />
-				</colgroup>
-				<tbody data-bind="foreach: filters">
-					<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $parent.filters }">
-						<td class="fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></td>
-						<td class="drag-wrapper fontastic drag-handle">⬍</td>
-						<td class="e-action">
-							<span class="filter-name" data-bind="text: name()"></span>
-							&nbsp;&nbsp;
-							<span class="filter-sub-name" data-bind="text: nameSub()"></span>
-						</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); }"
-								data-i18n="GLOBAL/ARE_YOU_SURE"></a>
-						</td>
-						<td>
-							<span class="delete-filter fontastic" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">🗑</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			<a class="btn" data-bind="click: $root.addFilter">
-				<i class="fontastic">✚</i>
-				<span data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
-			</a>
+	<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()"
+				autocorrect="off" autocapitalize="off" spellcheck="false"
+				data-i18n="[placeholder]GLOBAL/NAME"
+			/>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn" data-bind="visible: $root.allowToggle, click: function() { $root.toggleFiltersRaw(); }, css: {'active': $root.rawActive }" data-i18n="[title]POPUPS_SIEVE_SCRIPT/BUTTON_RAW_SCRIPT">
-			<i class="icon-file-code"></i>
-		</a>
-		<a class="btn buttonSave" data-bind="visible: hasChanges, click: function() { $root.saveScriptCommand(); }, css: {'btn-danger': $root.saveError}">
-			<i class="fontastic" data-bind="css: {'icon-spinner': $root.saving}">💾</i>
-			<span data-i18n="GLOBAL/SAVE"></span>
+
+	<div class="alert g-ui-user-select-none" data-bind="visible: hasChanges">
+		<i class="fontastic">⚠</i>
+		<span data-i18n="POPUPS_SIEVE_SCRIPT/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
+	</div>
+	<div class="alert alert-error g-ui-user-select-none" data-bind="visible: $root.saveError">
+		<i class="fontastic">⚠</i>
+		<span data-bind="text: $root.saveErrorText"></span>
+	</div>
+
+	<div class="control-group" data-bind="visible: $root.rawActive">
+		<div class="controls">
+			<pre>
+				<b data-i18n="POPUPS_SIEVE_SCRIPT/CAPABILITY_LABEL"></b>:
+				<span data-bind="text: $root.sieveCapabilities"></span>
+			</pre>
+			<textarea style="width:100%" data-bind="value: body, valueUpdate: 'input'"></textarea>
+		</div>
+	</div>
+	<div data-bind="visible: !$root.rawActive()">
+		<table class="table table-hover list-table filters-list g-ui-user-select-none"
+			data-bind="i18nUpdate: filters">
+			<colgroup>
+				<col style="width: 30px" />
+				<col style="width: 16px" />
+				<col />
+				<col style="width: 140px" />
+				<col style="width: 1%" />
+			</colgroup>
+			<tbody data-bind="foreach: filters">
+				<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $parent.filters }">
+					<td class="fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></td>
+					<td class="drag-wrapper fontastic drag-handle">⬍</td>
+					<td class="e-action">
+						<span class="filter-name" data-bind="text: name()"></span>
+						&nbsp;&nbsp;
+						<span class="filter-sub-name" data-bind="text: nameSub()"></span>
+					</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); }"
+							data-i18n="GLOBAL/ARE_YOU_SURE"></a>
+					</td>
+					<td>
+						<span class="delete-filter fontastic" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">🗑</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<a class="btn" data-bind="click: $root.addFilter">
+			<i class="fontastic">✚</i>
+			<span data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
 		</a>
 	</div>
 </div>
+<footer>
+	<a class="btn" data-bind="visible: $root.allowToggle, click: function() { $root.toggleFiltersRaw(); }, css: {'active': $root.rawActive }" data-i18n="[title]POPUPS_SIEVE_SCRIPT/BUTTON_RAW_SCRIPT">
+		<i class="icon-file-code"></i>
+	</a>
+	<a class="btn buttonSave" data-bind="visible: hasChanges, click: function() { $root.saveScriptCommand(); }, css: {'btn-danger': $root.saveError}">
+		<i class="fontastic" data-bind="css: {'icon-spinner': $root.saving}">💾</i>
+		<span data-i18n="GLOBAL/SAVE"></span>
+	</a>
+</footer>
+<!-- /ko -->

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

@@ -1,23 +1,21 @@
-<div class="modal fade b-open-pgp-key-view-content">
-	<div class="modal-header g-ui-user-select-none">
-		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
-		<h3 data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/TITLE_VIEW_OPEN_PGP_KEY"></h3>
-	</div>
-	<div class="modal-body">
-		<div class="form-horizontal">
-			<div class="control-group">
-				<pre class="key-viewer" data-bind="initDom: keyDom, text: key"></pre>
-			</div>
+<header class="g-ui-user-select-none">
+	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
+	<h3 data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/TITLE_VIEW_OPEN_PGP_KEY"></h3>
+</header>
+<div class="modal-body">
+	<div class="form-horizontal">
+		<div class="control-group">
+			<pre class="key-viewer" data-bind="initDom: keyDom, text: key"></pre>
 		</div>
 	</div>
-	<div class="modal-footer">
-		<a class="btn buttonClose" data-bind="command: cancelCommand">
-			<i class="fontastic">✖</i>
-			<span data-i18n="GLOBAL/CLOSE"></span>
-		</a>
-		<a class="btn buttonClose" data-bind="click: selectKey">
-			<i class="fontastic">🔑</i>
-			<span data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/BUTTON_SELECT"></span>
-		</a>
-	</div>
 </div>
+<footer>
+	<a class="btn buttonClose" data-bind="command: cancelCommand">
+		<i class="fontastic">✖</i>
+		<span data-i18n="GLOBAL/CLOSE"></span>
+	</a>
+	<a class="btn buttonClose" data-bind="click: selectKey">
+		<i class="fontastic">🔑</i>
+		<span data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/BUTTON_SELECT"></span>
+	</a>
+</footer>

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

@@ -1,121 +0,0 @@
-<style>
-
-html, body {
-	margin: 0;
-	padding: 0;
-	background-color: #fff;
-	font-size: 13px;
-	font-family: arial, sans-serif;
-}
-
-.tbl {width: 100%; font-size: 12px; font-family: arial, sans-serif;}
-.tt {padding: 5px; border:solid #ddd; border-width:0px 0px 1px 0px}
-.tv {padding: 5px; border:solid #ddd; border-width:0px 0px 1px 1px}
-.tb {padding: 15px}
-
-a {color: blue; text-decoration: underline}
-a:visited {color: #609}
-a:active {color: red}
-blockquote {border-left: 2px solid black; margin: 0; padding: 0px 10px}
-
-pre {
-	margin: 0px;
-	padding: 0px;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	background: #fff;
-	border: none;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body {
-	font-size: 13px;
-}
-
-.text-body.html div[data-x-div-type=body] {
-	margin: 15px;
-}
-
-.text-body.html pre {
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body.plain {
-
-	padding: 15px;
-	white-space: pre-wrap;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-}
-
-.text-body.plain pre {
-	margin: 0px;
-	padding: 0px;
-	background: #fff;
-	border: none;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body.plain blockquote {
-	border-left: 2px solid blue;
-	color: blue;
-}
-
-.text-body.plain blockquote blockquote {
-	border-left: 2px solid green;
-	color: green;
-}
-
-.text-body.plain blockquote blockquote blockquote {
-	border-left: 2px solid red;
-	color: red;
-}
-</style>
-
-<table cellpadding="0" cellspacing="0" class="tbl">
-	<tbody>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/FROM"></td>
-			<td class="tv" data-bind="text: popupFrom"></td>
-		</tr>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/TO"></td>
-			<td class="tv" data-bind="text: popupTo"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupCc">
-			<td class="tt" data-i18n="GLOBAL/CC"></td>
-			<td class="tv" data-bind="text: popupCc"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupBcc">
-			<td class="tt" data-i18n="GLOBAL/BCC"></td>
-			<td class="tv" data-bind="text: popupBcc"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupReplyTo">
-			<td class="tt" data-i18n="GLOBAL/REPLY_TO"></td>
-			<td class="tv" data-bind="text: popupReplyTo"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupDate">
-			<td class="tt" data-i18n="MESSAGE/LABEL_DATE"></td>
-			<td class="tv" data-bind="text: popupDate"></td>
-		</tr>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/SUBJECT"></td>
-			<td class="tv" data-bind="text: popupSubject"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupAttachments">
-			<td class="tt" data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></td>
-			<td class="tv" data-bind="text: popupAttachments"></td>
-		</tr>
-		<tr>
-			<td colspan="2" class="tb">
-				<div class="text-body" data-bind="html: popupBody, css: {'plain': !popupIsHtml, 'html': popupIsHtml}"></div>
-			</td>
-		</tr>
-	</tbody>
-</table>

snappymail/v/0.0.0/themes/SquaresDark/styles.css

@@ -1,29 +1,29 @@
 
 :root {
-	// MAIN
+	/* MAIN */
 	--main-color: #fff;
 	--main-bg-color: #48525C;
 	--main-bg-image: url("images/background.jpg");
 
-	// LOADING
+	/* LOADING */
 	--loading-color: #ddd;
 	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
 
-	// LOGIN
+	/* LOGIN */
 	--login-color: #eee;
 	--login-bg-color: rgba(0,0,0,0.5);
 	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
 	--login-border: none;
 	--login-border-radius: 7px;
 
-	// MENU
+	/* MENU */
 	--dropdown-menu-color: #333;
 	--dropdown-menu-bg-color: #fff;
 	--dropdown-menu-hover-bg-color: #48525C;
 	--dropdown-menu-hover-color: #eee;
 	--dropdown-menu-disable-color: #999;
 
-	// FOLDERS
+	/* FOLDERS */
 	--folders-color: #fff;
 	--folders-disabled-color: #aaa;
 	--folders-selected-color: #fff;
@@ -35,14 +35,14 @@
 	--folders-drop-color: #fff;
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
-	// SETTINGS
+	/* SETTINGS */
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
 	--settings-menu-hover-color: #fff;
 	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);
 
-	// MESSAGE LIST
+	/* MESSAGE LIST */
 	--message-list-toolbar-bg-color: #eee;
 }
 
@@ -72,31 +72,31 @@
 }
 
 .well,
-.modal,
+#rl-popups > dialog,
 .b-settins-right .b-content,
 .messageList,
 .messageView,
 .b-admin-right .b-content,
-.b-compose .b-attachment-place {
+#V-PopupsCompose .b-attachment-place {
 	background-color: #000;
 	border-color: #555;
 	color: var(--main-color);
 }
 
 .legend,
-.modal-header, .modal-footer,
+dialog header, dialog footer,
 .table td, .table th {
 	border-color: #555 !important;
 }
 
 .legend,
-.b-compose .b-header .e-identity,
+#V-PopupsCompose .b-header .e-identity,
 .messageView .messageItem {
 	color: var(--main-color);
 }
 
 .rl-mobile .squire-toolbar,
-.b-compose .b-attachment-place.dragAndDropOver {
+#V-PopupsCompose .b-attachment-place.dragAndDropOver {
 	background-color: #222;
 }
 

vendors/bootstrap/less/modals.less

@@ -1,60 +0,0 @@
-//
-// Modals
-// --------------------------------------------------
-
-
-// Base modal
-.modal {
-  position: absolute;
-  z-index: @zindexModal;
-  overflow: hidden;
-  width: calc(100% - 20px);
-  max-width: 560px;
-  margin: 10px auto;
-  background-color: @white;
-  border: 1px solid rgba(0,0,0,.3);
-  border-radius: 6px;
-  box-shadow: 0 5px 80px rgba(0,0,0,0.3);
-  background-clip: padding-box;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-  // Close icon
-  .close { margin-top: 2px; }
-  // Heading
-  h3 {
-    margin: 0;
-    line-height: 30px;
-  }
-}
-
-// Body (where all modal content resides)
-.modal-body {
-  overflow-y: auto;
-  padding: 15px;
-}
-
-// Footer (for actions)
-.modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right; // right align buttons
-  border-top: 1px solid #ddd;
-  border-radius: 0 0 6px 6px;
-  .clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  .btn + .btn {
-    margin-left: 5px;
-    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-}