Fix tooltips for buttons under ActionButton being partially covered by superseding buttons (#911)
* 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
GitHub
parent
b54a217f13
commit
1ea10ca865
2 changed files with 135 additions and 118 deletions
|
|
@ -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 label={intl.formatMessage({ id: 'rotate' })} id="TD-Tools-Rotate">
|
||||
</ToolButton>
|
||||
</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
|
||||
label={intl.formatMessage({ id: isAllLocked ? 'unlock' : 'lock' })}
|
||||
kbd={`#L`}
|
||||
id="TD-Tools-Lock"
|
||||
>
|
||||
{isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
|
||||
</Tooltip>
|
||||
</ToolButton>
|
||||
<ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({
|
||||
id: isAllAspectLocked ? 'unlock.aspect.ratio' : 'lock.aspect.ratio',
|
||||
})}
|
||||
id="TD-Tools-AspectRatio"
|
||||
>
|
||||
{isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
|
||||
</Tooltip>
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasSelection || (!isAllGrouped && !hasMultipleSelection)}
|
||||
onClick={handleGroup}
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: isAllLocked ? 'unlock' : 'lock' })}
|
||||
kbd={`#L`}
|
||||
id="TD-Tools-Lock"
|
||||
>
|
||||
<Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
|
||||
<ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
|
||||
{isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
|
||||
</ToolButton>
|
||||
</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 />}
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
|
||||
<ToolButton
|
||||
disabled={!hasSelection || (!isAllGrouped && !hasMultipleSelection)}
|
||||
onClick={handleGroup}
|
||||
>
|
||||
<GroupIcon />
|
||||
</Tooltip>
|
||||
</ToolButton>
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
</ButtonsRow>
|
||||
<ButtonsRow>
|
||||
<ToolButton disabled={!hasSelection} onClick={handleMoveToBack}>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'move.to.back' })}
|
||||
kbd={`#⇧[`}
|
||||
id="TD-Tools-PinBottom"
|
||||
>
|
||||
<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
|
||||
label={intl.formatMessage({ id: 'move.backward' })}
|
||||
kbd={`#[`}
|
||||
id="TD-Tools-ArrowDown"
|
||||
>
|
||||
</ToolButton>
|
||||
</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
|
||||
label={intl.formatMessage({ id: 'move.forward' })}
|
||||
kbd={`#]`}
|
||||
id="TD-Tools-ArrowUp"
|
||||
>
|
||||
</ToolButton>
|
||||
</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
|
||||
label={intl.formatMessage({ id: 'move.to.front' })}
|
||||
kbd={`#⇧]`}
|
||||
id="TD-Tools-PinTop"
|
||||
>
|
||||
</ToolButton>
|
||||
</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 label={intl.formatMessage({ id: 'reset.angle' })} id="TD-Tools-ResetAngle">
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip label={intl.formatMessage({ id: 'reset.angle' })} id="TD-Tools-ResetAngle">
|
||||
<ToolButton disabled={!hasSelection} onClick={handleResetAngle}>
|
||||
<AngleIcon />
|
||||
</Tooltip>
|
||||
</ToolButton>
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
</ButtonsRow>
|
||||
<Divider />
|
||||
<ButtonsRow>
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignLeft} id="TD-Tools-AlignLeft">
|
||||
<AlignLeftIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasTwoOrMore}
|
||||
onClick={alignCenterHorizontal}
|
||||
<Tooltip label={intl.formatMessage({ id: 'align.left' })} id="TD-Tools-AlignLeft">
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignLeft}>
|
||||
<AlignLeftIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'align.center.x' })}
|
||||
id="TD-Tools-AlignCenterHorizontal"
|
||||
>
|
||||
<AlignCenterHorizontallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignRight} id="TD-Tools-AlignRight">
|
||||
<AlignRightIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasTwoOrMore}
|
||||
onClick={stretchHorizontally}
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignCenterHorizontal}>
|
||||
<AlignCenterHorizontallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip label={intl.formatMessage({ id: 'align.right' })} id="TD-Tools-AlignRight">
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignRight}>
|
||||
<AlignRightIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'stretch.x' })}
|
||||
id="TD-Tools-StretchHorizontal"
|
||||
>
|
||||
<StretchHorizontallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasThreeOrMore}
|
||||
onClick={distributeHorizontally}
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={stretchHorizontally}>
|
||||
<StretchHorizontallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'distribute.x' })}
|
||||
id="TD-Tools-SpaceEvenlyHorizontal"
|
||||
>
|
||||
<SpaceEvenlyHorizontallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton disabled={!hasThreeOrMore} onClick={distributeHorizontally}>
|
||||
<SpaceEvenlyHorizontallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
</ButtonsRow>
|
||||
<ButtonsRow>
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignTop} id="TD-Tools-AlignTop">
|
||||
<AlignTopIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasTwoOrMore}
|
||||
onClick={alignCenterVertical}
|
||||
<Tooltip label={intl.formatMessage({ id: 'align.top' })} id="TD-Tools-AlignTop">
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignTop}>
|
||||
<AlignTopIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'align.center.y' })}
|
||||
id="TD-Tools-AlignCenterVertical"
|
||||
>
|
||||
<AlignCenterVerticallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignBottom} id="TD-Tools-AlignBottom">
|
||||
<AlignBottomIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasTwoOrMore}
|
||||
onClick={stretchVertically}
|
||||
id="TD-Tools-tretchVertical"
|
||||
>
|
||||
<StretchVerticallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton
|
||||
disabled={!hasThreeOrMore}
|
||||
onClick={distributeVertically}
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignCenterVertical}>
|
||||
<AlignCenterVerticallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip label={intl.formatMessage({ id: 'align.bottom' })} id="TD-Tools-AlignBottom">
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={alignBottom}>
|
||||
<AlignBottomIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip label={intl.formatMessage({ id: 'stretch.y' })} id="TD-Tools-StretchVertical">
|
||||
<ToolButton disabled={!hasTwoOrMore} onClick={stretchVertically}>
|
||||
<StretchVerticallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={intl.formatMessage({ id: 'distribute.y' })}
|
||||
id="TD-Tools-SpaceEvenlyVertical"
|
||||
>
|
||||
<SpaceEvenlyVerticallyIcon />
|
||||
</ToolButton>
|
||||
<ToolButton disabled={!hasThreeOrMore} onClick={distributeVertically}>
|
||||
<SpaceEvenlyVerticallyIcon />
|
||||
</ToolButton>
|
||||
</Tooltip>
|
||||
</ButtonsRow>
|
||||
</>
|
||||
</DMContent>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue