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

Improve style menu (#361)

Browse source 
* Change undo / redo icons, add undo/redo buttons, add Styles label

* Update TopPanel.tsx

* Fix breakpoints
This commit is contained in:
Steve Ruiz 2021-11-23 15:06:16 +00:00 committed by GitHub
parent b1d46c29f6
commit d0206f485e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
View file

@ -141,6 +141,7 @@ export const StyledToolButton = styled('button', {
[`& ${StyledToolButtonInner}`]: {
fontSize: '$1',
padding: '0 $3',
gap: '$3',
},
},
circle: {

13
packages/tldraw/src/components/Primitives/icons/RedoIcon.tsx
View file

@ -2,17 +2,8 @@ import * as React from 'react'
export function RedoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.5 2.495a.5.5 0 00-.5.5v2.5H9.5a.5.5 0 100 1h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.697 2.049a5 5 0 104.02 6.613.5.5 0 10-.944-.332 4 4 0 11-.946-4.16l.01.01 2.32 2.18a.5.5 0 00.685-.729l-2.314-2.175A5 5 0 007.697 2.05z"
/>
<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M4.32978 8.5081C4.32978 10.1923 5.70009 11.5625 7.38418 11.5625H8.46539C8.64456 11.5625 8.78975 11.4173 8.78975 11.2382V11.13C8.78975 10.9508 8.64457 10.8057 8.46539 10.8057H7.38418C6.11736 10.8057 5.08662 9.77492 5.08662 8.5081C5.08662 7.24128 6.11736 6.21054 7.38418 6.21054H9.37894L8.00515 7.58433C7.8576 7.73183 7.8576 7.97195 8.00515 8.11944C8.14833 8.26251 8.39751 8.2623 8.54036 8.11944L10.56 6.09971C10.6315 6.02824 10.6709 5.93321 10.6709 5.8321C10.6709 5.73106 10.6315 5.63598 10.56 5.56454L8.54025 3.54472C8.3974 3.40176 8.14801 3.40176 8.00513 3.54472C7.85758 3.69218 7.85758 3.93234 8.00513 4.07979L9.37892 5.45368H7.38418C5.70009 5.45368 4.32978 6.82393 4.32978 8.5081Z" />
</svg>
)
}

13
packages/tldraw/src/components/Primitives/icons/UndoIcon.tsx
View file

@ -2,17 +2,8 @@ import * as React from 'react'
export function UndoIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
return (
<svg viewBox="0 -1 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2.5 2.495a.5.5 0 01.5.5v2.5h2.5a.5.5 0 110 1h-3a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.303 2.049a5 5 0 11-4.02 6.613.5.5 0 01.944-.332 4 4 0 10.946-4.16l-.01.01-2.32 2.18a.5.5 0 01-.685-.729l2.314-2.175A5 5 0 017.303 2.05z"
/>
<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M10.6707 8.5081C10.6707 10.1923 9.3004 11.5625 7.61631 11.5625H6.5351C6.35593 11.5625 6.21074 11.4173 6.21074 11.2382V11.13C6.21074 10.9508 6.35591 10.8057 6.5351 10.8057H7.61631C8.88313 10.8057 9.91387 9.77492 9.91387 8.5081C9.91387 7.24128 8.88313 6.21054 7.61631 6.21054H5.62155L6.99534 7.58433C7.14289 7.73183 7.14289 7.97195 6.99534 8.11944C6.85216 8.26251 6.60298 8.2623 6.46013 8.11944L4.44045 6.09971C4.36898 6.02824 4.32959 5.93321 4.32959 5.8321C4.32959 5.73106 4.36898 5.63598 4.44045 5.56454L6.46024 3.54472C6.60309 3.40176 6.85248 3.40176 6.99535 3.54472C7.14291 3.69218 7.14291 3.93234 6.99535 4.07979L5.62156 5.45368H7.61631C9.3004 5.45368 10.6707 6.82393 10.6707 8.5081Z" />
</svg>
)
}

36
packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx
View file

