Move the file attachment menu to the side of the thumbnail.

Review Request #7519 — Created July 13, 2015 and submitted

Information

Review Board
release-2.5.x
9b15518...

Reviewers

The new file attachments offer a much-improved actions menu and an
awesome scrolling behavior for previewing file contents. The problem,
though, is that to activate the scrolling behavior, you must hover over
the thumbnail, which will pop up the actions menu over the thumbnail
contents, making it impossible to see some of the thumbnail.

This change moves the actions menu to the side of the thumbnail. By
default, that's on the right-hand side, but will move to the left-hand
side if there isn't room to fit it on the screen on the right.

The menu is styled to appear attached to the thumbnail, resembling the
caption area. Hovering over the actions is the same as hovering over the
thumbnail, in that scrolling will continue uninterrupted. The menu lives
in a new container element that provides room for the shadow on all
sides but the one attached to the thumbnail, preventing the menu shadow
from overlaying the thumbnail.

The hit area of the action menu items so you don't have to be as
precise, and added a slight background color to the item the mouse is
over.

To help separate out the new action menu from other thumbnail contents,
and to provide focus to the active thumbnail, all other thumbnails will
quickly fade out to 50% opacity. The effect is subtle but does a great
job of reducing the noise when working on a thumbnail.

Tested on Chrome and Firefox.

Tested with thumbnails with room on the right, and thumbnails without
room. It chose a suitable place to dock in either case.


Description From Last Updated

Can we put a little 1px border like there is above the caption here? It's weird to have the slight …

daviddavid
reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/js/views/fileAttachmentThumbnailView.js
        reviewboard/static/rb/css/pages/reviews.less
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/js/views/fileAttachmentThumbnailView.js
        reviewboard/static/rb/css/pages/reviews.less
    
    
  2. 
      
david
  1. I'd like to see what this looks like if there's no room for the menu on the right.

  2. Show all issues

    Can we put a little 1px border like there is above the caption here? It's weird to have the slight color change without a line.

  3. 
      
chipx86
reviewbot
  1. Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/js/views/fileAttachmentThumbnailView.js
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
    
    
    
    Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/js/views/fileAttachmentThumbnailView.js
        reviewboard/static/rb/css/pages/reviews.less
        reviewboard/static/rb/js/views/reviewRequestEditorView.js
    
    
  2. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-2.5.x (863bd95)