From 9ec50c31793e09f2ec315f239a108331117a11ed Mon Sep 17 00:00:00 2001
From: Jesse <jesse.greenberg@colorado.edu>
Date: Wed, 22 Mar 2023 18:29:29 -0400
Subject: [PATCH] new strings and layout for sound options content, see
 https://github.com/phetsims/quadrilateral/issues/282

---
 js/QuadrilateralStrings.ts                    |  5 ++--
 .../sound/QuadrilateralSoundOptionsNode.ts    | 30 +++++++++++--------
 quadrilateral-strings_en.json                 | 13 ++++----
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/js/QuadrilateralStrings.ts b/js/QuadrilateralStrings.ts
index b893c23d..7efa850f 100644
--- a/js/QuadrilateralStrings.ts
+++ b/js/QuadrilateralStrings.ts
@@ -47,8 +47,9 @@ type StringsType = {
     'shapeSoundOptionsStringProperty': LinkableProperty<string>;
     'shapeSoundOptionsDescriptionStringProperty': LinkableProperty<string>;
     'layerSoundDesignDescriptionStringProperty': LinkableProperty<string>;
-    'independentSoundDesignDescriptionStringProperty': LinkableProperty<string>;
-    'playSoundsForeverStringProperty': LinkableProperty<string>;
+    'emphasisSoundDesignDescriptionStringProperty': LinkableProperty<string>;
+    'soundsPlayForeverDescriptionStringProperty': LinkableProperty<string>;
+    'soundsPlayForeverLabelStringProperty': LinkableProperty<string>;
   };
   'smallStepsStringProperty': LinkableProperty<string>;
   'a11y': {
diff --git a/js/quadrilateral/view/sound/QuadrilateralSoundOptionsNode.ts b/js/quadrilateral/view/sound/QuadrilateralSoundOptionsNode.ts
index 4ad81539..2aae8fd7 100644
--- a/js/quadrilateral/view/sound/QuadrilateralSoundOptionsNode.ts
+++ b/js/quadrilateral/view/sound/QuadrilateralSoundOptionsNode.ts
@@ -17,13 +17,15 @@ import PreferencesPanelSection from '../../../../../joist/js/preferences/Prefere
 import AquaRadioButton from '../../../../../sun/js/AquaRadioButton.js';
 import QuadrilateralStrings from '../../../QuadrilateralStrings.js';
 import soundManager from '../../../../../tambo/js/soundManager.js';
+import Vector2 from '../../../../../dot/js/Vector2.js';
 
 // constants
 const shapeSoundsOptionsStringProperty = QuadrilateralStrings.preferencesDialog.shapeSoundOptionsStringProperty;
 const shapeSoundsOptionsDescriptionStringProperty = QuadrilateralStrings.preferencesDialog.shapeSoundOptionsDescriptionStringProperty;
 const preferencesDialogLayerSoundDesignDescriptionStringProperty = QuadrilateralStrings.preferencesDialog.layerSoundDesignDescriptionStringProperty;
-const preferencesDialogIndependentSoundDesignDescriptionStringProperty = QuadrilateralStrings.preferencesDialog.independentSoundDesignDescriptionStringProperty;
-const preferencesDialogPlaySoundsForeverStringProperty = QuadrilateralStrings.preferencesDialog.playSoundsForeverStringProperty;
+const preferencesDialogEmphasisSoundDesignDescriptionStringProperty = QuadrilateralStrings.preferencesDialog.emphasisSoundDesignDescriptionStringProperty;
+const preferencesDialogSoundsPlayForeverLabelStringProperty = QuadrilateralStrings.preferencesDialog.soundsPlayForeverLabelStringProperty;
+const preferencesDialogSoundsPlayForeverDescriptionStringProperty = QuadrilateralStrings.preferencesDialog.soundsPlayForeverDescriptionStringProperty;
 const tracksPlayForeverCheckedContextResponseStringProperty = QuadrilateralStrings.a11y.preferencesDialog.tracksPlayForeverCheckbox.checkedContextResponseStringProperty;
 const tracksPlayForeverUncheckedContextResponseStringProperty = QuadrilateralStrings.a11y.preferencesDialog.tracksPlayForeverCheckbox.uncheckedContextResponseStringProperty;
 
@@ -34,7 +36,7 @@ export default class QuadrilateralSoundOptionsNode extends PreferencesPanelSecti
 
   public constructor( model: QuadrilateralSoundOptionsModel, tandem: Tandem ) {
 
-    const soundDesignLabelText = new VoicingText( shapeSoundsOptionsStringProperty, PreferencesDialog.PANEL_SECTION_LABEL_OPTIONS );
+    const soundDesignLabelText = new Text( shapeSoundsOptionsStringProperty, PreferencesDialog.PANEL_SECTION_LABEL_OPTIONS );
     const soundDesignDescriptionText = new VoicingText( shapeSoundsOptionsDescriptionStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS );
 
     const soundDesignRadioButtonGroup = new AquaRadioButtonGroup( model.soundDesignProperty, [
@@ -48,10 +50,10 @@ export default class QuadrilateralSoundOptionsNode extends PreferencesPanelSecti
       },
       {
         value: SoundDesign.TRACKS_EMPHASIS,
-        createNode: () => new Text( preferencesDialogIndependentSoundDesignDescriptionStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS ),
+        createNode: () => new Text( preferencesDialogEmphasisSoundDesignDescriptionStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS ),
         tandemName: `emphasisTracksSoundView${AquaRadioButton.TANDEM_NAME_SUFFIX}`,
         options: {
-          voicingNameResponse: preferencesDialogIndependentSoundDesignDescriptionStringProperty
+          voicingNameResponse: preferencesDialogEmphasisSoundDesignDescriptionStringProperty
         }
       }
     ], {
@@ -62,19 +64,21 @@ export default class QuadrilateralSoundOptionsNode extends PreferencesPanelSecti
       tandem: tandem.createTandem( 'soundDesignRadioButtonGroup' )
     } );
 
-    const tracksPlayForeverLabel = new Text( preferencesDialogPlaySoundsForeverStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS );
-    const tracksPlayForeverCheckbox = new Checkbox( model.tracksPlayForeverProperty, tracksPlayForeverLabel, {
+    const tracksPlayForeverDescriptionText = new VoicingText( preferencesDialogSoundsPlayForeverDescriptionStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS );
+
+    const tracksPlayForeverLabelText = new Text( preferencesDialogSoundsPlayForeverLabelStringProperty, PreferencesDialog.PANEL_SECTION_CONTENT_OPTIONS );
+    const tracksPlayForeverCheckbox = new Checkbox( model.tracksPlayForeverProperty, tracksPlayForeverLabelText, {
       tandem: tandem.createTandem( 'tracksPlayForeverCheckbox' ),
 
       // voicing
-      voicingNameResponse: preferencesDialogPlaySoundsForeverStringProperty,
+      voicingNameResponse: preferencesDialogSoundsPlayForeverLabelStringProperty,
       checkedContextResponse: tracksPlayForeverCheckedContextResponseStringProperty,
       uncheckedContextResponse: tracksPlayForeverUncheckedContextResponseStringProperty
     } );
 
     super( {
       contentNode: new Node( {
-        children: [ soundDesignLabelText, soundDesignDescriptionText, soundDesignRadioButtonGroup, tracksPlayForeverCheckbox ]
+        children: [ soundDesignLabelText, soundDesignDescriptionText, soundDesignRadioButtonGroup, tracksPlayForeverDescriptionText, tracksPlayForeverCheckbox ]
       } ),
 
       // The shape sound options should only be available when sounds are enabled. joist disables all audio
@@ -84,10 +88,10 @@ export default class QuadrilateralSoundOptionsNode extends PreferencesPanelSecti
     } );
 
     // layout
-    soundDesignDescriptionText.leftTop = soundDesignLabelText.leftBottom.plusXY( 0, 5 );
-    soundDesignRadioButtonGroup.leftTop = soundDesignDescriptionText.leftBottom.plusXY( PreferencesDialog.CONTENT_INDENTATION_SPACING, 5 );
-    tracksPlayForeverCheckbox.left = soundDesignLabelText.left;
-    tracksPlayForeverCheckbox.top = soundDesignRadioButtonGroup.bottom + PreferencesDialog.CONTENT_SPACING;
+    soundDesignDescriptionText.leftTop = soundDesignLabelText.leftBottom.plusXY( 0, PreferencesDialog.VERTICAL_CONTENT_SPACING );
+    soundDesignRadioButtonGroup.leftTop = soundDesignDescriptionText.leftBottom.plusXY( PreferencesDialog.CONTENT_INDENTATION_SPACING, PreferencesDialog.VERTICAL_CONTENT_SPACING );
+    tracksPlayForeverDescriptionText.leftTop = new Vector2( soundDesignLabelText.left, soundDesignRadioButtonGroup.bottom + PreferencesDialog.CONTENT_SPACING );
+    tracksPlayForeverCheckbox.leftTop = tracksPlayForeverDescriptionText.leftBottom.plusXY( PreferencesDialog.CONTENT_INDENTATION_SPACING, PreferencesDialog.VERTICAL_CONTENT_SPACING );
 
     this.disposeQuadrilateralSoundOptionsNode = () => {
       soundDesignRadioButtonGroup.dispose();
diff --git a/quadrilateral-strings_en.json b/quadrilateral-strings_en.json
index 923ade24..6c9d446b 100644
--- a/quadrilateral-strings_en.json
+++ b/quadrilateral-strings_en.json
@@ -90,13 +90,16 @@
     "value": "Choose the sound design you hear as you create different shapes."
   },
   "preferencesDialog.layerSoundDesignDescription": {
-    "value": "Layered sounds emphasize shared shape qualities (default)"
+    "value": "Sounds layer to emphasize shared shape qualities"
   },
-  "preferencesDialog.independentSoundDesignDescription": {
-    "value": "Sounds emphasize independent shapes"
+  "preferencesDialog.emphasisSoundDesignDescription": {
+    "value": "Unique sounds identify each shape"
   },
-  "preferencesDialog.playSoundsForever": {
-    "value": "Play Shape Sounds forever when checked in sim."
+  "preferencesDialog.soundsPlayForeverDescription": {
+    "value": "Change how long shape sounds play when checked in sim."
+  },
+  "preferencesDialog.soundsPlayForeverLabel": {
+    "value": "Play shape sounds forever"
   },
   "smallSteps": {
     "value": "Small Steps"