@ -38,6 +38,7 @@ import {
TextAlignLeftIcon,
TextAlignRightIcon,
} from '@radix-ui/react-icons'
import { RowButton } from '~components/Primitives/RowButton'
const currentStyleSelector = (s: TDSnapshot) => s.appState.currentStyle
const selectedIdsSelector = (s: TDSnapshot) =>
@ -149,22 +150,25 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
return (
<DropdownMenu.Root dir="ltr">
<DMTriggerIcon>
<OverlapIcons
style={{
color: strokes[theme][displayedStyle.color as ColorStyle],
}}
>
{displayedStyle.isFilled && (
<CircleIcon
size={16}
stroke="none"
fill={fills[theme][displayedStyle.color as ColorStyle]}
/>
)}
{DASH_ICONS[displayedStyle.dash]}
</OverlapIcons>
</DMTriggerIcon>
<DropdownMenu.Trigger asChild>
<ToolButton variant="text">
Styles
<OverlapIcons
style={{
color: strokes[theme][displayedStyle.color as ColorStyle],
}}
>
{displayedStyle.isFilled && (
<CircleIcon
size={16}
stroke="none"
fill={fills[theme][displayedStyle.color as ColorStyle]}
/>
)}
{DASH_ICONS[displayedStyle.dash]}
</OverlapIcons>
</ToolButton>
</DropdownMenu.Trigger>
<DMContent>
<StyledRow variant="tall">
<span>Color</span>

29
packages/tldraw/src/components/TopPanel/TopPanel.tsx
View file

@ -5,6 +5,10 @@ import { PageMenu } from './PageMenu'
import { ZoomMenu } from './ZoomMenu'
import { StyleMenu } from './StyleMenu'
import { Panel } from '~components/Primitives/Panel'
import { ToolButton } from '~components/Primitives/ToolButton'
import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
import { breakpoints } from '~components/breakpoints'
import { useTldrawApp } from '~hooks'
interface TopPanelProps {
readOnly: boolean
@ -23,6 +27,8 @@ export function TopPanel({
showZoom,
showSponsorLink,
}: TopPanelProps) {
const app = useTldrawApp()
return (
<StyledTopPanel>
{(showMenu || showPages) && (
@ -35,6 +41,14 @@ export function TopPanel({
{(showStyles || showZoom) && (
<Panel side="right">
{showStyles && !readOnly && <StyleMenu />}
<MobileOnly bp={breakpoints}>
<ToolButton>
<UndoIcon onClick={app.undo} />
</ToolButton>
<ToolButton>
<RedoIcon onClick={app.redo} />
</ToolButton>
</MobileOnly>
{showZoom && <ZoomMenu />}
</Panel>
)}
@ -60,3 +74,18 @@ const StyledSpacer = styled('div', {
flexGrow: 2,
pointerEvents: 'none',
})
const MobileOnly = styled('div', {
display: 'flex',
flexDirection: 'row',
variants: {
bp: {
small: {
display: 'inherit',
},
medium: {
display: 'none',
},
},
},
})

7
packages/tldraw/src/components/breakpoints.tsx
View file

@ -3,4 +3,9 @@
/* -------------------------------------------------- */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const breakpoints: any = { '@initial': 'mobile', '@sm': 'small' }
export const breakpoints: any = {
'@initial': 'mobile',
'@micro': 'micro',
'@sm': 'small',
'@md': 'medium',
}

3
packages/tldraw/src/styles/stitches.config.ts
View file

@ -32,7 +32,8 @@ const { styled, createTheme } = createStitches({
key: '1px 1px rgba(0,0,0,1)',
panel: `0px 0px 16px -1px rgba(0, 0, 0, 0.05),
0px 0px 16px -8px rgba(0, 0, 0, 0.05),
0px 0px 16px -12px rgba(0, 0, 0, 0.12)`,
0px 0px 16px -12px rgba(0, 0, 0, 0.12),
0px 0px 2px 0px rgba(0, 0, 0, 0.08)`,
},
space: {
0: '2px',