Moved all of r3f's UI elements to Studio
This commit is contained in:
Aria Minaei
parent
ff0f8d557b
commit
1444c61d64
4 changed files with 10 additions and 151 deletions
|
|
@ -2,7 +2,7 @@ import type {VFC} from 'react'
|
|||
import React from 'react'
|
||||
import type {TransformControlsSpace} from '../../store'
|
||||
import {BiCube, BiGlobe} from 'react-icons/all'
|
||||
import CompactModeSelect from './utils/CompactModeSelect'
|
||||
import {ToolbarSwitchSelect} from '@theatre/studio'
|
||||
|
||||
export interface TransformControlsSpaceSelectProps {
|
||||
value: TransformControlsSpace
|
||||
|
|
@ -13,17 +13,17 @@ const TransformControlsSpaceSelect: VFC<TransformControlsSpaceSelectProps> = ({
|
|||
value,
|
||||
onChange,
|
||||
}) => (
|
||||
<CompactModeSelect
|
||||
<ToolbarSwitchSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={[
|
||||
{
|
||||
option: 'world',
|
||||
value: 'world',
|
||||
label: 'Space: World',
|
||||
icon: <BiGlobe />,
|
||||
},
|
||||
{
|
||||
option: 'local',
|
||||
value: 'local',
|
||||
label: 'Space: Local',
|
||||
icon: <BiCube />,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import type {VFC} from 'react'
|
|||
import React from 'react'
|
||||
import type {ViewportShading} from '../../store'
|
||||
import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
|
||||
import CompactModeSelect from './utils/CompactModeSelect'
|
||||
import {ToolbarSwitchSelect} from '@theatre/studio'
|
||||
|
||||
export interface ViewportShadingSelectProps {
|
||||
value: ViewportShading
|
||||
|
|
@ -13,27 +13,27 @@ const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
|
|||
value,
|
||||
onChange,
|
||||
}) => (
|
||||
<CompactModeSelect
|
||||
<ToolbarSwitchSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={[
|
||||
{
|
||||
option: 'wireframe',
|
||||
value: 'wireframe',
|
||||
label: 'Display: Wireframe',
|
||||
icon: <BiCube />,
|
||||
},
|
||||
{
|
||||
option: 'flat',
|
||||
value: 'flat',
|
||||
label: 'Display: Flat',
|
||||
icon: <GiCube />,
|
||||
},
|
||||
{
|
||||
option: 'solid',
|
||||
value: 'solid',
|
||||
label: 'Display: Solid',
|
||||
icon: <FaCube />,
|
||||
},
|
||||
{
|
||||
option: 'rendered',
|
||||
value: 'rendered',
|
||||
label: 'Display: Rendered',
|
||||
icon: <GiIceCube />,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
import type {ReactElement, ReactNode} from 'react'
|
||||
import React from 'react'
|
||||
import type {IconType} from 'react-icons'
|
||||
import {Group, Button} from 'reakit'
|
||||
import styled from 'styled-components'
|
||||
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
|
||||
|
||||
interface OptionButtonProps<Option> {
|
||||
value: Option
|
||||
option: Option
|
||||
label: string
|
||||
icon: ReactElement<IconType>
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const TheButton = styled(TooltipReference)<{selected: boolean}>`
|
||||
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;
|
||||
border: 1px solid #22222238;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
color: #e6e6e5;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
`
|
||||
|
||||
function OptionButton<Option>({
|
||||
value,
|
||||
option,
|
||||
label,
|
||||
icon,
|
||||
onClick,
|
||||
}: OptionButtonProps<Option>) {
|
||||
console.log('deprecate CompactModeSelect')
|
||||
|
||||
const tooltip = useTooltipState()
|
||||
return (
|
||||
<>
|
||||
<TheButton
|
||||
{...tooltip}
|
||||
forwardedAs={Button}
|
||||
selected={option === value}
|
||||
className={option === value ? 'selected' : undefined}
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon}
|
||||
</TheButton>
|
||||
<Tooltip {...tooltip}>{label}</Tooltip>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
interface CompactModeSelectProps<Option> {
|
||||
value: Option
|
||||
onChange: (value: Option) => void
|
||||
options: {
|
||||
option: Option
|
||||
label: string
|
||||
icon: ReactElement<IconType>
|
||||
}[]
|
||||
settingsPanel?: ReactNode
|
||||
}
|
||||
|
||||
const Container = styled(Group)`
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
`
|
||||
|
||||
const CompactModeSelect = <Option extends string | number>({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
}: CompactModeSelectProps<Option>) => {
|
||||
return (
|
||||
<Container>
|
||||
{options.map(({label, icon, option}) => (
|
||||
<OptionButton
|
||||
key={option}
|
||||
value={value}
|
||||
option={option}
|
||||
label={label}
|
||||
icon={icon}
|
||||
onClick={() => onChange(option)}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default CompactModeSelect
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import type {VFC} from 'react'
|
||||
import React from 'react'
|
||||
import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
|
||||
import {transparentize} from 'polished'
|
||||
import type {TooltipProps} from 'reakit'
|
||||
import styled from 'styled-components'
|
||||
|
||||
export {TooltipReference, useTooltipState}
|
||||
|
||||
const Container = styled(TooltipImpl)`
|
||||
padding: 3px 5px;
|
||||
|
||||
font-size: 11px;
|
||||
line-height: 1.25em;
|
||||
border-radius: 2px;
|
||||
background-color: ${transparentize(0.5, '#313131')};
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
font-weight: 500;
|
||||
`
|
||||
|
||||
export const Tooltip: VFC<TooltipProps> = ({className, ...props}) => {
|
||||
console.log('deprecate tooltip')
|
||||
|
||||
return <Container {...props} className={className as string} />
|
||||
}
|
||||
Loading…
Reference in a new issue