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

fix: canvas for drawing signature and clear signature position

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2024-01-16 02:40:43 +00:00
parent 075e15d428
commit 1d91a9e813
2 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/marketing/src/components/(marketing)/widget.tsx
View File

@ -351,6 +351,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
<div <div
className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2" className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
> >
<Input <Input
id="signatureText" id="signatureText"

36
apps/web/src/app/(signing)/sign/[token]/form.tsx
View File

@ -149,10 +149,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
<Card id="signature" className="mt-4" degrees={-120} gradient> <Card id="signature" className="mt-4" degrees={-120} gradient>
<CardContent role="button" className="relative cursor-pointer pt-6"> <CardContent role="button" className="relative cursor-pointer pt-6">
<div className="flex h-44 items-center justify-center pb-6"> <div className="flex h-44 items-center justify-center pb-6">
{!signatureText && signature && ( {!signatureText && (
<SignaturePad <SignaturePad
className="h-44 w-full" className="h-44 w-full"
defaultValue={signature ?? undefined} defaultValue={signature ?? undefined}
clearSignatureClassName="absolute -bottom-6 -right-2 z-10 cursor-pointer"
onChange={(value) => { onChange={(value) => {
setSignature(value); setSignature(value);
}} }}
@ -160,11 +161,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
)} )}
{signatureText && ( {signatureText && (
<p <p className={cn('text-foreground font-signature text-4xl font-semibold')}>
className={cn(
'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
)}
>
{signatureText} {signatureText}
</p> </p>
)} )}
@ -173,10 +170,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
<div <div
className="absolute inset-x-0 bottom-0 flex cursor-auto items-end justify-between px-4 pb-1 pt-2" className="absolute inset-x-0 bottom-0 flex cursor-auto items-end justify-between px-4 pb-1 pt-2"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
> >
<Input <Input
id="signatureText" id="signatureText"
className="text-foreground placeholder:text-muted-foreground border-none bg-transparent p-0 text-sm focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-0" className="text-foreground placeholder:text-muted-foreground border-0 border-none bg-transparent p-0 text-sm focus-visible:ring-transparent"
placeholder="Draw or type name here" placeholder="Draw or type name here"
// disabled={isSubmitting || signature !== null} // disabled={isSubmitting || signature !== null}
disabled={isSubmitting} disabled={isSubmitting}
@ -198,16 +196,20 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
}, },
})} })}
/> />
{signatureText && (
{/* <div className="absolute bottom-3 right-4"> <div className="absolute bottom-3 right-4 z-10 cursor-pointer">
<button <button
type="button" type="button"
className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2" className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
onClick={() => console.log('clear')} onClick={() => {
> setValue('signatureText', '');
Clear Signature setValue('signatureDataUrl', null);
</button> }}
</div> */} >
Clear Signature
</button>
</div>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>