diff --git a/app/package.json b/app/package.json index e68327af200..e87da02e4b0 100644 --- a/app/package.json +++ b/app/package.json @@ -63,6 +63,7 @@ "reselect": "4.0.0", "rxjs": "^6.5.1", "semver": "5.7.2", + "simple-keyboard-layouts": "3.4.41", "styled-components": "5.3.6", "typeface-open-sans": "0.0.75", "uuid": "3.2.1" diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css index 1fa59e2230a..61e4f80d0ca 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css @@ -68,3 +68,12 @@ the rest is the same */ height: 44.75px; width: 330px !important; } + +.hg-candidate-box { + max-width: 400px; +} + +li.hg-candidate-box-list-item { + height: 60px; + width: 60px; +} diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx index dccad085c08..4ab8dab1274 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx @@ -1,6 +1,12 @@ import * as React from 'react' import Keyboard from 'react-simple-keyboard' -import { alphanumericKeyboardLayout, customDisplay } from '../constants' +import { useSelector } from 'react-redux' +import { getAppLanguage } from '/app/redux/config' +import { + alphanumericKeyboardLayout, + layoutCandidates, + customDisplay, +} from '../constants' import type { KeyboardReactInterface } from 'react-simple-keyboard' import '../index.css' @@ -19,6 +25,7 @@ export function AlphanumericKeyboard({ debug = false, // If true, will input a \n }: AlphanumericKeyboardProps): JSX.Element { const [layoutName, setLayoutName] = React.useState('default') + const appLanguage = useSelector(getAppLanguage) const onKeyPress = (button: string): void => { if (button === '{ABC}') handleShift() if (button === '{numbers}') handleNumber() @@ -47,6 +54,9 @@ export function AlphanumericKeyboard({ onKeyPress={onKeyPress} layoutName={layoutName} layout={alphanumericKeyboardLayout} + layoutCandidates={ + appLanguage != null ? layoutCandidates[appLanguage] : undefined + } display={customDisplay} mergeDisplay={true} useButtonTag={true} diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css index b3ff8968da4..4fb38eb50db 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css @@ -103,3 +103,12 @@ color: #16212d; background-color: #e3e3e3; /* grey30 */ } + +.hg-candidate-box { + max-width: 400px; +} + +li.hg-candidate-box-list-item { + height: 60px; + width: 60px; +} diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx index 663efdd9c24..eed2a0b5934 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx @@ -1,6 +1,12 @@ import * as React from 'react' import { KeyboardReact as Keyboard } from 'react-simple-keyboard' -import { customDisplay, fullKeyboardLayout } from '../constants' +import { useSelector } from 'react-redux' +import { getAppLanguage } from '/app/redux/config' +import { + customDisplay, + layoutCandidates, + fullKeyboardLayout, +} from '../constants' import type { KeyboardReactInterface } from 'react-simple-keyboard' import '../index.css' @@ -19,6 +25,7 @@ export function FullKeyboard({ debug = false, }: FullKeyboardProps): JSX.Element { const [layoutName, setLayoutName] = React.useState('default') + const appLanguage = useSelector(getAppLanguage) const handleShift = (button: string): void => { switch (button) { case '{shift}': @@ -56,6 +63,9 @@ export function FullKeyboard({ onKeyPress={onKeyPress} layoutName={layoutName} layout={fullKeyboardLayout} + layoutCandidates={ + appLanguage != null ? layoutCandidates[appLanguage] : undefined + } display={customDisplay} mergeDisplay={true} useButtonTag={true} diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index 1808f4bd2f3..6fccfd21b81 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -1,3 +1,11 @@ +import chineseLayout from 'simple-keyboard-layouts/build/layouts/chinese' + +type LayoutCandidates = + | { + [key: string]: string + } + | undefined + export const customDisplay = { '{numbers}': '123', '{shift}': 'ABC', @@ -69,3 +77,12 @@ export const numericalKeyboardLayout = { export const numericalCustom = { '{backspace}': 'del', } + +export const layoutCandidates: { + [key: string]: LayoutCandidates +} = { + // @ts-expect-error layout candidates exists but is not on the type + // in the simple-keyboard-layouts package + 'zh-CN': chineseLayout.layoutCandidates, + 'en-US': undefined, +} diff --git a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx index a91d7389072..8ed93c1cb81 100644 --- a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx +++ b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/__tests__/SystemLanguagePreferenceModal.test.tsx @@ -180,4 +180,16 @@ describe('SystemLanguagePreferenceModal', () => { 'zh-Hant' ) }) + + it('should not open update modal when system language changes to an unsuppported language', () => { + vi.mocked(getSystemLanguage).mockReturnValue('es-MX') + render() + + expect(screen.queryByRole('button', { name: 'Don’t change' })).toBeNull() + expect( + screen.queryByRole('button', { + name: 'Use system language', + }) + ).toBeNull() + }) }) diff --git a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx index 1a3a0d7d9ba..b4bf54c0d17 100644 --- a/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx +++ b/app/src/organisms/Desktop/SystemLanguagePreferenceModal/index.tsx @@ -46,11 +46,7 @@ export function SystemLanguagePreferenceModal(): JSX.Element | null { const storedSystemLanguage = useSelector(getStoredSystemLanguage) const showBootModal = appLanguage == null && systemLanguage != null - const showUpdateModal = - appLanguage != null && - systemLanguage != null && - storedSystemLanguage != null && - systemLanguage !== storedSystemLanguage + const [showUpdateModal, setShowUpdateModal] = useState(false) const title = showUpdateModal ? t('system_language_preferences_update') @@ -120,6 +116,13 @@ export function SystemLanguagePreferenceModal(): JSX.Element | null { void i18n.changeLanguage(systemLanguage) } } + // only show update modal if we support the language their system has updated to + setShowUpdateModal( + appLanguage != null && + matchedSystemLanguageOption != null && + storedSystemLanguage != null && + systemLanguage !== storedSystemLanguage + ) } }, [i18n, systemLanguage, showBootModal]) diff --git a/protocol-designer/src/ProtocolEditor.tsx b/protocol-designer/src/ProtocolEditor.tsx index df486e3eee4..7ca14592e86 100644 --- a/protocol-designer/src/ProtocolEditor.tsx +++ b/protocol-designer/src/ProtocolEditor.tsx @@ -4,11 +4,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend' import { DIRECTION_COLUMN, Flex, OVERFLOW_AUTO } from '@opentrons/components' import { PortalRoot as TopPortalRoot } from './components/portals/TopPortal' import { ProtocolRoutes } from './ProtocolRoutes' -import { useScreenSizeCheck } from './resources/useScreenSizeCheck' -import { DisabledScreen } from './organisms/DisabledScreen' function ProtocolEditorComponent(): JSX.Element { - const isValidSize = useScreenSizeCheck() return (
- {!isValidSize && } diff --git a/protocol-designer/src/organisms/DisabledScreen/index.tsx b/protocol-designer/src/organisms/DisabledScreen/index.tsx index 779ba446f40..2815609b469 100644 --- a/protocol-designer/src/organisms/DisabledScreen/index.tsx +++ b/protocol-designer/src/organisms/DisabledScreen/index.tsx @@ -15,6 +15,9 @@ import { } from '@opentrons/components' import { getTopPortalEl } from '../../components/portals/TopPortal' +// Note: We decided not to use this component for the release. +// We will find out a better way to handle responsiveness with user's screen size issue. +// This component may be used in the future. If not, we will remove it. export function DisabledScreen(): JSX.Element { const { t } = useTranslation('shared') diff --git a/yarn.lock b/yarn.lock index 22621f5ebd4..22c961d6704 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3403,6 +3403,7 @@ reselect "4.0.0" rxjs "^6.5.1" semver "5.7.2" + simple-keyboard-layouts "3.4.41" styled-components "5.3.6" typeface-open-sans "0.0.75" uuid "3.2.1" @@ -20041,6 +20042,11 @@ simple-git@^3.15.1: "@kwsites/promise-deferred" "^1.1.1" debug "^4.3.4" +simple-keyboard-layouts@3.4.41: + version "3.4.41" + resolved "https://registry.yarnpkg.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.4.41.tgz#eb1504c36626f29b0d5590d419ab39c43d06969a" + integrity sha512-vVnPRgZmK9DqbqUxOgZesdAlWkzY1Cvxf8YaFW3SHJHQKuvCkR8VL6TjJyrpM8BkJa3W4ry1i3CsSydlPckAoQ== + simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"