Restores radio group item to style panel, cleans up components
This commit is contained in:
parent
109e7adc44
commit
dfcc612fbe
5 changed files with 53 additions and 37 deletions
|
@ -216,6 +216,10 @@ export const Item = styled('button', {
|
||||||
pointerEvents: 'all',
|
pointerEvents: 'all',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'&:focus': {
|
||||||
|
backgroundColor: '$hover',
|
||||||
|
},
|
||||||
|
|
||||||
'&:hover:not(:disabled)': {
|
'&:hover:not(:disabled)': {
|
||||||
backgroundColor: '$hover',
|
backgroundColor: '$hover',
|
||||||
'& svg': {
|
'& svg': {
|
||||||
|
|
|
@ -8,29 +8,31 @@ import { memo } from 'react'
|
||||||
import state from 'state'
|
import state from 'state'
|
||||||
import useTheme from 'hooks/useTheme'
|
import useTheme from 'hooks/useTheme'
|
||||||
|
|
||||||
function handleColorChange(
|
function handleColorChange(color: ColorStyle): void {
|
||||||
e: Event & { currentTarget: { value: ColorStyle } }
|
state.send('CHANGED_STYLE', { color })
|
||||||
): void {
|
|
||||||
state.send('CHANGED_STYLE', { color: e.currentTarget.value })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function ColorContent(): JSX.Element {
|
function ColorContent({ color }: { color: ColorStyle }): JSX.Element {
|
||||||
const { theme } = useTheme()
|
const { theme } = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownContent sideOffset={8} side="bottom">
|
<DropdownMenu.DropdownMenuRadioGroup
|
||||||
{Object.keys(strokes[theme]).map((color: ColorStyle) => (
|
value={color}
|
||||||
<DropdownMenu.DropdownMenuItem
|
as={DropdownContent}
|
||||||
|
onValueChange={handleColorChange}
|
||||||
|
sideOffset={8}
|
||||||
|
>
|
||||||
|
{Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
|
||||||
|
<DropdownMenu.DropdownMenuRadioItem
|
||||||
as={IconButton}
|
as={IconButton}
|
||||||
key={color}
|
key={colorStyle}
|
||||||
title={color}
|
title={colorStyle}
|
||||||
value={color}
|
value={colorStyle}
|
||||||
onSelect={handleColorChange}
|
|
||||||
>
|
>
|
||||||
<Square fill={strokes[theme][color]} stroke="none" size="22" />
|
<Square fill={strokes[theme][colorStyle]} stroke="none" size="22" />
|
||||||
</DropdownMenu.DropdownMenuItem>
|
</DropdownMenu.DropdownMenuRadioItem>
|
||||||
))}
|
))}
|
||||||
</DropdownContent>
|
</DropdownMenu.DropdownMenuRadioGroup>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||||
import { breakpoints, IconButton } from 'components/shared'
|
import { breakpoints, IconButton } from 'components/shared'
|
||||||
import Tooltip from 'components/tooltip'
|
import Tooltip from 'components/tooltip'
|
||||||
import { fills, strokes } from 'state/shape-styles'
|
import { strokes } from 'state/shape-styles'
|
||||||
import { useSelector } from 'state'
|
import { useSelector } from 'state'
|
||||||
import ColorContent from './color-content'
|
import ColorContent from './color-content'
|
||||||
import { BoxIcon } from '../shared'
|
import { BoxIcon } from '../shared'
|
||||||
|
@ -15,10 +15,13 @@ export default function QuickColorSelect(): JSX.Element {
|
||||||
<DropdownMenu.Root dir="ltr">
|
<DropdownMenu.Root dir="ltr">
|
||||||
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
|
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
|
||||||
<Tooltip label="Color">
|
<Tooltip label="Color">
|
||||||
<BoxIcon fill={fills[theme][color]} stroke={strokes[theme][color]} />
|
<BoxIcon
|
||||||
|
fill={strokes[theme][color]}
|
||||||
|
stroke={strokes[theme][color]}
|
||||||
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
<ColorContent />
|
<ColorContent color={color} />
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||||
import { breakpoints, IconButton } from 'components/shared'
|
import { breakpoints, IconButton } from 'components/shared'
|
||||||
import Tooltip from 'components/tooltip'
|
import Tooltip from 'components/tooltip'
|
||||||
import { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
import state, { useSelector } from 'state'
|
import state, { useSelector } from 'state'
|
||||||
import { DashStyle } from 'types'
|
import { DashStyle } from 'types'
|
||||||
import {
|
import {
|
||||||
|
@ -20,10 +20,8 @@ const dashes = {
|
||||||
[DashStyle.Dotted]: <DashDottedIcon />,
|
[DashStyle.Dotted]: <DashDottedIcon />,
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeDashStyle(
|
function changeDashStyle(dash: DashStyle): void {
|
||||||
e: Event & { currentTarget: { value: DashStyle } }
|
state.send('CHANGED_STYLE', { dash })
|
||||||
): void {
|
|
||||||
state.send('CHANGED_STYLE', { dash: e.currentTarget.value })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function QuickdashSelect(): JSX.Element {
|
function QuickdashSelect(): JSX.Element {
|
||||||
|
@ -34,19 +32,24 @@ function QuickdashSelect(): JSX.Element {
|
||||||
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
|
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
|
||||||
<Tooltip label="Dash">{dashes[dash]}</Tooltip>
|
<Tooltip label="Dash">{dashes[dash]}</Tooltip>
|
||||||
</DropdownMenu.Trigger>
|
</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) => (
|
{Object.keys(DashStyle).map((dashStyle: DashStyle) => (
|
||||||
<DropdownMenu.DropdownMenuItem
|
<DropdownMenu.DropdownMenuRadioItem
|
||||||
as={Item}
|
as={Item}
|
||||||
key={dashStyle}
|
key={dashStyle}
|
||||||
isActive={dash === dashStyle}
|
isActive={dash === dashStyle}
|
||||||
onSelect={changeDashStyle}
|
|
||||||
value={dashStyle}
|
value={dashStyle}
|
||||||
>
|
>
|
||||||
{dashes[dashStyle]}
|
{dashes[dashStyle]}
|
||||||
</DropdownMenu.DropdownMenuItem>
|
</DropdownMenu.DropdownMenuRadioItem>
|
||||||
))}
|
))}
|
||||||
</DropdownContent>
|
</DropdownMenu.DropdownMenuRadioGroup>
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,10 +13,8 @@ const sizes = {
|
||||||
[SizeStyle.Large]: 22,
|
[SizeStyle.Large]: 22,
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSizeChange(
|
function changeSizeStyle(size: SizeStyle): void {
|
||||||
e: Event & { currentTarget: { value: SizeStyle } }
|
state.send('CHANGED_STYLE', { size })
|
||||||
): void {
|
|
||||||
state.send('CHANGED_STYLE', { size: e.currentTarget.value })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function QuickSizeSelect(): JSX.Element {
|
function QuickSizeSelect(): JSX.Element {
|
||||||
|
@ -29,19 +27,25 @@ function QuickSizeSelect(): JSX.Element {
|
||||||
<Circle size={sizes[size]} stroke="none" fill="currentColor" />
|
<Circle size={sizes[size]} stroke="none" fill="currentColor" />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</DropdownMenu.Trigger>
|
</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) => (
|
{Object.keys(SizeStyle).map((sizeStyle: SizeStyle) => (
|
||||||
<DropdownMenu.DropdownMenuItem
|
<DropdownMenu.DropdownMenuRadioItem
|
||||||
key={sizeStyle}
|
key={sizeStyle}
|
||||||
as={Item}
|
as={Item}
|
||||||
isActive={size === sizeStyle}
|
isActive={size === sizeStyle}
|
||||||
value={sizeStyle}
|
value={sizeStyle}
|
||||||
onSelect={handleSizeChange}
|
|
||||||
>
|
>
|
||||||
<Circle size={sizes[sizeStyle]} />
|
<Circle size={sizes[sizeStyle]} />
|
||||||
</DropdownMenu.DropdownMenuItem>
|
</DropdownMenu.DropdownMenuRadioItem>
|
||||||
))}
|
))}
|
||||||
</DropdownContent>
|
</DropdownMenu.DropdownMenuRadioGroup>
|
||||||
</DropdownMenu.Root>
|
</DropdownMenu.Root>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue