Adjusting size of ToolboxPanel to match width of optionsPanel on each…

… screen. #293
phetsims · Aug 8, 2018 · 9abb73f · 9abb73f
1 parent e8cc760
commit 9abb73f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 16 deletions.
diff --git a/js/common/view/SpringScreenView.js b/js/common/view/SpringScreenView.js
@@ -35,7 +35,6 @@ define( function( require ) {
   var StopperButtonNode = require( 'MASSES_AND_SPRINGS/common/view/StopperButtonNode' );
   var StringUtils = require( 'PHETCOMMON/util/StringUtils' );
   var TimeControlNode = require( 'SCENERY_PHET/TimeControlNode' );
-  var ToolboxPanel = require( 'MASSES_AND_SPRINGS/common/view/ToolboxPanel' );
   var Util = require( 'DOT/Util' );
   var Vector2 = require( 'DOT/Vector2' );
 
@@ -228,17 +227,6 @@ define( function( require ) {
         tandem: tandem.createTandem( 'timeControlNode' )
       } );
 
-    // @public {ToolboxPanel} Toolbox Panel
-    this.toolboxPanel = new ToolboxPanel(
-      this.visibleBoundsProperty.get(),
-      this.rulerNode, this.timerNode,
-      model.rulerVisibleProperty,
-      model.timerVisibleProperty,
-      tandem.createTandem( 'toolboxPanel' ), {
-        minWidth: MassesAndSpringsConstants.PANEL_MIN_WIDTH + 21
-      }
-    );
-
     // Buttons controlling the speed of the sim, play/pause button, and the reset button
     this.simControlHBox = new HBox( {
       spacing: this.spacing * 6,

diff --git a/js/energy/view/EnergyScreenView.js b/js/energy/view/EnergyScreenView.js
@@ -13,6 +13,7 @@ define( function( require ) {
   var inherit = require( 'PHET_CORE/inherit' );
   var massesAndSprings = require( 'MASSES_AND_SPRINGS/massesAndSprings' );
   var MassesAndSpringsConstants = require( 'MASSES_AND_SPRINGS/common/MassesAndSpringsConstants' );
+  var ToolboxPanel = require( 'MASSES_AND_SPRINGS/common/view/ToolboxPanel' );
   var VBox = require( 'SCENERY/nodes/VBox' );
   var Vector2 = require( 'DOT/Vector2' );
   var OneSpringScreenView = require( 'MASSES_AND_SPRINGS/common/view/OneSpringScreenView' );
@@ -47,8 +48,19 @@ define( function( require ) {
     // Panel that will display all the toggleable options.
     var optionsPanel = this.createOptionsPanel( optionsVBox, tandem );
 
+    // @private {ToolboxPanel} Toolbox Panel
+    var toolboxPanel = new ToolboxPanel(
+      this.visibleBoundsProperty.get(),
+      this.rulerNode, this.timerNode,
+      model.rulerVisibleProperty,
+      model.timerVisibleProperty,
+      tandem.createTandem( 'toolboxPanel' ), {
+        minWidth: optionsPanel.width
+      }
+    );
+
     // Contains all of the options for the reference lines, gravity, damping, and toolBox
-    var rightPanelsVBox = new VBox( { children: [ optionsPanel, self.toolboxPanel ], spacing: this.spacing * 0.9 } );
+    var rightPanelsVBox = new VBox( { children: [ optionsPanel, toolboxPanel ], spacing: this.spacing * 0.9 } );
     this.addChild( rightPanelsVBox );
     rightPanelsVBox.moveToBack();
 

diff --git a/js/intro/view/IntroScreenView.js b/js/intro/view/IntroScreenView.js
@@ -26,6 +26,7 @@ define( function( require ) {
   var SpringControlPanel = require( 'MASSES_AND_SPRINGS/common/view/SpringControlPanel' );
   var StringUtils = require( 'PHETCOMMON/util/StringUtils' );
   var Text = require( 'SCENERY/nodes/Text' );
+  var ToolboxPanel = require( 'MASSES_AND_SPRINGS/common/view/ToolboxPanel' );
   var TwoSpringScreenView = require( 'MASSES_AND_SPRINGS/common/view/TwoSpringScreenView' );
   var Util = require( 'DOT/Util' );
   var VBox = require( 'SCENERY/nodes/VBox' );
@@ -234,9 +235,20 @@ define( function( require ) {
     // Panel that will display all the toggleable options.
     var optionsPanel = this.createOptionsPanel( optionsVBox, tandem );
 
+    // @private {ToolboxPanel} Toolbox Panel
+    var toolboxPanel = new ToolboxPanel(
+      this.visibleBoundsProperty.get(),
+      this.rulerNode, this.timerNode,
+      model.rulerVisibleProperty,
+      model.timerVisibleProperty,
+      tandem.createTandem( 'toolboxPanel' ), {
+        minWidth: optionsPanel.width
+      }
+    );
+
     // Contains all of the options for the reference lines, gravity, damping, and toolBox
     var rightPanelsVBox = new VBox( {
-      children: [ optionsPanel, self.toolboxPanel, sceneRadioButtonGroup ],
+      children: [ optionsPanel, toolboxPanel, sceneRadioButtonGroup ],
       spacing: this.spacing * 0.9
     } );
     this.addChild( rightPanelsVBox );

diff --git a/js/lab/view/LabScreenView.js b/js/lab/view/LabScreenView.js
@@ -15,6 +15,7 @@ define( function( require ) {
   var massesAndSprings = require( 'MASSES_AND_SPRINGS/massesAndSprings' );
   var MassesAndSpringsConstants = require( 'MASSES_AND_SPRINGS/common/MassesAndSpringsConstants' );
   var OneSpringScreenView = require( 'MASSES_AND_SPRINGS/common/view/OneSpringScreenView' );
+  var ToolboxPanel = require( 'MASSES_AND_SPRINGS/common/view/ToolboxPanel' );
   var VectorVisibilityControlNode = require( 'MASSES_AND_SPRINGS/vectors/view/VectorVisibilityControlNode' );
   var VBox = require( 'SCENERY/nodes/VBox' );
   var Vector2 = require( 'DOT/Vector2' );
@@ -66,8 +67,19 @@ define( function( require ) {
     // Panel that will display all the toggleable options.
     var optionsPanel = this.createOptionsPanel( optionsVBox, tandem );
 
+    // @private {ToolboxPanel} Toolbox Panel
+    var toolboxPanel = new ToolboxPanel(
+      this.visibleBoundsProperty.get(),
+      this.rulerNode, this.timerNode,
+      model.rulerVisibleProperty,
+      model.timerVisibleProperty,
+      tandem.createTandem( 'toolboxPanel' ), {
+        minWidth: optionsPanel.width
+      }
+    );
+
     // Contains all of the options for the reference lines, gravity, damping, and toolBox
-    var rightPanelsVBox = new VBox( { children: [ optionsPanel, self.toolboxPanel ], spacing: this.spacing * 0.9 } );
+    var rightPanelsVBox = new VBox( { children: [ optionsPanel, toolboxPanel ], spacing: this.spacing * 0.9 } );
     this.addChild( rightPanelsVBox );
     rightPanelsVBox.moveToBack();
 

diff --git a/js/vectors/view/VectorsScreenView.js b/js/vectors/view/VectorsScreenView.js
@@ -14,6 +14,7 @@ define( function( require ) {
   var inherit = require( 'PHET_CORE/inherit' );
   var massesAndSprings = require( 'MASSES_AND_SPRINGS/massesAndSprings' );
   var MassesAndSpringsConstants = require( 'MASSES_AND_SPRINGS/common/MassesAndSpringsConstants' );
+  var ToolboxPanel = require( 'MASSES_AND_SPRINGS/common/view/ToolboxPanel' );
   var TwoSpringScreenView = require( 'MASSES_AND_SPRINGS/common/view/TwoSpringScreenView' );
   var ReferenceLineNode = require( 'MASSES_AND_SPRINGS/common/view/ReferenceLineNode' );
   var VBox = require( 'SCENERY/nodes/VBox' );
@@ -121,8 +122,19 @@ define( function( require ) {
     // Panel that will display all the toggleable options.
     var optionsPanel = this.createOptionsPanel( optionsVBox, tandem );
 
+    // @private {ToolboxPanel} Toolbox Panel
+    var toolboxPanel = new ToolboxPanel(
+      this.visibleBoundsProperty.get(),
+      this.rulerNode, this.timerNode,
+      model.rulerVisibleProperty,
+      model.timerVisibleProperty,
+      tandem.createTandem( 'toolboxPanel' ), {
+        minWidth: optionsPanel.width
+      }
+    );
+
     // Contains all of the options for the reference lines, gravity, damping, and toolBox
-    var rightPanelsVBox = new VBox( { children: [ optionsPanel, self.toolboxPanel ], spacing: this.spacing * 0.9 } );
+    var rightPanelsVBox = new VBox( { children: [ optionsPanel, toolboxPanel ], spacing: this.spacing * 0.9 } );
     this.addChild( rightPanelsVBox );
     rightPanelsVBox.moveToBack();