Redesign file attachment boxes.
Review Request #7189 — Created April 9, 2015 and submitted — Latest diff uploaded
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.
Diff Revision 2 (Latest)
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 |
---|