Merge pull request #1291 from OpenSignLabs/form-layout

fix: mobile view issue with text box widget design for value entry.

apps/OpenSign/src/components/pdf/BorderResize.js

@@ -1,11 +1,24 @@
 import React from "react";
 
-function BorderResize({ right, top }) {
+function BorderResize(props) {
+  const getHeight = () => {
+    const height = props.posHeight(props.pos, props.isSignYourself);
+    if (height > 14) {
+      return "14px";
+    } else {
+      return `${height}px`;
+    }
+  };
+
   return (
     <div
-      className={`${right ? `-right-[12px]` : "-right-[1px]"} ${
-        top ? `-bottom-[11px]` : "-bottom-[1px]"
-      } absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
+      style={{
+        width: getHeight() || "14px",
+        height: getHeight() || "14px"
+      }}
+      className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
+        props.top ? `-bottom-[12px]` : "-bottom-[2px] "
+      } absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
     ></div>
   );
 }

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -791,12 +791,22 @@ function Placeholder(props) {
         props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId ? (
-          <BorderResize right={-12} top={-11} />
+          <BorderResize
+            right={-12}
+            top={-11}
+            pos={props.pos}
+            posHeight={props.posHeight}
+            isSignYourself={props.isSignYourself}
+          />
         ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
           props.data?.signerObjId === props.signerObjId &&
           props.pos.type !== radioButtonWidget &&
           props.pos.type !== "checkbox" ? (
-            <BorderResize />
+            <BorderResize
+              posHeight={props.posHeight}
+              isSignYourself={props.isSignYourself}
+              pos={props.pos}
+            />
           ) : (
             <></>
           )
@@ -862,6 +872,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
+              posHeight={props.posHeight}
             />
           </div>
         ) : (
@@ -889,6 +900,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
+              posHeight={props.posHeight}
             />
           </>
         )}

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -29,7 +29,9 @@ function PlaceholderType(props) {
   const [textValue, setTextValue] = useState();
   const [selectedCheckbox, setSelectedCheckbox] = useState([]);
   const years = range(1990, getYear(new Date()) + 16, 1);
-  const fontSize = (props.pos.options?.fontSize || "12") + "px";
+  const height = props.posHeight(props.pos, props.isSignYourself);
+  const fontSize =
+    (props.pos.options?.fontSize || (height ? height - 4 : 12)) + "px";
   const fontColor = props.pos.options?.fontColor || "black";
   const months = [
     "January",

apps/OpenSign/src/constant/Utils.js

@@ -1283,8 +1283,14 @@ export const changeImageWH = async (base64Image) => {
 };
 
 //function to calculate font size of text area widgets
-const calculateFontSize = (position, containerScale, signyourself) => {
-  const font = position?.options?.fontSize || 12;
+const calculateFontSize = (
+  position,
+  containerScale,
+  signyourself,
+  widgetHeight
+) => {
+  const font =
+    position?.options?.fontSize || (widgetHeight ? widgetHeight / 2 : 12);
   if (!signyourself && position?.isMobile && position?.scale) {
     return font / position?.scale / containerScale;
   } else {
@@ -1488,7 +1494,8 @@ export const multiSignEmbed = async (
         const fontSize = calculateFontSize(
           position,
           containerScale,
-          signyourself
+          signyourself,
+          position.Height
         );
         parseInt(fontSize);
         let textContent;

apps/OpenSignServer/cloud/parsefunction/getDrive.js

@@ -18,9 +18,9 @@ export default async function getDrive(request) {
     if (userId) {
       let url;
       if (docId) {
-        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder&skip=${skip}&limit=${limit}`;
+        url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder&order=-updatedAt&skip=${skip}&limit=${limit}`;
       } else {
-        url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers&skip=${skip}&limit=${limit}`;
+        url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers&order=-updatedAt&skip=${skip}&limit=${limit}`;
       }
       try {
         const res = await axios.get(url, {