Skip to content

Commit

Permalink
Made changes to accomodate reduced Help screen width
Browse files Browse the repository at this point in the history
  • Loading branch information
@pramodcog
pramodcog committed Aug 10, 2023
1 parent b33b2e0 commit ea30c99
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 60 deletions.
149 changes: 121 additions & 28 deletions react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@

import { type ReactElement, type SVGProps } from 'react';

export const ArrowKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement => (
const UpArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="150"
height="98"
viewBox="0 0 150 98"
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="53.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
Expand All @@ -22,60 +22,93 @@ export const ArrowKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElemen
strokeWidth="2.41806"
/>
<path
d="M74.9999 14.3652V34.3793M74.9999 14.3652L80.992 20.1758M74.9999 14.3652L69.0078 20.1758"
d="M22.9999 14.3652V34.3793M22.9999 14.3652L28.992 20.1758M22.9999 14.3652L17.0078 20.1758"
stroke="white"
strokeWidth="2.41806"
/>
</svg>
);

const RightArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="53.209"
y="53.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
rx="4.79097"
stroke="#ABB9FB"
strokeWidth="2.41806"
/>
<path
d="M75.0001 81.8184L75.0001 61.8043M75.0001 81.8184L69.008 76.0078M75.0001 81.8184L80.9922 76.0078"
d="M32.4424 22.6757L12.4283 22.6757M32.4424 22.6757L26.6319 28.6678M32.4424 22.6757L26.6319 16.6836"
stroke="white"
strokeWidth="2.41806"
/>
</svg>
);

const DownArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="1.20903"
y="53.209"
y="1.20903"
width="43.5819"
height="43.5819"
rx="4.79097"
stroke="#ABB9FB"
strokeWidth="2.41806"
/>
<path
d="M13.96 72.7481L33.974 72.7481M13.96 72.7481L19.7705 66.756M13.96 72.7481L19.7705 78.7402"
d="M23.0001 29.8184L23.0001 9.80432M23.0001 29.8184L17.008 24.0078M23.0001 29.8184L28.9922 24.0078"
stroke="white"
strokeWidth="2.41806"
/>
</svg>
);

const LeftArrowKey= (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="105.209"
y="53.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
rx="4.79097"
stroke="#ABB9FB"
strokeWidth="2.41806"
/>
<path
d="M136.442 74.6757L116.428 74.6757M136.442 74.6757L130.632 80.6678M136.442 74.6757L130.632 68.6836"
d="M13.96 20.7481L33.974 20.7481M13.96 20.7481L19.7705 14.756M13.96 20.7481L19.7705 26.7402"
stroke="white"
strokeWidth="2.41806"
/>
</svg>
);

export const QWEKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement => (
const QKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="150"
width="46"
height="46"
viewBox="0 0 150 46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
Expand All @@ -92,8 +125,19 @@ export const QWEKeysNavigation = (props: SVGProps<SVGSVGElement>): 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"
/>
</svg>
);

const WKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="53.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
Expand All @@ -102,11 +146,22 @@ export const QWEKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement
strokeWidth="2.41806"
/>
<path
d="M68.1271 33.0352L62.9246 14.2769H65.9014L69.5559 28.8036H69.73L73.5311 14.2769H76.4804L80.2815 28.8127H80.4555L84.1009 14.2769H87.0868L81.8752 33.0352H79.0267L75.079 18.9848H74.9325L70.9848 33.0352H68.1271Z"
d="M16.1271 33.0352L10.9246 14.2769H13.9014L17.5559 28.8036H17.73L21.5311 14.2769H24.4804L28.2815 28.8127H28.4555L32.1009 14.2769H35.0868L29.8752 33.0352H27.0267L23.079 18.9848H22.9325L18.9848 33.0352H16.1271Z"
fill="white"
/>
</svg>
);

const EKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="105.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
Expand All @@ -115,17 +170,17 @@ export const QWEKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement
strokeWidth="2.41806"
/>
<path
d="M121.29 33.0352V14.2769H133.051V16.7133H124.121V22.4287H132.437V24.8559H124.121V30.5988H133.161V33.0352H121.29Z"
d="M17.2903 33.0352V14.2769H29.0509V16.7133H20.1205V22.4287H28.4372V24.8559H20.1205V30.5988H29.1608V33.0352H17.2903Z"
fill="white"
/>
</svg>
);

export const ASDKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement => (
const AKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="150"
width="46"
height="46"
viewBox="0 0 150 46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
Expand All @@ -142,8 +197,19 @@ export const ASDKeysNavigation = (props: SVGProps<SVGSVGElement>): 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"
/>
</svg>
);

const SKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="53.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
Expand All @@ -152,11 +218,22 @@ export const ASDKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement
strokeWidth="2.41806"
/>
<path
d="M78.9923 19.2046C78.8946 18.3375 78.4916 17.6658 77.7833 17.1896C77.075 16.7072 76.1835 16.466 75.1088 16.466C74.3394 16.466 73.6738 16.5881 73.112 16.8323C72.5503 17.0705 72.1137 17.4002 71.8023 17.8216C71.4969 18.2368 71.3443 18.71 71.3443 19.2412C71.3443 19.687 71.4481 20.0717 71.6557 20.3953C71.8694 20.7189 72.1473 20.9907 72.4892 21.2105C72.8373 21.4242 73.2097 21.6043 73.6066 21.7509C74.0035 21.8913 74.3852 22.0074 74.7516 22.0989L76.5834 22.5752C77.1818 22.7218 77.7955 22.9202 78.4244 23.1706C79.0534 23.4209 79.6365 23.7507 80.1739 24.1598C80.7112 24.5689 81.1447 25.0757 81.4745 25.6802C81.8103 26.2848 81.9782 27.0083 81.9782 27.851C81.9782 28.9135 81.7035 29.8569 81.1539 30.6812C80.6105 31.5056 79.8197 32.1559 78.7816 32.6321C77.7497 33.1084 76.501 33.3466 75.0355 33.3466C73.6311 33.3466 72.4159 33.1237 71.3901 32.6779C70.3642 32.2322 69.5613 31.6002 68.9812 30.782C68.4011 29.9576 68.0805 28.9806 68.0195 27.851H70.8589C70.9138 28.5288 71.1336 29.0936 71.5183 29.5455C71.9091 29.9912 72.4068 30.324 73.0113 30.5438C73.6219 30.7575 74.2905 30.8644 75.0172 30.8644C75.8171 30.8644 76.5285 30.7392 77.1513 30.4889C77.7802 30.2324 78.2748 29.8782 78.6351 29.4264C78.9954 28.9684 79.1755 28.4341 79.1755 27.8235C79.1755 27.2678 79.0167 26.8129 78.6992 26.4588C78.3878 26.1046 77.9634 25.8115 77.4261 25.5795C76.8948 25.3474 76.2934 25.1429 75.6217 24.9658L73.4051 24.3613C71.903 23.9522 70.7123 23.3507 69.833 22.5569C68.9598 21.7631 68.5232 20.7128 68.5232 19.4061C68.5232 18.3253 68.8163 17.3819 69.4025 16.5759C69.9887 15.7699 70.7825 15.144 71.7839 14.6982C72.7854 14.2464 73.915 14.0204 75.1729 14.0204C76.443 14.0204 77.5635 14.2433 78.5343 14.6891C79.5113 15.1348 80.2807 15.7485 80.8425 16.5301C81.4043 17.3056 81.6974 18.1971 81.7218 19.2046H78.9923Z"
d="M26.9923 19.2046C26.8946 18.3375 26.4916 17.6658 25.7833 17.1896C25.075 16.7072 24.1835 16.466 23.1088 16.466C22.3394 16.466 21.6738 16.5881 21.112 16.8323C20.5503 17.0705 20.1137 17.4002 19.8023 17.8216C19.4969 18.2368 19.3443 18.71 19.3443 19.2412C19.3443 19.687 19.4481 20.0717 19.6557 20.3953C19.8694 20.7189 20.1473 20.9907 20.4892 21.2105C20.8373 21.4242 21.2097 21.6043 21.6066 21.7509C22.0035 21.8913 22.3852 22.0074 22.7516 22.0989L24.5834 22.5752C25.1818 22.7218 25.7955 22.9202 26.4244 23.1706C27.0534 23.4209 27.6365 23.7507 28.1739 24.1598C28.7112 24.5689 29.1447 25.0757 29.4745 25.6802C29.8103 26.2848 29.9782 27.0083 29.9782 27.851C29.9782 28.9135 29.7035 29.8569 29.1539 30.6812C28.6105 31.5056 27.8197 32.1559 26.7816 32.6321C25.7497 33.1084 24.501 33.3466 23.0355 33.3466C21.6311 33.3466 20.4159 33.1237 19.3901 32.6779C18.3642 32.2322 17.5613 31.6002 16.9812 30.782C16.4011 29.9576 16.0805 28.9806 16.0195 27.851H18.8589C18.9138 28.5288 19.1336 29.0936 19.5183 29.5455C19.9091 29.9912 20.4068 30.324 21.0113 30.5438C21.6219 30.7575 22.2905 30.8644 23.0172 30.8644C23.8171 30.8644 24.5285 30.7392 25.1513 30.4889C25.7802 30.2324 26.2748 29.8782 26.6351 29.4264C26.9954 28.9684 27.1755 28.4341 27.1755 27.8235C27.1755 27.2678 27.0167 26.8129 26.6992 26.4588C26.3878 26.1046 25.9634 25.8115 25.4261 25.5795C24.8948 25.3474 24.2934 25.1429 23.6217 24.9658L21.4051 24.3613C19.903 23.9522 18.7123 23.3507 17.833 22.5569C16.9598 21.7631 16.5232 20.7128 16.5232 19.4061C16.5232 18.3253 16.8163 17.3819 17.4025 16.5759C17.9887 15.7699 18.7825 15.144 19.7839 14.6982C20.7854 14.2464 21.915 14.0204 23.1729 14.0204C24.443 14.0204 25.5635 14.2433 26.5343 14.6891C27.5113 15.1348 28.2807 15.7485 28.8425 16.5301C29.4043 17.3056 29.6974 18.1971 29.7218 19.2046H26.9923Z"
fill="white"
/>
</svg>
);

const DKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="46"
height="46"
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<rect
x="105.209"
x="1.20903"
y="1.20903"
width="43.5819"
height="43.5819"
Expand All @@ -165,8 +242,24 @@ export const ASDKeysNavigation = (props: SVGProps<SVGSVGElement>): ReactElement
strokeWidth="2.41806"
/>
<path
d="M125.826 33.0352H119.754V14.2769H126.019C127.857 14.2769 129.435 14.6524 130.754 15.4035C132.073 16.1485 133.084 17.2201 133.786 18.6184C134.494 20.0106 134.848 21.6807 134.848 23.6286C134.848 25.5825 134.491 27.2617 133.777 28.6662C133.068 30.0706 132.043 31.1514 130.699 31.9086C129.356 32.6596 127.732 33.0352 125.826 33.0352ZM122.584 30.5621H125.671C127.1 30.5621 128.287 30.2935 129.234 29.7561C130.18 29.2127 130.889 28.428 131.359 27.4022C131.829 26.3702 132.064 25.1124 132.064 23.6286C132.064 22.157 131.829 20.9082 131.359 19.8824C130.895 18.8566 130.202 18.078 129.28 17.5468C128.357 17.0155 127.213 16.7499 125.845 16.7499H122.584V30.5621Z"
d="M21.8265 33.0352H15.7538V14.2769H22.0188C23.8568 14.2769 25.4352 14.6524 26.7542 15.4035C28.0731 16.1485 29.0837 17.2201 29.7859 18.6184C30.4942 20.0106 30.8484 21.6807 30.8484 23.6286C30.8484 25.5825 30.4912 27.2617 29.7767 28.6662C29.0684 30.0706 28.0426 31.1514 26.6992 31.9086C25.3558 32.6596 23.7316 33.0352 21.8265 33.0352ZM18.5841 30.5621H21.6708C23.0996 30.5621 24.2873 30.2935 25.2337 29.7561C26.1802 29.2127 26.8885 28.428 27.3587 27.4022C27.8289 26.3702 28.0639 25.1124 28.0639 23.6286C28.0639 22.157 27.8289 20.9082 27.3587 19.8824C26.8946 18.8566 26.2016 18.078 25.2795 17.5468C24.3575 17.0155 23.2126 16.7499 21.8448 16.7499H18.5841V30.5621Z"
fill="white"
/>
</svg>
);

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
};
16 changes: 8 additions & 8 deletions react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@ import { type ReactElement, type SVGProps } from 'react';

export const Mouse = (props: SVGProps<SVGSVGElement>): ReactElement => (
<svg
width="103"
height="158"
viewBox="0 0 103 158"
width="78"
height="119"
viewBox="0 0 78 119"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path
d="M51.5238 156.065C24.2857 156.065 2 133.855 2 106.71V51.3548C2 24.2097 24.2857 2 51.5238 2C78.7619 2 101.048 24.2097 101.048 51.3548V106.71C101.048 133.855 78.7619 156.065 51.5238 156.065Z"
d="M38.9666 117C18.635 117 2 100.422 2 80.1595V38.8405C2 18.5782 18.635 2 38.9666 2C59.2982 2 75.9332 18.5782 75.9332 38.8405V80.1595C75.9332 100.422 59.2982 117 38.9666 117Z"
stroke="#ABB9FB"
strokeWidth="3"
strokeMiterlimit="10"
/>
<path
d="M51.5239 66.1615C46.0763 66.1615 41.6191 61.7195 41.6191 56.2905V26.6776C41.6191 21.2486 46.0763 16.8066 51.5239 16.8066C56.9715 16.8066 61.4287 21.2486 61.4287 26.6776V56.2905C61.4287 61.7195 56.9715 66.1615 51.5239 66.1615Z"
d="M38.9666 49.8932C34.9002 49.8932 31.5732 46.5776 31.5732 42.5251V20.4208C31.5732 16.3684 34.9002 13.0527 38.9666 13.0527C43.0329 13.0527 46.3599 16.3684 46.3599 20.4208V42.5251C46.3599 46.5776 43.0329 49.8932 38.9666 49.8932Z"
stroke="#ABB9FB"
strokeWidth="3"
strokeMiterlimit="10"
/>
<path d="M51.5234 16.8065V2" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
<path d="M51.5234 66.1602V87.999" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
<path d="M38.9668 13.0521V2" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
<path d="M38.9658 49.8926V66.194" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
<path
d="M2 80.9688C2 80.9688 3 88.001 51.5238 88.001C101.048 88.001 101.048 80.9688 101.048 80.9688"
d="M2 60.9453C2 60.9453 2.74644 66.1945 38.9666 66.1945C75.9332 66.1945 75.9332 60.9453 75.9332 60.9453"
stroke="#ABB9FB"
strokeWidth="3"
strokeMiterlimit="10"
Expand Down
53 changes: 33 additions & 20 deletions react-components/src/components/RevealToolbar/Help/KeyboardNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,49 @@
import { type ReactElement } from 'react';
import { Section } from './Section';
import { Flex } from '@cognite/cogs.js';
import { QWEKeysNavigation, ArrowKeysNavigation, ASDKeysNavigation } from './Graphics/Keyboard';
import { InstructionText, KeyboardNavigationInstructionGrid } from './elements';
import { ArrowKeysNavigation, QWEASDKeysNavigation } from './Graphics/Keyboard';
import {
InstructionText,
KeyboardNavigationInstructionGrid,
ArrowKeyboardNavigationInstructionGrid
} from './elements';

export const KeyboardNavigation = (): ReactElement => {
return (
<Section
title={'Keyboard'}
subTitle={'Move and look around'}
description={'Click and hold to move.\nYou can also use mouse in conjunction with keys.'}>
<Flex gap={16}>
<KeyboardNavigationInstructionGrid>
<InstructionText>Forward</InstructionText>
<InstructionText style={{ marginRight: -30 }}>Down</InstructionText>
<QWEKeysNavigation style={{ width: 150 }} />
<InstructionText style={{ marginLeft: -60 }}>Up</InstructionText>

<InstructionText style={{ marginRight: -60 }}>Left</InstructionText>
<ASDKeysNavigation style={{ width: 180, marginLeft: 30 }} />
<InstructionText style={{ marginLeft: -10 }}>Right</InstructionText>
<br />
<InstructionText style={{ marginLeft: 33 }}>Back</InstructionText>
</KeyboardNavigationInstructionGrid>
<KeyboardNavigationInstructionGrid>
<Flex gap={8} style={{ paddingTop: 12 }}>
<Flex direction="column">
<KeyboardNavigationInstructionGrid>
<InstructionText>Down</InstructionText>
<InstructionText>Forward</InstructionText>
<InstructionText>Up</InstructionText>
<QWEASDKeysNavigation.Q />
<QWEASDKeysNavigation.W />
<QWEASDKeysNavigation.E />
</KeyboardNavigationInstructionGrid>
<KeyboardNavigationInstructionGrid style={{ paddingLeft: 15, paddingTop: 8 }}>
<QWEASDKeysNavigation.A />
<QWEASDKeysNavigation.S style={{ marginLeft: 6 }} />
<QWEASDKeysNavigation.D style={{ marginLeft: 6 }} />
<InstructionText>Left</InstructionText>
<InstructionText>Back</InstructionText>
<InstructionText>Right</InstructionText>
</KeyboardNavigationInstructionGrid>
</Flex>
<ArrowKeyboardNavigationInstructionGrid>
<InstructionText>Look Up</InstructionText>
<InstructionText style={{ marginTop: 45 }}>Look Left</InstructionText>
<ArrowKeysNavigation style={{ width: 135 }} />
<InstructionText style={{ marginTop: 45 }}>Look Right</InstructionText>
<InstructionText>Look Left</InstructionText>
<ArrowKeysNavigation.Up />
<InstructionText>Look Right</InstructionText>
<ArrowKeysNavigation.Left />
<ArrowKeysNavigation.Down />
<ArrowKeysNavigation.Right />
<br />
<InstructionText>Look Down</InstructionText>
</KeyboardNavigationInstructionGrid>
</ArrowKeyboardNavigationInstructionGrid>
</Flex>
</Section>
);
Expand Down
6 changes: 3 additions & 3 deletions react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,18 @@ export const MouseNavigation = (): ReactElement => {
}>
<MouseNavigationInstructionGrid>
<InstructionText>Zoom / scroll</InstructionText>
<InstructionText style={{ marginBottom: 30, marginRight: 10, textAlign: 'right' }}>
<InstructionText style={{ marginBottom: 30, textAlign: 'right' }}>
Rotate
<InstructionDetail>Click+drag</InstructionDetail>
</InstructionText>
<MouseNavigationCombinedGridItem>
<StyledMouse />
</MouseNavigationCombinedGridItem>
<InstructionText style={{ marginBottom: 30, marginLeft: 10, textAlign: 'left' }}>
<InstructionText style={{ marginBottom: 30, textAlign: 'left' }}>
Pan
<InstructionDetail>Click+drag</InstructionDetail>
</InstructionText>
<InstructionText style={{ marginTop: -70, marginRight: 10, textAlign: 'right' }}>
<InstructionText style={{ marginTop: -50, textAlign: 'right' }}>
Select Objects
<InstructionDetail>Click on interactive objects</InstructionDetail>
</InstructionText>
Expand Down
Loading

0 comments on commit ea30c99

Please sign in to comment.