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

fix tooltips not showing up in mobile view

Browse Source
This commit is contained in:
Athou
2025-03-02 12:51:26 +01:00
parent 4441d76a7f
commit 5992795579
1 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
commafeed-client/src/components/ActionButton.tsx
View File

@@ -1,6 +1,6 @@
import type { MessageDescriptor } from "@lingui/core" import type { MessageDescriptor } from "@lingui/core"
import { useLingui } from "@lingui/react" import { useLingui } from "@lingui/react"
import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core" import { ActionIcon, Box, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core"
import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon" import type { ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon"
import { Constants } from "app/constants" import { Constants } from "app/constants"
import { useActionButton } from "hooks/useActionButton" import { useActionButton } from "hooks/useActionButton"
@@ -19,7 +19,7 @@ interface ActionButtonProps {
/** /**
* Switches between Button with label (desktop) and ActionIcon (mobile) * Switches between Button with label (desktop) and ActionIcon (mobile)
*/ */
export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props: ActionButtonProps, ref) => { export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props: ActionButtonProps, ref) => {
const { mobile } = useActionButton() const { mobile } = useActionButton()
const theme = useMantineTheme() const theme = useMantineTheme()
const { _ } = useLingui() const { _ } = useLingui()
@@ -27,31 +27,36 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
const label = typeof props.label === "string" ? props.label : props.label && _(props.label) const label = typeof props.label === "string" ? props.label : props.label && _(props.label)
const variant = props.variant ?? "subtle" const variant = props.variant ?? "subtle"
const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop) const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
return iconOnly ? (
<Tooltip label={label} openDelay={Constants.tooltip.delay}> return (
<ActionIcon <Box ref={ref}>
ref={ref} {iconOnly && (
color={theme.primaryColor} <Tooltip label={label} openDelay={Constants.tooltip.delay}>
variant={variant} <ActionIcon
className={props.className} color={theme.primaryColor}
onClick={props.onClick} variant={variant}
aria-label={label} className={props.className}
> onClick={props.onClick}
{props.icon} aria-label={label}
</ActionIcon> >
</Tooltip> {props.icon}
) : ( </ActionIcon>
<Button </Tooltip>
ref={ref} )}
variant={variant} {!iconOnly && (
size="xs" <Button
className={props.className} variant={variant}
leftSection={props.icon} size="xs"
onClick={props.onClick} className={props.className}
aria-label={label} leftSection={props.icon}
> onClick={props.onClick}
{label} aria-label={label}
</Button> >
{label}
</Button>
)}
</Box>
) )
}) })
ActionButton.displayName = "HeaderButton" ActionButton.displayName = "HeaderButton"