Add a “Beautify” button for users on iPad (which has no ctrl/cmmd key) about 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]

@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!): #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?

[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: #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!