Revamp look and feel of the conditions editor.

Review Request #13989 — Created June 19, 2024 and submitted — Latest diff uploaded

Information

Djblets
release-5.x

Reviewers

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

Diff Revision 2

This is not the most recent revision of the diff. The latest diff is revision 4. See what's changed.

orig
1
2
3
4

Commits

First Last Summary ID Author
Revamp look and feel of the conditions editor.
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. Testing Done: - 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 Reviewed at https://reviews.reviewboard.org/r/13989/
7051b66043c620d05214797f7df4d84c2192f32f David Trowbridge
djblets/forms/templates/djblets_forms/conditions_widget.html
djblets/static/djblets/css/forms/conditions.less
djblets/static/djblets/js/forms/views/conditionSetView.es6.js
djblets/static/djblets/js/forms/views/tests/conditionSetViewTests.es6.js
Loading...