Keyboard shortcuts

[samejr]

Keyboard shortcuts – design and functionality

I want to start a discussion about how we could implement nice keyboard shortcuts UI into JSON Hero. Below are some of the considerations so far and it'd be great to get some more input from people who use them regularly, on both PC and Mac platforms.

How should the list of shortcuts look?

There seems to be a convention in a lot of products that show a clean, clear list of actions alongside the shortcut keys presented as key icons. Here are a few examples from various apps:

Invision's Freehand tool:

Linear:

Figma:

Slack app:

Evernote app:

How would you access the list of shortcuts?

There a bunch of places a shortcuts panel could be accessed from. Here are the 2 of the more sensible spots IMO. Option 2. below is my favourite. Accessing the shortcuts panel would itself be accessed with a shortcut key of course.

Customising shortcuts

This seems to be typically a very nice but pro-feature not included in many popular web apps but I've included it here as some users might like to consider it as more of a priority. The functionality for editing is typically embedded into shortcuts panel itself. Here are some examples:

Cleanshot:

Xcode:
https://user-images.githubusercontent.com/7555566/167253430-2694fb4c-b2f0-4b77-ac4a-3a110ee2c647.mp4

VS Code:
https://user-images.githubusercontent.com/7555566/167253452-33652868-6071-4161-a678-83e28994b5f2.mp4

If anyone would like to take a look at a UI design or contribute to the UX discussion here, we are open to suggestions and contributions. 😄

[om-ray]

This is the design I came up with for the keyboard shortcuts panel. It shows what shortcuts there are, the shortcut key, and an icon related to that key, with an input to change the keyboard shortcut on the side

[om-ray]

@samejr none of the above examples have a clear way that shows how we can change shortcuts and I think that's less than desirable from a UX perspective

[samejr]

This looks great!
Please do take a swing at implementing it – here are a few pointers:

• Check the project for existing components to create the key icons. They already exist in the project so it'd be good to modify (if needed) and reuse them.
• You might like to use a Radix component for the UI
• Include a text link in the bottom left called 'Shortcuts' that toggles the panel. Remove all the other shortcut text in that bottom panel too. You'll want to consider the styling of this button in the same look/feel as the rest of the app.
• Consider clicking the background to dismiss the panel and an Esc to close shortcut.
• Open a PR when you're ready and me or someone else will check it out and provide feedback.

[om-ray]

@samejr Thank you so much for the advice! I'm currently having some trouble with the local version of the app (I can't open JSON files) and @ericallam is looking into that now, but I'm still working on it by making the react component in a separate project just so I can see how it all looks

[samejr]

No problem at all - and great that you can make a start anyway. Does the app run locally but the JSON you paste in doesn't work? Or does the whole app just not booting up locally? If it helps I added some local JSON files in a folder called 'Examples' which I know work.

[om-ray]

@samejr The problem got fixed and I'm currently working on it!

[samejr]

Fantastic!

[om-ray]

@samejr This is how the app is looking currently with the panel open (ignore the blue line around the panel, i just need to add outline:none in the CSS) it closes when you press escape or when you click outside of the modal

[om-ray]

Let's show Windows shortcuts in that situation

got it!

[om-ray]

@samejr How do the themes work? I cant seem to figure it out

[samejr]

I've not checked out your PR yet so you've probably already worked this out but we use Tailwind utility classes for all our CSS. Tailwind defines dark mode classes by prefixing 'dark:' Check out one of our other component for an example - or the Tailwind documentation for dark mode is here: https://tailwindcss.com/docs/dark-mode

[om-ray]

@samejr well i used styled components from stitches for a lot of the styling, how would that work with tailwind?

[om-ray]

@samejr I figured it out and i think it looks pretty good! although I am running into a problem where as soon as I switch to dark mode the application crashes, so I have to downgrade to node 16 to fix that

[om-ray]

@samejr This is the all new shortcut panel in dark mode!

[om-ray]

@samejr
#67
This is the PR for the Shortcut panel

[om-ray]

@samejr @ericallam this is the PR for the Custom keyboard shortcuts #68