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

chore: [INCOMPLETE] checkbox ui for all fields

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2024-04-13 17:53:39 +00:00
parent aa951c1608
commit 507e8482dc
6 changed files with 142 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/components/field/field.tsx
View File

@ -92,16 +92,10 @@ export function FieldRootContainer({ field, children, raw = false }: FieldContai
{raw && (
<div
onClick={() => {
console.log('clickeddd');
}}
id={`field-${field.id}`}
className={cn(
'field-card-container bg-background relative z-20 h-full w-full transition-all',
{
'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
},
)}
className={cn('field-card-container bg-background relative z-20 transition-all', {
'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
})}
ref={ref}
data-inserted={field.inserted ? 'true' : 'false'}
>

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

@ -19,6 +19,7 @@ import { FieldType, SendStatus } from '@documenso/prisma/client';
import { cn } from '../../lib/utils';
import { Button } from '../button';
import { Card, CardContent } from '../card';
import { Checkbox } from '../checkbox';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
import { Popover, PopoverContent, PopoverTrigger } from '../popover';
import { useStep } from '../stepper';
@ -135,11 +136,17 @@ export const AddFieldsFormPartial = ({
);
setCoords({
x: event.clientX - fieldBounds.current.width / 2,
y: event.clientY - fieldBounds.current.height / 2,
x:
selectedField === FieldType.CHECKBOX
? event.clientX - 16
: event.clientX - fieldBounds.current.width / 2,
y:
selectedField === FieldType.CHECKBOX
? event.clientY - 16
: event.clientY - fieldBounds.current.height / 2,
});
},
[isWithinPageBounds],
[isWithinPageBounds, selectedField],
);
const onMouseClick = useCallback(
@ -149,6 +156,7 @@ export const AddFieldsFormPartial = ({
}
const $page = getPage(event, PDF_VIEWER_PAGE_SELECTOR);
const isCheckboxField = selectedField === FieldType.CHECKBOX;
if (
!$page ||
@ -172,8 +180,8 @@ export const AddFieldsFormPartial = ({
let pageY = ((event.pageY - top) / height) * 100;
// Get the bounds as a percentage of the page width and height
const fieldPageWidth = (fieldBounds.current.width / width) * 100;
const fieldPageHeight = (fieldBounds.current.height / height) * 100;
const fieldPageWidth = ((isCheckboxField ? 32 : fieldBounds.current.width) / width) * 100;
const fieldPageHeight = ((isCheckboxField ? 32 : fieldBounds.current.height) / height) * 100;
// And center it based on the bounds
pageX -= fieldPageWidth / 2;
@ -322,7 +330,8 @@ export const AddFieldsFormPartial = ({
<DocumentFlowFormContainerContent>
<div className="flex flex-col">
{selectedField && (
{/* When it is not a checkbox field */}
{selectedField && selectedField !== FieldType.CHECKBOX && (
<Card
className={cn(
'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
@ -344,6 +353,27 @@ export const AddFieldsFormPartial = ({
</Card>
)}
{/* Checkbox Field */}
{selectedField && selectedField === FieldType.CHECKBOX && (
<div
className="pointer-events-none fixed z-50"
style={{
top: coords.y,
left: coords.x,
height: 6 * 4,
width: 6 * 4,
}}
>
<Checkbox
className={cn(
'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
'border-field-card-border',
)}
/>
</div>
)}
{isDocumentPdfLoaded &&
localFields.map((field, index) => (
<FieldItem

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

@ -10,8 +10,10 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
import { cn } from '../../lib/utils';
import { Card, CardContent } from '../card';
import { Checkbox } from '../checkbox';
import type { TDocumentFlowFormSchema } from './types';
import { FRIENDLY_FIELD_TYPE } from './types';
import { FieldType } from '.prisma/client';
type Field = TDocumentFlowFormSchema['fields'][0];
@ -44,6 +46,8 @@ export const FieldItem = ({
pageWidth: 0,
});
const isCheckboxField = field.type === FieldType.CHECKBOX;
const calculateCoords = useCallback(() => {
const $page = document.querySelector<HTMLElement>(
`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
@ -102,8 +106,8 @@ export const FieldItem = ({
default={{
x: coords.pageX,
y: coords.pageY,
height: coords.pageHeight,
width: coords.pageWidth,
height: isCheckboxField ? 32 : coords.pageHeight,
width: isCheckboxField ? 32 : coords.pageWidth,
}}
bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
onDragStart={() => setActive(true)}
@ -119,7 +123,13 @@ export const FieldItem = ({
>
{!disabled && (
<button
className="text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full border"
className={cn(
'text-muted-foreground/50 hover:text-muted-foreground/80 bg-background absolute -right-2 -top-2 z-20 flex items-center justify-center rounded-full border',
{
'h-8 w-8': !isCheckboxField,
'h-6 w-6': isCheckboxField,
},
)}
onClick={() => onRemove?.()}
onTouchEnd={() => onRemove?.()}
>
@ -127,25 +137,40 @@ export const FieldItem = ({
</button>
)}
<Card
className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
'border-field-card-border': !disabled,
'border-field-card-border/80': active,
})}
>
<CardContent
{!isCheckboxField && (
<Card
className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
'border-field-card-border': !disabled,
'border-field-card-border/80': active,
})}
>
<CardContent
className={cn(
'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
{
'text-field-card-foreground/50': disabled,
},
)}
>
{FRIENDLY_FIELD_TYPE[field.type]}
<p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
</CardContent>
</Card>
)}
{isCheckboxField && (
<Checkbox
className={cn(
'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
'bg-field-card/80 h-8 w-8 border-2 backdrop-blur-[1px]',
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
{
'text-field-card-foreground/50': disabled,
'border-field-card-border': !disabled,
'border-field-card-border/80': active,
},
)}
>
{FRIENDLY_FIELD_TYPE[field.type]}
<p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
</CardContent>
</Card>
/>
)}
</Rnd>,
document.body,
);

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

@ -4,9 +4,11 @@ import type { Prisma } from '@prisma/client';
import { createPortal } from 'react-dom';
import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
import { FieldType } from '@documenso/prisma/client';
import { cn } from '../../lib/utils';
import { Card, CardContent } from '../card';
import { Checkbox } from '../checkbox';
import { FRIENDLY_FIELD_TYPE } from './types';
export type ShowFieldItemProps = {
@ -19,6 +21,7 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
const signerEmail =
recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '';
const isCheckboxField = field.type === FieldType.CHECKBOX;
return createPortal(
<div
@ -30,19 +33,30 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
width: `${coords.width}px`,
}}
>
<Card className={cn('bg-background h-full w-full')}>
<CardContent
className={cn(
'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
)}
>
{FRIENDLY_FIELD_TYPE[field.type]}
{!isCheckboxField && (
<Card className={cn('bg-background h-full w-full')}>
<CardContent
className={cn(
'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
)}
>
{FRIENDLY_FIELD_TYPE[field.type]}
<p className="text-muted-foreground/50 w-full truncate text-center text-xs">
{signerEmail}
</p>
</CardContent>
</Card>
<p className="text-muted-foreground/50 w-full truncate text-center text-xs">
{signerEmail}
</p>
</CardContent>
</Card>
)}
{isCheckboxField && (
<Checkbox
className={cn(
'h-8 w-8',
'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]',
)}
/>
)}
</div>,
document.body,
);