Changing the look of file attachment thumbnail

Review Request #6119 — Created July 19, 2014 and discarded

Information

Review Board

Reviewers

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.

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


Description From Last Updated

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

daviddavid
reviewbot
  1. 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
    
    
  2. 
      
VO
VO
VO
reviewbot
  1. 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
    
    
  2. 
      
david
  1. 
      
  2. reviewboard/static/rb/css/reviews.less (Diff revision 2)
     
     
     
     
     
     
     
     
    Show all issues

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

    1. 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.

    2. 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.

    3. 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?

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

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

  3. 
      
VO
reviewbot
  1. 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
    
    
  2. 
      
VO
VO
VO
reviewbot
  1. 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
    
    
  2. 
      
VO
Review request changed
Status:
Discarded