alex/yomichan
1
Fork 0
Code Releases Activity

Improve styles for invalid inputs (#1143)

Browse Source
This commit is contained in:
toasted-nutbread 2020-12-20 11:27:05 -05:00 committed by GitHub
parent 6d7eefa9df
commit 113e3b68b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/css/settings.css
View File

@ -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;
}

50
ext/bg/css/settings2.css
View File

@ -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);

2
ext/bg/js/settings/anki-controller.js
View File

@ -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;
}

2
ext/bg/js/settings/anki-templates-controller.js
View File

@ -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}`;
}
}

4
ext/bg/js/settings/profile-conditions-ui.js
View File

@ -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;
}