diff --git a/js/common/view/EquationAccordionBox.ts b/js/common/view/EquationAccordionBox.ts index 45b7dac7..53ff6cb9 100644 --- a/js/common/view/EquationAccordionBox.ts +++ b/js/common/view/EquationAccordionBox.ts @@ -45,7 +45,7 @@ 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', @@ -53,7 +53,7 @@ export default class EquationAccordionBox extends AccordionBox { } ); // 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 index b4e19609..70fdc4a2 100644 --- 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 index 054229b5..3360082d 100644 --- 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;