Move the file attachment menu to the side of the thumbnail.
Review Request #7519 — Created July 13, 2015 and submitted
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 … |
david |
- Change Summary:
-
- Added a border between the menu and the thumbnail.
- Put the menu in a container that chops off the shadow facing the thumbnail, to make for a crisper, more attached feeling.
- Added a hover effect that fades out all thumbnails other than the one being looked at, to help make the actions menu pop and to bring focus to the active thumbnail.
- Description:
-
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 attachd to the thumbnail, resembling the
~ 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. ~ 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. ~ I've also increased 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. ~ 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. - Commit:
-
8753952a33814f9e78ccbbec6138b5707da1c8509b155185566f1d59a8a5fcbf6748358d8a38715b
- Diff:
-
Revision 2 (+127 -19)
- Added Files:
-
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