From ea30c99ee8e8ac7efabcd805abd7a298c2354eb8 Mon Sep 17 00:00:00 2001 From: Pramod S Date: Thu, 10 Aug 2023 13:51:28 +0200 Subject: [PATCH] Made changes to accomodate reduced Help screen width --- .../RevealToolbar/Help/Graphics/Keyboard.tsx | 149 ++++++++++++++---- .../RevealToolbar/Help/Graphics/Mouse.tsx | 16 +- .../RevealToolbar/Help/KeyboardNavigation.tsx | 53 ++++--- .../RevealToolbar/Help/MouseNavigation.tsx | 6 +- .../components/RevealToolbar/Help/elements.ts | 15 +- 5 files changed, 179 insertions(+), 60 deletions(-) diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx index 002aff92c47..dcdecfa589e 100644 --- a/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx +++ b/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx @@ -4,16 +4,16 @@ import { type ReactElement, type SVGProps } from 'react'; -export const ArrowKeysNavigation = (props: SVGProps): ReactElement => ( +const UpArrowKey = (props: SVGProps): ReactElement => ( ): ReactElemen strokeWidth="2.41806" /> + +); + +const RightArrowKey = (props: SVGProps): ReactElement => ( + ): ReactElemen strokeWidth="2.41806" /> + +); + +const DownArrowKey = (props: SVGProps): ReactElement => ( + ): ReactElemen strokeWidth="2.41806" /> + +); + +const LeftArrowKey= (props: SVGProps): ReactElement => ( + ): ReactElemen strokeWidth="2.41806" /> ); -export const QWEKeysNavigation = (props: SVGProps): ReactElement => ( +const QKey = (props: SVGProps): ReactElement => ( @@ -92,8 +125,19 @@ export const QWEKeysNavigation = (props: SVGProps): ReactElement d="M22.0463 26.9534H24.8307L26.7908 29.5088L27.7159 30.6446L30.8392 34.7205H27.9449L25.8566 32.0002L25.1421 31.011L22.0463 26.9534ZM31.4437 23.656C31.4437 25.6589 31.0774 27.3808 30.3446 28.8219C29.6119 30.2568 28.6074 31.3621 27.3312 32.1375C26.0611 32.9069 24.617 33.2916 22.9989 33.2916C21.3746 33.2916 19.9244 32.9069 18.6482 32.1375C17.3781 31.3621 16.3767 30.2538 15.6439 28.8127C14.9112 27.3717 14.5448 25.6528 14.5448 23.656C14.5448 21.6532 14.9112 19.9343 15.6439 18.4993C16.3767 17.0583 17.3781 15.9531 18.6482 15.1837C19.9244 14.4082 21.3746 14.0204 22.9989 14.0204C24.617 14.0204 26.0611 14.4082 27.3312 15.1837C28.6074 15.9531 29.6119 17.0583 30.3446 18.4993C31.0774 19.9343 31.4437 21.6532 31.4437 23.656ZM28.641 23.656C28.641 22.1295 28.3937 20.8441 27.8991 19.8C27.4106 18.7497 26.7389 17.9559 25.884 17.4185C25.0353 16.8751 24.0735 16.6034 22.9989 16.6034C21.9181 16.6034 20.9533 16.8751 20.1045 17.4185C19.2558 17.9559 18.5841 18.7497 18.0895 19.8C17.601 20.8441 17.3567 22.1295 17.3567 23.656C17.3567 25.1826 17.601 26.471 18.0895 27.5213C18.5841 28.5654 19.2558 29.3592 20.1045 29.9027C20.9533 30.44 21.9181 30.7087 22.9989 30.7087C24.0735 30.7087 25.0353 30.44 25.884 29.9027C26.7389 29.3592 27.4106 28.5654 27.8991 27.5213C28.3937 26.471 28.641 25.1826 28.641 23.656Z" fill="white" /> + +); + +const WKey = (props: SVGProps): ReactElement => ( + ): ReactElement strokeWidth="2.41806" /> + +); + +const EKey = (props: SVGProps): ReactElement => ( + ): ReactElement strokeWidth="2.41806" /> ); -export const ASDKeysNavigation = (props: SVGProps): ReactElement => ( +const AKey = (props: SVGProps): ReactElement => ( @@ -142,8 +197,19 @@ export const ASDKeysNavigation = (props: SVGProps): ReactElement d="M17.6155 33.0352H14.6112L21.3616 14.2769H24.6315L31.3819 33.0352H28.3777L23.0744 17.6842H22.9279L17.6155 33.0352ZM18.1192 25.6894H27.8647V28.0708H18.1192V25.6894Z" fill="white" /> + +); + +const SKey = (props: SVGProps): ReactElement => ( + ): ReactElement strokeWidth="2.41806" /> + +); + +const DKey = (props: SVGProps): ReactElement => ( + ): ReactElement strokeWidth="2.41806" /> ); + +export const ArrowKeysNavigation = { + Up: UpArrowKey, + Down: DownArrowKey, + Left: LeftArrowKey, + Right: RightArrowKey +}; + +export const QWEASDKeysNavigation = { + Q: QKey, + W: WKey, + E: EKey, + A: AKey, + S: SKey, + D: DKey +}; diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx index 9a3af6eab93..3d639f5004d 100644 --- a/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx +++ b/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx @@ -6,28 +6,28 @@ import { type ReactElement, type SVGProps } from 'react'; export const Mouse = (props: SVGProps): ReactElement => ( - - + + { return ( @@ -14,27 +18,36 @@ export const KeyboardNavigation = (): ReactElement => { title={'Keyboard'} subTitle={'Move and look around'} description={'Click and hold to move.\nYou can also use mouse in conjunction with keys.'}> - - - Forward - Down - - Up - - Left - - Right -
- Back - - + + + + Down + Forward + Up + + + + + + + + + Left + Back + Right + + + Look Up - Look Left - - Look Right + Look Left + + Look Right + + +
Look Down - + ); diff --git a/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx b/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx index a96ff686565..e0569b91cc7 100644 --- a/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx +++ b/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx @@ -22,18 +22,18 @@ export const MouseNavigation = (): ReactElement => { }> Zoom / scroll - + Rotate Click+drag - + Pan Click+drag - + Select Objects Click on interactive objects diff --git a/react-components/src/components/RevealToolbar/Help/elements.ts b/react-components/src/components/RevealToolbar/Help/elements.ts index 63492425ed1..ce7a8fa2a10 100644 --- a/react-components/src/components/RevealToolbar/Help/elements.ts +++ b/react-components/src/components/RevealToolbar/Help/elements.ts @@ -56,6 +56,7 @@ export const MouseNavigationInstructionGrid = styled.div` width: fit-content; justify-items: center; align-items: center; + padding-top: 12px; ${InstructionText}:first-of-type { padding-left: 10px; @@ -74,9 +75,20 @@ export const MouseNavigationCombinedGridItem = styled.div` `; export const KeyboardNavigationInstructionGrid = styled.div` + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 8px; + width: fit-content; + justify-items: center; + align-items: center; + text-align: center; +`; + +export const ArrowKeyboardNavigationInstructionGrid = styled.div` display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 8px; + padding-left: 12px; width: fit-content; justify-items: center; align-items: center; @@ -88,7 +100,7 @@ export const KeyboardNavigationInstructionGrid = styled.div` } ${InstructionText}:last-of-type { - text-align: left; + text-align: center; } `; @@ -97,6 +109,7 @@ export const TouchNavigationInstructionGrid = styled.div` grid-template-columns: 2fr 1fr 1.5fr; width: fit-content; justify-items: center; + padding-top: 12px; ${InstructionText}:first-of-type { padding-left: 10px;