PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Restores radio group item to style panel, cleans up components

Browse source
This commit is contained in:
Steve Ruiz 2021-07-13 22:13:31 +01:00
parent 109e7adc44
commit dfcc612fbe
5 changed files with 53 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/shared.tsx
View file

@ -216,6 +216,10 @@ export const Item = styled('button', {
pointerEvents: 'all',
cursor: 'pointer',
'&:focus': {
backgroundColor: '$hover',
},
'&:hover:not(:disabled)': {
backgroundColor: '$hover',
'& svg': {

32
components/style-panel/color-content.tsx
View file

@ -8,29 +8,31 @@ import { memo } from 'react'
import state from 'state'
import useTheme from 'hooks/useTheme'
function handleColorChange(
e: Event & { currentTarget: { value: ColorStyle } }
): void {
state.send('CHANGED_STYLE', { color: e.currentTarget.value })
function handleColorChange(color: ColorStyle): void {
state.send('CHANGED_STYLE', { color })
}
function ColorContent(): JSX.Element {
function ColorContent({ color }: { color: ColorStyle }): JSX.Element {
const { theme } = useTheme()
return (
<DropdownContent sideOffset={8} side="bottom">
{Object.keys(strokes[theme]).map((color: ColorStyle) => (
<DropdownMenu.DropdownMenuItem
<DropdownMenu.DropdownMenuRadioGroup
value={color}
as={DropdownContent}
onValueChange={handleColorChange}
sideOffset={8}
>
{Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
<DropdownMenu.DropdownMenuRadioItem
as={IconButton}
key={color}
title={color}
value={color}
onSelect={handleColorChange}
key={colorStyle}
title={colorStyle}
value={colorStyle}
>
<Square fill={strokes[theme][color]} stroke="none" size="22" />
</DropdownMenu.DropdownMenuItem>
<Square fill={strokes[theme][colorStyle]} stroke="none" size="22" />
</DropdownMenu.DropdownMenuRadioItem>
))}
</DropdownContent>
</DropdownMenu.DropdownMenuRadioGroup>
)
}

9
components/style-panel/quick-color-select.tsx
View file

@ -1,7 +1,7 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { breakpoints, IconButton } from 'components/shared'
import Tooltip from 'components/tooltip'
import { fills, strokes } from 'state/shape-styles'
import { strokes } from 'state/shape-styles'
import { useSelector } from 'state'
import ColorContent from './color-content'
import { BoxIcon } from '../shared'
@ -15,10 +15,13 @@ export default function QuickColorSelect(): JSX.Element {
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
<Tooltip label="Color">
<BoxIcon fill={fills[theme][color]} stroke={strokes[theme][color]} />
<BoxIcon
fill={strokes[theme][color]}
stroke={strokes[theme][color]}
/>
</Tooltip>
</DropdownMenu.Trigger>
<ColorContent />
<ColorContent color={color} />
</DropdownMenu.Root>
)
}

23
components/style-panel/quick-dash-select.tsx
View file

@ -1,7 +1,7 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { breakpoints, IconButton } from 'components/shared'
import Tooltip from 'components/tooltip'
import { memo } from 'react'
import React, { memo } from 'react'
import state, { useSelector } from 'state'
import { DashStyle } from 'types'
import {
@ -20,10 +20,8 @@ const dashes = {
[DashStyle.Dotted]: <DashDottedIcon />,
}
function changeDashStyle(
e: Event & { currentTarget: { value: DashStyle } }
): void {
state.send('CHANGED_STYLE', { dash: e.currentTarget.value })
function changeDashStyle(dash: DashStyle): void {
state.send('CHANGED_STYLE', { dash })
}
function QuickdashSelect(): JSX.Element {
@ -34,19 +32,24 @@ function QuickdashSelect(): JSX.Element {
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
<Tooltip label="Dash">{dashes[dash]}</Tooltip>
</DropdownMenu.Trigger>
<DropdownContent sideOffset={8} direction="vertical">
<DropdownMenu.DropdownMenuRadioGroup
as={DropdownContent}
sideOffset={8}
direction="vertical"
value={dash}
onValueChange={changeDashStyle}
>
{Object.keys(DashStyle).map((dashStyle: DashStyle) => (
<DropdownMenu.DropdownMenuItem
<DropdownMenu.DropdownMenuRadioItem
as={Item}
key={dashStyle}
isActive={dash === dashStyle}
onSelect={changeDashStyle}
value={dashStyle}
>
{dashes[dashStyle]}
</DropdownMenu.DropdownMenuItem>
</DropdownMenu.DropdownMenuRadioItem>
))}
</DropdownContent>
</DropdownMenu.DropdownMenuRadioGroup>
</DropdownMenu.Root>
)
}

22
components/style-panel/quick-size-select.tsx
View file

@ -13,10 +13,8 @@ const sizes = {
[SizeStyle.Large]: 22,
}
function handleSizeChange(
e: Event & { currentTarget: { value: SizeStyle } }
): void {
state.send('CHANGED_STYLE', { size: e.currentTarget.value })
function changeSizeStyle(size: SizeStyle): void {
state.send('CHANGED_STYLE', { size })
}
function QuickSizeSelect(): JSX.Element {
@ -29,19 +27,25 @@ function QuickSizeSelect(): JSX.Element {
<Circle size={sizes[size]} stroke="none" fill="currentColor" />
</Tooltip>
</DropdownMenu.Trigger>
<DropdownContent sideOffset={8} direction="vertical">
<DropdownMenu.DropdownMenuRadioGroup
as={DropdownContent}
sideOffset={8}
direction="vertical"
value={size}
onValueChange={changeSizeStyle}
>
{Object.keys(SizeStyle).map((sizeStyle: SizeStyle) => (
<DropdownMenu.DropdownMenuItem
<DropdownMenu.DropdownMenuRadioItem
key={sizeStyle}
as={Item}
isActive={size === sizeStyle}
value={sizeStyle}
onSelect={handleSizeChange}
>
<Circle size={sizes[sizeStyle]} />
</DropdownMenu.DropdownMenuItem>
</DropdownMenu.DropdownMenuRadioItem>
))}
</DropdownContent>
</DropdownMenu.DropdownMenuRadioGroup>
</DropdownMenu.Root>
)
}