-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TASK] Improve icon rendering on mandatory fields
Mandatory fields are indicated with a red colored icon (or yellow/orange, if it is mandatory in certain scenarios). When a mandatory field is filled, the icon color switches to green. To improve usability, we now also change the icon from an exclamation mark (in a triangle) to a checkmark. Colors and icon visibility are now set with a new backend stylesheet, which also support the color modes in TYPO3 v13. Icon colors pass WCAG AA in both color modes.
- Loading branch information
Showing
5 changed files
with
72 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
:root { | ||
--picturecredits-color-ok: #247554; | ||
--picturecredits-color-ok-dark: #3cc38c; | ||
--picturecredits-color-mandatory: #a72e25; | ||
--picturecredits-color-mandatory-dark: #da6158; | ||
--picturecredits-color-mandatory-if-present: #c95b00; | ||
--picturecredits-color-mandatory-if-present-dark: #ffc857; | ||
} | ||
|
||
.is-mandatory .t3js-termsinput-icon-default { | ||
color: light-dark(var(--picturecredits-color-mandatory), var(--picturecredits-color-mandatory-dark)); | ||
} | ||
|
||
.is-mandatory-if-present .t3js-termsinput-icon-default { | ||
color: light-dark(var(--picturecredits-color-mandatory-if-present), var(--picturecredits-color-mandatory-if-present-dark)); | ||
} | ||
|
||
.t3js-termsinput-icons.has-value { | ||
color: light-dark(var(--picturecredits-color-ok), var(--picturecredits-color-ok-dark)); | ||
} | ||
|
||
.t3js-termsinput-icon-checked { | ||
display: none; | ||
} | ||
|
||
.t3js-termsinput-icons.has-value .t3js-termsinput-icon-default { | ||
display: none; | ||
} | ||
|
||
.t3js-termsinput-icons.has-value .t3js-termsinput-icon-checked { | ||
display: block; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/** | ||
* Changes the icon color of fields with RenderType "termsInput", | ||
* depending on existing value and MetadataFieldType. | ||
* Toggles a CSS class on fields with RenderType "termsInput", | ||
* depending on a given value. | ||
* The class controls display and color of icons (see 'picturecredits.css'). | ||
* @author Sebastian Klein <[email protected]> | ||
*/ | ||
import DocumentService from "@typo3/core/document-service.js"; | ||
|
@@ -14,40 +15,32 @@ class MandatoryEvaluation { | |
|
||
evaluateFields() { | ||
const tceForms = document.getElementById('EditDocumentController'); | ||
const colors = { | ||
ok: '#79a548', | ||
mandatory: '#c83c3c', | ||
mandatoryIfPresent: '#e8a33d' | ||
}; | ||
const classes = { | ||
term: '.t3js-mandatory-term', | ||
icon: '.t3js-form-field-termsinput-icon', | ||
ifPresent: 't3js-mandatory-term-if-present' | ||
icon: '.t3js-termsinput-icons', | ||
hasValue: 'has-value' | ||
}; | ||
const mandatoryFields = tceForms.querySelectorAll(classes.term); | ||
|
||
const setColor = (event) => { | ||
const checkForValue = (event) => { | ||
let field = event.target; | ||
let value = field.value; | ||
let icon = field.parentElement.parentElement.querySelector(classes.icon); | ||
let isMandatoryIfPresent = field.classList.contains(classes.ifPresent); | ||
|
||
if (value) { | ||
icon.style.color = colors.ok; | ||
} else if (isMandatoryIfPresent) { | ||
icon.style.color = colors.mandatoryIfPresent; | ||
icon.classList.add(classes.hasValue); | ||
} else { | ||
icon.style.color = colors.mandatory; | ||
icon.classList.remove(classes.hasValue); | ||
} | ||
}; | ||
|
||
if (mandatoryFields !== null) { | ||
mandatoryFields.forEach(f => { | ||
f.addEventListener('input', (e) => { | ||
setColor(e); | ||
checkForValue(e); | ||
}); | ||
f.addEventListener('change', (e) => { | ||
setColor(e); | ||
checkForValue(e); | ||
}); | ||
}); | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters