Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: support smaller field bounds (#1344)

Browse Source 
Currently this won't always display super well since
our insertion solution isn't amazing but our current
minimum bounds within the UI are a bit large and can be
smaller.

This change makes it smaller and uses container queries to
support dynamically displaying labels based on the container
size.
This commit is contained in:
Lucas Smith
2024-09-17 00:29:42 +10:00
committed by GitHub
parent fa6453e811
commit 7644c0d855
20 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -64,8 +64,8 @@ const fontCaveat = Caveat({
variable: '--font-caveat',
});
const MIN_HEIGHT_PX = 40;
const MIN_WIDTH_PX = 140;
const MIN_HEIGHT_PX = 20;
const MIN_WIDTH_PX = 80;
export type FieldFormType = {
nativeId?: number;

8
packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
View File

@ -26,19 +26,21 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
}
return (
<div className="flex flex-col gap-y-2">
<div className="flex flex-col gap-y-1">
{!parsedFieldMeta?.values ? (
<FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
) : (
parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
<div key={index} className="flex items-center gap-x-1.5">
<Checkbox
className="h-4 w-4"
className="h-3 w-3"
checkClassName="text-white"
id={`checkbox-${index}`}
checked={item.checked}
/>
<Label htmlFor={`checkbox-${index}`}>{item.value}</Label>
<Label htmlFor={`checkbox-${index}`} className="text-xs">
{item.value}
</Label>
</div>
))
)}

8
packages/ui/primitives/document-flow/advanced-fields/radio.tsx
View File

@ -30,16 +30,18 @@ export const RadioField = ({ field }: RadioFieldProps) => {
{!parsedFieldMeta?.values ? (
<FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
) : (
<RadioGroup>
<RadioGroup className="gap-y-1">
{parsedFieldMeta.values?.map((item, index) => (
<div key={index} className="flex items-center gap-x-1.5">
<RadioGroupItem
className="pointer-events-none"
className="pointer-events-none h-3 w-3"
value={item.value}
id={`option-${index}`}
checked={item.checked}
/>
<Label htmlFor={`option-${index}`}>{item.value}</Label>
<Label htmlFor={`option-${index}`} className="text-xs">
{item.value}
</Label>
</div>
))}
</RadioGroup>

8
packages/ui/primitives/document-flow/field-icon.tsx
View File

@ -28,8 +28,8 @@ const fieldIcons = {
[FieldType.EMAIL]: { icon: Mail, label: 'Email' },
[FieldType.NAME]: { icon: User, label: 'Name' },
[FieldType.DATE]: { icon: CalendarDays, label: 'Date' },
[FieldType.TEXT]: { icon: Type, label: 'Add text' },
[FieldType.NUMBER]: { icon: Hash, label: 'Add number' },
[FieldType.TEXT]: { icon: Type, label: 'Text' },
[FieldType.NUMBER]: { icon: Hash, label: 'Number' },
[FieldType.RADIO]: { icon: Disc, label: 'Radio' },
[FieldType.CHECKBOX]: { icon: CheckSquare, label: 'Checkbox' },
[FieldType.DROPDOWN]: { icon: ChevronDown, label: 'Select' },
@ -45,7 +45,7 @@ export const FieldIcon = ({
return (
<div
className={cn(
'text-field-card-foreground flex items-center justify-center gap-x-1 text-xl',
'text-field-card-foreground flex items-center justify-center gap-x-1 text-[clamp(0.875rem,1.8cqw,1.2rem)]',
fontCaveatClassName,
)}
>
@ -71,7 +71,7 @@ export const FieldIcon = ({
}
return (
<div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-sm">
<div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-[clamp(0.625rem,1cqw,0.825rem)]">
<Icon className="h-4 w-4" /> {label}
</div>
);

5
packages/ui/primitives/document-flow/field-item.tsx
View File

@ -201,6 +201,7 @@ export const FieldItem = ({
<div
className={cn(
'relative flex h-full w-full items-center justify-center bg-white',
!fixedSize && '[container-type:size]',
signerStyles.default.base,
signerStyles.default.fieldItem,
)}
@ -223,10 +224,10 @@ export const FieldItem = ({
))}
{!hideRecipients && (
<div className="absolute -right-6 top-0 z-20 hidden h-full w-6 items-center justify-center group-hover:flex">
<div className="absolute -right-5 top-0 z-20 hidden h-full w-5 items-center justify-center group-hover:flex">
<div
className={cn(
'flex h-7 w-6 flex-col items-center justify-center rounded-r-lg text-[0.625rem] font-bold text-white',
'flex h-5 w-5 flex-col items-center justify-center rounded-r-md text-[0.5rem] font-bold text-white',
signerStyles.default.fieldItemInitials,
{
'!opacity-50': disabled || passive,

4
packages/ui/primitives/template-flow/add-template-fields.tsx
View File

@ -65,8 +65,8 @@ const fontCaveat = Caveat({
variable: '--font-caveat',
});
const MIN_HEIGHT_PX = 40;
const MIN_WIDTH_PX = 140;
const MIN_HEIGHT_PX = 20;
const MIN_WIDTH_PX = 80;
export type AddTemplateFieldsFormProps = {
documentFlow: DocumentFlowStep;