Background Color Selector When Viewing Images

Review Request #11445 — Created Feb. 14, 2021 and updated — Latest diff uploaded

Information

Review Board
master

Reviewers

This will allow users to select the colour outside of the image to help
improve visibility. For instance if an image is mostlywhite and the background
is white it may be difficult tounderstand what the image is. The background
colour selector menu is present on all image review modes (i.e. single
revision, "no diff", two-up, difference, split, and onion skin). The
background colour selector and the image resolution menu have now been moved
to a line below the caption in the image reviewer in order to better control
the arrangements of all elements in the header when the screen is adjusted to
a smaller size.

Manual testing has been done to ensure that the background color of the image
review page can change to white, black, grey/black checkerboard, or a custom
colour for all image views (i.e. single revision, "no diff", two-up, difference,
split, and onion skin). This has been tested on Mozilla Firefox, Safari and
Google Chrome and the menu appears as intended.

Diff Revision 15

This is not the most recent revision of the diff. The latest diff is revision 17. See what's changed.

orig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Commits

First Last Summary ID Author
Background Color Selector When Viewing Images
This will allow users to select the colour outside of the image to help improve visibility. For instance if an image is mostly white and the background is white it may be difficult to understand what the image is.
f7188254230e300284e8085f30c177bda2664905 mderose123
Added fixed HSHint raised
a4f46881c26a25a75417cf57716c36e172bc010c mderose123
Developed event handlers for changing the background color
by adding a background field in the imageReviewableModel and creating three events in the imageReviewableView to change the background based on what option the user selects. Also matched css class names to better correspond with the classes used in the menu used for changing the zoomed scale of an image. Also removed a redundant css class created in a previous commit
d1d129a1d3f5b4c780331a29f890cb1dc22728ee mderose123
Implemented the functionality to change the background color selector for the...
583727ca00da0095be8b3b244a08c68a9ecf2921 mderose123
Addendum added missing semicolon as per ReviewBot's recommendation
8c99f19399f2b0b7dfb94bb4c959c8db5c72523c mderose123
Small changes made to fix UI bug - nno resolution found yet
9a0dd0e977d97ad7702ea5cc5eb517d803576304 mderose123
Fixed JSHint error regarding missing semi-colon
39fb276e93c847e4319821eb9d348cf549232563 mderose123
Added css properties to the image-review-ui.less file as per Mike Conley's re...
39a633b49bff00a1da86beac9691733449c19a14 mderose123
The background colour selector and the image resolution menu have now been mo...
48fb7fe485a5fc74c7a3f8630b830fafaa8651ee mderose123
Addendum Added missing semi colon identified JSHint
bee7caae3cecf3f88df5b88c36b75fef49e25c89 mderose123
Addendum made coding style changes based off of Christian's recommendations
2490fa8821291b5707bc1506cc6c3a215d4aa83b mderose123
Addendum made small code styling changes based off of the recommendations fro...
33d6f50ceb97cb2b4d466be9060341070539936c mderose123
Addendum removed straggler white spaces not caught in my previous commit
01fbb3543a9ea7c20d084f17bb6f5cd01547d0de mderose123
Addendendum changed process of changing the background surrounding an image t...
6c9124f6c8d6de2ae11845d280dd1fcab262ff3b mderose123
Added css variable for grey colour used in image-review-ui.less, replaced unn...
5ccdcdcba6ba5f627d88effdc1a8bdc71ecfe6d1 mderose123
Reordered some css properties to be in alphabetical order
ad5b3a07a8fedc817bfddbdd502c1cdcdeb0d2fc mderose123
Added space between labels and backgroundMenuTemplate declaration
2c98d7b0624a97dc11085a5a8b703bb5338bb64c mderose123
reviewboard/static/rb/css/pages/image-review-ui.less
reviewboard/static/rb/js/models/imageReviewableModel.es6.js
reviewboard/static/rb/js/views/imageReviewableView.es6.js
Loading...