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 6

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.
5221912914ed8de44527040095b1ea1005ec18d5 mderose123
Added fixed HSHint raised
c05bb2fc607176bda005d6f1b53aa453299d62e5 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
3ee0b5af297052331e24868c48c1eb3cfa0b1c4e mderose123
Implemented the functionality to change the background color selector for the...
e4138e2c62f6fb9e24757e02d11ba814081d5b9e mderose123
Addendum added missing semicolon as per ReviewBot's recommendation
bf7a522dc5c790381e54497e632d60cfd1d6b7b6 mderose123
Small changes made to fix UI bug - nno resolution found yet
ffcd7b2bbcdf3028ffcc376b2386d658d917219f mderose123
Fixed JSHint error regarding missing semi-colon
71105512c62675d89fafb584902af4933f5eaad7 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...