Improve style menu (#361)
* Change undo / redo icons, add undo/redo buttons, add Styles label * Update TopPanel.tsx * Fix breakpoints
This commit is contained in:
Steve Ruiz
GitHub
parent
b1d46c29f6
commit
d0206f485e
7 changed files with 62 additions and 40 deletions
|
|
@ -141,6 +141,7 @@ export const StyledToolButton = styled('button', {
|
|||
[`& ${StyledToolButtonInner}`]: {
|
||||
fontSize: '$1',
|
||||
padding: '0 $3',
|
||||
gap: '$3',
|
||||
},
|
||||
},
|
||||
circle: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,7 +150,9 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
|||
|
||||
return (
|
||||
<DropdownMenu.Root dir="ltr">
|
||||
<DMTriggerIcon>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<ToolButton variant="text">
|
||||
Styles
|
||||
<OverlapIcons
|
||||
style={{
|
||||
color: strokes[theme][displayedStyle.color as ColorStyle],
|
||||
|
|
@ -164,7 +167,8 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
|
|||
)}
|
||||
{DASH_ICONS[displayedStyle.dash]}
|
||||
</OverlapIcons>
|
||||
</DMTriggerIcon>
|
||||
</ToolButton>
|
||||
</DropdownMenu.Trigger>
|
||||
<DMContent>
|
||||
<StyledRow variant="tall">
|
||||
<span>Color</span>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue