• 
      

    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)