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

Fix tooltips for buttons under ActionButton being partially covered by superseding buttons (#911)

Browse source 
* made Tooltip wrap ToolButton instead of the other way around for items in ActionButton

* removes unnecessary icon variant

* Add tooltips to align/distribute

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Zachary Ho 2022-08-16 07:11:50 +10:00 committed by GitHub
parent b54a217f13
commit 1ea10ca865
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 135 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -196,149 +196,156 @@ export function ActionButton() {
<DMContent sideOffset={16} side={contentSide}>
<>
<ButtonsRow>
<ToolButton variant="icon" disabled={!hasSelection} onClick={handleDuplicate}>
<Tooltip
label={intl.formatMessage({ id: 'duplicate' })}
kbd={`#D`}
id="TD-Tools-Copy"
>
<Tooltip label={intl.formatMessage({ id: 'duplicate' })} kbd={`#D`} id="TD-Tools-Copy">
<ToolButton disabled={!hasSelection} onClick={handleDuplicate}>
<CopyIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleRotate}>
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'rotate' })} id="TD-Tools-Rotate">
<ToolButton disabled={!hasSelection} onClick={handleRotate}>
<RotateCounterClockwiseIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: isAllLocked ? 'unlock' : 'lock' })}
kbd={`#L`}
id="TD-Tools-Lock"
>
<ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
{isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
</Tooltip>
<Tooltip
label={intl.formatMessage({
id: isAllAspectLocked ? 'unlock.aspect.ratio' : 'lock.aspect.ratio',
})}
id="TD-Tools-AspectRatio"
>
<ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
{isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
</Tooltip>
</ToolButton>
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
<ToolButton
disabled={!hasSelection || (!isAllGrouped && !hasMultipleSelection)}
onClick={handleGroup}
>
<Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
<GroupIcon />
</Tooltip>
</ToolButton>
</Tooltip>
</ButtonsRow>
<ButtonsRow>
<ToolButton disabled={!hasSelection} onClick={handleMoveToBack}>
<Tooltip
label={intl.formatMessage({ id: 'move.to.back' })}
kbd={`#⇧[`}
id="TD-Tools-PinBottom"
>
<ToolButton disabled={!hasSelection} onClick={handleMoveToBack}>
<PinBottomIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleMoveBackward}>
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'move.backward' })}
kbd={`#[`}
id="TD-Tools-ArrowDown"
>
<ToolButton disabled={!hasSelection} onClick={handleMoveBackward}>
<ArrowDownIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleMoveForward}>
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'move.forward' })}
kbd={`#]`}
id="TD-Tools-ArrowUp"
>
<ToolButton disabled={!hasSelection} onClick={handleMoveForward}>
<ArrowUpIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleMoveToFront}>
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'move.to.front' })}
kbd={`#⇧]`}
id="TD-Tools-PinTop"
>
<ToolButton disabled={!hasSelection} onClick={handleMoveToFront}>
<PinTopIcon />
</Tooltip>
</ToolButton>
<ToolButton disabled={!hasSelection} onClick={handleResetAngle}>
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'reset.angle' })} id="TD-Tools-ResetAngle">
<ToolButton disabled={!hasSelection} onClick={handleResetAngle}>
<AngleIcon />
</Tooltip>
</ToolButton>
</Tooltip>
</ButtonsRow>
<Divider />
<ButtonsRow>
<ToolButton disabled={!hasTwoOrMore} onClick={alignLeft} id="TD-Tools-AlignLeft">
<Tooltip label={intl.formatMessage({ id: 'align.left' })} id="TD-Tools-AlignLeft">
<ToolButton disabled={!hasTwoOrMore} onClick={alignLeft}>
<AlignLeftIcon />
</ToolButton>
<ToolButton
disabled={!hasTwoOrMore}
onClick={alignCenterHorizontal}
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'align.center.x' })}
id="TD-Tools-AlignCenterHorizontal"
>
<ToolButton disabled={!hasTwoOrMore} onClick={alignCenterHorizontal}>
<AlignCenterHorizontallyIcon />
</ToolButton>
<ToolButton disabled={!hasTwoOrMore} onClick={alignRight} id="TD-Tools-AlignRight">
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'align.right' })} id="TD-Tools-AlignRight">
<ToolButton disabled={!hasTwoOrMore} onClick={alignRight}>
<AlignRightIcon />
</ToolButton>
<ToolButton
disabled={!hasTwoOrMore}
onClick={stretchHorizontally}
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'stretch.x' })}
id="TD-Tools-StretchHorizontal"
>
<ToolButton disabled={!hasTwoOrMore} onClick={stretchHorizontally}>
<StretchHorizontallyIcon />
</ToolButton>
<ToolButton
disabled={!hasThreeOrMore}
onClick={distributeHorizontally}
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'distribute.x' })}
id="TD-Tools-SpaceEvenlyHorizontal"
>
<ToolButton disabled={!hasThreeOrMore} onClick={distributeHorizontally}>
<SpaceEvenlyHorizontallyIcon />
</ToolButton>
</Tooltip>
</ButtonsRow>
<ButtonsRow>
<ToolButton disabled={!hasTwoOrMore} onClick={alignTop} id="TD-Tools-AlignTop">
<Tooltip label={intl.formatMessage({ id: 'align.top' })} id="TD-Tools-AlignTop">
<ToolButton disabled={!hasTwoOrMore} onClick={alignTop}>
<AlignTopIcon />
</ToolButton>
<ToolButton
disabled={!hasTwoOrMore}
onClick={alignCenterVertical}
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'align.center.y' })}
id="TD-Tools-AlignCenterVertical"
>
<ToolButton disabled={!hasTwoOrMore} onClick={alignCenterVertical}>
<AlignCenterVerticallyIcon />
</ToolButton>
<ToolButton disabled={!hasTwoOrMore} onClick={alignBottom} id="TD-Tools-AlignBottom">
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'align.bottom' })} id="TD-Tools-AlignBottom">
<ToolButton disabled={!hasTwoOrMore} onClick={alignBottom}>
<AlignBottomIcon />
</ToolButton>
<ToolButton
disabled={!hasTwoOrMore}
onClick={stretchVertically}
id="TD-Tools-tretchVertical"
>
</Tooltip>
<Tooltip label={intl.formatMessage({ id: 'stretch.y' })} id="TD-Tools-StretchVertical">
<ToolButton disabled={!hasTwoOrMore} onClick={stretchVertically}>
<StretchVerticallyIcon />
</ToolButton>
<ToolButton
disabled={!hasThreeOrMore}
onClick={distributeVertically}
</Tooltip>
<Tooltip
label={intl.formatMessage({ id: 'distribute.y' })}
id="TD-Tools-SpaceEvenlyVertical"
>
<ToolButton disabled={!hasThreeOrMore} onClick={distributeVertically}>
<SpaceEvenlyVerticallyIcon />
</ToolButton>
</Tooltip>
</ButtonsRow>
</>
</DMContent>

12
packages/tldraw/src/translations/main.json
View file

@ -107,5 +107,15 @@
"github": "Github",
"twitter": "Twitter",
"discord": "Discord",
"image": "Image"
"image": "Image",
"align.left": "Align Left",
"align.center.x": "Align Horizontal Center",
"align.right": "Align Right",
"align.top": "Align Top",
"align.center.y": "Align Vertical Center",
"align.bottom": "Align Bottom",
"distribute.x": "Distribute Horizontal",
"distribute.y": "Distribute Vertical",
"stretch.x": "Stretch Horizontal",
"stretch.y": "Stretch Vertical"
}