From 0c03d939d1afbc261eb9128802a0ec75cc42bbb4 Mon Sep 17 00:00:00 2001 From: Tony Atkins Date: Mon, 8 Nov 2021 16:00:23 +0100 Subject: [PATCH 1/3] C2LC-539: Platform detection and platform-specific wording for key bindings. --- src/KeyboardInputModal.js | 15 +++++++++++---- src/KeyboardInputModal.scss | 4 ++-- src/Utils.js | 13 ++++++++++++- src/messages.json | 6 ++++-- 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/KeyboardInputModal.js b/src/KeyboardInputModal.js index f0779ec1..8bdee469 100644 --- a/src/KeyboardInputModal.js +++ b/src/KeyboardInputModal.js @@ -10,7 +10,7 @@ import type {KeyDef, KeyboardInputScheme, KeyboardInputSchemeName} from './Keybo import {KeyboardInputSchemes, getLabelMessageKeyFromKeyDef, getIconMessageKeyFromKeyDef} from './KeyboardInputSchemes'; import ToggleSwitch from './ToggleSwitch'; -import { focusByQuerySelector } from './Utils'; +import { focusByQuerySelector, isAppleDevice } from './Utils'; import { ReactComponent as KeyboardIcon} from './svg/Keyboard.svg' @@ -95,6 +95,8 @@ class KeyboardInputModal extends React.Component { const itemKey = "binding-" + index; const keyDef: KeyDef = keyboardInputScheme[key].keyDef; @@ -116,12 +118,12 @@ class KeyboardInputModal extends React.Component {altKeyIcon} @@ -164,10 +166,15 @@ class KeyboardInputModal extends React.Component { 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(); diff --git a/src/KeyboardInputModal.scss b/src/KeyboardInputModal.scss index 254fa0ff..ae221251 100644 --- a/src/KeyboardInputModal.scss +++ b/src/KeyboardInputModal.scss @@ -76,7 +76,7 @@ .KeyboardInputModal__binding { display: grid; - grid-template-columns: 7.5rem auto; + grid-template-columns: 9rem auto; align-items: flex-start; column-gap: 1rem; row-gap: 1rem; @@ -96,7 +96,7 @@ box-shadow: 0 3px 1px 0 #B9BEC6; font-weight: bold; height: 2.5rem; - width: 2.5rem; + min-width: 2.5rem; display: flex; align-items: center; diff --git a/src/Utils.js b/src/Utils.js index b0edba23..d0bfb1f2 100644 --- a/src/Utils.js +++ b/src/Utils.js @@ -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 }; diff --git a/src/messages.json b/src/messages.json index ab0617fd..ca80291e 100644 --- a/src/messages.json +++ b/src/messages.json @@ -140,6 +140,7 @@ "KeyboardInputModal.Description.toggleAnnouncements": "Press {key} 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", @@ -154,6 +155,7 @@ "KeyboardInputModal.KeyIcons.Alt": "Alt", "KeyboardInputModal.KeyIcons.Control": "Ctrl", "KeyboardInputModal.KeyIcons.Shift": "Shift", + "KeyboardInputModal.KeyIcons.Option": "Option", "KeyboardInputModal.KeyIcons.QuestionMark": "?", "KeyboardInputModal.KeyIcons.GreaterThan": ">", "KeyboardInputModal.KeyIcons.LessThan": "<", @@ -165,8 +167,8 @@ "KeyboardInputModal.KeyIcons.P": "P", "KeyboardInputModal.KeyIcons.S": "S", "KeyboardInputModal.KeyIcons.R": "R", - "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", From f7dba7c45275ab673dc21ab94aa5bc08ebd827d8 Mon Sep 17 00:00:00 2001 From: Tony Atkins Date: Mon, 8 Nov 2021 16:32:03 +0100 Subject: [PATCH 2/3] C2LC-539: Converted 'option' icon to use unicode character. --- src/KeyboardInputModal.scss | 4 ++-- src/messages.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/KeyboardInputModal.scss b/src/KeyboardInputModal.scss index ae221251..254fa0ff 100644 --- a/src/KeyboardInputModal.scss +++ b/src/KeyboardInputModal.scss @@ -76,7 +76,7 @@ .KeyboardInputModal__binding { display: grid; - grid-template-columns: 9rem auto; + grid-template-columns: 7.5rem auto; align-items: flex-start; column-gap: 1rem; row-gap: 1rem; @@ -96,7 +96,7 @@ box-shadow: 0 3px 1px 0 #B9BEC6; font-weight: bold; height: 2.5rem; - min-width: 2.5rem; + width: 2.5rem; display: flex; align-items: center; diff --git a/src/messages.json b/src/messages.json index ca80291e..b11c6b24 100644 --- a/src/messages.json +++ b/src/messages.json @@ -155,7 +155,7 @@ "KeyboardInputModal.KeyIcons.Alt": "Alt", "KeyboardInputModal.KeyIcons.Control": "Ctrl", "KeyboardInputModal.KeyIcons.Shift": "Shift", - "KeyboardInputModal.KeyIcons.Option": "Option", + "KeyboardInputModal.KeyIcons.Option": "⌥", "KeyboardInputModal.KeyIcons.QuestionMark": "?", "KeyboardInputModal.KeyIcons.GreaterThan": ">", "KeyboardInputModal.KeyIcons.LessThan": "<", From 40791363d4b97623f8d82d804232a27b00a1c123 Mon Sep 17 00:00:00 2001 From: Tony Atkins Date: Mon, 8 Nov 2021 16:59:39 +0100 Subject: [PATCH 3/3] C2LC-539: Fixed key binding descriptions to match Figma wording. --- src/KeyboardInputModal.js | 10 +++++++++- src/messages.json | 36 ++++++++++++++++++------------------ 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/src/KeyboardInputModal.js b/src/KeyboardInputModal.js index 8bdee469..d2b7dfbe 100644 --- a/src/KeyboardInputModal.js +++ b/src/KeyboardInputModal.js @@ -144,7 +144,15 @@ class KeyboardInputModal extends React.Component); } - 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(
  • diff --git a/src/messages.json b/src/messages.json index b11c6b24..5fc258cc 100644 --- a/src/messages.json +++ b/src/messages.json @@ -127,31 +127,31 @@ "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",