From 20603afd40f377fd11ade1d9259e87005a4ee94e Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 22 Jul 2021 21:26:34 +0200 Subject: [PATCH] Implement ToolbarIconButton --- .../src/components/SnapshotEditor.tsx | 76 +++++++++---------- .../src/components/Toolbar/Toolbar.tsx | 22 +++--- .../components/Toolbar/utils/IconButton.tsx | 73 ------------------ .../src/components/Toolbar/utils/Tooltip.tsx | 8 +- theatre/studio/src/UIRoot/UIRoot.tsx | 19 ++++- theatre/studio/src/index.ts | 1 + theatre/studio/src/uiComponents/Tooltip.tsx | 23 ++++++ .../toolbar/ToolbarIconButton.tsx | 57 ++++++++++++++ 8 files changed, 147 insertions(+), 132 deletions(-) delete mode 100644 packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx create mode 100644 theatre/studio/src/uiComponents/Tooltip.tsx create mode 100644 theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx diff --git a/packages/plugin-r3f/src/components/SnapshotEditor.tsx b/packages/plugin-r3f/src/components/SnapshotEditor.tsx index 1dae344..0ea57e1 100644 --- a/packages/plugin-r3f/src/components/SnapshotEditor.tsx +++ b/packages/plugin-r3f/src/components/SnapshotEditor.tsx @@ -7,12 +7,10 @@ import {OrbitControls} from '@react-three/drei' import shallow from 'zustand/shallow' import root from 'react-shadow/styled-components' import ProxyManager from './ProxyManager' -import studio from '@theatre/studio' +import studio, {ToolbarIconButton} from '@theatre/studio' import {useVal} from '@theatre/dataverse-react' import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components' -import IconButton from './Toolbar/utils/IconButton' -import {BiRefresh} from 'react-icons/bi' -import {PortalContext} from 'reakit' +import {IoCameraReverseOutline} from 'react-icons/all' const GlobalStyle = createGlobalStyle` :host { @@ -134,42 +132,42 @@ const SnapshotEditor: React.FC<{}> = () => { <> - - - - - } - label="Refresh Snapshot" - onClick={createSnapshot} - > - - + {/* */} + + + + } + label="Refresh Snapshot" + onClick={createSnapshot} + > + + - {sceneSnapshot ? ( - <> - - { - gl.setClearColor('white') - }} - shadowMap - dpr={[1, 2]} - fog={'red'} - onPointerMissed={() => - studio.__experimental_setSelection([]) - } - > - - - - - ) : null} - - + {sceneSnapshot ? ( + <> + + { + gl.setClearColor('white') + }} + shadowMap + dpr={[1, 2]} + fog={'red'} + onPointerMissed={() => + studio.__experimental_setSelection([]) + } + > + + + + + ) : null} + + {/* */} diff --git a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx index caefaf0..b1e2d9c 100644 --- a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx @@ -1,17 +1,13 @@ import type {VFC} from 'react' import React from 'react' -import TransformControlsModeSelect from './TransformControlsModeSelect' import {useEditorStore} from '../../store' import shallow from 'zustand/shallow' -import TransformControlsSpaceSelect from './TransformControlsSpaceSelect' -import ViewportShadingSelect from './ViewportShadingSelect' -import {GiPocketBow, RiFocus3Line} from 'react-icons/all' +import {GiPocketBow, IoCameraOutline} from 'react-icons/all' import {Vector3} from 'three' import type {$FixMe} from '@theatre/shared/utils/types' -import studio from '@theatre/studio' +import studio, {ToolbarIconButton} from '@theatre/studio' import {getSelected} from '../useSelected' import {usePrism, useVal} from '@theatre/dataverse-react' -import IconButton from './utils/IconButton' import styled from 'styled-components' const ToolGroup = styled.div` @@ -40,15 +36,15 @@ const Toolbar: VFC = () => { return ( <> - + icon={} + label="Create snapshot" + /> - + {/* @@ -103,9 +99,9 @@ const Toolbar: VFC = () => { } }} /> - + */} - } onClick={() => { diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx deleted file mode 100644 index 774cfb6..0000000 --- a/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import type {ReactElement} from 'react' -import React, {forwardRef} from 'react' -import type {ButtonProps} from 'reakit' -import {Button} from 'reakit' -import type {IconType} from 'react-icons' -import {Tooltip, TooltipReference, useTooltipState} from './Tooltip' -import styled from 'styled-components' -import {transparentize} from 'polished' - -export interface IconButtonProps extends Exclude { - icon: ReactElement - label: string -} - -const TheButton = styled(TooltipReference)` - display: flex; - position: relative; - align-items: center; - justify-content: center; - vertical-align: middle; - font-size: 11px; - line-height: 1.25em; - font-weight: 600; - height: 24px; - padding-left: 0.5em; - padding-right: 0.5em; - color: #e6e6e5; - background-color: #313131ba; - border: 0 transparent; - - &:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - - &:focus { - outline: none; - } - - color: #e6e6e5; - background-color: #313131; - - &:hover { - background-color: ${transparentize(0.5, '#313131')}; - } - - border: 0 transparent; -` -const IconButton = forwardRef( - ({label, icon, className, ...props}, ref) => { - const tooltip = useTooltipState() - return ( - <> - - {icon} - - {label} - - ) - }, -) - -export default IconButton diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx index aaff56f..357fbce 100644 --- a/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx @@ -19,6 +19,8 @@ const Container = styled(TooltipImpl)` font-weight: 500; ` -export const Tooltip: VFC = ({className, ...props}) => ( - -) +export const Tooltip: VFC = ({className, ...props}) => { + console.log('deprecate tooltip') + + return +} diff --git a/theatre/studio/src/UIRoot/UIRoot.tsx b/theatre/studio/src/UIRoot/UIRoot.tsx index 190ca9e..b16a7b5 100644 --- a/theatre/studio/src/UIRoot/UIRoot.tsx +++ b/theatre/studio/src/UIRoot/UIRoot.tsx @@ -40,9 +40,19 @@ const Container = styled.div` pointer-events: none; ` +const PortalLayer = styled.div` + z-index: 51; + position: fixed; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + pointer-events: none; +` + export default function UIRoot() { const studio = getStudio() - const [containerRef, container] = useRefAndState( + const [portalLayerRef, portalLayer] = useRefAndState( undefined as $IntentionalAny, ) const inside = usePrism(() => { @@ -61,8 +71,9 @@ export default function UIRoot() { <> - - + + + {shouldShowGlobalToolbar && } {shouldShowTrigger && } {shouldShowPanels && } @@ -72,7 +83,7 @@ export default function UIRoot() { ) - }, [studio, containerRef, container]) + }, [studio, portalLayerRef, portalLayer]) return inside } diff --git a/theatre/studio/src/index.ts b/theatre/studio/src/index.ts index 5b8f648..6777d1c 100644 --- a/theatre/studio/src/index.ts +++ b/theatre/studio/src/index.ts @@ -6,6 +6,7 @@ import * as globalVariableNames from '@theatre/shared/globalVariableNames' import type {$FixMe} from '@theatre/shared/utils/types' import StudioBundle from './StudioBundle' import type CoreBundle from '@theatre/core/CoreBundle' +export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton' const studioPrivateAPI = new Studio() setStudio(studioPrivateAPI) diff --git a/theatre/studio/src/uiComponents/Tooltip.tsx b/theatre/studio/src/uiComponents/Tooltip.tsx new file mode 100644 index 0000000..218b075 --- /dev/null +++ b/theatre/studio/src/uiComponents/Tooltip.tsx @@ -0,0 +1,23 @@ +import type {VFC} from 'react' +import React from 'react' +import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit' +import type {TooltipProps} from 'reakit' +import styled from 'styled-components' + +export {TooltipReference, useTooltipState} + +const Container = styled(TooltipImpl)` + padding: 8px 14px; + + font-size: 11px; + line-height: 1.25em; + border-radius: 2px; + background-color: #201f20; + color: white; + pointer-events: none; + font-weight: 500; +` + +export const Tooltip: VFC = ({className, ...props}) => ( + +) diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx new file mode 100644 index 0000000..3f02e37 --- /dev/null +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -0,0 +1,57 @@ +import type {ReactElement} from 'react' +import React from 'react' +import styled from 'styled-components' +import {Tooltip, TooltipReference} from '@theatre/studio/uiComponents/Tooltip' +import {lighten} from 'polished' +import type {ButtonProps} from 'reakit' +import {useTooltipState} from 'reakit' +import {Button} from 'reakit' + +const TheButton = styled(TooltipReference)` + pointer-events: auto; + position: relative; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 600; + width: 28px; + height: 28px; + outline: none; + + &:hover { + background-color: ${lighten(0.02, '#313131')}; + color: white; + } + + color: #c0c0c0; + background-color: #313131; + border: 1px solid #272727; + border-radius: 3px; + box-shadow: 1px 1px 0px #0000001c; +` + +const ToolbarIconButton: React.FC< + Exclude & { + icon: ReactElement + label: string + } +> = (props) => { + const tooltip = useTooltipState() + return ( + <> + + {props.icon} + + {props.label} + + ) +} + +export default ToolbarIconButton