Edit button alignment on Adding screen

[phet-steele]

The alignment of edit buttons in the adding screen equation looks off. My reference is both the design doc:

and the navbar icon:

Both of those look great, but are much different than what I'm seeing in the sim:

It looks like the edit buttons should be shifted to the right so that the addition sign is directly between them. This would also put the buttons over the edge of their respective dashed box. The left button would be right aligned with it dashed box; the right button would be left aligned with its dashed box.

Seen on macOS 10.12.3 Chrome. For phetsims/tasks#767
URL: http://www.colorado.edu/physics/phet/dev/html/make-a-ten/1.0.0-rc.1/make-a-ten_en.html
Version: 1.0.0-rc.1 2017-01-25 19:57:06 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36
Language: en-US
Window: 1920x1001
Pixel Ratio: 2/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 32 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"a707328c","branch":"HEAD"},"axon":{"sha":"1cf10281","branch":"HEAD"},"babel":{"sha":"d5fd82f2","branch":"master"},"brand":{"sha":"0be722ee","branch":"HEAD"},"chipper":{"sha":"f4cd39bf","branch":"HEAD"},"dot":{"sha":"75380061","branch":"HEAD"},"joist":{"sha":"d0bca742","branch":"HEAD"},"kite":{"sha":"6059ebb0","branch":"HEAD"},"make-a-ten":{"sha":"5f742dd4","branch":"HEAD"},"phet-core":{"sha":"84747dff","branch":"HEAD"},"phetcommon":{"sha":"1cb33196","branch":"HEAD"},"query-string-machine":{"sha":"d8a4ff18","branch":"HEAD"},"scenery":{"sha":"fbf816a5","branch":"HEAD"},"scenery-phet":{"sha":"b04d8086","branch":"HEAD"},"sherpa":{"sha":"785a536c","branch":"HEAD"},"sun":{"sha":"c98a7f0b","branch":"HEAD"},"tandem":{"sha":"d9c124e5","branch":"HEAD"},"twixt":{"sha":"cbe4c1aa","branch":"HEAD"},"vegas":{"sha":"8aa08377","branch":"HEAD"},"vibe":{"sha":"d4b79cf6","branch":"HEAD"}}

[jonathanolson]

@amanda-phet, does the described alignment (vertically with the closer edges of the numbers) sound good?

Also, should the keypad be centered vertically over the plus (as in the mock-up)?

[amanda-phet]

Just to clarify, what @phet-steele is describing is this (1):

but the navbar icon is aligned like this (2):

Let's go with option (1).

[jonathanolson]

Understood.

Also, should the keypad be centered vertically over the plus (as in the mock-up)?

Question still stands, mockup had the keypad centered with the plus.

[amanda-phet]

Also, should the keypad be centered vertically over the plus (as in the mock-up)?

Thanks, I meant to address that as well. I think it's fine where it is because we want it more left so that it is less obtrusive in the play space.

[jonathanolson]

Implemented, let me know if anything else is needed.

[amanda-phet]

Looks great. Thanks!