Move info button to Variability screen, see #153

phetsims · Apr 25, 2023 · bb48e91 · bb48e91
1 parent d0baf2d
commit bb48e91
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 36 deletions.
diff --git a/js/common/view/CAVAccordionBox.ts b/js/common/view/CAVAccordionBox.ts
@@ -9,7 +9,7 @@
 
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
-import { ManualConstraint, Node, Rectangle } from '../../../../scenery/js/imports.js';
+import { Node, Rectangle } from '../../../../scenery/js/imports.js';
 import AccordionBox, { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js';
 import CAVConstants from '../CAVConstants.js';
 import optionize from '../../../../phet-core/js/optionize.js';
@@ -18,15 +18,11 @@ import CAVModel from '../model/CAVModel.js';
 import ValueReadoutsNode from './ValueReadoutsNode.js';
 import { Shape } from '../../../../kite/js/imports.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
-import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js';
-import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
-import VariabilityModel from '../../variability/model/VariabilityModel.js';
 
 type SelfOptions = {
   valueReadoutsNode: ValueReadoutsNode | null;
   contentNodeOffsetY: number;
   leftMargin: number;
-  infoShowingProperty: TReadOnlyProperty<boolean> | null;
 };
 export type CAVAccordionBoxOptions =
   SelfOptions
@@ -102,31 +98,6 @@ export default class CAVAccordionBox extends AccordionBox {
     super( backgroundNode, options );
 
     model.resetEmitter.addListener( () => this.reset() );
-
-    if ( options.infoShowingProperty ) {
-      const infoButton = new InfoButton( {
-        iconFill: 'cornflowerblue',
-        scale: 0.5,
-        rightTop: backgroundNode.rightTop.plusXY( -5, 5 ),
-        touchAreaDilation: 5,
-        tandem: options.tandem.createTandem( 'infoButton' ),
-        listener: () => {
-
-          // TODO: cast?
-          ( model as VariabilityModel ).isInfoShowingProperty.value = true;
-        }
-      } );
-      backgroundNode.addChild( infoButton );
-
-      // NOTE: this overlaps the accordion box top panel
-      ManualConstraint.create( this, [ backgroundNode, infoButton ],
-        ( backgroundWrapper, infoButtonWrapper ) => {
-
-          // TODO: Is it a faux pas to move outside of the wrapper bounds? I couldn't figure how to be a child of the accordion
-          // box content, but overlap the title bar
-          infoButtonWrapper.rightTop = backgroundWrapper.rightTop.plusXY( 3, -35 );
-        } );
-    }
   }
 }
 

diff --git a/js/mean-and-median/view/MeanAndMedianScreenView.ts b/js/mean-and-median/view/MeanAndMedianScreenView.ts
@@ -81,8 +81,7 @@ export default class MeanAndMedianScreenView extends CAVScreenView {
           contentNodeOffsetY: 0,
           top: top,
           valueReadoutsNode: new ValueReadoutsNode( model ),
-          centerX: layoutBounds.centerX,
-          infoShowingProperty: null
+          centerX: layoutBounds.centerX
         } );
     }, options );
 

diff --git a/js/median/view/MedianScreenView.ts b/js/median/view/MedianScreenView.ts
@@ -69,8 +69,7 @@ export default class MedianScreenView extends CAVScreenView {
           contentNodeOffsetY: -6,
           top: top,
           valueReadoutsNode: null,
-          centerX: layoutBounds.centerX,
-          infoShowingProperty: null
+          centerX: layoutBounds.centerX
         } );
     }, options );
   }

diff --git a/js/variability/view/VariabilityScreenView.ts b/js/variability/view/VariabilityScreenView.ts
@@ -31,6 +31,7 @@ import CAVAccordionBox from '../../common/view/CAVAccordionBox.js';
 import VariabilityReadoutsNode from './VariabilityReadoutsNode.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js';
 
 // TODO: Copied from somewhere. What's the best pattern?
 const TEXT_OPTIONS = {
@@ -79,6 +80,21 @@ export default class VariabilityScreenView extends CAVScreenView {
         tandem: tandem.createTandem( 'plotNode' )
       } );
 
+      const infoButton = new InfoButton( {
+        iconFill: 'cornflowerblue',
+        scale: 0.5,
+        touchAreaDilation: 5,
+        tandem: options.tandem.createTandem( 'infoButton' ),
+        listener: () => {
+          model.isInfoShowingProperty.value = true;
+        },
+        top: 0,
+
+        // TODO: How to position this properly?
+        right: accordionBoxContents.width + 130
+      } );
+      accordionBoxContents.addChild( infoButton );
+
       afterInit = () => {      // NOTE: This assumes that the NumberLineNode in the play area and in the dot plot have the same characteristics:
         // * Same font
         // * Same offset and scale
@@ -94,6 +110,15 @@ export default class VariabilityScreenView extends CAVScreenView {
           ( variabilityRadioButtonGroupWrapper, accordionBoxWrapper ) => {
             variabilityRadioButtonGroupWrapper.top = accordionBoxWrapper.top;
           } );
+
+        // NOTE: this overlaps the accordion box top panel
+        // ManualConstraint.create( this, [ accordionBoxContents, infoButton ],
+        //   ( backgroundWrapper, infoButtonWrapper ) => {
+        //
+        //     // TODO: Is it a faux pas to move outside of the wrapper bounds? I couldn't figure how to be a child of the accordion
+        //     // box content, but overlap the title bar
+        //     infoButtonWrapper.rightTop = backgroundWrapper.rightTop.plusXY( 3, -35 );
+        //   } );
       };
       return new CAVAccordionBox( model, accordionBoxContents, new ToggleNode( model.selectedVariabilityProperty, [ {
           value: VariabilityMeasure.RANGE,
@@ -124,8 +149,7 @@ export default class VariabilityScreenView extends CAVScreenView {
           contentNodeOffsetY: 0,
           top: top,
           valueReadoutsNode: new VariabilityReadoutsNode( model ),
-          right: layoutBounds.right - CAVConstants.SCREEN_VIEW_X_MARGIN,
-          infoShowingProperty: model.isInfoShowingProperty
+          right: layoutBounds.right - CAVConstants.SCREEN_VIEW_X_MARGIN
         } );
 
     }, options );