Background Color Selector When Viewing Images

 






 

 


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

 


















 

  

   Information

  





 
 

  mderose
 









 
 

  Review Board
 









 
 

  master
 









 
 

  
 









 
 

  
 






 




 

  

   Reviewers

  





 
 

  reviewboard, students
 









 
 

  
 






 








 





  


 
 

  
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.

 







 









 





  








 




 







   

    
    
Changes between revision 14 and 15



    

 

 

 

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

 



    


    

      
Commits

      

 

 

  
   
  
  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
 


 
  
 
 
  
   
    
Added css properties to the image-review-ui.less file as per Mike Conley's re...

   
  		
  2fd8f7a46ec54a04cad76d2a7b86475a403d2af5
  mderose123
 


 
  
 
 
  
   
    
The background colour selector and the image resolution menu have now been mo...

   
  		
  cd1cbd9eb7974b1f65b205459b93dd6df6e7e585
  mderose123
 


 
  
 
 
  
   
    
Addendum Added missing semi colon identified JSHint

   
  		
  310a9f5dd71dc2130a5ecd40937aa68c53778565
  mderose123
 


 
  
 
 
  
   
    
Addendum made coding style changes based off of Christian's recommendations

   
  		
  928aae64a23a4682c40c732929465d68b7700c7f
  mderose123
 


 
  
 
 
  
   
    
Addendum made small code styling changes based off of the recommendations fro...

   
  		
  151c26915a3973c305bd90063516972891e6b1c1
  mderose123
 


 
  
 
 
  
   
    
Addendum removed straggler white spaces not caught in my previous commit

   
  		
  cebdde16b851ae2d9b8be5358b9072f525f69bff
  mderose123
 


 
  
 
 
  
   
    
Addendendum changed process of changing the background surrounding an image t...

   
  		
  2b2b0fd8f1ca6b8e2ee2f67e4eac0330415b0f81
  mderose123
 


 
  
 
 
  
   
    
Added css variable for grey colour used in image-review-ui.less, replaced unn...

   
  		
  54ef3e77a645fda3f477f77643ecd38b0cbcddf2
  mderose123
 


 
  
 
 
  
   
    

     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
 




    


    
    

 This diff has been split across 4 pages:
 
 
  
   1
  
 
  
   2
  
 
  
   3
  
 
  
   4
  
 
 
  >
 


   

  

 









 

  

   
    

     
      
      AUTHORS
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/Dockerfile
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/build.py
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/examples/docker-compose.mysql.yaml
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/examples/docker-compose.postgres.yaml
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/examples/nginx_templates/reviewboard.conf.template
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/examples/postgres/init-reviewboard-db.sh
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/packages/.gitignore
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/scripts/docker-entrypoint.sh
     
    

   
  

 



 

  

   
    

     
      
      contrib/docker/scripts/serve.sh
     
    

   
  

 



 

  

   
    

     
      
      contrib/internal/prepare-dev.py
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/Makefile
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/conf.py
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/docsmanage.py
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/index.rst
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/installation/development-releases.rst
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/installation/docker.rst
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/installation/index.rst
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/installation/linux.rst
     
    

   
  

 



 

  

   
    

     
      
      docs/manual/admin/sites/rb-site.rst
     
    

   
  

 





 This diff has been split across 4 pages:
 
 
  
   1
  
 
  
   2
  
 
  
   3
  
 
  
   4
  
 
 
  >
 







     

    

   

  

  

   
   Loading...