From 48d576ed199b124fa0322c7ad6b2b3e7d213f314 Mon Sep 17 00:00:00 2001 From: Pramod S Date: Mon, 7 Aug 2023 16:37:59 +0200 Subject: [PATCH 1/9] Mouse help navigation added --- .../src/components/Graphics/Keyboard.tsx | 149 ++++++++++++++++++ .../src/components/Graphics/Mouse.tsx | 36 +++++ .../src/components/Graphics/Touch.tsx | 103 ++++++++++++ .../RevealToolbar/Help/MenuSection.tsx | 27 ++++ .../RevealToolbar/Help/MouseNavigation.tsx | 38 +++++ .../RevealToolbar/Help/TouchNavigation.tsx | 33 ++++ .../components/RevealToolbar/Help/elements.ts | 75 +++++++++ .../components/RevealToolbar/Help/types.ts | 12 ++ .../components/RevealToolbar/HelpButton.tsx | 43 +++++ .../RevealToolbar/RevealToolbar.tsx | 3 +- 10 files changed, 518 insertions(+), 1 deletion(-) create mode 100644 react-components/src/components/Graphics/Keyboard.tsx create mode 100644 react-components/src/components/Graphics/Mouse.tsx create mode 100644 react-components/src/components/Graphics/Touch.tsx create mode 100644 react-components/src/components/RevealToolbar/Help/MenuSection.tsx create mode 100644 react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx create mode 100644 react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx create mode 100644 react-components/src/components/RevealToolbar/Help/elements.ts create mode 100644 react-components/src/components/RevealToolbar/Help/types.ts create mode 100644 react-components/src/components/RevealToolbar/HelpButton.tsx diff --git a/react-components/src/components/Graphics/Keyboard.tsx b/react-components/src/components/Graphics/Keyboard.tsx new file mode 100644 index 00000000000..323a895ac61 --- /dev/null +++ b/react-components/src/components/Graphics/Keyboard.tsx @@ -0,0 +1,149 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement, type SVGProps } from 'react'; + +export const KeyboardArrow = (props: SVGProps): ReactElement => ( + + + + + + + + + + +); + +export const KeyboardKeys = (props: SVGProps): ReactElement => ( + + + + + + + + + + + + + + +); diff --git a/react-components/src/components/Graphics/Mouse.tsx b/react-components/src/components/Graphics/Mouse.tsx new file mode 100644 index 00000000000..9a3af6eab93 --- /dev/null +++ b/react-components/src/components/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/Graphics/Touch.tsx b/react-components/src/components/Graphics/Touch.tsx new file mode 100644 index 00000000000..a8cd17df7ce --- /dev/null +++ b/react-components/src/components/Graphics/Touch.tsx @@ -0,0 +1,103 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement, type SVGProps } from 'react'; + +export const Touch = (props: SVGProps): ReactElement => ( + + + + + + + + + + + + +); diff --git a/react-components/src/components/RevealToolbar/Help/MenuSection.tsx b/react-components/src/components/RevealToolbar/Help/MenuSection.tsx new file mode 100644 index 00000000000..394d9ea7b1c --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/MenuSection.tsx @@ -0,0 +1,27 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { type HelpMenuSectionProps } from './types'; +import { + SectionContainer, + SectionTitle, + SectionSubTitle, + InstructionDetail, + SectionContent +} from './elements'; + +export const MenuSection = ({ + children, + title, + description, + subTitle +}: HelpMenuSectionProps): ReactElement => ( + + {title} + {subTitle} + {description} + {children} + +); 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..1b9ace7cafc --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx @@ -0,0 +1,38 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { type ReactElement } from 'react'; +import { InstructionDetail, InstructionText, MouseGraphic, MouseNavigationGrid } from './elements'; +import { MenuSection } from './MenuSection'; + +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/TouchNavigation.tsx b/react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx new file mode 100644 index 00000000000..3c22591475f --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx @@ -0,0 +1,33 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { Flex } from '@cognite/cogs.js'; +import { type ReactElement } from 'react'; +import { MenuSection } from './MenuSection'; +import { InstructionDetail, InstructionText, MouseNavigationGrid } from './elements'; +import { Touch } from '../../Graphics/Touch'; + +export const TouchNavigation = (): ReactElement => { + return ( + + + + + {'Rotate'} +
+ {'click'} + + + + + + {'Zoom'} +
+ {'pinch'} + + + + + ); +}; 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..2fd92468bee --- /dev/null +++ b/react-components/src/components/RevealToolbar/Help/elements.ts @@ -0,0 +1,75 @@ +/*! + * Copyright 2023 Cognite AS + */ +import { Body, Colors, Detail, 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; +`; + +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: ${Colors['text-icon--medium--inverted']}; +`; + +export const InstructionDetail = styled(Detail)` + color: ${Colors['text-icon--interactive--disabled--inverted']}; +`; + +export const MouseNavigationGrid = styled.div` + display: grid; + grid-template-columns: 2fr 1fr 1.5fr; + gap: 8px; + width: 220px; + + ${InstructionText}:first-of-type { + padding-left: 10px; + grid-column: 1/-1; + text-align: center; + } + + ${InstructionText}:last-of-type { + text-align: right; + } +`; + +export const MouseGraphic = styled(Mouse)` + display: flex; + justify-content: center; + + ::before { + content: ''; + position: absolute; + display: inline-block; + margin-top: 12px; + width: 110px; + border-top: 1px solid white; + } +`; + +export const TouchNavigationContainer = styled.div` + display: flex; + gap: 16px; + width: 176px; +`; 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..60ccda4d371 --- /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 HelpMenuSectionProps = { + 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..1db92282da6 --- /dev/null +++ b/react-components/src/components/RevealToolbar/HelpButton.tsx @@ -0,0 +1,43 @@ +/*! + * Copyright 2023 Cognite AS + */ + +import { useState, type ReactElement } from 'react'; + +import { Button, Dropdown, Menu } from '@cognite/cogs.js'; +import styled from 'styled-components'; +import { MouseNavigation } from './Help/MouseNavigation'; +import { TouchNavigation } from './Help/TouchNavigation'; + +export const HelpButton = (): ReactElement => { + const [helpEnabled, setHelpEnabled] = useState(false); + + const showHelp = (): void => { + setHelpEnabled(!helpEnabled); + }; + + return ( + + + + {/* */} + + } + placement="right-end"> +