Add support for multi-line content for config forms list items.

Review Request #11037 — Created May 22, 2020 and submitted

Information

Djblets
release-2.0.x

Reviewers

Config form list items really don't look right when the content for the
item is more than one line. The icon, content, state indicator, and
actions are all set to vertically-align by default, and when there's
content that grows vertically, everything else looks wrong. We've had
styling in other places that tried to work around this, but each place
had to override things in their own way, and that's not good for future
maintenance.

This change aims to fix this by introducing new modifiers that flag an
item (or a list of items) as having multi-line content. This has the
effect of anchoring state columns and actions to the top of the item,
laying out actions vertically instead of horizontally, and allowing a
main content area to have a reasonable line height and to wrap normally
(instead of the default of ellipsizing).

To activate this, the list should use an -all-items-are-multiline
modifier, or individual items can use -is-multiline. The main content
area of an item containing the multi-line content should then be wrapped
in a djblets-c-config-forms-list__item-main class.

Tested this with the new extensions UI rewrite, which makes use of
multiline content. Verified that all layout looked completely
reasonable.

Tested standard lists, and saw that they continued to look correct.

Summary ID
Add support for multi-line content for config forms list items.
Config form list items really don't look right when the content for the item is more than one line. The icon, content, state indicator, and actions are all set to vertically-align by default, and when there's content that grows vertically, everything else looks wrong. We've had styling in other places that tried to work around this, but each place had to override things in their own way, and that's not good for future maintenance. This change aims to fix this by introducing new modifiers that flag an item (or a list of items) as having multi-line content. This has the effect of anchoring state columns and actions to the top of the item, laying out actions vertically instead of horizontally, and allowing a main content area to have a reasonable line height and to wrap normally (instead of the default of ellipsizing). To activate this, the list should use an `-all-items-are-multiline` modifier, or individual items can use `-is-multiline`. The main content area of an item containing the multi-line content should then be wrapped in a `djblets-c-config-forms-list__item-main` class.
e8ee2a6cb5ad0666fb3330f77df1811e77911ff0
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-2.0.x (471899c)
Loading...