search

phetsims / projectile-data-lab

"Projectile Data Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 0 forks source link

Improve the radio button preferences controls #213

Closed samreid closed 4 months ago

samreid commented 5 months ago

@catherinecarter and @matthew-blackman and I discussed improving the radio button controls in the preferences dialog

matthew-blackman commented 5 months ago

@samreid and I experimented with layout improvements for the preferences menu, and got some promising results with the following patch:

```diff Subject: [PATCH] Add PhET-IO intrumentation for interval tool edges - see https://github.com/phetsims/projectile-data-lab/issues/208 --- Index: js/preferences/PreferencesControl.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/preferences/PreferencesControl.ts b/js/preferences/PreferencesControl.ts --- a/js/preferences/PreferencesControl.ts (revision 8370c237f291832f41e67c8a5de8c14ca88195de) +++ b/js/preferences/PreferencesControl.ts (date 1709749709535) @@ -51,10 +51,12 @@ labelSpacing: 10, valueLabelXSpacing: 8, ySpacing: 5, + yAlign: 'top', nestedContent: [], grow: 1, layoutOptions: { - stretch: !providedOptions?.headingControl + stretch: !providedOptions?.headingControl, + bottomMargin: 10 } }, providedOptions ); @@ -69,7 +71,9 @@ options.controlNode.layoutOptions = { row: 0, column: 1, - xAlign: 'right' + verticalSpan: 2, + xAlign: 'right', + leftMargin: 20 }; this.addChild( options.controlNode ); @@ -92,7 +96,7 @@ options.descriptionNode.layoutOptions = { row: 1, column: 0, - horizontalSpan: 2, + horizontalSpan: 1, xAlign: 'left', stretch: true, minContentWidth: 480 ```

Screen Shot 2024-03-06 at 1 28 59 PM

matthew-blackman commented 5 months ago

@catherinecarter we weren't able to do too much customization here without changing common code. Let's discuss how to move this forward and whether it should be part of a broader initiative.

samreid commented 5 months ago

Here is the current version for comparison:

image
catherinecarter commented 5 months ago

I think the preferences menu looks great! Very improved. Nice.

catherinecarter commented 5 months ago

To get the menu to look as the screenshot appears above, the designers decided the best path is to override the common code since there are already plans to update the preferences menu overall. Spending time and effort to update the common code doesn't seem like time and effort worth spending at this point.

matthew-blackman commented 4 months ago

This is to be addressed as part of the common code work being scheduled for the preferences menu. We have done what we can through sim-specific options here. Closing.