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

fix(tooltip): add tooltips for undo/redo buttons (#1095)

Browse source 
* fix(tooltip): add lack tooltips for undo/redo buttons

* fix: change id of undo/redo buttons
This commit is contained in:
Jang Min 2023-01-15 20:15:32 +09:00 committed by GitHub
parent 33dde339aa
commit 60728e069a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import * as React from 'react' import * as React from 'react'
import { useIntl } from 'react-intl'
import { Panel } from '~components/Primitives/Panel' import { Panel } from '~components/Primitives/Panel'
import { ToolButton } from '~components/Primitives/ToolButton' import { ToolButton, ToolButtonWithTooltip } from '~components/Primitives/ToolButton'
import { UndoIcon } from '~components/Primitives/icons' import { UndoIcon } from '~components/Primitives/icons'
import { useTldrawApp } from '~hooks' import { useTldrawApp } from '~hooks'
import { styled } from '~styles' import { styled } from '~styles'
@ -28,6 +29,7 @@ export function _TopPanel({
showMultiplayerMenu, showMultiplayerMenu,
}: TopPanelProps) { }: TopPanelProps) {
const app = useTldrawApp() const app = useTldrawApp()
const intl = useIntl()
return ( return (
<StyledTopPanel> <StyledTopPanel>
@ -45,12 +47,22 @@ export function _TopPanel({
<ReadOnlyLabel>Read Only</ReadOnlyLabel> <ReadOnlyLabel>Read Only</ReadOnlyLabel>
) : ( ) : (
<> <>
<ToolButton> <ToolButtonWithTooltip
<UndoIcon onClick={app.undo} /> kbd={'#Z'}
</ToolButton> label={intl.formatMessage({ id: 'undo' })}
<ToolButton> onClick={app.undo}
<UndoIcon onClick={app.redo} flipHorizontal /> id="TD-TopPanel-Undo"
</ToolButton> >
<UndoIcon />
</ToolButtonWithTooltip>
<ToolButtonWithTooltip
kbd={'#⇧Z'}
label={intl.formatMessage({ id: 'redo' })}
onClick={app.redo}
id="TD-TopPanel-Redo"
>
<UndoIcon flipHorizontal />
</ToolButtonWithTooltip>
</> </>
)} )}
{showZoom && <ZoomMenu />} {showZoom && <ZoomMenu />}