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

* 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

View file

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