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 {