Style accordion box title nodes, see #2

phetsims · Oct 12, 2019 · e2ceeeb · e2ceeeb
1 parent 8a3144a
commit e2ceeeb
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 2 deletions.
diff --git a/js/common/NumberPlayConstants.js b/js/common/NumberPlayConstants.js
@@ -10,6 +10,7 @@ define( require => {
 
   // modules
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
+  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
 
   const NumberPlayConstants = {
 
@@ -30,6 +31,9 @@ define( require => {
     // options for all AccordionBox instances
     ACCORDION_BOX_OPTIONS: {
       resize: false,
+      titleAlignX: 'left',
+      titleXSpacing: 8,
+      showTitleWhenExpanded: false,
       cornerRadius: 6,
       titleYMargin: 10,
       buttonXMargin: 10,
@@ -40,6 +44,7 @@ define( require => {
         sideLength: 20
       }
     },
+    ACCORDION_BOX_TITLE_FONT: new PhetFont( 16 ),
 
     // colors
     TEN_SCREEN_BACKGROUND: 'rgb( 171, 255, 195 )',

diff --git a/js/common/view/NumberAccordionBox.js b/js/common/view/NumberAccordionBox.js
@@ -74,7 +74,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
-        titleNode: new Text( numberString ),
+        titleNode: new Text( numberString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH

diff --git a/js/common/view/NumeralAccordionBox.js b/js/common/view/NumeralAccordionBox.js
@@ -17,6 +17,10 @@ define( require => {
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
   const NumberPlayConstants = require( 'NUMBER_PLAY/common/NumberPlayConstants' );
   const PhetFont = require( 'SCENERY_PHET/PhetFont' );
+  const Text = require( 'SCENERY/nodes/Text' );
+
+  // strings
+  const numeralString = require( 'string!NUMBER_PLAY/numeral' );
 
   class NumeralAccordionBox extends AccordionBox {
 
@@ -27,6 +31,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
+        titleNode: new Text( numeralString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: 200
       }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );

diff --git a/js/common/view/TenFrameAccordionBox.js b/js/common/view/TenFrameAccordionBox.js
@@ -28,7 +28,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
-        titleNode: new Text( tenFrameString ),
+        titleNode: new Text( tenFrameString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH

diff --git a/number-play-strings_en.json b/number-play-strings_en.json
@@ -74,6 +74,9 @@
   "number": {
     "value": "Number"
   },
+  "numeral": {
+    "value": "Numeral"
+  },
   "tenFrame": {
     "value": "Ten Frame"
   }