chipx86 got a fish trophy!

Summary

Improve list item state support for config forms.

Review Request #11011 — Created May 6, 2020 and submitted May 14, 2020, 6:04 p.m.

Information

Owner

chipx86

Repository

Djblets

Branch

release-2.0.x

Bugs

Depends On

Reviewers

Groups

djblets

People

Description

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.

Testing Done

Unit tests passed.

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

Commits

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

Summary

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

Files

Issues

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 …	david	May 8, 2020, 4:36 p.m.

flake8 passed.

JSHint passed.

Testing Done:: +
Unit tests passed.
+
+
Updated the integrations support (not part of this change) and verified
+ all the state updating worked.

djblets/static/djblets/js/configForms/views/listItemView.es6.js (Diff revision 1)

The issue has been resolved. Show all issues

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

chipx86 May 8, 2020, 4:36 p.m.

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

Change Summary:

Renamed _$itemStateEl to _$itemState.

Commits:

	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.	24a25d2f8542fafca06cb0105b6500fa5e3c5e2e
	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

Diff:

Revision 2 (+380 -18)

Show changes

	djblets/static/djblets/css/config-forms.less
	djblets/static/djblets/js/configForms/models/listItemModel.es6.js
	djblets/static/djblets/js/configForms/views/listItemView.es6.js
	djblets/static/djblets/js/configForms/views/tests/listItemViewTests.es6.js

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-2.0.x (267b12d)

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