Add better admin widget sizing options and improve layout.

Review Request #10757 — Created Oct. 17, 2019 and submitted

Review Board

Admin dashboard widgets used to require a size specification, telling
the widget that it's large or small. Small widgets were placed off to
the right, and large widgets were on the left. Large widgets weren't
really that large, and widgets that truly needed to be larger didn't
have a standard way of making this happen.

Now, we have a clearly-defined set of sizes that are based on column
widths. Default widget sizes now take 2 columns (the equivalent of
"large" before), while small widget sizes take 1, and large widget sizes
now take 3. This gives us a lot more flexibility in the kinds of widgets
we provide.

If they need something more custom (such as a 4 column mode), they can
use the #rb-ns-ui.admin.widget.set-colspan() mixin, which will compute
a proper size for the number of columns desired.

Widgets can also be set to full-width mode, which is 100% of the content

In order to properly lay out widgets of various sizes, we now pre-sort
the widgets based on their initial size, placing larger widgets first
and smaller widgets last.

After any new layout computation, any widgets that had a change to their
width (such as full-size widgets, or any standard/large widget if the
viewport is too small) will have their updateSize() method called,
allowing them to recompute their size.

Unit tests were added to ensure that widget setup and layout ordering
was correct.

Tested that all current widgets look as they did before, meaning that
sizes and the new layout rules were correct.

Tested altering the sizes of the widgets in various orders to ensure
that the new layout rules were properly ordering the widgets from
largest to smallest, and that their orders were stable.

Description From Last Updated

Col: 31 Duplicate key 'ViewType'.


Col: 15 'containerWidth' is defined but never used.


Col: 13 Unexpected ')'.


Col: 13 Expected an identifier and instead saw ')'.


Col: 14 Expected ')' and instead saw ';'.


Col: 15 Missing semicolon.


Handler -> Handle

Checks run (1 failed, 1 succeeded)
flake8 passed.
JSHint failed.


Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (158d108)