Add consistent layout and state for actions and a button action template.

Review Request #14423 — Created May 4, 2025 and submitted — Latest diff uploaded

Information

Review Board
release-7.1.x

Reviewers

This introduces a few changes to help write actions and ensure they work
in a consistent way in multiple places.

There's now an action_base.html template that handles the general
structure of an action. This provides the parent rb-c-actions__action
container with some consistent attributes, plus template variables for
use in derived templates. Derived templates can use this to build their
elements and to influence the parent container state.

This gives us more consistent templates and helps us set some new
attributes for visibility management. We use both hidden and
display: none (the latter being necessary since display can override
the former). From that, we can better manage the accessibility tree and
check for state more directly.

RB.ActionView provides the other end of the visibility management.
Visibility is now managed on the parent action container element, if
used, so that we don't end up with empty <li> elements affecting
layout when actions are hidden. If nested in another container (such as
a menu), the action's own element is used.

ActionView.show() and hide() update both display and hidden,
using the visibility element. An isVisible() method returns the state
based on that as well.

Along with this, there are a few small typing and function signature
fixes I hit during development, plus error handling when action
templates fail to render.

These will make it easier to implement some new action functionality
coming in a follow-up change.

Tested all the current actions in the UI, looking for visual breakages
or issues invoking the actions.

Unit tests pass.

Tested the new functionality with in-progress changes.

Diff Revision 7

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

orig
1
2
3
4
5
6
7
8

Commits

First Last Summary ID Author
Add consistent layout and state for actions and a button action template.
This introduces a few changes to help write actions and ensure they work in a consistent way in multiple places. There's now an `action_base.html` template that handles the general structure of an action. This provides the parent `rb-c-actions__action` container with some consistent attributes, plus template variables for use in derived templates. Derived templates can use this to build their elements and to influence the parent container state. This gives us more consistent templates and helps us set some new attributes for visibility management. We use both `hidden` and `display: none` (the latter being necessary since `display` can override the former). From that, we can better manage the accessibility tree and check for state more directly. `RB.ActionView` provides the other end of the visibility management. Visibility is now managed on the parent action container element, if used, so that we don't end up with empty `<li>` elements affecting layout when actions are hidden. If nested in another container (such as a menu), the action's own element is used. `ActionView.show()` and `hide()` update both `display` and `hidden`, using the visibility element. An `isVisible()` method returns the state based on that as well. Along with this, there are a few small typing and function signature fixes I hit during development, plus error handling when action templates fail to render. These will make it easier to implement some new action functionality coming in a follow-up change.
3af2b1f651acdf08903ebcf47250fa2ba308b89d Christian Hammond
reviewboard/accounts/actions.py
reviewboard/actions/base.py
reviewboard/reviews/actions.py
reviewboard/static/rb/js/common/actions/views/actionView.ts
reviewboard/static/rb/js/common/actions/views/menuActionView.ts
reviewboard/templates/actions/action.html
reviewboard/templates/actions/action_base.html
reviewboard/templates/actions/button_action.html
reviewboard/templates/actions/detailed_menuitem_action.html
reviewboard/templates/actions/menu_action.html
Loading...