From 113e3b68b8c8399e0899740a52cc7fa3b38658cc Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 20 Dec 2020 11:27:05 -0500 Subject: Improve styles for invalid inputs (#1143) --- ext/bg/css/settings.css | 2 +- ext/bg/css/settings2.css | 50 +++++++++++++++++++------ ext/bg/js/settings/anki-controller.js | 2 +- ext/bg/js/settings/anki-templates-controller.js | 2 +- ext/bg/js/settings/profile-conditions-ui.js | 4 +- 5 files changed, 43 insertions(+), 17 deletions(-) (limited to 'ext/bg') diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index 5416371f..781c797c 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -43,7 +43,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main- font-weight: normal; } -.form-control.is-invalid { +.form-control[data-invalid=true] { border-color: #f00000; } diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index eeba5afc..642a48af 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -1106,13 +1106,6 @@ input[type=number]::-webkit-outer-spin-button { input[type=text] { width: var(--input-width-large); } -input[type=text].input-with-suffix-button, -input[type=number].input-with-suffix-button { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - z-index: 1; -} textarea { box-sizing: border-box; padding: var(--textarea-padding); @@ -1122,10 +1115,15 @@ textarea { line-height: var(--textarea-line-height); border: 1px solid var(--input-background-color); } -input[type=text].is-invalid, -input[type=number].is-invalid, -textarea.is-invalid { - border-color: var(--danger-color); +select:invalid, +textarea:invalid, +input[type=text]:invalid, +input[type=number]:invalid, +select[data-invalid=true], +textarea[data-invalid=true], +input[type=text][data-invalid=true], +input[type=number][data-invalid=true] { + border: var(--thin-border-size) solid var(--danger-color); } select, textarea, @@ -1141,6 +1139,25 @@ input[type=number]:focus { box-shadow: 0 0 0 2px var(--input-outline-color); outline: none; } +select:invalid:focus, +textarea:invalid:focus, +input[type=text]:invalid:focus, +input[type=number]:invalid:focus, +select[data-invalid=true]:focus, +textarea[data-invalid=true]:focus, +input[type=text][data-invalid=true]:focus, +input[type=number][data-invalid=true]:focus { + box-shadow: 0 0 0 2px var(--danger-color); + outline: none; +} +input[type=text].input-with-suffix-button, +input[type=number].input-with-suffix-button { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-style: none; + z-index: 1; +} /* Material design button */ @@ -1265,6 +1282,7 @@ button.input-suffix-button { background-color: var(--input-background-color); box-sizing: border-box; padding: 0 0.5em; + border-color: transparent; } button.input-suffix-button.input-suffix-icon-button { width: 2.125em; @@ -1277,6 +1295,14 @@ button.input-suffix-button.input-suffix-icon-button:focus { button.input-suffix-button.input-suffix-icon-button:active { background-color: var(--input-background-color-darker); } +input[type=text]:invalid+button.input-suffix-button, +input[type=number]:invalid+button.input-suffix-button, +input[type=text][data-invalid=true]+button.input-suffix-button, +input[type=number][data-invalid=true]+button.input-suffix-button { + border: var(--thin-border-size) solid var(--danger-color); + border-left-style: none; +} + /* Material design icon button */ button.icon-button { @@ -2097,7 +2123,7 @@ select.profile-condition-operator { margin-right: 0.25em; padding: 0 0.25em; } -.anki-card-field-name-container[data-is-valid=false], +.anki-card-field-name-container[data-invalid=true], .anki-card-field-name-container[data-order-matches=false][data-index='0'] { background-color: var(--danger-color-lightest); border-radius: var(--text-input-border-radius); diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js index 541916b7..77b4ce96 100644 --- a/ext/bg/js/settings/anki-controller.js +++ b/ext/bg/js/settings/anki-controller.js @@ -535,7 +535,7 @@ class AnkiCardController { const fieldNamesSet = new Set(fieldNames); let index = 0; for (const [fieldName, {fieldNameContainerNode}] of fieldMap.entries()) { - fieldNameContainerNode.dataset.isValid = `${fieldNamesSet.has(fieldName)}`; + fieldNameContainerNode.dataset.invalid = `${!fieldNamesSet.has(fieldName)}`; fieldNameContainerNode.dataset.orderMatches = `${index < fieldNames.length && fieldName === fieldNames[index]}`; ++index; } diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js index edf6f2c8..e68656c5 100644 --- a/ext/bg/js/settings/anki-templates-controller.js +++ b/ext/bg/js/settings/anki-templates-controller.js @@ -210,7 +210,7 @@ class AnkiTemplatesController { infoNode.textContent = hasException ? exceptions.map((e) => `${e}`).join('\n') : (showSuccessResult ? result : ''); infoNode.classList.toggle('text-danger', hasException); if (invalidateInput) { - this._fieldTemplatesTextarea.classList.toggle('is-invalid', hasException); + this._fieldTemplatesTextarea.dataset.invalid = `${hasException}`; } } diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js index 78155467..256130ca 100644 --- a/ext/bg/js/settings/profile-conditions-ui.js +++ b/ext/bg/js/settings/profile-conditions-ui.js @@ -614,7 +614,7 @@ class ProfileConditionUI { } this._value = value; - node.classList.remove('is-invalid'); + delete node.dataset.invalid; node.type = inputType; if (inputValue !== null) { node.value = inputValue; @@ -634,7 +634,7 @@ class ProfileConditionUI { _validateValue(value, validate) { const okay = (validate === null || validate(value)); - this._valueInput.classList.toggle('is-invalid', !okay); + this._valueInput.dataset.invalid = `${!okay}`; return okay; } -- cgit v1.2.3