Add standard support for displaying a drawer of content over the sidebar.

Review Request #10732 — Created Oct. 1, 2019 and submitted — Latest diff uploaded

Information

Review Board
release-4.0.x
8b6ba15...

Reviewers

RB.PageView now provides a standard way for pages to add a drawer
component to the page. Drawers are a bit of UI that's hidden by default,
but can slide out over the sidebar area to display content based on a
user action. We have a single drawer concept today in the Dashboard
(activated when selecting one or more review requests and providing bulk
operations), but with more coming (in the administration UI), it was
time to standardize the concept.

Setting up a drawer is simple. Any subclass of RB.PageView that also
makes use of a sidebar can call this.setupDrawer(), which will
register the drawer on the page. They can then add content to it (or
provide initial content when calling setupDrawer()) and show and hide
it as needed. The page and stylesheet take care of the rest.

Drawers are now themed along with the page, mirroring the styling of the
top bar. This improves their appearance on pages in both desktop and
mobile mode.

Speaking of mobile mode, that's now supported. The drawer will appear
docked to the bottom of the page when shown, with the page container's
height adjusted to make room in order to prevent overlap of contents.
Right now, drawer action layout is a bit of a work-in-progress, and is
likely to change.

This change does not move the Dashboard over. That will come in the next
change.

It also does not include unit tests for the RB.PageView additions, as
work is still required to make this properly testable.

Tested extensively in desktop and mobile modes, making sure that actions
worked, that the page layout was correct, and that the page theme was
respected. Also tested transitioning in-between desktop/mobile modes,
to test reparenting.

Unit tests pass.


    Loading...