Redesign file attachment boxes.

Review Request #7189 — Created April 9, 2015 and submitted — Latest diff uploaded

Information

Review Board
release-2.5.x
7d6496d...

Reviewers

As we've added features, the design of the file attachment boxes has gotten a
little bit crusty. We ended up in a situation where we had an icon, a
thumbnail, a caption, a filename, some buttons, and a drop-down menu. This was
way overly complicated, and managed to stuff a bunch of UI into a small area,
making even the thumbnails pretty useless.

This change re-imagines the file attachment boxes with simplicity as the
primary goal. When looking at the page, the only visible information is the
thumbnail and the caption. The thumbnail is a new "HD" thumbnail which is the
full width of the file attachment box. Hovering the mouse over a file box will
trigger an animation that will scroll across the full thumbnail, which makes it
possible to get a lot more information out of it.

Additionally, other commands (such as updating, downloading, adding a comment,
or deleting) are all shown in a menu on the left which is shown while hovering
over the file attachment.

Internally, this changes file attachments to always render via the javascript
views. We previously had a wacky scenario where the initial page load would
render the HTML in a django template, and then the javascript code would
"import" existing file attachments. Newly-created file attachments would be
rendered from javascript. This resulted in a duplication of the template data
between django templates and the backbone view, except there wasn't an exact
1:1 parity between the two. Rendering entirely from javascript cleans up the
code significantly.

I've posted a video of the animation at
https://www.dropbox.com/s/lyohd4firvby0th/new-file-attachments.mov?dl=0

  • Added, deleted, and updated file attachments.
  • Tested that animation started and stopped when I expected it to, and that
    various edge conditions and mouse trickery didn't result in wacky animation.
  • Checked links for every command.
  • Ran unit tests.
  • Ran js-tests.
reviewboard/attachments/mimetypes.py
reviewboard/attachments/tests.py
reviewboard/reviews/builtin_fields.py
reviewboard/reviews/models/file_attachment_comment.py
reviewboard/reviews/ui/base.py
reviewboard/static/rb/css/defs.less
reviewboard/static/rb/css/pages/reviews.less
reviewboard/static/rb/js/models/reviewRequestEditorModel.js
reviewboard/static/rb/js/models/tests/reviewRequestEditorModelTests.js
reviewboard/static/rb/js/pages/views/reviewablePageView.js
reviewboard/static/rb/js/resources/models/fileAttachmentModel.js
reviewboard/static/rb/js/resources/models/tests/fileAttachmentModelTests.js
reviewboard/static/rb/js/resources/models/tests/reviewRequestModelTests.js
reviewboard/static/rb/js/views/fileAttachmentThumbnailView.js
reviewboard/static/rb/js/views/reviewDialogView.js
reviewboard/static/rb/js/views/reviewRequestEditorView.js
reviewboard/static/rb/js/views/tests/fileAttachmentThumbnailViewTests.js
reviewboard/static/rb/js/views/tests/reviewDialogViewTests.js
reviewboard/static/rb/js/views/tests/reviewRequestEditorViewTests.js
reviewboard/templates/reviews/changedesc_file_attachment.html
reviewboard/templates/reviews/review_request_box.html
reviewboard/templates/reviews/reviewable_page_data.js
reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
reviewboard/webapi/resources/base_file_attachment.py
Loading...