Summary

Changing the look of file attachment thumbnail

Review Request #6119 — Created July 19, 2014 and discarded Sept. 30, 2014, 2:12 p.m.

Information

Owner

volodymyr

Repository

Review Board

Branch

Bugs

Depends On

~~5824~~

Reviewers

Groups

reviewboard, students

People

Description

With the new "Update" button to upload the fresh revision of the file, there are too many elements in the top row, which hides the name of the file. We can hide those actions behind the dropdown button.

There is an ongoing discussion of whether the top right corner should be rounded or straight. Right now it's straight per Davids suggestion, but I keep keep liking the all-rounded option. Both have small drawbacks: * With all rounded this might not really seem like a dropdown. * With top right straight it's not symmetrical.
See screenshots to make your opinion.

This is just one field in the CSS though, which can be changed at any time.

This review is aimed for project branch right now.

Testing Done

Works now - tested all buttons, ensured UI doesn't have side effects like https://www.youtube.com/watch?v=eTG3CNWS5OU&feature=youtu.be

Files

Issues

Description	From	Last Updated
Is there a reason why this menu uses different borders than the review request actions drop-down?	david	Aug. 6, 2014, 7:56 a.m.

Tool: Pyflakes
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js



Tool: PEP8 Style Checker
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js

Summary:: Changing the look of file attachment thumbnail
[WIP] Changing the look of file attachment thumbnail

Groups:: students

Testing Done:

~		Doesn't work - backbone view code relies on having thos buttons as its direct children, I'm not sure what the best solutions is yet (to be discussed).
	~	Works now - tested all buttons, ensured UI doesn't have side effects like https://www.youtube.com/watch?v=eTG3CNWS5OU&feature=youtu.be

Diff:

Revision 2 (+49 -5)

Show changes

	reviewboard/static/rb/css/reviews.less
	reviewboard/static/rb/js/views/reviewRequestEditorView.js
	reviewboard/templates/reviews/parts/file_attachment_thumbnail.html

Removed Files:

Added Files:

Tool: PEP8 Style Checker
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js



Tool: Pyflakes
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js

reviewboard/static/rb/css/reviews.less (Diff revision 2)

The issue has been resolved. Show all issues

Is there a reason why this menu uses different borders than the review request actions drop-down?

volodymyr Aug. 5, 2014, 10:37 a.m.

Yes, there is a reason. The drop-down button from the regular menu doesn't have rounded angles (all 4 are sharp). Therefore it makes sense to have the first child of the drop-down list without any rounded corners as well. However, in my case, "Actions" is the leftmost child, so its lower left corner is rounded. If I make all angles of the first child of the dropdown list sharp, it will look ugly (I tried). Therefore, I decided to make the dropdown list look like a bubble, where top corners of the first item and bottom corners of the last item are rounded. I think it looks better.

david Aug. 5, 2014, 2:27 p.m.

What does it look like if you get rid of the round border on the upper right? It really doesn't look much like a drop-down without some connection to the thing above it.

volodymyr Aug. 5, 2014, 5:29 p.m.

http://i.imgur.com/ft1pvxa.png

I don't like how the top left corner looks. It has a connection to the thing above via the top edge, it's just the corners that are rounded. I thought it made it look a bit better. Alternatively, the top corners can be made straight, but it might be better to make the lower left corner of "Actions" button straight as well (meaning the first child of attachment-actions). What do you think?

david Aug. 5, 2014, 5:43 p.m.

What I was thinking was round on the top left and square on the top right.

volodymyr Aug. 6, 2014, 7:56 a.m.

Ok, I added two screenshots and updated the diff. I still think that it looks a bit better when both corners are rounded though :)

Diff:

Revision 3 (+49 -5)

Show changes

	reviewboard/static/rb/css/reviews.less
	reviewboard/static/rb/js/views/reviewRequestEditorView.js
	reviewboard/templates/reviews/parts/file_attachment_thumbnail.html

Added Files:

Tool: PEP8 Style Checker
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js



Tool: Pyflakes
Ignored Files:
    reviewboard/static/rb/css/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js

Change Summary:: Updated descriptions
Summary:: [WIP] Changing the look of file attachment thumbnail
Changing the look of file attachment thumbnail
Description:: With the new "Update" button to upload the fresh revision of the file, there are too many elements in the top row, which hides the name of the file. We can hide those actions behind the dropdown button.
+
+
There is an ongoing discussion of whether the top right corner should be rounded or straight. Right now it's straight per Davids suggestion, but I keep keep liking the all-rounded option. Both have small drawbacks:
+ * With all rounded this might not really seem like a dropdown.
+ * With top right straight it's not symmetrical.
+ See screenshots to make your opinion.
+
+
This is just one field in the CSS though, which can be changed at any time.
+
+
This review is aimed for project branch right now.

Change Summary:: Updated dependencies
Depends On:: ~~5824 - Ability to update attachments~~

Change Summary:

Pulled new code, minor change to start using has_usable_review_ui versus string comparison.

Diff:

Revision 4 (+49 -5)

Show changes

	reviewboard/static/rb/css/pages/reviews.less
	reviewboard/static/rb/js/views/reviewRequestEditorView.js
	reviewboard/templates/reviews/parts/file_attachment_thumbnail.html

Tool: Pyflakes
Ignored Files:
    reviewboard/static/rb/css/pages/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js



Tool: PEP8 Style Checker
Ignored Files:
    reviewboard/static/rb/css/pages/reviews.less
    reviewboard/templates/reviews/parts/file_attachment_thumbnail.html
    reviewboard/static/rb/js/views/reviewRequestEditorView.js

Status:: Discarded

		With the new "Update" button to upload the fresh revision of the file, there are too many elements in the top row, which hides the name of the file. We can hide those actions behind the dropdown button.
	+
	+	There is an ongoing discussion of whether the top right corner should be rounded or straight. Right now it's straight per Davids suggestion, but I keep keep liking the all-rounded option. Both have small drawbacks:
	+	* With all rounded this might not really seem like a dropdown.
	+	* With top right straight it's not symmetrical.
	+	See screenshots to make your opinion.
	+
	+	This is just one field in the CSS though, which can be changed at any time.
	+
	+	This review is aimed for project branch right now.