diff --git a/packages/tldraw/src/components/DropdownMenu/DMContent.tsx b/packages/tldraw/src/components/DropdownMenu/DMContent.tsx index 5b5fb19c6..b55f10b31 100644 --- a/packages/tldraw/src/components/DropdownMenu/DMContent.tsx +++ b/packages/tldraw/src/components/DropdownMenu/DMContent.tsx @@ -4,7 +4,7 @@ import styled from '~styles/stitches.config' import { MenuContent } from '~components/MenuContent' export interface DMContentProps { - variant?: 'grid' | 'menu' + variant?: 'grid' | 'menu' | 'horizontal' align?: 'start' | 'center' | 'end' children: React.ReactNode } @@ -28,6 +28,9 @@ export const StyledContent = styled(MenuContent, { gridTemplateColumns: 'repeat(4, auto)', gap: 0, }, + horizontal: { + flexDirection: 'row', + }, menu: { minWidth: 128, }, diff --git a/packages/tldraw/src/components/Panel/Panel.tsx b/packages/tldraw/src/components/Panel/Panel.tsx index 154bcfdfb..81c051636 100644 --- a/packages/tldraw/src/components/Panel/Panel.tsx +++ b/packages/tldraw/src/components/Panel/Panel.tsx @@ -4,8 +4,8 @@ export const Panel = styled('div', { backgroundColor: '$panel', display: 'flex', flexDirection: 'row', - padding: '0 $2', boxShadow: '$panel', + padding: '$2', variants: { side: { center: { @@ -16,12 +16,12 @@ export const Panel = styled('div', { // borderRight: '1px solid $panelBorder', }, left: { - borderBottomRightRadius: '$4', + borderBottomRightRadius: '$3', // borderBottom: '1px solid $panelBorder', // borderRight: '1px solid $panelBorder', }, right: { - borderBottomLeftRadius: '$4', + borderBottomLeftRadius: '$3', // borderBottom: '1px solid $panelBorder', // borderLeft: '1px solid $panelBorder', }, diff --git a/packages/tldraw/src/components/RowButton/RowButton.tsx b/packages/tldraw/src/components/RowButton/RowButton.tsx index cadfa7a76..c49b5f99e 100644 --- a/packages/tldraw/src/components/RowButton/RowButton.tsx +++ b/packages/tldraw/src/components/RowButton/RowButton.tsx @@ -108,6 +108,10 @@ export const StyledRowButton = styled('button', { opacity: 0.3, }, + [`&:focus:not(:disabled) ${StyledRowButtonInner}`]: { + backgroundColor: '$hover', + }, + variants: { bp: { mobile: {}, diff --git a/packages/tldraw/src/components/ToolButton/ToolButton.tsx b/packages/tldraw/src/components/ToolButton/ToolButton.tsx index 3229f64ba..bd53a9aae 100644 --- a/packages/tldraw/src/components/ToolButton/ToolButton.tsx +++ b/packages/tldraw/src/components/ToolButton/ToolButton.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { breakpoints } from '~components/breakpoints' import { Tooltip } from '~components/Tooltip' import styled from '~styles' @@ -19,11 +20,10 @@ export const ToolButton = React.forwardRef( variant={variant} onPointerDown={onSelect} onDoubleClick={onDoubleClick} + bp={breakpoints} {...rest} > - - {children} - + {children} ) } @@ -59,49 +59,15 @@ export const StyledToolButtonInner = styled('div', { userSelect: 'none', boxSizing: 'border-box', border: '1px solid transparent', - - variants: { - variant: { - primary: { - '& svg': { - width: 20, - height: 20, - }, - }, - icon: { - display: 'grid', - '& > *': { - gridRow: 1, - gridColumn: 1, - }, - }, - text: { - fontSize: '$1', - padding: '0 $3', - }, - circle: { - borderRadius: '100%', - boxShadow: '$panel', - }, - }, - isActive: { - true: { - backgroundColor: '$selected', - color: '$panelActive', - }, - }, - }, }) export const StyledToolButton = styled('button', { position: 'relative', color: '$text', - height: '48px', - width: '40px', fontSize: '$0', background: 'none', margin: '0', - padding: '$3 $2', + padding: '$2', display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -109,24 +75,88 @@ export const StyledToolButton = styled('button', { cursor: 'pointer', pointerEvents: 'all', border: 'none', + height: '40px', + width: '40px', variants: { variant: { - primary: {}, - icon: {}, + primary: { + marginTop: '0', + }, + icon: { + [`& ${StyledToolButtonInner}`]: { + display: 'grid', + '& > *': { + gridRow: 1, + gridColumn: 1, + }, + }, + }, text: { width: 'auto', + [`& ${StyledToolButtonInner}`]: { + fontSize: '$1', + padding: '0 $3', + }, + }, + circle: { + padding: '$2', + [`& ${StyledToolButtonInner}`]: { + borderRadius: '100%', + boxShadow: '$panel', + }, + [`& ${StyledToolButtonInner} > svg`]: { + width: 14, + height: 14, + }, }, - circle: {}, }, isActive: { - true: {}, + true: { + [`${StyledToolButtonInner}`]: { + backgroundColor: '$selected', + color: '$panelActive', + }, + }, false: { [`&:hover:not(:disabled) ${StyledToolButtonInner}`]: { backgroundColor: '$hover', border: '1px solid $panel', }, + [`&:focus:not(:disabled) ${StyledToolButtonInner}`]: { + backgroundColor: '$hover', + }, }, }, + bp: { + mobile: {}, + small: {}, + }, }, + compoundVariants: [ + { + variant: 'primary', + bp: 'mobile', + css: { + height: '40px', + width: '40px', + [`& ${StyledToolButtonInner} > svg`]: { + width: 16, + height: 16, + }, + }, + }, + { + variant: 'primary', + bp: 'small', + css: { + height: '44px', + width: '44px', + [`& ${StyledToolButtonInner} > svg`]: { + width: 20, + height: 20, + }, + }, + }, + ], }) diff --git a/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx b/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx index ddf00887c..1631471ed 100644 --- a/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx +++ b/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx @@ -47,7 +47,6 @@ const StyledToolsPanelContainer = styled('div', { gridTemplateRows: 'auto auto', justifyContent: 'space-between', padding: '0', - alignItems: 'flex-end', zIndex: 200, pointerEvents: 'none', '& > div > *': { @@ -63,7 +62,7 @@ const StyledCenterWrap = styled('div', { alignItems: 'center', justifyContent: 'center', flexDirection: 'column', - gap: 12, + gap: '$4', }) const StyledStatusWrap = styled('div', { @@ -74,5 +73,6 @@ const StyledStatusWrap = styled('div', { const StyledPrimaryTools = styled('div', { position: 'relative', display: 'flex', + alignItems: 'center', gap: '$2', }) diff --git a/packages/tldraw/src/components/TopPanel/DashMenu.tsx b/packages/tldraw/src/components/TopPanel/DashMenu.tsx index e1863f49e..fb5a2229a 100644 --- a/packages/tldraw/src/components/TopPanel/DashMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/DashMenu.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { useTLDrawContext } from '~hooks' import { DashStyle, Data } from '~types' -import { DMContent, DMRadioItem, DMTriggerIcon } from '~components/DropdownMenu' +import { DMContent, DMTriggerIcon } from '~components/DropdownMenu' import { ToolButton } from '~components/ToolButton' -import { Tooltip } from '~components/Tooltip' +import { DashDashedIcon, DashDottedIcon, DashDrawIcon, DashSolidIcon } from '~components/icons' const dashes = { [DashStyle.Draw]: , @@ -23,7 +23,7 @@ export const DashMenu = React.memo((): JSX.Element => { return ( {dashes[dash]} - + {Object.keys(DashStyle).map((dashStyle) => ( { ) }) -function DashSolidIcon(): JSX.Element { - return ( - - - - ) -} +// function DashSolidIcon(): JSX.Element { +// return ( +// +// +// +// ) +// } -function DashDashedIcon(): JSX.Element { - return ( - - - - ) -} +// function DashDashedIcon(): JSX.Element { +// return ( +// +// +// +// ) +// } -const dottedDasharray = `${50.26548 * 0.025} ${50.26548 * 0.1}` +// const dottedDasharray = `${50.26548 * 0.025} ${50.26548 * 0.1}` -function DashDottedIcon(): JSX.Element { - return ( - - - - ) -} +// function DashDottedIcon(): JSX.Element { +// return ( +// +// +// +// ) +// } -function DashDrawIcon(): JSX.Element { - return ( - - - - ) -} +// function DashDrawIcon(): JSX.Element { +// return ( +// +// +// +// ) +// } diff --git a/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx b/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx index a3d07c75e..019cf224e 100644 --- a/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx +++ b/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx @@ -2,7 +2,6 @@ import * as React from 'react' import * as Checkbox from '@radix-ui/react-checkbox' import { useTLDrawContext } from '~hooks' import type { Data } from '~types' -import { Tooltip } from '~components/Tooltip' import { BoxIcon, IsFilledIcon } from '~components/icons' import { ToolButton } from '~components/ToolButton' diff --git a/packages/tldraw/src/components/TopPanel/SizeMenu.tsx b/packages/tldraw/src/components/TopPanel/SizeMenu.tsx index a34f766fd..f0f55da8a 100644 --- a/packages/tldraw/src/components/TopPanel/SizeMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/SizeMenu.tsx @@ -5,7 +5,6 @@ import { useTLDrawContext } from '~hooks' import { DMContent, DMTriggerIcon } from '~components/DropdownMenu' import { ToolButton } from '~components/ToolButton' import { SizeSmallIcon, SizeMediumIcon, SizeLargeIcon } from '~components/icons' -import { Tooltip } from '~components/Tooltip' const sizes = { [SizeStyle.Small]: , @@ -23,7 +22,7 @@ export const SizeMenu = React.memo((): JSX.Element => { return ( {sizes[size as SizeStyle]} - + {Object.keys(SizeStyle).map((sizeStyle: string) => ( ): JSX.Element { return ( - - + + ) } diff --git a/packages/tldraw/src/components/icons/SizeMediumIcon.tsx b/packages/tldraw/src/components/icons/SizeMediumIcon.tsx index ae9bf8778..b6011c23c 100644 --- a/packages/tldraw/src/components/icons/SizeMediumIcon.tsx +++ b/packages/tldraw/src/components/icons/SizeMediumIcon.tsx @@ -2,11 +2,15 @@ import * as React from 'react' export function SizeMediumIcon(props: React.SVGProps): JSX.Element { return ( - - + + ) } diff --git a/packages/tldraw/src/components/icons/SizeSmallIcon.tsx b/packages/tldraw/src/components/icons/SizeSmallIcon.tsx index 864787d2f..aae512912 100644 --- a/packages/tldraw/src/components/icons/SizeSmallIcon.tsx +++ b/packages/tldraw/src/components/icons/SizeSmallIcon.tsx @@ -2,11 +2,15 @@ import * as React from 'react' export function SizeSmallIcon(props: React.SVGProps): JSX.Element { return ( - - + + ) }