Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

shortcuts: Mac-native keyboard shortcuts #757

Open
garrett opened this issue Oct 2, 2024 · 3 comments · May be fixed by #762
Open

shortcuts: Mac-native keyboard shortcuts #757

garrett opened this issue Oct 2, 2024 · 3 comments · May be fixed by #762
Assignees
Labels
enhancement New feature or request

Comments

@garrett
Copy link
Member

garrett commented Oct 2, 2024

On macOS, the keyboard shortcuts are still using command instead of Command. To fix this:

  1. Handle command being pressed on macOS instead of control.
  2. Show command instead of control in the modal.
@garrett garrett added the enhancement New feature or request label Oct 2, 2024
@garrett
Copy link
Member Author

garrett commented Oct 2, 2024

The common way to show command in UIs is to use the cloverleaf icon, which is what is also on the keyboard. (Similar to how "control" is often "Ctrl" for non-Mac computers.)

Here are the command shortcuts as referenced on a Mac:

https://apple.stackexchange.com/questions/55727/where-can-i-find-the-unicode-symbols-for-mac-functional-keys-command-shift-e

Symbol Name HTML Entities
Command, Cmd, Clover, (formerly) Apple ⌘
Control, Ctl, Ctrl ⌃
Option, Opt, (Windows) Alt ⌥
Shift ⇧
Right arrow →
Left arrow ←
Up arrow ↑
Down arrow ↓

Here's how it looks like when referenced in a menu (from Safari, the web browser):

image

However, if I look in the docs and even on Apple's website, it's written out like this:

image

It's probably fine to just swap the word "Ctrl" with "Command" instead of using ⌘, as Apple keyboards have had both words and symbols for decades. For example:

image

https://www.apple.com/shop/product/MK2A3LL/A/magic-keyboard-us-english

They even use the English words for modifier keys on other language keyboards:

image

https://www.apple.com/shop/product/MK2A3D/A/magic-keyboard-german

image

https://www.apple.com/shop/product/MK2A3UA/A/magic-keyboard-ukrainian

(They used to use "Cmd" instead of "Command", but write it out fully these days.)

@garrett
Copy link
Member Author

garrett commented Oct 2, 2024

This can be tested with the metaKey attribute of a keyboard event:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey

You could do something like:

const isApple = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
const ctrlEvent = isApple ? event.metaKey : event.ctrlKey;
const ctrlString = isApple ? "Command" : "Ctrl";
const altString = isApple ? "Option" : "Alt";

or check inline (with the isApple from above) like:

if (isApple ? event.metaKey : event.ctrlKey) {
  /* Stuff */
}

(Although mapping it like above in one place is probably easier, simpler since it's probably used in multiple places.)

Thankfully, "Option" on macOS is exactly equivalent to the "Alt" key, except for the string.

Note: Yes, we need to check for iPhones and iPads too, not just macOS, as all of them can have a keyboard, and iPads have even have official hardware keyboards.

Note 2: Checking for Meta key works on Windows and Linux too, but sometimes the OS handles the key instead, like on some versions of Windows with some browsers. (Firefox recently changed on Windows, apparently, and can intercept and detect it now.) On Linux, GNOME handles the key press before Firefox (and presumably other browsers, which I haven't checked yet). But other browsers and environments may differ. In other words, we need explicit detection for handling it (we can't say if one or the other) and we need explicit detection anyway for displaying Command+Option instead of Ctrl+Alt.

@garrett
Copy link
Member Author

garrett commented Oct 2, 2024

Basically, everyone using a Mac or iPad/iPhone with a keyboard would expect shortcuts to work like this. This is how native apps and other web apps handle this. (Yeah, I know... *sigh*)

tomasmatus added a commit to tomasmatus/cockpit-files that referenced this issue Oct 3, 2024
@tomasmatus tomasmatus linked a pull request Oct 3, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants