Merge pull request #22 from ElTimuro/doc-132-doc-133-placement-fixes

Doc-132-doc-133-placement-fixes

apps/web/components/editor/editable-field.tsx

@@ -53,18 +53,15 @@ export default function EditableField(props: FieldPropsType) {
         e.stopPropagation();
       }}
     >
+      {/* width: 192 height 96 */}
       <div
         hidden={props.hidden}
         ref={nodeRef}
-        className="cursor-move opacity-80 p-2 m-auto w-48 h-24 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
+        className="cursor-move opacity-80 p-2 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
         style={{
           background: stc(props.field.Recipient.email),
         }}
       >
-        <div className="mb-2 pointer-events-none">
-          <Logo className="w-16 mx-auto"></Logo>
-        </div>
-        {/* width: 192 height 96 */}
         <div className="m-auto overflow-hidden flex-row-reverse text-lg font-bold text-center">
           {field.type}
           {field.type === "SIGNATURE" ? (

apps/web/components/editor/pdf-editor.tsx

@@ -48,6 +48,9 @@ export default function PDFEditor(props: any) {
     <>
       <div>
         <PDFViewer
+          style={{
+            cursor: `url("https://place-hold.it/110x64/37f095/FFFFFF&text=${selectedFieldType}") 55 32, auto`,
+          }}
           readonly={false}
           document={props.document}
           fields={fields}

apps/web/components/editor/pdf-signer.tsx

@@ -45,6 +45,8 @@ export default function PDFSigner(props: any) {
       return;
     }
 
+    if (!dialogResult) return;
+
     const signature = {
       fieldId: dialogField.id,
       type: dialogResult.type,

apps/web/components/editor/pdf-viewer.jsx

@@ -60,8 +60,7 @@ export default function PDFViewer(props) {
                 key={short.generate().toString()}
                 style={{
                   position: "relative",
-                  cursor:
+                  ...props.style,
-                    'url("https://place-hold.it/110x64/37f095/FFFFFF&text=Signature"), auto',
                 }}
                 className="mx-auto w-fit"
               >

apps/web/components/editor/signable-field.tsx

@@ -43,26 +43,26 @@ export default function SignableField(props: FieldPropsType) {
           if (!field?.signature) props.onClick(props.field);
         }}
         ref={nodeRef}
-        className="cursor-pointer opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none hover:brightness-50"
+        className="cursor-pointer opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none hover:brightness-50"
         style={{
           background: stc(props.field.Recipient.email),
         }}
       >
-        <div
+        <div hidden={field?.signature} className="font-medium my-4">
-          hidden={field?.signature}
-          className="m-auto w-auto flex-row-reverse font-medium text-center px-12 py-2"
-        >
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
         </div>
         <div
           hidden={!field?.signature}
           className="font-qwigley text-5xl m-auto w-auto flex-row-reverse font-medium text-center"
         >
-          {field?.signature?.type === "type"
+          {field?.signature?.type === "type" ? (
-            ? field?.signature.typedSignature
+            <div className="my-4">{field?.signature.typedSignature}</div>
-            : ""}
+          ) : (
+            ""
+          )}
+
           {field?.signature?.type === "draw" ? (
-            <img className="w-50 h-20" src={field?.signature?.signatureImage} />
+            <img className="w-48 h-16" src={field?.signature?.signatureImage} />
           ) : (
             ""
           )}

apps/web/pages/documents/[id]/recipients.tsx

@@ -117,7 +117,6 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
               color="primary"
               icon={PaperAirplaneIcon}
               onClick={() => {
-                setLoading(true);
                 setOpen(true);
               }}
               disabled={
@@ -361,12 +360,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
         </div>
       </div>
       <Transition.Root show={open} as={Fragment}>
-        <Dialog
+        <Dialog as="div" className="relative z-10" onClose={setOpen}>
-          as="div"
-          className="relative z-10"
-          initialFocus={cancelButtonRef}
-          onClose={setOpen}
-        >
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -417,16 +411,13 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                     </div>
                   </div>
                   <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                    <Button
+                    <Button color="secondary" onClick={() => setOpen(false)}>
-                      color="secondary"
-                      onClick={() => setOpen(false)}
-                      ref={cancelButtonRef}
-                    >
                       Cancel
                     </Button>
                     <Button
                       onClick={() => {
                         setOpen(false);
+                        setLoading(true);
                         sendSigningRequests(props.document).finally(() => {
                           setLoading(false);
                         });

packages/features/editor/createField.ts

@@ -8,7 +8,7 @@ export const createField = (
   customText = ""
 ): any => {
   var rect = e.target.getBoundingClientRect();
-  const fieldSize = { width: 192, height: 96 };
+  const fieldSize = { width: 192, height: 64 };
   var newFieldX = e.clientX - rect.left - fieldSize.width / 2; //x position within the element.
   var newFieldY = e.clientY - rect.top - fieldSize.height / 2; //y position within the element.
   if (newFieldX < 0) newFieldX = 0;

packages/pdf/insertImageInPDF.ts

@@ -12,7 +12,7 @@ export async function insertImageInPDF(
   const pages = pdfDoc.getPages();
   const pdfPage = pages[page];
   const pngImage = await pdfDoc.embedPng(image);
-  const drawSize = { width: 213, height: 50 };
+  const drawSize = { width: 192, height: 64 };
 
   pdfPage.drawImage(pngImage, {
     x: positionX,

packages/pdf/insertTextInPDF.ts

@@ -24,10 +24,12 @@ export async function insertTextInPDF(
   const textSize = useHandwritingFont ? 50 : 15;
   const textWidth = customFont.widthOfTextAtSize(text, textSize);
   const textHeight = customFont.heightAtSize(textSize);
+  const fieldSize = { width: 192, height: 64 };
+  const invertedYPosition = pdfPage.getHeight() - positionY - fieldSize.height;
 
   pdfPage.drawText(text, {
     x: positionX,
-    y: pdfPage.getHeight() - positionY - textHeight / 2,
+    y: invertedYPosition,
     size: textSize,
     font: useHandwritingFont ? customFont : helveticaFont,
     color: rgb(0, 0, 0),