support for dynamic locale, phetsims/graphing-quadratics#178

phetsims · Jun 6, 2023 · 8e3c0ec · 8e3c0ec
1 parent 6513527
commit 8e3c0ec
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/js/common/view/EquationAccordionBox.ts b/js/common/view/EquationAccordionBox.ts
@@ -45,15 +45,15 @@ export default class EquationAccordionBox extends AccordionBox {
     };
 
     // Save Line button
-    const saveLineButton = new TextPushButton( GraphingLinesStrings.saveLine, {
+    const saveLineButton = new TextPushButton( GraphingLinesStrings.saveLineStringProperty, {
       listener: () => savedLines.add( interactiveLineProperty.value.withColor( GLColors.SAVED_LINE_NORMAL ) ),
       font: BUTTON_FONT,
       baseColor: 'white',
       xMargin: 10
     } );
 
     // Erase Lines button
-    const eraseLinesButton = new TextPushButton( GraphingLinesStrings.eraseLines, {
+    const eraseLinesButton = new TextPushButton( GraphingLinesStrings.eraseLinesStringProperty, {
       listener: () => savedLines.clear(),
       font: BUTTON_FONT,
       baseColor: 'white',

diff --git a/js/common/view/GraphControlPanel.ts b/js/common/view/GraphControlPanel.ts
@@ -77,7 +77,7 @@ export default class GraphControlPanel extends Panel {
     const slopeCheckbox = new Checkbox( slopeToolVisibleProperty, new HBox( {
       spacing: ICON_SPACING,
       children: [
-        new Text( GraphingLinesStrings.slope, TEXT_OPTIONS ),
+        new Text( GraphingLinesStrings.slopeStringProperty, TEXT_OPTIONS ),
         GLIconFactory.createSlopeToolIcon( ICON_SIZE )
       ]
     } ) );

diff --git a/js/common/view/LineFormsScreenView.ts b/js/common/view/LineFormsScreenView.ts
@@ -8,7 +8,7 @@
 
 import ScreenView from '../../../../joist/js/ScreenView.js';
 import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
-import { Node } from '../../../../scenery/js/imports.js';
+import { Node, VBox } from '../../../../scenery/js/imports.js';
 import graphingLines from '../../graphingLines.js';
 import GLConstants from '../GLConstants.js';
 import LineFormsModel from '../model/LineFormsModel.js';
@@ -54,9 +54,11 @@ export default class LineFormsScreenView extends ScreenView {
     resetAllButton.bottom = this.layoutBounds.height - GLConstants.SCREEN_Y_MARGIN;
 
     // Parent for all controls, to simplify layout
-    const controlsParent = new Node();
-    controlsParent.addChild( equationAccordionBox );
-    controlsParent.addChild( graphControlPanel );
+    const controlsParent = new VBox( {
+      children: [ equationAccordionBox, graphControlPanel ],
+      spacing: 15,
+      align: 'center'
+    } );
 
     // rendering order
     this.addChild( controlsParent );
@@ -70,7 +72,6 @@ export default class LineFormsScreenView extends ScreenView {
     // position of control panels:
     const xMargin = 10;
     const yMargin = 20;
-    const ySpacing = 15;
 
     // get the amount of canvas width that's available for the control panels
     const availableControlPanelWidth = this.layoutBounds.width - graphNode.right - ( 2 * xMargin );
@@ -83,15 +84,11 @@ export default class LineFormsScreenView extends ScreenView {
       graphControlPanel.setScaleMagnitude( availableControlPanelWidth / graphControlPanel.width );
     }
 
-    // vertically stack controls, horizontally align centers
-    equationAccordionBox.centerX = availableControlPanelWidth / 2;
-    equationAccordionBox.y = 0;
-    graphControlPanel.centerX = equationAccordionBox.centerX;
-    graphControlPanel.top = equationAccordionBox.bottom + ySpacing;
-
     // center controls in the space to the right of the graph
-    controlsParent.centerX = graphNode.right + xMargin + ( availableControlPanelWidth / 2 );
-    controlsParent.top = yMargin;
+    controlsParent.boundsProperty.link( () => {
+      controlsParent.centerX = graphNode.right + xMargin + ( availableControlPanelWidth / 2 );
+      controlsParent.top = yMargin;
+    } );
 
     // graphContentsToggleButton at lower right of graph
     graphContentsToggleButton.left = model.modelViewTransform.modelToViewX( model.graph.xRange.max ) + 21;