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

Improves action button / delete button appearance

Browse source
This commit is contained in:
Steve Ruiz 2021-11-17 11:06:56 +00:00
parent 1ef5f85e59
commit 2c1cba0a49
3 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/tldraw/src/components/ToolsPanel/ActionButton.tsx
View file

@ -62,12 +62,12 @@ const isAllGroupedSelector = (s: TDSnapshot) => {
)
}
const hasSelectionClickor = (s: TDSnapshot) => {
const hasSelectionSelector = (s: TDSnapshot) => {
const { selectedIds } = s.document.pageStates[s.appState.currentPageId]
return selectedIds.length > 0
}
const hasMultipleSelectionClickor = (s: TDSnapshot) => {
const hasMultipleSelectionSelector = (s: TDSnapshot) => {
const { selectedIds } = s.document.pageStates[s.appState.currentPageId]
return selectedIds.length > 1
}
@ -81,9 +81,9 @@ export function ActionButton(): JSX.Element {
const isAllGrouped = app.useStore(isAllGroupedSelector)
const hasSelection = app.useStore(hasSelectionClickor)
const hasSelection = app.useStore(hasSelectionSelector)
const hasMultipleSelection = app.useStore(hasMultipleSelectionClickor)
const hasMultipleSelection = app.useStore(hasMultipleSelectionSelector)
const selectedShapesCount = app.useStore(selectedShapesCountSelector)
@ -173,8 +173,8 @@ export function ActionButton(): JSX.Element {
return (
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger disabled={!hasSelection} dir="ltr" asChild>
<ToolButton disabled={!hasSelection} variant="circle">
<DropdownMenu.Trigger dir="ltr" asChild>
<ToolButton variant="circle">
<DotsHorizontalIcon />
</ToolButton>
</DropdownMenu.Trigger>

7
packages/tldraw/src/components/ToolsPanel/DeleteButton.tsx
View file

@ -3,7 +3,6 @@ import { Tooltip } from '~components/Tooltip'
import { useTldrawApp } from '~hooks'
import { ToolButton } from '~components/ToolButton'
import { TrashIcon } from '~components/icons'
import { GHOSTED_OPACITY } from '~constants'
export function DeleteButton(): JSX.Element {
const app = useTldrawApp()
@ -13,13 +12,15 @@ export function DeleteButton(): JSX.Element {
}, [app])
const hasSelection = app.useStore(
(s) => s.document.pageStates[s.appState.currentPageId].selectedIds.length > 0
(s) =>
s.appState.status === 'idle' &&
s.document.pageStates[s.appState.currentPageId].selectedIds.length > 0
)
return (
<Tooltip label="Delete" kbd="⌫">
<ToolButton variant="circle" disabled={!hasSelection} onSelect={handleDelete}>
<TrashIcon opacity={hasSelection ? 1 : 0.618} />
<TrashIcon />
</ToolButton>
</Tooltip>
)

13
packages/tldraw/src/state/tools/EraseTool/EraseTool.ts
View file

@ -54,11 +54,14 @@ export class EraseTool extends BaseTool {
case Status.Erasing: {
this.app.completeSession()
if (this.previous) {
this.app.selectTool(this.previous)
} else {
this.app.selectTool('select')
}
// Should the app go back to the previous state, the select
// state, or stay in the eraser state?
// if (this.previous) {
// this.app.selectTool(this.previous)
// } else {
// this.app.selectTool('select')
// }
}
}