Consistent corner radii, stroke, fill for all panels and boxes, see #240

phetsims · Mar 26, 2020 · ea58b0d · ea58b0d
1 parent 483b7c7
commit ea58b0d
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 44 deletions.
diff --git a/js/energy-skate-park/common/Constants.js b/js/energy-skate-park/common/Constants.js
@@ -11,6 +11,7 @@ import Dimension2 from '../../../../dot/js/Dimension2.js';
 import Range from '../../../../dot/js/Range.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import energySkatePark from '../../energySkatePark.js';
+import EnergySkateParkColorScheme from './view/EnergySkateParkColorScheme.js';
 
 // for zoom buttons for bar graphs, pressing button will increase/decrease scale by this much
 const ZOOM_FACTOR_DELTA = 1 / 60;
@@ -22,6 +23,8 @@ const JUPITER_GRAVITY = 25.96;
 // maximum coefficient of friction
 const MAX_FRICTION = 0.1;
 
+const PANEL_CORNER_RADIUS = 8;
+
 const Constants = {
   SLIDER_OPTIONS: {
     thumbSize: new Dimension2( 10, 20 ),
@@ -37,10 +40,19 @@ const Constants = {
     maxWidth: 25 // selected by choosing the length of widest English string in ?stringTest=double
   },
 
+  // options for boxes and panels
+  PANEL_CORNER_RADIUS: PANEL_CORNER_RADIUS,
+  PANEL_OPTIONS: {
+    cornerRadius: PANEL_CORNER_RADIUS,
+    fill: EnergySkateParkColorScheme.panelFill,
+    stroke: EnergySkateParkColorScheme.panelStroke
+  },
+
   // options for the ComboBoxes in this sim
   COMBO_BOX_OPTIONS: {
     xMargin: 10,
-    yMargin: 6
+    yMargin: 6,
+    cornerRadius: PANEL_CORNER_RADIUS
   },
   COMBO_BOX_ITEM_OPTIONS: { font: new PhetFont( 11 ), maxWidth: 80 },
 

diff --git a/js/energy-skate-park/common/view/AttachDetachToggleButtons.js b/js/energy-skate-park/common/view/AttachDetachToggleButtons.js
@@ -14,6 +14,7 @@ import Panel from '../../../../../sun/js/Panel.js';
 import attachIcon from '../../../../images/attach_png.js';
 import detachIcon from '../../../../images/detach_png.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../Constants.js';
 
 // constants
 const SELECTED_LINE_WIDTH = 2.3;
@@ -33,11 +34,9 @@ class AttachDetachToggleButtons extends Panel {
 
     // Match the style of the EnergySkateParkControlPanel
     options = merge( {
-      fill: '#F0F0F0',
-      stroke: null,
       xMargin: 15,
       yMargin: 5
-    }, options );
+    }, Constants.PANEL_OPTIONS, options );
 
     // This is sort of hack to pass through the tandem of the radioButtonGroupMember to its child.
     const attachRadioButtonTandemName = 'attachRadioButton';

diff --git a/js/energy-skate-park/common/view/EnergyBarGraph.js b/js/energy-skate-park/common/view/EnergyBarGraph.js
@@ -135,24 +135,25 @@ class EnergyBarGraph extends Node {
     let content = null;
     if ( options.showBarGraphZoomButtons ) {
 
-      const zoomOutButton = new ZoomButton( {
-        in: false,
+      const zoomButtonOptions = {
         scale: 0.3,
-        baseColor: ColorConstants.LIGHT_BLUE,
+        baseColor: ColorConstants.LIGHT_BLUE
+      };
+
+      const zoomOutButton = new ZoomButton( merge( {
+        in: false,
         listener: () => {
           barGraphScaleProperty.set( Math.max( barGraphScaleProperty.get() - Constants.ZOOM_FACTOR_DELTA, Constants.MIN_ZOOM_FACTOR ) );
         },
         tandem: tandem.createTandem( 'zoomOutButton' )
-      } );
-      const zoomInButton = new ZoomButton( {
+      }, zoomButtonOptions ) );
+      const zoomInButton = new ZoomButton( merge( {
         in: true,
-        scale: 0.3,
-        baseColor: ColorConstants.LIGHT_BLUE,
         listener: () => {
           barGraphScaleProperty.set( Math.min( barGraphScaleProperty.get() + Constants.ZOOM_FACTOR_DELTA, Constants.MAX_ZOOM_FACTOR ) );
         },
         tandem: tandem.createTandem( 'zoomInButton' )
-      } );
+      }, zoomButtonOptions ) );
 
       const zoomButtons = new HBox( {
         children: [ zoomOutButton, zoomInButton ],

diff --git a/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js b/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js
@@ -9,6 +9,7 @@
 import merge from '../../../../../phet-core/js/merge.js';
 import AccordionBox from '../../../../../sun/js/AccordionBox.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../Constants.js';
 import EnergyBarGraph from './EnergyBarGraph.js';
 
 class EnergyBarGraphAccordionBox extends AccordionBox {
@@ -27,13 +28,12 @@ class EnergyBarGraphAccordionBox extends AccordionBox {
     const energyBarGraph = new EnergyBarGraph( model.skater, model.barGraphScaleProperty, model.barGraphVisibleProperty, tandem.createTandem( 'energyBarGraph' ), options.barGraphOptions );
 
     const margin = 5;
-    super( energyBarGraph, {
+    super( energyBarGraph, merge( {
 
       contentXMargin: margin,
       contentYMargin: margin,
       buttonXMargin: margin,
       buttonYMargin: margin,
-      cornerRadius: margin,
 
       titleNode: EnergyBarGraph.createLabel(),
 
@@ -44,7 +44,7 @@ class EnergyBarGraphAccordionBox extends AccordionBox {
       barGraphOptions: null,
 
       tandem: tandem
-    } );
+    }, Constants.PANEL_OPTIONS ) );
 
     // create an icon that represents the content, it is invisible when expanded
     const graphIcon = EnergyBarGraph.createBarGraphIcon( tandem.createTandem( 'barGraphIcon' ), { scale: 0.8 } );

diff --git a/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js b/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js
@@ -39,6 +39,7 @@ const EnergySkateParkColorScheme = {
   referenceArrowFill: new Color( 254, 240, 53 ),
 
   panelFill: new Color( '#F0F0F0' ),
+  panelStroke: new Color( '#ababab' ),
 
   // surrounds text for better visibility
   transparentPanelFill: new Color( 255, 255, 255, 0.5 )

diff --git a/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js b/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js
@@ -12,7 +12,7 @@ import VBox from '../../../../../scenery/js/nodes/VBox.js';
 import HSeparator from '../../../../../sun/js/HSeparator.js';
 import Panel from '../../../../../sun/js/Panel.js';
 import energySkatePark from '../../../energySkatePark.js';
-import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js';
+import Constants from '../Constants.js';
 import EnergySkateParkGravityControls from './EnergySkateParkGravityControls.js';
 import EnergySkateParkMassControls from './EnergySkateParkMassControls.js';
 import EnergySkateParkVisibilityControls from './EnergySkateParkVisibilityControls.js';
@@ -104,14 +104,12 @@ class EnergySkateParkControlPanel extends Panel {
 
     const content = new VBox( { resize: false, spacing: 8, children: children } );
 
-    super( content, {
+    super( content, merge( {
       xMargin: 5,
       yMargin: 5,
-      fill: EnergySkateParkColorScheme.panelFill,
-      stroke: null,
       resize: false,
       tandem: tandem
-    } );
+    }, Constants.PANEL_OPTIONS ) );
   }
 }
 

diff --git a/js/energy-skate-park/common/view/PieChartLegend.js b/js/energy-skate-park/common/view/PieChartLegend.js
@@ -18,6 +18,7 @@ import VStrut from '../../../../../scenery/js/nodes/VStrut.js';
 import Panel from '../../../../../sun/js/Panel.js';
 import energySkateParkStrings from '../../../energy-skate-park-strings.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../Constants.js';
 import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js';
 
 const energyEnergyString = energySkateParkStrings.energy.energy;
@@ -120,18 +121,14 @@ class PieChartLegend extends Panel {
       ]
     } );
 
-    super( contentWithTitle,
-      {
-        x: 4,
-        y: 4,
-        xMargin: 6,
-        yMargin: 5,
-        fill: 'white',
-        stroke: 'gray',
-        lineWidth: 1,
-        resize: false,
-        tandem: tandem
-      } );
+    super( contentWithTitle, merge( {
+      x: 4,
+      y: 4,
+      xMargin: 6,
+      yMargin: 5,
+      resize: false,
+      tandem: tandem
+    }, Constants.PANEL_OPTIONS ) );
 
     this.addChild( clearThermalButton );
     const strutGlobal = clearThermalButtonStrut.parentToGlobalPoint( clearThermalButtonStrut.center );

diff --git a/js/energy-skate-park/common/view/ToolboxPanel.js b/js/energy-skate-park/common/view/ToolboxPanel.js
@@ -17,7 +17,7 @@ import HBox from '../../../../../scenery/js/nodes/HBox.js';
 import Panel from '../../../../../sun/js/Panel.js';
 import Tandem from '../../../../../tandem/js/Tandem.js';
 import energySkatePark from '../../../energySkatePark.js';
-import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js';
+import Constants from '../Constants.js';
 
 class ToolboxPanel extends Panel {
 
@@ -29,10 +29,8 @@ class ToolboxPanel extends Panel {
    */
   constructor( model, view, tandem, options ) {
     options = merge( {
-      lineWidth: 0,
-      align: 'center',
-      fill: EnergySkateParkColorScheme.panelFill
-    }, options );
+      align: 'center'
+    }, Constants.PANEL_OPTIONS, options );
 
     // create the icons
     const measuringTapeIcon = MeasuringTapeNode.createIcon();

diff --git a/js/energy-skate-park/common/view/TrackToolboxPanel.js b/js/energy-skate-park/common/view/TrackToolboxPanel.js
@@ -24,9 +24,7 @@ class TrackToolboxPanel extends Panel {
    */
   constructor( model, view, tandem, options ) {
 
-    options = merge( {
-      cornerRadius: 6
-    }, options );
+    options = merge( {}, Constants.PANEL_OPTIONS, options );
 
     const iconTrack = model.createDraggableTrack( {
       trackOptions: {

diff --git a/js/energy-skate-park/common/view/VisibilityControlsPanel.js b/js/energy-skate-park/common/view/VisibilityControlsPanel.js
@@ -7,8 +7,10 @@
  * @author Jesse Greenberg (PhET Interactive Simulations)
  */
 
+import merge from '../../../../../phet-core/js/merge.js';
 import Panel from '../../../../../sun/js/Panel.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../Constants.js';
 import EnergySkateParkVisibilityControls from './EnergySkateParkVisibilityControls.js';
 
 class VisibilityControlsPanel extends Panel {
@@ -19,6 +21,8 @@ class VisibilityControlsPanel extends Panel {
    * @param {Object} [options]
    */
   constructor( model, tandem, options ) {
+    options = merge( {}, Constants.PANEL_OPTIONS, options );
+
     const content = new EnergySkateParkVisibilityControls( model, tandem, {
       showPieChartCheckbox: false,
       showSpeedCheckbox: false,

diff --git a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js
@@ -19,6 +19,7 @@ import AccordionBox from '../../../../../sun/js/AccordionBox.js';
 import VerticalCheckboxGroup from '../../../../../sun/js/VerticalCheckboxGroup.js';
 import energySkateParkStrings from '../../../energy-skate-park-strings.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../../common/Constants.js';
 import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js';
 import GraphsConstants from '../GraphsConstants.js';
 import GraphsModel from '../model/GraphsModel.js';
@@ -150,7 +151,7 @@ class EnergyGraphAccordionBox extends AccordionBox {
     xLabelText.centerTop = energyPlot.centerBottom.plusXY( 0, 10 );
     checkboxGroup.rightCenter = yLabel.leftCenter.minusXY( 10, 0 );
 
-    super( contentNode, {
+    super( contentNode, merge( {
       titleNode: titleNode,
       titleAlignX: 'left',
       titleXSpacing: 7,
@@ -159,10 +160,10 @@ class EnergyGraphAccordionBox extends AccordionBox {
       contentYMargin: 2,
       contentXMargin: 4,
       contentYSpacing: 0,
-      stroke: EnergySkateParkColorScheme.panelFill,
+
       expandedProperty: model.energyPlotVisibleProperty,
       tandem: tandem.createTandem( 'accordionBox' )
-    } );
+    }, Constants.PANEL_OPTIONS ) );
 
     // position the elements of the titleNode using global positioning after AccordionBox positions its titleNode
     variableSwitch.centerX = variableSwitch.globalToParentPoint( energyPlot.parentToGlobalPoint( energyPlot.plotPath.center ) ).x;

diff --git a/js/energy-skate-park/measure/view/SkaterPathSensorNode.js b/js/energy-skate-park/measure/view/SkaterPathSensorNode.js
@@ -29,6 +29,7 @@ import VBox from '../../../../../scenery/js/nodes/VBox.js';
 import SunConstants from '../../../../../sun/js/SunConstants.js';
 import energySkateParkStrings from '../../../energy-skate-park-strings.js';
 import energySkatePark from '../../../energySkatePark.js';
+import Constants from '../../common/Constants.js';
 import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js';
 
 const energyEnergyString = energySkateParkStrings.energy.energy;
@@ -151,7 +152,7 @@ class SkaterPathSensorNode extends Node {
     } );
 
     // the body is a rounded rectangle
-    const body = new Rectangle( content.bounds.dilated( 5 ), 5, 5, {
+    const body = new Rectangle( content.bounds.dilated( 5 ), Constants.PANEL_CORNER_RADIUS, Constants.PANEL_CORNER_RADIUS, {
       fill: 'rgb(47,64,113)',
       stroke: 'rgb(210,210,210)',
       lineWidth: 2