Improve the look and feel of the file attachment thumbnails.

Review Request #5239 — Created Jan. 13, 2014 and submitted — Latest diff uploaded

Information

Review Board
master

Reviewers

Improve the look and feel of the file attachment thumbnails.

The file attachment thumbnails were looking a bit "busy." This attempts
to simplify it and make things more usable in a few ways:

  1. Thumbnails are now of a fixed size, so that they nicely fit into a grid.

  2. The borders have been lightened, and the background for the caption has been removed. Instead of the background, there's a very faint border above it, in order to provide the simplest of separation.

  3. The red "X" for deleting a file attachment has been removed. Instead, a black-and-white trashcan icon has been added as an action item alongside "Review."

  4. Any part of a filename that gets cut off will be ellipsized on modern browsers (or just hidden on older ones).

  5. The pencil icon is now on the right of the caption area, instead of right up against the text.

  6. The edit field for the caption now spans the width of the caption area, and doesn't have an ugly focus border around it.

  7. A new tooltip appears over the thumbnail overlay saying "Click to review."

This also renames the "File Attachments" section to "Files," as files
are going to be more important in the future, and "attachments" makes it
feel less first-class.

Tested on Chrome, Firefox, and IE10.

Tested when the review request was editable and when it wasn't.

Tested very long captions and filenames.

Tested deleting file attachments.

Tested the Review/Add Comment links on file attachments with/without review UIs.

Tested uploading a new file and performing those tests on the dynamically built thumbnail.