Add enhanced styles and item states for config form list items.

Review Request #10429 — Created Feb. 26, 2019 and submitted — Latest diff uploaded

chipx86
Djblets
release-1.0.x
djblets

List items defaulted to an appearance where the left-hand side had some
indentation, and the right-hand side did not. This was styled for the
(currently) common use case of text on the left-hand side and action
buttons on the right-hand side. In other cases, such as when there's an
icon on the left-hand side or just text on the right-hand side, the
styles didn't look right, requiring that those specific use cases tweak
the styles. This led to some inconsistency.

We also just have more ways we want to use list items, that weren't
covered by the old styles. For instance, the extension list has a
colored border on the left-hand side of extension items indicating their
enabled/disabled state, which is something we'll want in other places as
well.

This change enhances the styling of list items to account for these
newer requirements. Now, the slight indentation found on the left-hand
side is now found on the right-hand side, but both can be turned off by
indicating, per-item, whether the item has an icon or actions. To reduce
code bloat in the HTML, there are -all-items-* versions of these
modifiers for the list as well.

Item state colors can also be defined and used through a new
#djblets-ns-config-forms.list.add-item-state() mixin. Two states are
defined by default: -is-enabled and -is-disabled.

There are also fixes for item borders. The last item in the list no
longer has a bottom border, helping prevent a fuzzy look when nested in
a container that has borders.

Tested with the new list I'm building, and tested with all existing
lists used in all config forms we currently have.

Commits

Files

Loading...