Revamp look and feel of the conditions editor.
Review Request #13989 — Created June 19, 2024 and submitted
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
Summary | ID |
---|---|
922b2a2942d69e5705fcdef938e0e9d551dfc480 |
Description | From | Last Updated |
---|---|---|
It'd be nice to get the trash can icon aligned if we can. If we align-items or such to baseline, … |
|
|
Looks like alignment regressed here. Also, with align-items: end, what happens when the height on the value widget is tall? |
|
|
This can just be var(--ink-p-red-600) without the --if-dark/light conditionals. That'll still give you the colour for the appropriate palette that's … |
![]() |
|
Let's add role="button" and an aria-label while we're making these changes. |
|
|
We should also add a role="button" here as well. |
|
|
Super-small nit, but maybe move row-gap out from under the grid-* attributes? It really doesn't matter, just makes me go … |
|
- Commits:
-
Summary ID a62a7abd99153f318dc640f9edc6cbb1a4a23718 7051b66043c620d05214797f7df4d84c2192f32f
Checks run (2 succeeded)
- Commits:
-
Summary ID 7051b66043c620d05214797f7df4d84c2192f32f 5dad4b2f12882d356c712d1741d45b27cad7f691 - Diff:
-
Revision 3 (+232 -230)
- Added Files:
Checks run (2 succeeded)
- Description:
-
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. - Commits:
-
Summary ID 5dad4b2f12882d356c712d1741d45b27cad7f691 922b2a2942d69e5705fcdef938e0e9d551dfc480 - Diff:
-
Revision 4 (+298 -232)
- Added Files: