p5.js-web-editor icon indicating copy to clipboard operation
p5.js-web-editor copied to clipboard

Create `OnOffToggle` component for preferences.

Open lindapaiste opened this issue 2 years ago • 2 comments

This is purely a code cleanup, there is no change to UI or behavior. It extracts a lot of repetitive code in the Preferences component into a new component OnOffToggle.

The component is inspired by @ghalestrilo's optionsOnOff code for the mobile preferences (which will be going away, in favor of a single responsive component).

It will probably evolve more as I refactor other parts of the Preferences.

Changes:

  • Create a component OnOffToggle for the clickable "On" and "Off" labels. image
  • Write unit tests.
  • Use the OnOffToggle in Preferences for Autosave, Autoclose Brackets and Quotes, etc.

I have verified that this pull request:

  • [x] has no linting errors (npm run lint)
  • [x] has no test errors (npm run test)
  • [x] is from a uniquely-named feature branch and is up to date with the develop branch.
  • [ ] is descriptively named and links to an issue number, i.e. Fixes #123

lindapaiste avatar Jul 24 '23 22:07 lindapaiste

Maybe I should rework the PreferencePicker instead of making a whole new component? 🤷

lindapaiste avatar Jul 24 '23 23:07 lindapaiste

Possibly translationKey="LineNumbers" is a bit too "tricky" and it would be be better to be more explicit, even though it's more verbose. I can change the syntax to ariaLabelOn={t('Preferences.LineNumbersOnARIA')} ariaLabelOff={t('Preferences.LineNumbersOffARIA')}.

lindapaiste avatar Nov 24 '23 23:11 lindapaiste