use icons for single/multiple selector buttons, see #80

phetsims · Jan 17, 2025 · e4a35ed · e4a35ed
1 parent c03aefd
commit e4a35ed
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
@@ -12,8 +12,10 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
+import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import EraserButton from '../../../../scenery-phet/js/buttons/EraserButton.js';
+import ShadedSphereNode from '../../../../scenery-phet/js/ShadedSphereNode.js';
 import { HBox, Node, NodeOptions, RichText, RichTextOptions, Text, VBox } from '../../../../scenery/js/imports.js';
 import AquaRadioButtonGroup, { AquaRadioButtonGroupItem } from '../../../../sun/js/AquaRadioButtonGroup.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
@@ -32,12 +34,14 @@ import { StateDirection } from '../model/StateDirection.js';
 import BlochSphereNumericalEquationNode from './BlochSphereNumericalEquationNode.js';
 import MagneticFieldControl from './MagneticFieldControl.js';
 import MeasurementTimerControl from './MeasurementTimerControl.js';
-import SystemUnderTestNode from './SystemUnderTestNode.js';
+import SystemUnderTestNode, { ATOM_NODE_OPTIONS } from './SystemUnderTestNode.js';
 
 type SelfOptions = EmptySelfOptions;
-
 type BlochSphereMeasurementAreaOptions = SelfOptions & WithRequired<NodeOptions, 'tandem'>;
 
+// constants
+const TIMES = MathSymbols.TIMES;
+
 export default class BlochSphereMeasurementArea extends Node {
 
   public constructor( model: BlochSphereModel, providedOptions: BlochSphereMeasurementAreaOptions ) {
@@ -146,16 +150,27 @@ export default class BlochSphereMeasurementArea extends Node {
     const radioButtonItems = [ true, false ].map(
       isSingleMeasurement => {
         return {
-          createNode: () => new Text( isSingleMeasurement ? 'Single' : 'Multiple', { font: new PhetFont( 16 ) } ),
+          createNode: () => new HBox( {
+            children: [
+              new ShadedSphereNode( 14, ATOM_NODE_OPTIONS ),
+              new Text( isSingleMeasurement ? `${TIMES}1` : `${TIMES}10`, { font: new PhetFont( 18 ) } )
+            ],
+            spacing: 5
+          } ),
           value: isSingleMeasurement,
           tandemName: isSingleMeasurement ? 'singleMeasurementRadioButton' : 'multipleMeasurementRadioButton'
         };
       }
     );
-    const singleOrMultipleRadioButtonGroup = new AquaRadioButtonGroup( model.isSingleMeasurementModeProperty, radioButtonItems, {
-      orientation: 'vertical',
-      tandem: providedOptions.tandem.createTandem( 'singleOrMultipleRadioButtonGroup' )
-    } );
+    const singleOrMultipleRadioButtonGroup = new AquaRadioButtonGroup(
+      model.isSingleMeasurementModeProperty,
+      radioButtonItems,
+      {
+        orientation: 'vertical',
+        stretch: false,
+        tandem: providedOptions.tandem.createTandem( 'singleOrMultipleRadioButtonGroup' )
+      }
+    );
 
     const basisRadioButtonTextOptions: RichTextOptions = {
       font: new PhetFont( 18 ),

diff --git a/js/bloch-sphere/view/SystemUnderTestNode.ts b/js/bloch-sphere/view/SystemUnderTestNode.ts
@@ -21,7 +21,7 @@ import { SpinMeasurementState } from '../model/SpinMeasurementState.js';
 import MagneticFieldNode from './MagneticFieldNode.js';
 
 const ATOM_RADIUS = 18; // in view coordinates
-const ATOM_NODE_OPTIONS = {
+export const ATOM_NODE_OPTIONS = {
   mainColor: Color.RED,
   highlightColor: Color.RED.colorUtilsBrighter( 0.7 )
 };