search

phetsims / buoyancy

"Buoyancy" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
2 stars 2 forks source link

The Vector Scale buttons do not look like buttons #136

Closed samreid closed 1 month ago

samreid commented 1 month ago

From #68

@DianaTavares said:

  • Vector Scales buttons: they don't look like buttons. Add to each buttons black strokes and round corners. Probably they will need to be a little more separated:

image

samreid commented 1 month ago

Here is a patch that: Make the vector scale buttons rounded, spaced, shaded, and outlined to match other buttons

```diff Subject: [PATCH] Make the vector scale buttons rounded, spaced, shaded, and outlined to match other buttons, see https://github.com/phetsims/buoyancy/issues/136 --- Index: js/common/view/BuoyancyDisplayOptionsNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/common/view/BuoyancyDisplayOptionsNode.ts b/js/common/view/BuoyancyDisplayOptionsNode.ts --- a/js/common/view/BuoyancyDisplayOptionsNode.ts (revision eaec3f201b5379b76c6f7d4c428802ad039c36d1) +++ b/js/common/view/BuoyancyDisplayOptionsNode.ts (date 1712326380158) @@ -18,6 +18,7 @@ import DensityBuoyancyModel from '../model/DensityBuoyancyModel.js'; import optionize, { combineOptions } from '../../../../phet-core/js/optionize.js'; import Property from '../../../../axon/js/Property.js'; +import RectangularButton from '../../../../sun/js/buttons/RectangularButton.js'; // constants const arrowSpacing = 15; @@ -106,8 +107,18 @@ layoutOptions: { column: 0, row: 3 } }, labelOptions ) ), new PlusMinusZoomButtonGroup( model.forceScaleProperty, { + spacing: 3, layoutOptions: { column: 1, row: 3, xAlign: 'center' }, - orientation: 'horizontal', + buttonOptions: { + cornerRadius: 3, + buttonAppearanceStrategy: RectangularButton.ThreeDAppearanceStrategy, + stroke: 'black', + xMargin: 7, + yMargin: 7 + }, applyZoomIn: ( scale: number ) => scale * 2, applyZoomOut: ( scale: number ) => scale / 2 } ) ] : [] ```

I tried to match the style of the other slider adjustment buttons, but there is not much control over the 3d shading. The current version looks like so:

image

Assigning to @DianaTavares or @zepumph to take a look.

DianaTavares commented 1 month ago

That looks are great!! Love the look of that buttons!

zepumph commented 1 month ago

Changes pushed. @DianaTavares can you spot check?

DianaTavares commented 1 month ago

They look wonderful!! Thanks!