Add CompleteNuclideChartIconNode. See #46.

phetsims · May 26, 2023 · 7dce34a · 7dce34a
1 parent 79a3c1d
commit 7dce34a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/js/chart-intro/view/ChartIntroScreenView.ts b/js/chart-intro/view/ChartIntroScreenView.ts
@@ -29,10 +29,13 @@ import StringProperty from '../../../../axon/js/StringProperty.js';
 import ParticleView from '../../../../shred/js/view/ParticleView.js';
 import NuclideChartAccordionBox from './NuclideChartAccordionBox.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
+import CompleteNuclideChartIconNode from './CompleteNuclideChartIconNode.js';
 
 // types
 export type NuclideChartIntroScreenViewOptions = BANScreenViewOptions;
 
+const CHART_VERTICAL_MARGINS = 10;
+
 class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
 
   private readonly periodicTableAndIsotopeSymbol: PeriodicTableAndIsotopeSymbol;
@@ -174,13 +177,14 @@ class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
     const nuclideChartAccordionBox = new NuclideChartAccordionBox( this.model.particleAtom.protonCountProperty,
       this.model.particleAtom.neutronCountProperty, this.periodicTableAndIsotopeSymbol.width,
       this.model.selectedNuclideChartProperty );
-    nuclideChartAccordionBox.top = this.periodicTableAndIsotopeSymbol.bottom + 5;
+    nuclideChartAccordionBox.top = this.periodicTableAndIsotopeSymbol.bottom + CHART_VERTICAL_MARGINS;
     nuclideChartAccordionBox.left = this.periodicTableAndIsotopeSymbol.left;
     this.addChild( nuclideChartAccordionBox );
 
     const partialChartRadioButton = new RectangularRadioButtonGroup<SelectedChartType>( this.model.selectedNuclideChartProperty,
-      [ { value: 'partial', createNode: () => new Text( 'partial' ) }, { value: 'zoom', createNode: () => new Text( 'zoom' ) } ],
-      { leftTop: nuclideChartAccordionBox.leftBottom, orientation: 'horizontal' } );
+      [ { value: 'partial', createNode: () => new CompleteNuclideChartIconNode() }, { value: 'zoom', createNode: () => new Text( 'zoom' ) } ],
+      { left: nuclideChartAccordionBox.left, top: nuclideChartAccordionBox.bottom + CHART_VERTICAL_MARGINS, orientation: 'horizontal',
+        radioButtonOptions: { baseColor: BANColors.chartRadioButtonsBackgroundColorProperty } } );
     this.addChild( partialChartRadioButton );
 
     // add the particleViewLayerNode after everything else so particles are in the top layer

diff --git a/js/chart-intro/view/CompleteNuclideChartIconNode.ts b/js/chart-intro/view/CompleteNuclideChartIconNode.ts
@@ -17,7 +17,7 @@ class CompleteNuclideChartIconNode extends Node {
   public constructor() {
 
     const cellLayerNode = new Node();
-    const smallChartTransform = NuclideChartAccordionBox.getChartTransform( 5 );
+    const smallChartTransform = NuclideChartAccordionBox.getChartTransform( 3.5 );
     NuclideChartNode.createNuclideChart( cellLayerNode, smallChartTransform, smallChartTransform.modelToViewDeltaX( 1 ) );
 
     super( { children: [ cellLayerNode ] } );

diff --git a/js/chart-intro/view/NuclideChartAccordionBox.ts b/js/chart-intro/view/NuclideChartAccordionBox.ts
@@ -27,7 +27,7 @@ class NuclideChartAccordionBox extends AccordionBox {
   public constructor( protonCountProperty: TReadOnlyProperty<number>, neutronCountProperty: TReadOnlyProperty<number>,
                       minWidth: number, selectedNuclideChartProperty: TReadOnlyProperty<SelectedChartType> ) {
 
-    const partialChartTransform = NuclideChartAccordionBox.getChartTransform( 20 );
+    const partialChartTransform = NuclideChartAccordionBox.getChartTransform( 18 );
     const focusedChartTransform = NuclideChartAccordionBox.getChartTransform( 10 );
     const zoomInChartTransform = NuclideChartAccordionBox.getChartTransform( 30 );
 

diff --git a/js/common/BANColors.ts b/js/common/BANColors.ts
@@ -95,6 +95,10 @@ const BANColors = {
 
   nuclideChartBorderColorProperty: new ProfileColorProperty( buildANucleus, 'nuclideChartBorderColor', {
     default: new Color( 197, 191, 197 )
+  } ),
+
+  chartRadioButtonsBackgroundColorProperty: new ProfileColorProperty( buildANucleus, 'chartRadioButtonsBackgroundColor', {
+    default: new Color( 241, 250, 254 )
   } )
 };