Skip to content

C2LC-539: Platform detection and platform-specific wording for key bindings. #296

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.

Sign up for GitHub

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

Open
the-t-in-rtf wants to merge 4 commits into
base: develop-1.2
Choose a base branch
from
Open

C2LC-539: Platform detection and platform-specific wording for key bindings. #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c03d93
C2LC-539: Platform detection and platform-specific wording for key bi…
the-t-in-rtf Nov 8, 2021
f7dba7c
C2LC-539: Converted 'option' icon to use unicode character.
the-t-in-rtf Nov 8, 2021
4079136
C2LC-539: Fixed key binding descriptions to match Figma wording.
the-t-in-rtf Nov 8, 2021
ca65391
Merge remote-tracking branch 'upstream/develop-1.0' into C2LC-539
the-t-in-rtf Nov 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions src/KeyboardInputModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type {KeyDef, KeyboardInputScheme, KeyboardInputSchemeName} from './Keybo
import {KeyboardInputSchemes, getLabelMessageKeyFromKeyDef, getIconMessageKeyFromKeyDef} from './KeyboardInputSchemes';

import ToggleSwitch from './ToggleSwitch';
import { isAppleDevice } from './Utils';

import { ReactComponent as KeyboardIcon} from './svg/Keyboard.svg'

Expand Down Expand Up @@ -94,6 +95,8 @@ class KeyboardInputModal extends React.Component<KeyboardInputModalProps, Keyboa
const keyboardInputScheme: KeyboardInputScheme = KeyboardInputSchemes[this.state.keyboardInputSchemeName];

const keyBindingElements = [];
const altSuffix = isAppleDevice() ? "Option" : "Alt";

