Revamp look and feel of the conditions editor.
Review Request #13989 — Created June 19, 2024 and submitted — Latest diff uploaded
The conditions editor widget needed to be updated to support dark mode,
because we use it outside of the admin UI for other things. This was all
pretty crusty, and while it was tempting to rewrite everything, I've
tried to keep my changes somewhat more minimal for now.The display of the conditions now uses CSS grid in order to make the
table look more like a table. Widths of those grid columns are
determined by what happens to be visible in each row, instead of having
each row just flow individually with inline-block elements.Colors use our ink datatable definitions, and icons have been switched
to use the tabler icons from ink instead of ugly colored fontawesome
icons.As a bonus, I've made it so you can use the keyboard to select and
activate the delete-item entry. This change does not add full
accessibility for these controls, since I'm still trying to wrap my head
around the best practices for some of the things in there.In order to fully enable a nice look, this also sets some basic styles
for<select>
and<option>
in configforms. These aren't very
style-able, but this makes it fit in much better.
- Edited a bunch of conditions and saw that everything looked correct.
- Manually injected the error element into the view and saw that it drew
much nicer than before (errors are pretty hard to trigger--one needs
to add an extension that adds condition choices or operators, and then
disable that extension). - Used the keyboard to edit conditions.
- Ran unit tests.
- Ran js-tests