diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx new file mode 100644 index 00000000000..56256dae70f --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx @@ -0,0 +1,265 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement, type SVGProps } from 'react'; + +const UpArrowKey = (props: SVGProps): ReactElement => ( + + + + +); + +const RightArrowKey = (props: SVGProps): ReactElement => ( + + + + +); + +const DownArrowKey = (props: SVGProps): ReactElement => ( + + + + +); + +const LeftArrowKey = (props: SVGProps): ReactElement => ( + + + + +); + +const QKey = (props: SVGProps): ReactElement => ( + + + + +); + +const WKey = (props: SVGProps): ReactElement => ( + + + + +); + +const EKey = (props: SVGProps): ReactElement => ( + + + + +); + +const AKey = (props: SVGProps): ReactElement => ( + + + + +); + +const SKey = (props: SVGProps): ReactElement => ( + + + + +); + +const DKey = (props: SVGProps): ReactElement => ( + + + + +); + +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 new file mode 100644 index 00000000000..3d639f5004d --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx @@ -0,0 +1,36 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement, type SVGProps } from 'react'; + +export const Mouse = (props: SVGProps): ReactElement => ( + + + + + + + +); diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Touch.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Touch.tsx new file mode 100644 index 00000000000..71215cef234 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/Graphics/Touch.tsx @@ -0,0 +1,118 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement, type SVGProps } from 'react'; + +export const TouchPan = (props: SVGProps): ReactElement => ( + + + + + + +); + +export const TouchZoom = (props: SVGProps): ReactElement => ( + + + + + + +); + +export const TouchSelect = (props: SVGProps): ReactElement => ( + + + + +); diff --git a/react-components/src/components/RevealToolbar/Help/KeyboardNavigation.tsx b/react-components/src/components/RevealToolbar/Help/KeyboardNavigation.tsx new file mode 100644 index 00000000000..829a122815e --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/KeyboardNavigation.tsx @@ -0,0 +1,54 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { Section } from './Section'; +import { Flex } from '@cognite/cogs.js'; +import { ArrowKeysNavigation, QWEASDKeysNavigation } from './Graphics/Keyboard'; +import { + InstructionText, + KeyboardNavigationInstructionGrid, + ArrowKeyboardNavigationInstructionGrid +} from './elements'; + +export const KeyboardNavigation = (): ReactElement => { + return ( +
+ + + + Down + Forward + Up + + + + + + + + + Left + Back + Right + + + + Look Up + 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 new file mode 100644 index 00000000000..e0569b91cc7 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx @@ -0,0 +1,43 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { + InstructionDetail, + InstructionText, + StyledMouse, + MouseNavigationInstructionGrid, + MouseNavigationCombinedGridItem +} from './elements'; +import { Section } from './Section'; + +export const MouseNavigation = (): ReactElement => { + return ( +
+ + Zoom / scroll + + Rotate + Click+drag + + + + + + Pan + Click+drag + + + Select Objects + Click on interactive objects + + +
+ ); +}; diff --git a/react-components/src/components/RevealToolbar/Help/Section.tsx b/react-components/src/components/RevealToolbar/Help/Section.tsx new file mode 100644 index 00000000000..3d0f22edb78 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/Section.tsx @@ -0,0 +1,27 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { type HelpSectionProps } from './types'; +import { + SectionContainer, + SectionTitle, + SectionSubTitle, + InstructionDetail, + SectionContent +} from './elements'; + +export const Section = ({ + children, + title, + description, + subTitle +}: HelpSectionProps): ReactElement => ( + + {title} + {subTitle} + {description} + {children} + +); diff --git a/react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx b/react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx new file mode 100644 index 00000000000..cbe7aee4a94 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx @@ -0,0 +1,36 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { Section } from './Section'; +import { + InstructionText, + TouchNavigationCombinedGridItem, + TouchNavigationInstructionGrid +} from './elements'; +import { TouchZoom, TouchPan, TouchSelect } from './Graphics/Touch'; + +export const TouchNavigation = (): ReactElement => { + return ( +
+ +
+ + Pan +
+ + + Tap to select + +
+ + Zoom +
+ +
+ ); +}; diff --git a/react-components/src/components/RevealToolbar/Help/elements.ts b/react-components/src/components/RevealToolbar/Help/elements.ts new file mode 100644 index 00000000000..ce7a8fa2a10 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/elements.ts @@ -0,0 +1,143 @@ +/*! + * Copyright 2023 Cognite AS + */ +import { Body, Title } from '@cognite/cogs.js'; +import styled from 'styled-components'; +import { Mouse } from './Graphics/Mouse'; + +export const SectionContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + width: fit-content; + max-width: fit-content; +`; + +export const SectionTitle = styled(Title).attrs({ level: 3 })` + color: #ffffff; +`; + +export const SectionSubTitle = styled(Title).attrs({ level: 5 })` + color: #ffffff; +`; + +export const SectionContent = styled.div` + align-items: center; + display: flex; + flex-direction: row; + height: 100%; +`; + +export const InstructionText = styled(Body).attrs({ + level: 3, + strong: true +})` + color: rgba(255, 255, 255, 0.9); + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 20px; +`; + +export const InstructionDetail = styled(Body).attrs({ + level: 3 +})` + color: rgba(255, 255, 255, 0.7); + font-size: 14px; + line-height: 20px; + letter-spacing: 0.006em; + white-space: pre-line; +`; + +export const MouseNavigationInstructionGrid = styled.div` + display: grid; + grid-template-columns: 2fr 1fr 1.5fr; + gap: 8px; + width: fit-content; + justify-items: center; + align-items: center; + padding-top: 12px; + + ${InstructionText}:first-of-type { + padding-left: 10px; + grid-column: 1/-1; + text-align: right; + } + + ${InstructionText}:last-of-type { + text-align: left; + } +`; + +export const MouseNavigationCombinedGridItem = styled.div` + grid-column: 2 / 3; + grid-row: 2 / 3; +`; + +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; + + ${InstructionText}:first-of-type { + padding-left: 10px; + grid-column: 1/-1; + text-align: right; + } + + ${InstructionText}:last-of-type { + text-align: center; + } +`; + +export const TouchNavigationInstructionGrid = styled.div` + display: grid; + grid-template-columns: 2fr 1fr 1.5fr; + width: fit-content; + justify-items: center; + padding-top: 12px; + + ${InstructionText}:first-of-type { + padding-left: 10px; + grid-column: 1/-1; + text-align: right; + } + + ${InstructionText}:last-of-type { + text-align: center; + } +`; + +export const TouchNavigationCombinedGridItem = styled.div` + grid-column: 2 / 3; + grid-row: 1 / 3; + padding-top: 40px; +`; + +export const StyledMouse = styled(Mouse)` + display: flex; + justify-content: center; + + ::before { + content: ''; + position: absolute; + display: inline-block; + margin-top: 12px; + width: 110px; + border-top: 1px solid white; + } +`; diff --git a/react-components/src/components/RevealToolbar/Help/types.ts b/react-components/src/components/RevealToolbar/Help/types.ts new file mode 100644 index 00000000000..4d09eda63a3 --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/types.ts @@ -0,0 +1,12 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; + +export type HelpSectionProps = { + children: ReactElement; + title: string; + description?: string | undefined; + subTitle?: string | undefined; +}; diff --git a/react-components/src/components/RevealToolbar/HelpButton.tsx b/react-components/src/components/RevealToolbar/HelpButton.tsx new file mode 100644 index 00000000000..3c116478648 --- /dev/null +++ b/react-components/src/components/RevealToolbar/HelpButton.tsx @@ -0,0 +1,45 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { useState, type ReactElement } from 'react'; + +import { Button, Dropdown } from '@cognite/cogs.js'; +import styled from 'styled-components'; +import { MouseNavigation } from './Help/MouseNavigation'; +import { TouchNavigation } from './Help/TouchNavigation'; +import { KeyboardNavigation } from './Help/KeyboardNavigation'; + +export const HelpButton = (): ReactElement => { + const [, setHelpEnabled] = useState(false); + + const showHelp = (): void => { + setHelpEnabled((prevState) => !prevState); + }; + + return ( + + + + + + } + placement="right"> +