diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js index 74e808167..a104e1cca 100644 --- a/dev/App/Abstract.js +++ b/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'); diff --git a/dev/Component/AbstractInput.js b/dev/Component/AbstractInput.js deleted file mode 100644 index 5a1e86415..000000000 --- a/dev/Component/AbstractInput.js +++ /dev/null @@ -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); - } -} diff --git a/dev/Component/Input.js b/dev/Component/Input.js deleted file mode 100644 index ca0a450fa..000000000 --- a/dev/Component/Input.js +++ /dev/null @@ -1,3 +0,0 @@ -import { AbstractInput } from 'Component/AbstractInput'; - -export class InputComponent extends AbstractInput {} diff --git a/dev/Component/Select.js b/dev/Component/Select.js index 482138e08..f2661cdec 100644 --- a/dev/Component/Select.js +++ b/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); + } } diff --git a/dev/External/ko.js b/dev/External/ko.js index 2b3b89d2b..4d4dad0b1 100644 --- a/dev/External/ko.js +++ b/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'); diff --git a/dev/Styles/Components.less b/dev/Styles/Components.less index 5a96e8c60..5d61ccb65 100644 --- a/dev/Styles/Components.less +++ b/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; diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index b7e0d083e..c55fe3101 100644 --- a/dev/Styles/Ui.less +++ b/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 { diff --git a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html index 13bd4ec70..e8796ab6a 100644 --- a/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html +++ b/snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsBranding.html @@ -2,36 +2,14 @@