Pixel polishing

[arouinfar]

Reviewed the latest dev with @jonathanolson this afternoon to discuss pixel polishing. I have a handwritten list on my desk, so self-assigning myself so I remember to convert it to a checklist tomorrow morning.

[arouinfar]

Colors

• [x] Update panel color a light gray
• [x] Change "Length 1/2" and "Mass 1/2" strings to black
• [x] Hover color of mass and length slider thumbs should be a brighter red/blue rather than the default turquoise
• [x] White highlight on mass blends in with white background. Change highlight color to a light blue/red or add thin black stroke around masses -- your call @jonathanolson.

Sizing

• [x] resetAllButton should be its normal size
• [x] Reduce size of all checkboxes and radio buttons to roughly match the height of string
• [x] Font size of strings next to checkboxes, radio buttons, "Energy Graph", and slider titles should all be the same (this might be the case already, but double check)

Alignment

• [x] Panels should have a 10 px padding with the edge of dev boundary (or window edge when floating) and there should be 10 px between panels
• [x] Bottom align scene selection with toolbox panel and resetAllButton, but maintain relative alignment of scene selection, play/pause, normal/slow
• [x] Return button should be center-aligned with resetAllButton and left-aligned with the Gravity panel.
• [x] Move vector icons to the right so that there is ~10px padding between the point and right edge of the panel
• [x] On Intro, left align default position of Ruler with the toolbox panel
• [x] Left alight "Friction" with "Gravity"

Energy Graph

• [x] Height of Energy graph should be consistent on Energy and Lab screens.
• [x] Maximize the height of Energy Graph between vector and toolbox panels on the Lab screen
• [x] @arouinfar will open a separate issue to add info button/legend so labels can be shortened - See #168

Period Timer

• [x] Reduce overall size by 15% Reduce the thickness of the black border (or make yellow rectangle bigger) See #171

Misc

• [x] Change "Slow Motion" to "Slow"
• [x] Add horizontal dividing line between pendulum 1 and pendulum 2 controls, similar to those used on the Lab screen of Projectile Motion

I can also make some recommendations for the spacing in the length/mass and gravity/friction panels, but I'd like to see how much space the alignment tweaks will buy us.

[jonathanolson]

On Intro, left align default position of Ruler with the toolbox panel

This currently happens for horizontally-constrained aspect ratios, but resizing the window keeps it in the same "view" location relative to the pendula:

Since this sim is NOT using the default (default is 1024x618, it's using 768x504), it causes it to pull away on things like iPads by default.

@arouinfar and @ariel-phet, is this at a non-standard aspect ratio for a reason, or can I set it to the standard one and rework the sim to fit?

@arouinfar, will other changes to the ruler initial positioning be needed? Any sort of "move the ruler based on the current screen size" would come with complications.

[jonathanolson]

Height of Energy graph should be consistent on Energy and Lab screens.

Then what is the desired behavior for its position? Currently on the Energy screen, it is top-aligned.

I was imagining the energy graph would be sized on each screen to fit nicely between the top and the tool checkbox panel.

Instead it sounds like we need to decide to keep the graph on the top (on the Energy screen), or on the bottom?

[jonathanolson]

Move vector icons to the right so that there is ~10px padding between the point and right edge of the panel

Is this describing moving these icons to the right?:

[arouinfar]

is this at a non-standard aspect ratio for a reason, or can I set it to the standard one and rework the sim to fit?

There is NO reason why the sim should be at a non-standard aspect ratio. Please use the standard size @jonathanolson.

Then what is the desired behavior for its position?

My original thought was that the height would be defined by the amount of space available on the Lab screen, and it would be the same size on the Energy screen. However, it sounds like the height can be defined by how much available space there is on each screen? If that's the case, then I think it would be nice to allow for a taller Energy Graph on the Energy screen (top of screen down to toolbox panel) and scale it down a bit to fit the space between the vectors and toolbox on the Lab screen.

Is this describing moving these icons to the right?:

👍

[jonathanolson]

I believe all of the relevant changes have been made, so I'd love to get feedback on the current version (published http://www.colorado.edu/physics/phet/dev/html/pendulum-lab/1.0.0-dev.13/pendulum-lab_en.html so it would be easy).

What further tweaks should be made?

[arouinfar]

@jonathanolson overall things are looking really good! A few more things

• [x] Energy Graph open by default on Energy screen, closed by default on Lab screen.
• [x] Widen Mass & Gravity panels by 25 px so Gravity and Friction slider tracks can be a bit longer. They currently feel a bit too short.
• [x] Gravity readout/tweakers could use more vertical padding. Increase padding on either side by 5px (and move Friction control down 10 px to accommodate the change).

[jonathanolson]

Implemented those three changes, let me know how they look.

[arouinfar]

Looks good @jonathanolson! When I requested for the Friction control to be moved down 10 px, my thinking was that giving the readout extra padding would reduce the padding between Gravity thumb and Friction title. I'd like to keep the same relative spacing between the thumb on the Gravity slider and the Friction title, so can you move the Friction controls back up?

[jonathanolson]

Ok, reverted the extra space between the "gravity controls" and "friction controls". Sorry about that!

Let me know if that looks good, and if there are any other related changes.

[arouinfar]

Thanks, looks great! I don't have any further requests @jonathanolson.