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

fix: improve field sizing (#1486)

Browse Source 
## Description

Allows for smaller field sizing in addition to improving our styling
when displaying labels on smaller fields.

This is the minimum currently supported field size until we perform a
more extensive refactor of our current drag and drop system.

## Related Issue

Reported via support channels

## Changes Made

- Updated our minimum size constraints
- Attempted to add a general autosizing component for text and failed
- Updated styling in a bunch of places to use the css `clamp()` method
for dynamic sizing.
This commit is contained in:
Lucas Smith
2024-11-20 22:49:30 +11:00
committed by GitHub
parent 9ef8b1f0c3
commit 83e7a3c222
26 changed files with 448 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,8 +67,11 @@ const fontCaveat = Caveat({
variable: '--font-caveat',
});
const MIN_HEIGHT_PX = 20;
const MIN_WIDTH_PX = 80;
const MIN_HEIGHT_PX = 12;
const MIN_WIDTH_PX = 36;
const DEFAULT_HEIGHT_PX = MIN_HEIGHT_PX * 2.5;
const DEFAULT_WIDTH_PX = MIN_WIDTH_PX * 2.5;
export type AddTemplateFieldsFormProps = {
documentFlow: DocumentFlowStep;
@ -354,8 +357,8 @@ export const AddTemplateFieldsFormPartial = ({
}
fieldBounds.current = {
height: Math.max(MIN_HEIGHT_PX),
width: Math.max(MIN_WIDTH_PX),
height: Math.max(DEFAULT_HEIGHT_PX),
width: Math.max(DEFAULT_WIDTH_PX),
};
});
@ -425,7 +428,7 @@ export const AddTemplateFieldsFormPartial = ({
{selectedField && (
<div
className={cn(
'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200',
'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
selectedSignerStyles.default.base,
{
'-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@ -439,7 +442,9 @@ export const AddTemplateFieldsFormPartial = ({
width: fieldBounds.current.width,
}}
>
{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
<span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[selectedField])}
</span>
</div>
)}
@ -452,8 +457,10 @@ export const AddTemplateFieldsFormPartial = ({
recipientIndex={recipientIndex === -1 ? 0 : recipientIndex}
field={field}
disabled={selectedSigner?.email !== field.signerEmail}
minHeight={fieldBounds.current.height}
minWidth={fieldBounds.current.width}
minHeight={MIN_HEIGHT_PX}
minWidth={MIN_WIDTH_PX}
defaultHeight={DEFAULT_HEIGHT_PX}
defaultWidth={DEFAULT_WIDTH_PX}
passive={isFieldWithinBounds && !!selectedField}
onResize={(options) => onFieldResize(options, index)}
onMove={(options) => onFieldMove(options, index)}