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

17
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,10 +27,12 @@ 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 ? (
return (
<Box ref={ref}>
{iconOnly && (
<Tooltip label={label} openDelay={Constants.tooltip.delay}> <Tooltip label={label} openDelay={Constants.tooltip.delay}>
<ActionIcon <ActionIcon
ref={ref}
color={theme.primaryColor} color={theme.primaryColor}
variant={variant} variant={variant}
className={props.className} className={props.className}
@@ -40,9 +42,9 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
{props.icon} {props.icon}
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
) : ( )}
{!iconOnly && (
<Button <Button
ref={ref}
variant={variant} variant={variant}
size="xs" size="xs"
className={props.className} className={props.className}
@@ -52,6 +54,9 @@ export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((pr
> >
{label} {label}
</Button> </Button>
)}
</Box>
) )
}) })
ActionButton.displayName = "HeaderButton" ActionButton.displayName = "HeaderButton"