Fish Trophy

chipx86 got a fish trophy!

Improve list item state support for config forms.

Review Request #11011 — Created May 6, 2020 and submitted

Information

Djblets
release-2.0.x

Reviewers

This makes a few improvements to the item state support in list
forms, supporting some common patterns.

First, there's now a standard "error" state, used for items that have
failed in some way (useful for items that represent loadable things or
operations). This goes along with existing "enabled" and "disabled"
states, and has standard colors.

A new CSS class (djblets-c-config-forms-list__item-state), used for
showing a representation of an item state, has been added as well. This
makes use of a new registered text color code and icon provided when
calling #djblets-ns-config-forms.list.add-item-state().

This new class can be added to an item's template, and it will be
automatically populated with the correct text for the item. This involves
updates to the JavaScript support, which now uses an optional itemState
model attribute on the item. This will not only apply the new text and
icon, but it will also apply the CSS modifier class to the item itself.

This all results in a lot less that items have to manage. They no longer
need to compute their own CSS classes to define item states, or maintain
custom columns. They can just set an attribute.

Items that do need specialized CSS classes or text can override the
Djblets.Config.ListItemView.itemStateClasses and
Djblets.Config.ListItem.itemStateTexts to provide this customization.

Unit tests passed.

Updated the integrations support (not part of this change) and verified
all the state updating worked.

Summary ID
Improve list item state support for config forms.
This makes a few improvements to the item state support in list forms, supporting some common patterns. First, there's now a standard "error" state, used for items that have failed in some way (useful for items that represent loadable things or operations). This goes along with existing "enabled" and "disabled" states, and has standard colors. A new CSS class (`djblets-c-config-forms-list__item-state`), used for showing a representation of an item state, has been added as well. This makes use of a new registered text color code and icon provided when calling `#djblets-ns-config-forms.list.add-item-state()`. This new class can be added to an item's template, and it will be automatically populated with the correct text for the item. This involves updates to the JavaScript support, which now uses an optional `itemState` model attribute on the item. This will not only apply the new text and icon, but it will also apply the CSS modifier class to the item itself. This all results in a lot less that items have to manage. They no longer need to compute their own CSS classes to define item states, or maintain custom columns. They can just set an attribute. Items that do need specialized CSS classes or text can override the `Djblets.Config.ListItemView.itemStateClasses` and `Djblets.Config.ListItem.itemStateTexts` to provide this customization.
2f9fe897009a3014f5934fc4f7403d9384ce2ce6

Description From Last Updated

I feel like we use "El" when we're talking about a DOM element rather than a jQuery. How about just …

daviddavid
chipx86
david
  1. 
      
  2. I feel like we use "El" when we're talking about a DOM element rather than a jQuery. How about just _$itemState?

    1. Completely agree. This was just me being very stupid very late at night.

  3. 
      
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-2.0.x (267b12d)
Loading...