More Pixel Polishing

[arouinfar]

For https://github.com/phetsims/QA/issues/129

• [x] On Vectors, it looks like the vector checkboxes may be a tad larger than the top group of checkboxes. Here's a comparison. It's subtle, but does look slightly different. (Edit: Is it possible that there's a slight difference in font size causing this issue?)

• [x] Increase toolbox height 10% (relative height of panel and icons is good, but everything could a bit taller).

Gravity and Damping sliders should be formatted like Gravity and Friction sliders and Pendulum Lab (right). In particular:

• [x] Reduce height of gravity combobox

• [x] Increase padding between combobox and "Damping" title

• [x] Increase padding between "Damping" title and slider (should be the same as padding between "Gravity" and slider).

• [x] Increase readout font size to same size at title (14pt, I believe)

• [x] "Damping = 0" string should be aligned such that "Damping" doesn't shift when switching to screens with Damping slider.

Format Spring Constant sliders like Spring Length slider:

• [x] Increase font size of "Spring Constant #" title and min/max labels to match Spring Length
• [x] Increase padding between slider title and max/min label to match Spring Length
• [x] Increase panel width to match Spring Length

Tweaks to Mass Panel

• [x] Increase readout font size to match updated Gravity readout (14 pt?)
• [x] Increase max/min labels to 12 pt
• [x] Move slider down a bit to increase padding between "Mass" title and min/max labels.
• [x] Make panel a bit taller to accommodate the above changes.
• [x] Move Mass panel left 20px so it isn't so tight against the spring.

[arouinfar]

@Denz1994 if you have any questions, please let me know. I'd also be happy to discuss over Zoom.

[Denz1994]

On Vectors, it looks like the vector checkboxes may be a tad larger than the top group of checkboxes. Here's a comparison. It's subtle, but does look slightly different. (Edit: Is it possible that there's a slight difference in font size causing this issue?)

@arouinfar Can you verify that this was corrected? I need a second eye to make sure.

[arouinfar]

@arouinfar Can you verify that this was corrected? I need a second eye to make sure.

@Denz1994 the checkboxes are not the same size. GitHub resized the screenshots, but the red line is the same length in both screenshots. Looks like the vector checkboxes are still a tad bit larger.

[arouinfar]

@Denz1994 looks like these items haven't been addressed in master:

1. Increase readout font size to same size at title (14pt, I believe)

Gravity readout is 12 pt, but should be increased to 14 pt to match "Gravity" title. Perhaps you need to make the readout box a tad bigger so the font can be larger.

2. Increase padding between slider title and max/min label to match Spring Length

Small/Large is still closer to the title than Short/Long

3. Increase panel width to match Spring Length

Spring Constant and Spring Length now have the same width, which is great. However, it looks like you ended up making the Spring Length panel narrower to match Spring Constant, which crowds the Short/Long labels. The Constant Parameter title/options are now also indented too much.

• Keep Spring Length and Spring Constant panels the same width, but increase width by a few px. This will give min/max slider labels a bit more padding on the sides.
• Left-align Constant Parameter and radio options with "Short".

4. Increase readout font size to match updated Gravity readout (14 pt?)

Mass readout is currently a tad bit smaller than Gravity readout. Both readouts should be 14 pt.

[Denz1994]

Work in progress. Thanks for the feedback.

[Denz1994]

Good catch @arouinfar. Could you review master now?

[arouinfar]

@Denz1994 (1) and (4) look great. It doesn't look like any action was taken for (3).

Keep Spring Length and Spring Constant panels the same width, but increase width by a few px. This will give min/max slider labels a bit more padding on the sides. Left-align Constant Parameter and radio options with "Short".

It looks like (2) had some unintended consequences. The "Gravity" and "Damping" titles have shrunken quite a bit. This is particularly noticeable if you switch between the Energy and Lab screens. The title should remain the same size -- compare to the Energy/Lab screens in Pendulum Lab.

You may also need to add an extra pixel of whitespace between the bottom of the readout and the slider because because the readout and max label are looking pretty cramped. Any additional padding added to the Gravity slider should apply to Damping as well, so that their formatting remains the same.

[Denz1994]

You are right about (3). I need a second eye to review the other changes @arouinfar.

[arouinfar]

Everything looks great @Denz1994. Thanks!

[Denz1994]

Great!!!!