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

Review Request #1786 — Created Nov. 14, 2019 and updated

guest7900
Review Board
755b4e0...
me
`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.

Testing Done:
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.

Reviewed at https://reviews.reviewboard.org/r/10732/


Loading...