set appearance of play and pause buttons to flat (see #26)

phetsims · Aug 16, 2016 · fa37ddb · fa37ddb
1 parent 5c5efd0
commit fa37ddb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/js/common/view/PauseButton.js b/js/common/view/PauseButton.js
@@ -17,6 +17,7 @@ define( function( require ) {
   var PlinkoConstants = require( 'PLINKO_PROBABILITY/common/PlinkoConstants' );
   var plinkoProbability = require( 'PLINKO_PROBABILITY/plinkoProbability' );
   var Rectangle = require( 'SCENERY/nodes/Rectangle' );
+  var RoundButtonView = require( 'SUN/buttons/RoundButtonView' );
   var RoundPushButton = require( 'SUN/buttons/RoundPushButton' );
 
   // constants
@@ -31,7 +32,8 @@ define( function( require ) {
 
     options = _.extend( {
       radius: DEFAULT_RADIUS,
-      baseColor: PAUSE_BUTTON_BASE_COLOR
+      baseColor: PAUSE_BUTTON_BASE_COLOR,
+      buttonAppearanceStrategy: RoundButtonView.flatAppearanceStrategy
     }, options );
 
     // pause symbols are sized relative to the radius
@@ -41,9 +43,9 @@ define( function( require ) {
     var bar = function() { return new Rectangle( 0, 0, barWidth, barHeight, { fill: 'black' } ); };
     var bar1 = bar();
     var bar2 = bar();
-    var pausePath = new HBox( { children: [ bar1, bar2 ], spacing: barWidth, pickable: false } );
+    var pausePath = new HBox( { children: [ bar1, bar2 ], spacing: barWidth, pickable: false} );
 
-    // put the pause symbols inside a circle
+    // layout
     pausePath.centerX = 0;
     pausePath.centerY = 0;
 

diff --git a/js/common/view/PlayButton.js b/js/common/view/PlayButton.js
@@ -16,6 +16,7 @@ define( function( require ) {
   var Path = require( 'SCENERY/nodes/Path' );
   var PlinkoConstants = require( 'PLINKO_PROBABILITY/common/PlinkoConstants' );
   var plinkoProbability = require( 'PLINKO_PROBABILITY/plinkoProbability' );
+  var RoundButtonView = require( 'SUN/buttons/RoundButtonView' );
   var RoundPushButton = require( 'SUN/buttons/RoundPushButton' );
   var Shape = require( 'KITE/Shape' );
 
@@ -33,7 +34,8 @@ define( function( require ) {
 
     options = _.extend( {
       radius: DEFAULT_RADIUS,
-      baseColor: PLAY_BUTTON_BASE_COLOR
+      baseColor: PLAY_BUTTON_BASE_COLOR,
+      buttonAppearanceStrategy: RoundButtonView.flatAppearanceStrategy
     }, options );
 
     // play symbol is sized relative to the radius
@@ -42,9 +44,9 @@ define( function( require ) {
 
     // create the Path of the triangle
     var playPath = new Path( new Shape().moveTo( 0, triangleHeight / 2 ).lineTo( triangleWidth, 0 ).lineTo( 0, -triangleHeight / 2 ).close(),
-      { fill: 'black', pickable:false } );
+      { fill: 'black', pickable: false } );
 
-    // put the triangle within a circle
+    // layout
     playPath.centerX = options.radius * 0.05; // move to right slightly since we don't want it exactly centered
     playPath.centerY = 0;