Redesign the look and feel of the review requests page.

Review Request #7240 — Created April 22, 2015 and submitted — Latest diff uploaded

Information

Review Board
release-2.5.x
1c8a76e...

Reviewers

The review request page was, in many ways, largely unchanged from the
1.0 days. We've had tweaks here and there, and some layout changes, but
the actual review portion has hardly been touched in years.

This is the first big redesign of this page we've had. It substantially
changes the look and feel, removing a lot of the boxes, toning down
gradients, tightening some spacing and expanding others, and bringing a
more modern look to the page. There are also usability enhancements over
what we had in the past.

In terms of style polish, the big highlights are that there's more
breathing room between reviews, between comments, and between the
content and the browser's boundaries. There are no longer an extra set
of borders within each review for the content, but rather the body of the
review is flat white, providing a cleaner feel. The action bar at the
top no longer has borders separating each action, opting instead to have
appropriate spacing between the items.

There are a few other major changes added on to this as well.

First, the actions on the page no longer include the page views (View
Diff, View Reviews, etc.). Those have been moved just to the right of
the action bar, as a set of tabs. The current page always has an entry
now, making it clear where you are and where you can go.

There are now gravatars shown to the left of the reviews, and to the
left of any comments. The ones on the reviews also contain the
"Ship it!" label, rather than having that appear on reviews. If there
are any issues opened, a "Fix it!" label will show instead. If it's in a
"Fix it, then ship it!" stage, we show a "Fix it!" label sitting on top
of a "Ship it!" label. Any changes to these labels (as the result of
closing/reopening issues) animates the label state, providing a clean,
cute transition.

The border around the gravatars are faintly dotted, with the color
matching the Ship It or Fix It state. This also transitions when the
labels do.

The green reply draft banners now extend up to the top of the review
box. This is quite nice when looking at a collapsed or expanded box.

The timestamps in the page now show only the relative times, as hovering
over them already shows the absolute times. That removes a lot of visual
noise from the page.

The "Add Comment" links on the right have been replaced with "Reply" or
"Comment" buttons on the left. The difference in text depends on whether
there's existing content being replied to.

The "Expand All"/"Collapse All" links (and equivalent links in the diff
viewer) no longer sit in the bottom-right of the review request box, but
rather are prominent btutons separating the review request and reviews.
Likewise, for the diff viewer, they separate the box and the diffs.

Tested all the functionality and browsed through all affected pages in
Chrome and Firefox. My IE VM has been nuked, so I'll be testing that once
I get that going again.

This functionality included:

  • Expanding/collapsing reviews.
  • Replying to comments.
  • Toggling issue states and watching what the labels did (in both the "Fix It" and
    the "Fix it, then ship it" states.
  • Invoking actions from the action bar.
  • Navigating between tabs for review requests, diffs, and file attachments.
  • The floating reply draft banners.
  • The Expand All/Collapse All buttons.
  • The various view buttons for diffs (Show Whitespace Changes, etc.).
  • Expanding diffs in the review comments.

(Note that the animation image attached has some color palette goofiness, due
to being a gif, so ignore that aspect of it.)