Add a “Beautify” button for users on iPad (which has no ctrl/cmmd key)

[arrowtype]

Is your feature request related to a problem? Please describe.

This year, a lot of students are using iPads to learn from home. This means that many of them are missing a separate keyboard, so we can no longer rely on hotkey combos for actions like "format/beautify code". From a recent Code Nation slack post:

Hey All! Curious if there is a way to format code in code in Popcode without using Mac/PC keystrokes (for iPad users)

Answer: not without an external keyboard. Easy to recommend, but unrealistic to expect in all cases.

Describe the solution you'd like

A button should exist for "Beautify Code", possibly in the header or possibly next to the HTML/CSS/JS section toggles.

Ideas on visual presentation:

• A button or link next to the magnifying glass
• A wand icon, similar to the "auto" button in photo editors like iOS Photos or Snapseed

Describe alternatives you've considered

Sadly, there appear to be no alternatives. Apple has a page saying that shortcuts are only available on external keyboards. Thanks, Apple 🙃

https://support.apple.com/en-us/HT211096

Additional context Add any other context or screenshots about the feature request here.

This formatting function seems to have been added at https://github.com/popcodeorg/popcode/pull/1615.

I'm not sure if there is an active maintainer who could make this quickly. It would probably take me an unreasonably long time to add it, but I'd be happy to find or make a wand icon if that visual solution is a route we'd like to pursue.

[outoftime]

@arrowtype I'm the maintainer of Popcode but at the moment I only have bandwidth for KTLO and reviewing submissions from others—would recommend polling fellow volunteers for someone fairly comfortable in React and Redux, with that technical grounding this should not be a heavy lift.

As for UI, I agree that a button tied to each of the language headers would be ideal, but I think a modest rethink of the editor header layout would make that a lot easier. (There were some nice looking designs kicking around a while ago but they were never implemented).

As a done-is-better-than-perfect solution, we could just add an entry to the hamburger menu. (I think I would actually prefer this over a button in the primary header—we really don't want that space to feel cluttered or overwhelming).

[arrowtype]

Thanks for the quick response and feedback, @outoftime!

Okay, I'll share this in Slack to see whether anyone might be able to take it on.

we could just add an entry to the hamburger menu. (I think I would actually prefer this over a button in the primary header—we really don't want that space to feel cluttered or overwhelming).

Good points – I definitely want to avoid adding too much clutter. But also, I'm unsure about putting this the hamburger. So far, that acts a bit like a container for "admin" stuff (add instructions, send feedback) or links to social media. The header seems to maybe be logical, because it has functions that manipulate the code in some way (adding libraries, changing font size). Though yes, probably a quick solution would be fine, and longer-term a redesign might be helpful.

[outoftime]

Here is the PR with the design tweaks (which I still like!): https://github.com/popcodeorg/popcode/pull/1245

[outoftime]

So far, that acts a bit like a container for "admin" stuff (add instructions, send feedback) or links to social media. The header seems to maybe be logical, because it has functions that manipulate the code in some way (adding libraries, changing font size). Though yes, probably a quick solution would be fine, and longer-term a redesign might be helpful.

Right—the only intended organizing principle of the hamburger menu is that of a “junk drawer” for functionality that doesn't have an obvious home elsewhere. Youʼre right that it tends to be administrative stuff but thatʼs by happenstance, not design. Ultimately I am not too worried about discoverability since students get lots of direct instruction on how to use Popcode.

[arrowtype]

Hmm, that does look like a promising design update. Yes, those sub-header bars is probably the place to put it, especially if it prompts users to fix formatting issues!

Fair point on the junk drawer. And yes, students probably would only need to hear it once and they'd have it.

Somewhat-related question: are there other shortcuts in Popcode?

[adrianfalleiro]

@arrowtype @outoftime If you're cool with adding a "Format Code" button to the hamburger I can open up a PR today. It would look something like this:

[outoftime]

@adrianfalleiro Iʼm down!

[arrowtype]

@adrianfalleiro Love it! This would be a perfect quick fix. I would almost say that this is a more frequent action than the others, so it might be worth sorting first in the list. But, I defer to @outoftime on that.

[outoftime]

I have no opinion on the internal organization of the junk drawer 😃

[adrianfalleiro]

PR: https://github.com/popcodeorg/popcode/pull/2382

[adrianfalleiro]

@arrowtype This feature has been shipped so I think we're good to close this issue.

[arrowtype]

Yes, it looks good to me, and seems to work well! Can't wait to tell the students that it's there now. Nice work, @adrianfalleiro!