Restyle and reposition the review request infobox.
Review Request #9086 — Created July 17, 2017 and submitted
The new review request infobox that was recently added was a bit bulky
and was positioned pretty awkwardly, making it hard to navigate through
the dashboard. It used the standard infobox positioning, causing it to
appear directly above or below the entry for the review request, and
when it showed up it took a good chunk of the page. A lot of the content
in there wasn't really that useful, and took more space than needed.This introduces a new redesign for the infobox. This design does away
with the "last 3 reviews" part and adds some information on the
repository, timestamps, number of Ship Its, and a link to the diff. It
also appears off to the side of the entry in the dashboard, restoring
the ability to move your mouse up/down the dashboard without the infobox
getting in the way.The top of the infobox features the summary of the review request (or
its accessible draft), with the review request display ID and, if
relevant, the state (draft, submitted, discarded -- of which we only
show one in the infobox, in that order) in the top-right.Below that is the user who owns the review request, followed by the
repository, and then the last updated time. Both the repository and last
updated time information will expand on hover, showing additional
information. For the repository, this will show the commit and branch
(if both are empty then the repository won't offer a hover panel). The
last updated timestamp's panel will show the creation time and the
absolute date/time it was last updated.Below that is a portion of the description. This is now rendered as
Markdown, as needed. The very bottom of the description appears faded,
but on hover the fade will go away and the content will be scrollable.Below that is a status panel showing the number of Ship Its (if there
are any), the number of open issues (shown if there are any issues of
any state on the review request), and the number of fixed/discarded
issues (but only if there are any). Beside that is a link to the review
request page listing the number of reviews, and then a link to the diff
listing the revision. If there are open issues, the panel will have the
same background color as the issue banner. If the change has Ship Its
but no open issues, then the banner will be green. Otherwise, it's a
light grey.
Tested with all status labels (draft, submitted, discarded), and without.
Tested with summaries and descriptions of various lengths.
Tested with and without repositories, and with/without commit and branch
information.Tested hovering over the description area with different description widths
and with the various scrollbar modes macOS allows (always show/taking width
and on-demand/no width).Tested with/without Ship Its and open/fixed/dropped issues.
Tested that draft review requests had their state in the infobox instead of
the public review request state.Tested on all the relevant datagrids and on the review request page (with
the Depends On entries).
- Change Summary:
-
- Made the scrollable content stuff for the description generic. It's now a
.infobox-scrollable-section
, and all infoboxes can use it. - Through that change, the
_.super()
usage has gone away. - Fixed a bad border radius on the avatar in the review request infobox.
- Fixed the positioning of the scroll fade after scrolling down and mousing away. This required a new child CSS class (
.infobox-scrollable-section-content
).
- Made the scrollable content stuff for the description generic. It's now a
- Commit:
-
ab5557423d65083b3fcf41c42a00542097b6242271592a27ab607e83e6f80607d1e17a331d125718
- Diff:
-
Revision 2 (+405 -200)