Add tooltip to recipe copy

This commit is contained in:
Sam Becker 2025-03-12 09:22:44 -05:00
parent 674b2a0cf4
commit 0ea89d7858
7 changed files with 31 additions and 20 deletions

View File

@ -19,10 +19,7 @@ export default function ExifCaptureButton({
const [isLoading, setIsLoading] = useState(false);
return (
<Tooltip
content="Refresh form with EXIF data from original file"
desktopOnly
>
<Tooltip content="Refresh form with EXIF data from original file">
<LoaderButton
isLoading={isLoading}
onClick={() => {

View File

@ -34,10 +34,7 @@ export default function PhotoSyncButton({
confirmText.push('This action cannot be undone.');
return (
<Tooltip
content="Regenerate photo data"
desktopOnly
>
<Tooltip content="Regenerate photo data">
<LoaderButton
className={className}
icon={<IconGrSync

View File

@ -140,6 +140,7 @@ export default function AdminAppInsightsClient({
<Tooltip
content="Could not connect to GitHub API. Try refreshing."
classNameTrigger="translate-y-[-1.5px] ml-2 h-3"
supportMobile
/>
</>}
/>}

View File

@ -2,21 +2,26 @@ import { BiCopy } from 'react-icons/bi';
import LoaderButton from './primitives/LoaderButton';
import clsx from 'clsx/lite';
import { toastSuccess } from '@/toast';
import Tooltip from './Tooltip';
export default function CopyButton({
label,
text,
subtle,
iconSize = 15,
tooltip,
className,
}: {
label: string
text?: string,
subtle?: boolean
iconSize?: number
tooltip?: string
className?: string
}) {
return (
const button =
<LoaderButton
icon={<BiCopy size={15} />}
icon={<BiCopy size={iconSize} />}
className={clsx(
subtle && 'text-gray-300 dark:text-gray-700',
className,
@ -29,6 +34,13 @@ export default function CopyButton({
: undefined}
styleAs="link"
disabled={!text}
/>
/>;
return (
tooltip
? <Tooltip content={tooltip}>
{button}
</Tooltip>
: button
);
}

View File

@ -12,14 +12,14 @@ export default function TooltipPrimitive({
className,
classNameTrigger: classNameTriggerProp,
sideOffset = 10,
desktopOnly,
supportMobile,
children,
}: {
content?: ReactNode
className?: string
classNameTrigger?: string
sideOffset?: number
desktopOnly?: boolean
supportMobile?: boolean
children: ReactNode
}) {
const refTrigger = useRef<HTMLButtonElement>(null);
@ -29,7 +29,7 @@ export default function TooltipPrimitive({
const supportsHover = useSupportsHover();
const includeButton = !desktopOnly && !supportsHover;
const includeButton = !supportsHover && supportMobile;
useClickInsideOutside({
htmlElements: [refTrigger, refContent],

View File

@ -323,7 +323,11 @@ export default function PhotoLarge({
) &&
<>
{' '}
<Tooltip content="35mm equivalent" sideOffset={3}>
<Tooltip
content="35mm equivalent"
sideOffset={3}
supportMobile
>
<span
className={clsx(
'text-extra-dim',
@ -349,10 +353,7 @@ export default function PhotoLarge({
prefetch={prefetchRelatedLinks}
/>}
{shouldRenderRecipe &&
<Tooltip
content="Fujifilm Recipe"
desktopOnly
>
<Tooltip content="Fujifilm Recipe">
<button
ref={refRecipeButton}
title="Fujifilm Recipe"

View File

@ -122,10 +122,13 @@ export default function PhotoRecipeOverlay({
? `${formatRecipe(title).toLocaleUpperCase()} recipe`
: 'Recipe'}`}
text={generateRecipeText({ recipe, simulation }).join('\n')}
iconSize={17}
className={clsx(
'translate-y-[1.5px]',
'hover:text-black/50 active:text-black/75',
'text-black/40 active:text-black/75',
'hover:text-black/40',
)}
tooltip="Copy recipe text"
/>
<LoaderButton
icon={<IoCloseCircle size={20} />}