keyBindings.forEach((key, index) => {
const itemKey = "binding-" + index;
const keyDef: KeyDef = keyboardInputScheme[key].keyDef;
Expand All @@ -115,12 +118,12 @@ class KeyboardInputModal extends React.Component<KeyboardInputModalProps, Keyboa

if (keyDef.altKey) {
const altKeyLabel = this.props.intl.formatMessage(
{ id: "KeyboardInputModal.KeyLabels.Alt" }
{ id: "KeyboardInputModal.KeyLabels." + altSuffix }
);
labelKeySegments.unshift(altKeyLabel);

const altKeyIcon = this.props.intl.formatMessage(
{ id: "KeyboardInputModal.KeyIcons.Alt" }
{ id: "KeyboardInputModal.KeyIcons." + altSuffix }
);
icons.unshift(<div key="alt-modifier" className="KeyboardInputModal__binding__icon">
{altKeyIcon}
Expand All @@ -141,7 +144,15 @@ class KeyboardInputModal extends React.Component<KeyboardInputModalProps, Keyboa
</div>);
}

const labelKeyString = labelKeySegments.join(" + ")
let labelKeyString = labelKeySegments[0];
if (labelKeySegments.length > 1) {
if (labelKeySegments.length > 2) {
labelKeyString += ", " + labelKeySegments.slice(1, labelKeySegments.length - 1).join(", ") + ",";
}

labelKeyString += " and " + labelKeySegments[labelKeySegments.length - 1];
}

const descriptionMessageKey = "KeyboardInputModal.Description." + key;
const descriptionMessageId = "key-binding-description-" + index;
keyBindingElements.push(<li className="KeyboardInputModal__binding" key={itemKey}>
Expand All @@ -163,10 +174,15 @@ class KeyboardInputModal extends React.Component<KeyboardInputModalProps, Keyboa
}

renderKeyboardSchemeMenu () {
const altSuffix = isAppleDevice() ? "Option" : "Alt";
const altKeyLabel = this.props.intl.formatMessage(
{ id: "KeyboardInputModal.KeyLabels." + altSuffix }
);

const selectOptionElements = [];
Object.keys(KeyboardInputSchemes).forEach((schemeName) => {
const messageId = "KeyboardInputModal.Scheme.Descriptions." + schemeName;
const optionText = this.props.intl.formatMessage({ id: messageId });
const optionText = this.props.intl.formatMessage({ id: messageId }, { alt: altKeyLabel });
selectOptionElements.push(<option key={schemeName} value={schemeName}>
{optionText}
</option>);
Expand Down
13 changes: 12 additions & 1 deletion src/Utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,15 @@ function focusByQuerySelector (selectors: string) {
}
}

export { extend, focusByQuerySelector, generateId, makeDelayedPromise, generateEncodedProgramURL, getThemeFromString, getWorldFromString };
const ApplePlatforms = [
"iPad",
"iPhone",
"iPod",
"MacIntel"
]

function isAppleDevice () :boolean {
return ApplePlatforms.indexOf(window.navigator.platform) !== -1;
}

export { extend, focusByQuerySelector, generateId, makeDelayedPromise, generateEncodedProgramURL, getThemeFromString, getWorldFromString, isAppleDevice };
42 changes: 22 additions & 20 deletions src/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,33 +128,35 @@
"Jungle.pond": "the Pond",
"Jungle.tree": "a Tree",
"KeyboardInputModal.Cancel": "Cancel",
"KeyboardInputModal.Description.addCommandToBeginning": "Press {key} to add the selected command to the beginning of the program.",
"KeyboardInputModal.Description.addCommandToEnd": "Press {key} to add the selected command to the end of the program.",
"KeyboardInputModal.Description.announceScene": "Press {key} to announce the character position and orientation.",
"KeyboardInputModal.Description.deleteCurrentStep": "Press {key} to delete the currently focused step.",
"KeyboardInputModal.Description.decreaseProgramSpeed": "Press {key} to make the program play slower.",
"KeyboardInputModal.Description.increaseProgramSpeed": "Press {key} to make the program play faster.",
"KeyboardInputModal.Description.playPauseProgram": "Press {key} to play or pause the program.",
"KeyboardInputModal.Description.refreshScene": "Press {key} to refresh the scene.",
"KeyboardInputModal.Description.addCommandToBeginning": "Press {key} together to add the selected command to the beginning of the program.",
"KeyboardInputModal.Description.addCommandToEnd": "Press {key} together to add the selected command to the end of the program.",
"KeyboardInputModal.Description.announceScene": "Press {key} together to announce the charactaer position and orientation.",
"KeyboardInputModal.Description.deleteCurrentStep": "Press {key} together to delete the currently focused step.",
"KeyboardInputModal.Description.decreaseProgramSpeed": "Press {key} together to make the program play slower.",
"KeyboardInputModal.Description.increaseProgramSpeed": "Press {key} together to make the program play faster.",
"KeyboardInputModal.Description.playPauseProgram": "Press {key} together to play or pause the program.",
"KeyboardInputModal.Description.refreshScene": "Press {key} together to refresh the scene.",
"KeyboardInputModal.Description.showHide": "Press {key} to show / hide the keyboard shortcuts menu.",
"KeyboardInputModal.Description.stopProgram": "Press {key} to stop the program.",
"KeyboardInputModal.Description.toggleAnnouncements": "Press {key} to toggle announcements.",
"KeyboardInputModal.Description.stopProgram": "Press {key} together to stop the program.",
"KeyboardInputModal.Description.toggleAnnouncements": "Press {key} together to toggle announcements.",
"KeyboardInputModal.KeyLabels.Alt": "Alt",
"KeyboardInputModal.KeyLabels.Control": "Control",
"KeyboardInputModal.KeyLabels.Option": "Option",
"KeyboardInputModal.KeyLabels.QuestionMark": "question mark",
"KeyboardInputModal.KeyLabels.GreaterThan": "greater than",
"KeyboardInputModal.KeyLabels.LessThan": "less than",
"KeyboardInputModal.KeyLabels.A": "a",
"KeyboardInputModal.KeyLabels.B": "b",
"KeyboardInputModal.KeyLabels.D": "d",
"KeyboardInputModal.KeyLabels.E": "e",
"KeyboardInputModal.KeyLabels.I": "i",
"KeyboardInputModal.KeyLabels.P": "p",
"KeyboardInputModal.KeyLabels.S": "s",
"KeyboardInputModal.KeyLabels.R": "r",
"KeyboardInputModal.KeyLabels.A": "A",
"KeyboardInputModal.KeyLabels.B": "B",
"KeyboardInputModal.KeyLabels.D": "D",
"KeyboardInputModal.KeyLabels.E": "E",
"KeyboardInputModal.KeyLabels.I": "I",
"KeyboardInputModal.KeyLabels.P": "P",
"KeyboardInputModal.KeyLabels.S": "S",
"KeyboardInputModal.KeyLabels.R": "R",
"KeyboardInputModal.KeyIcons.Alt": "Alt",
"KeyboardInputModal.KeyIcons.Control": "Ctrl",
"KeyboardInputModal.KeyIcons.Shift": "Shift",
"KeyboardInputModal.KeyIcons.Option": "⌥",
Copy link
Contributor

@chosww chosww Nov 8, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started to wonder do we really need to use intl to get the KeyIcons as they all seem to be international?

Copy link
Contributor Author

@the-t-in-rtf the-t-in-rtf Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's potentially useful for countries that tend to use local abbreviations for the common modifier keys. I couldn't find any French Canadian keyboards that went so far as to translate "control", et cetera, but I did find German layouts that were translated. However, even in that case, it varies by keyboard, the Apple keyboard for the German market still uses the English terms. You'd really have to assume that modern computer users would be used to the English terms for their platform, so probably we could just use that. For the letter keys, internationalisation seems less useful and potentially dangerous, as you never want to get in a situation where the key code doesn't match the label.

I could see moving these to a constant array in KeyboardInputSchemes, and it wouldn't take long. I'll wait to get Simon's input first.

"KeyboardInputModal.KeyIcons.QuestionMark": "?",
"KeyboardInputModal.KeyIcons.GreaterThan": ">",
"KeyboardInputModal.KeyIcons.LessThan": "<",
Expand All @@ -167,8 +169,8 @@
"KeyboardInputModal.KeyIcons.S": "S",
"KeyboardInputModal.KeyIcons.R": "R",
"KeyboardInputModal.Save": "Save",
"KeyboardInputModal.Scheme.Descriptions.controlalt": "Control+Alt (Apple: Control+Option)",
"KeyboardInputModal.Scheme.Descriptions.alt": "Alt (Apple: Option)",
"KeyboardInputModal.Scheme.Descriptions.controlalt": "Control+{alt}",
"KeyboardInputModal.Scheme.Descriptions.alt": "{alt}",
"KeyboardInputModal.ShowHide.AriaLabel": "Display keyboard shortcuts menu",
"KeyboardInputModal.Title": "Keyboard Shortcuts",
"KeyboardInputModal.Toggle.AriaLabel": "Turn keyboard shortcuts on or off",
Expand Down