Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tooltip to action buttons when label is hidden because viewport width is below mobile breakpoint (Athou/commafeed-browser-extension#1)

Browse Source
This commit is contained in:
Athou
2023-06-07 11:32:54 +02:00
parent 3a5dc5d0ed
commit fafc0619ad
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
commafeed-client/src/components/ActionButtton.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, Button, useMantineTheme } from "@mantine/core" import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core"
import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon" import { ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon"
import { ButtonProps } from "@mantine/core/lib/Button/Button" import { ButtonProps } from "@mantine/core/lib/Button/Button"
import { useMediaQuery } from "@mantine/hooks" import { useMediaQuery } from "@mantine/hooks"
@@ -22,9 +22,11 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`) const mobile = !useMediaQuery(`(min-width: ${theme.breakpoints.lg})`)
const iconOnly = !props.showLabelOnMobile && (mobile || !props.label) const iconOnly = !props.showLabelOnMobile && (mobile || !props.label)
return iconOnly ? ( return iconOnly ? (
<ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}> <Tooltip label={props.label} openDelay={500}>
{props.icon} <ActionIcon ref={ref} color={theme.primaryColor} variant={variant} className={props.className} onClick={props.onClick}>
</ActionIcon> {props.icon}
</ActionIcon>
</Tooltip>
) : ( ) : (
<Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}> <Button ref={ref} variant={variant} size="xs" className={props.className} leftIcon={props.icon} onClick={props.onClick}>
{props.label} {props.label}