final tweaks to layout, #50

phetsims · Jul 18, 2017 · d19ef3b · d19ef3b
1 parent 59554c8
commit d19ef3b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 17 deletions.
diff --git a/js/ohms-law/OhmsLawConstants.js b/js/ohms-law/OhmsLawConstants.js
@@ -27,7 +27,7 @@ define( function( require ) {
     FONT_FAMILY: 'Times New Roman',
 
     // control panel
-    SLIDERS_HORIZONTAL_SEPARATION: 35,
+    SLIDER_WIDTH: 89,
 
     // slider unit
     SLIDER_HEIGHT: 210,

diff --git a/js/ohms-law/view/ControlPanel.js b/js/ohms-law/view/ControlPanel.js
@@ -70,7 +70,7 @@ define( function( require ) {
 
     // Use a content node so that the Panel can surround it fully
     var content = new HBox( {
-        spacing: OhmsLawConstants.SLIDERS_HORIZONTAL_SEPARATION,
+        spacing: 30, // empirically determined
         children: [ voltageSlider, resistanceSlider ]
       }
     );

diff --git a/js/ohms-law/view/OhmsLawScreenView.js b/js/ohms-law/view/OhmsLawScreenView.js
@@ -87,7 +87,7 @@ define( function( require ) {
     var rightSideLayout = new VBox( {
       spacing: 15,
       children: [ controlPanel, buttons ],
-      right: this.layoutBounds.width - 75, // empirically determined
+      right: this.layoutBounds.width - 50, // empirically determined
       centerY: this.layoutBounds.centerY
     } );
     this.addChild( rightSideLayout );

diff --git a/js/ohms-law/view/SliderUnit.js b/js/ohms-law/view/SliderUnit.js
@@ -20,6 +20,9 @@ define( function( require ) {
   var ohmsLaw = require( 'OHMS_LAW/ohmsLaw' );
   var OhmsLawConstants = require( 'OHMS_LAW/ohms-law/OhmsLawConstants' );
 
+  // constants
+  var READOUT_SPACING = 6;
+
   /**
    * @param {Property.<number>} property
    * @param {RangeWithValue} range
@@ -47,62 +50,56 @@ define( function( require ) {
       rotation: -Math.PI / 2,
 
       trackSize: new Dimension2( OhmsLawConstants.SLIDER_HEIGHT, 4 ),
-      x: 0,
       keyboardStep: options.keyboardStep,
       shiftKeyboardStep: options.shiftKeyboardStep,
       numberDecimalPlaces: options.numberDecimalPlaces,
       tandem: tandem.createTandem( 'slider' )
     } );
 
-    // Set the maximum width that text can be in the slider unit based on the width of the HSlider.
-    var maxTextWidth = slider.width * 2;
-
     var symbolText = new Text( symbolString, {
       font: OhmsLawConstants.SYMBOL_FONT,
       fill: OhmsLawConstants.BLUE_COLOR,
-      centerX: 0,
-      maxWidth: maxTextWidth,
+      maxWidth: OhmsLawConstants.SLIDER_WIDTH,
       tandem: tandem.createTandem( 'symbolText' )
     } );
 
     var nameText = new Text( nameString, {
       font: OhmsLawConstants.NAME_FONT,
       fill: OhmsLawConstants.BLUE_COLOR,
-      centerX: 0,
-      maxWidth: maxTextWidth,
+      maxWidth: OhmsLawConstants.SLIDER_WIDTH,
       tandem: tandem.createTandem( 'nameText' )
     } );
 
     // We want these two close together, like one head unit
     var headerNode = new VBox( {
-      spacing: -10, // empirically determined
+      spacing: -5, // empirically determined
       children: [ symbolText, nameText ]
     } );
 
     var valueText = new Text( Util.toFixed( range.max, options.numberDecimalPlaces ), {
       font: OhmsLawConstants.READOUT_FONT,
       fill: OhmsLawConstants.BLACK_COLOR,
-      right: 20, // empirically determined
       tandem: tandem.createTandem( 'valueText' )
     } );
 
     var unitText = new Text( unitString, {
       font: OhmsLawConstants.UNIT_FONT,
       fill: OhmsLawConstants.BLUE_COLOR,
       left: valueText.right / 2,
-      maxWidth: maxTextWidth / 2,
+      maxWidth: OhmsLawConstants.SLIDER_WIDTH - valueText.width - READOUT_SPACING, // Size unit with the max value next to.
       tandem: tandem.createTandem( 'unitText' )
     } );
 
     // The readout should be horizontally aligned
     var readout = new HBox( {
-      spacing: 6,
+      spacing: READOUT_SPACING,
       children: [ valueText, unitText ]
     } );
 
     // Background for centering
     var readoutBackground = Rectangle.bounds( readout.bounds, {
-      children: [ readout ]
+      children: [ readout ],
+      maxWidth: OhmsLawConstants.SLIDER_WIDTH
     } );
 
     // Add components in a vertically spaced stack
@@ -118,7 +115,6 @@ define( function( require ) {
     } );
 
     options.tandem = tandem;
-
     this.mutate( options );
   }