mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 00:50:01 +00:00
1d7a5b9e0b
- Buttons are marked as `touch-manipulation` so double-tapping on them doesn't initiate a zoom. - Move scrubable inputs to usePointerSwipe - Strangely, swipe direction was inverted on mobile. This solves the issue and simplifies code - Moves event handlers into the scrubbable input component - Make the slightly bigger buttons only apply when on mobile. - Updates the workflows dropdown to have a check by the activeWorkflow and truncate workflow names - Displays dropzones (for the image preview) on mobile, but disables the prompt to drag and drop an image if none is selected. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9686-Mobile-input-tweaks-31f6d73d3650811d9025d0cd1ac58534) by [Unito](https://www.unito.io)
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import type { VariantProps } from 'cva'
|
|
import { cva } from 'cva'
|
|
|
|
export const buttonVariants = cva({
|
|
base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
|
|
variants: {
|
|
variant: {
|
|
secondary:
|
|
'text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover',
|
|
primary:
|
|
'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
|
|
inverted:
|
|
'bg-base-foreground text-base-background hover:bg-base-foreground/80',
|
|
destructive:
|
|
'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
|
|
textonly:
|
|
'bg-transparent text-base-foreground hover:bg-secondary-background-hover',
|
|
'muted-textonly':
|
|
'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
|
|
'destructive-textonly':
|
|
'bg-transparent text-destructive-background hover:bg-destructive-background/10',
|
|
'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
|
|
base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
|
|
gradient:
|
|
'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
|
|
},
|
|
size: {
|
|
sm: 'h-6 rounded-sm px-2 py-1 text-xs',
|
|
md: 'h-8 rounded-lg p-2 text-xs',
|
|
lg: 'h-10 rounded-lg px-4 py-2 text-sm',
|
|
icon: 'size-8',
|
|
'icon-sm': 'size-5 p-0',
|
|
unset: ''
|
|
}
|
|
},
|
|
|
|
defaultVariants: {
|
|
variant: 'secondary',
|
|
size: 'md'
|
|
}
|
|
})
|
|
|
|
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
|
|
|
const variants = [
|
|
'secondary',
|
|
'primary',
|
|
'inverted',
|
|
'destructive',
|
|
'textonly',
|
|
'muted-textonly',
|
|
'destructive-textonly',
|
|
'base',
|
|
'overlay-white',
|
|
'gradient'
|
|
] as const satisfies Array<ButtonVariants['variant']>
|
|
const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
|
|
ButtonVariants['size']
|
|
>
|
|
|
|
export const FOR_STORIES = { variants, sizes } as const
|