phetsims / models-of-the-hydrogen-atom

"Models of the Hydrogen Atom" is an educational simulation in HTML5, by PhET Interactive Simulations at the University of Colorado Boulder.
GNU General Public License v3.0
2 stars 3 forks source link

Invert colors for the Absorption/Emission checkbox #69

Closed pixelzoom closed 1 month ago

pixelzoom commented 1 month ago

Reported by @Nancy-Salpepi in today's design meeting...

The Absorption/Emission checkbox currently looks like this:

screenshot_3509

Inverting the colors, as in Kepler's Laws, would make the checkbox more readable on the black background (default color profile). For example:

screenshot_3510
pixelzoom commented 1 month ago

Done in the above commits, see screenshots below for both color profiles. @Nancy-Salpepi please review, close if OK.

screenshot_3512 screenshot_3511
pixelzoom commented 1 month ago

PS - These colors can also be adjusted in the ColorEditor, see below. No need to do so now, but wanted to let you know that the colors are specified where they should be.

  checkboxStrokeProperty: new ProfileColorProperty( modelsOfTheHydrogenAtom, 'checkboxStroke', {
    default: 'white',
    projector: 'black'
  } ),

  checkboxFillProperty: new ProfileColorProperty( modelsOfTheHydrogenAtom, 'checkboxFill', {
    default: 'black',
    projector: 'white'
  } ),
Nancy-Salpepi commented 1 month ago

Looks really nice now! Thanks for making the change @pixelzoom! Wondering, is the checkbox bigger than usual?

pixelzoom commented 1 month ago

The checkbox is it's default size. I kind of like it a bit larger, but I guess I should resize it to match the text height, to match PhET convention.

Nancy-Salpepi commented 1 month ago

Either way is fine with me. Feel free to close!

pixelzoom commented 1 month ago

The checkbox is now sized to match the text height, see screenshot below. Closing.

screenshot_3514