ddb73cb6cf
This PR tightens up the editor UI. It removes padding around the editor.  <img width="1196" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/a8205ef1-b142-4fdc-9745-e400c0c4939a"> <img width="1196" alt="image" src="https://github.com/tldraw/tldraw/assets/23072548/87e9dcd1-39f5-466a-a256-9cbd2ff2cf7e"> ### Change Type - [x] `minor` — New feature ### Release Notes - Small adjustment to editor ui.
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import {
|
|
DefaultColorStyle,
|
|
TLDefaultColorStyle,
|
|
getDefaultColorTheme,
|
|
useEditor,
|
|
useValue,
|
|
} from '@tldraw/editor'
|
|
import { useCallback } from 'react'
|
|
import { useRelevantStyles } from '../hooks/useRevelantStyles'
|
|
import { useTranslation } from '../hooks/useTranslation/useTranslation'
|
|
import { StylePanel } from './StylePanel/StylePanel'
|
|
import { Button } from './primitives/Button'
|
|
import { Icon } from './primitives/Icon'
|
|
import { Popover, PopoverContent, PopoverTrigger } from './primitives/Popover'
|
|
|
|
export function MobileStylePanel() {
|
|
const editor = useEditor()
|
|
const msg = useTranslation()
|
|
|
|
const relevantStyles = useRelevantStyles()
|
|
const color = relevantStyles?.styles.get(DefaultColorStyle)
|
|
const theme = getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode })
|
|
const currentColor = (
|
|
color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
|
|
).solid
|
|
|
|
const disableStylePanel = useValue(
|
|
'isHandOrEraserToolActive',
|
|
() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),
|
|
[editor]
|
|
)
|
|
|
|
const handleStylesOpenChange = useCallback(
|
|
(isOpen: boolean) => {
|
|
if (!isOpen) {
|
|
editor.updateInstanceState({ isChangingStyle: false })
|
|
}
|
|
},
|
|
[editor]
|
|
)
|
|
|
|
return (
|
|
<Popover id="style menu" onOpenChange={handleStylesOpenChange}>
|
|
<PopoverTrigger disabled={disableStylePanel}>
|
|
<Button
|
|
type="tool"
|
|
data-testid="mobile.styles"
|
|
style={{
|
|
color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
|
|
}}
|
|
title={msg('style-panel.title')}
|
|
>
|
|
<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent side="top" align="end">
|
|
<StylePanel isMobile />
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|