Drop the mostly unused InputComponent and use normal <input>

dev/App/Abstract.js

@@ -8,7 +8,6 @@ import { i18nToNodes, initOnStartOrLangChange } from 'Common/Translator';
 import { LanguageStore } from 'Stores/Language';
 import { ThemeStore } from 'Stores/Theme';
 
-import { InputComponent } from 'Component/Input';
 import { SelectComponent } from 'Component/Select';
 import { CheckboxMaterialDesignComponent } from 'Component/MaterialDesign/Checkbox';
 
@@ -45,7 +44,6 @@ export class AbstractApp {
 				}
 			});
 
-		register('Input', InputComponent);
 		register('Select', SelectComponent);
 		register('Checkbox', CheckboxMaterialDesignComponent, 'CheckboxMaterialDesignComponent');
 

dev/Component/AbstractInput.js

@@ -1,57 +0,0 @@
-import ko from 'ko';
-import { pInt } from 'Common/Utils';
-import { SaveSettingStatus } from 'Common/Enums';
-import { koComputable } from 'External/ko';
-import { dispose } from 'External/ko';
-
-export class AbstractInput {
-	/**
-	 * @param {Object} params
-	 */
-	constructor(params) {
-		this.value = params.value || '';
-		this.label = params.label || '';
-		this.enable = null == params.enable ? true : params.enable;
-		this.trigger = params.trigger?.subscribe ? params.trigger : null;
-		this.placeholder = params.placeholder || '';
-
-		this.labeled = null != params.label;
-
-		let size = 0 < params.size ? 'span' + params.size : '';
-		if (this.trigger) {
-			const
-				classForTrigger = ko.observable(''),
-				setTriggerState = value => {
-					switch (pInt(value)) {
-						case SaveSettingStatus.Success:
-							classForTrigger('success');
-							break;
-						case SaveSettingStatus.Failed:
-							classForTrigger('error');
-							break;
-						default:
-							classForTrigger('');
-							break;
-					}
-				};
-
-			setTriggerState(this.trigger());
-
-			this.className = koComputable(() =>
-				(size + ' settings-saved-trigger-input ' + classForTrigger()).trim()
-			);
-
-			this.disposables = [
-				this.trigger.subscribe(setTriggerState, this),
-				this.className
-			];
-		} else {
-			this.className = size;
-			this.disposables = [];
-		}
-	}
-
-	dispose() {
-		this.disposables.forEach(dispose);
-	}
-}

dev/Component/Input.js

@@ -1,3 +0,0 @@
-import { AbstractInput } from 'Component/AbstractInput';
-
-export class InputComponent extends AbstractInput {}

dev/Component/Select.js

@@ -1,13 +1,55 @@
 import { i18n } from 'Common/Translator';
+import { pInt } from 'Common/Utils';
+import { SaveSettingStatus } from 'Common/Enums';
+import { koComputable } from 'External/ko';
+import { dispose } from 'External/ko';
 import { defaultOptionsAfterRender } from 'Common/Utils';
-import { AbstractInput } from 'Component/AbstractInput';
 
-export class SelectComponent extends AbstractInput {
+export class SelectComponent {
 	/**
 	 * @param {Object} params
 	 */
 	constructor(params) {
-		super(params);
+		this.value = params.value || '';
+		this.label = params.label || '';
+		this.enable = null == params.enable ? true : params.enable;
+		this.trigger = params.trigger?.subscribe ? params.trigger : null;
+		this.placeholder = params.placeholder || '';
+
+		this.labeled = null != params.label;
+
+		let size = 0 < params.size ? 'span' + params.size : '';
+		if (this.trigger) {
+			const
+				classForTrigger = ko.observable(''),
+				setTriggerState = value => {
+					switch (pInt(value)) {
+						case SaveSettingStatus.Success:
+							classForTrigger('success');
+							break;
+						case SaveSettingStatus.Failed:
+							classForTrigger('error');
+							break;
+						default:
+							classForTrigger('');
+							break;
+					}
+				};
+
+			setTriggerState(this.trigger());
+
+			this.className = koComputable(() =>
+				(size + ' settings-save-trigger-input ' + classForTrigger()).trim()
+			);
+
+			this.disposables = [
+				this.trigger.subscribe(setTriggerState, this),
+				this.className
+			];
+		} else {
+			this.className = size;
+			this.disposables = [];
+		}
 
 		this.options = params.options || '';
 
@@ -17,4 +59,8 @@ export class SelectComponent extends AbstractInput {
 
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 	}
+
+	dispose() {
+		this.disposables.forEach(dispose);
+	}
 }

dev/External/ko.js

@@ -137,7 +137,7 @@ Object.assign(ko.bindingHandlers, {
 		init: (element) => {
 			let icon = element;
 			if (element.matches('input,select,textarea')) {
-				element.classList.add('settings-saved-trigger-input');
+				element.classList.add('settings-save-trigger-input');
 				element.after(element.saveTriggerIcon = icon = createElement('span'));
 			}
 			icon.classList.add('settings-save-trigger');

dev/Styles/Components.less

@@ -47,8 +47,7 @@
 	}
 
 	select + span {
-		line-height: 1.43em;
-		padding: 4px 0;
+		padding: 2px 0;
 	}
 }
 
@@ -56,8 +55,7 @@
 
 	cursor: pointer;
 	margin-bottom: 6px;
-	margin-left: -2px;
-	padding: 2px;
+	padding: 2px 0;
 
 	&:focus {
 		outline: 1px dotted;

dev/Styles/Ui.less

@@ -22,7 +22,7 @@
 	display: inline-block;
 	height: 1em;
 	line-height: 1em;
-	margin-left: 0.5em;
+	margin-left: 0.5em !important;
 
 	&::after {
 		font-family: "snappymail";
@@ -56,7 +56,7 @@ textarea + .settings-save-trigger {
 	vertical-align: top;
 }
 
-.settings-saved-trigger-input {
+.settings-save-trigger-input {
 	transition: border-color 0.5s linear;
 
 	&.success {

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

@@ -2,36 +2,14 @@
 	<div class="legend" data-i18n="TAB_BRANDING/LEGEND_BRANDING"></div>
 	<div class="control-group">
 		<label data-i18n="TAB_BRANDING/LABEL_PAGE_TITLE"></label>
-		<div data-bind="component: {
-			name: 'Input',
-			params: {
-				value: title,
-				trigger: titleTrigger,
-				size: 5
-			}
-		}"></div>
+		<input class="span5" type="text" autocorrect="off" data-bind="textInput: title, saveTrigger: titleTrigger">
 	</div>
 	<div class="control-group">
 		<label data-i18n="TAB_BRANDING/LABEL_LOADING_DESCRIPTION"></label>
-		<div data-bind="component: {
-			name: 'Input',
-			params: {
-				value: loadingDescription,
-				trigger: loadingDescriptionTrigger,
-				size: 5
-			}
-		}"></div>
+		<input class="span5" type="text" autocorrect="off" data-bind="textInput: loadingDescription, saveTrigger: loadingDescriptionTrigger">
 	</div>
 	<div class="control-group">
 		<label data-i18n="TAB_BRANDING/LABEL_FAVICON_URL"></label>
-		<div data-bind="component: {
-			name: 'Input',
-			params: {
-				value: faviconUrl,
-				trigger: faviconUrlTrigger,
-				placeholder: 'https://',
-				size: 5
-			}
-		}"></div>
+		<input class="span5" type="text" placeholder="https://" autocorrect="off" data-bind="textInput: faviconUrl, saveTrigger: faviconUrlTrigger">
 	</div>
 </div>

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

@@ -1,15 +1,8 @@
-<form class="form-horizontal" spellcheck="false">
+<div class="form-horizontal">
 	<div class="legend" data-i18n="TAB_LOGIN/LEGEND_LOGIN_SCREEN"></div>
 	<div class="control-group">
 		<label data-i18n="TAB_LOGIN/LABEL_DEFAULT_DOMAIN"></label>
-		<div data-bind="component: {
-			name: 'Input',
-			params: {
-				value: loginDefaultDomain,
-				trigger: loginDefaultDomainTrigger,
-				size: 3
-			}
-		}"></div>
+		<input class="span3" type="text" spellcheck="false" autocomplete="off" autocapitalize="none" autocorrect="off" data-bind="textInput: loginDefaultDomain, saveTrigger: loginDefaultDomainTrigger">
 	</div>
 	<div class="control-group">
 		<div>
@@ -17,7 +10,6 @@
 				name: 'Checkbox',
 				params: { value: determineUserDomain, label: 'TAB_LOGIN/LABEL_DETERMINE_USER_DOMAIN' }
 			}"></div>
-			<br>
 			<div data-bind="component: {
 				name: 'Checkbox',
 				params: { value: allowLanguagesOnLogin, label: 'TAB_LOGIN/LABEL_ALLOW_LANGUAGES_ON_LOGIN' }
@@ -28,4 +20,4 @@
 			}"></div>
 		</div>
 	</div>
-</form>
+</div>

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

@@ -2,17 +2,11 @@
 	<a href="#" class="close" data-bind="click: close">×</a>
 	<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>
 </header>
-<div class="modal-body">
+<form id="DomainAlias" class="modal-body" spellcheck="false" autocomplete="off" autocapitalize="none" data-bind="submit: createCommand" >
 	<div class="control-group" data-bind="css: {error: '' !== savingError()}">
 		<label data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_ALIAS"></label>
 		<div>
-			<div data-bind="component: {
-				name: 'Input',
-				params: {
-					value: name,
-					size: 4
-				}
-			}"></div>
+			<input class="span4" type="text" autocorrect="off" data-bind="textInput: name">
 			<div class="alert-error" data-bind="visible: '' !== savingError(), text: savingError"></div>
 		</div>
 	</div>
@@ -29,12 +23,12 @@
 			}
 		}"></div>
 	</div>
-</div>
+</form>
 <footer>
-	<a class="btn buttonClose" data-bind="click: close" data-icon="✖" data-i18n="GLOBAL/CLOSE"></a>
-	<a class="btn" data-bind="command: createCommand">
+	<button class="btn buttonClose" data-bind="click: close" data-icon="✖" data-i18n="GLOBAL/CLOSE"></button>
+	<button 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="GLOBAL/ADD"></span>
-	</a>
+	</button>
 </footer>

snappymail/v/0.0.0/app/templates/Views/Components/Input.html

@@ -1,9 +0,0 @@
-<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-	data-bind="textInput: value, attr: {'placeholder': placeholder}, enable: enable, css: className">
-<!-- ko if: labeled -->
-	&nbsp;
-	<span data-bind="attr: {'data-i18n': label}"></span>
-<!-- /ko -->
-<!-- ko if: trigger -->
-	<span data-bind="saveTrigger: trigger"></span>
-<!-- /ko -->

snappymail/v/0.0.0/app/templates/Views/Components/Select.html

@@ -1,4 +1,4 @@
-<div class="e-component e-select">
+<div class="e-component">
 	<select data-bind="options: options, value: value, enable: enable, optionsText: optionsText, optionsValue: optionsValue,
 		optionsCaption: optionsCaption, css: className, optionsAfterRender: defaultOptionsAfterRender"></select>
 	<!-- ko if: labeled -->