Merge pull request #47 from OpenSignLabs/staging

sync fork

Author: prafull-opensignlabs

microfrontends/SignDocuments/package-lock.json

@@ -32,6 +32,7 @@
     "react-scrollbars-custom": "^4.1.1",
     "react-signature-canvas": "^1.0.6",
     "reactour": "^1.19.1",
+    "select-dom": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

microfrontends/SignDocuments/package.json

@@ -25,6 +25,8 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import { contractUsers, contactBook } from "../utils/Utils";
+import { modalAlign } from "../utils/Utils";
+import { $ } from 'select-dom';
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -1020,7 +1022,11 @@ function SignYourSelf() {
           >
             {/* this modal is used show this document is already sign */}
 
-            <Modal show={showAlreadySignDoc.status}>
+            <Modal
+              show={showAlreadySignDoc.status}
+              onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -27,6 +27,7 @@ import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
 import CustomModal from "./component/CustomModal";
+import { modalAlign } from "../utils/Utils";
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -1017,7 +1018,11 @@ function EmbedPdfImage() {
             }}
           >
             {/* this modal is used show this document is already sign */}
-            <Modal show={isAlreadySign.status}>
+            <Modal
+              show={isAlreadySign.status}
+              onShow={() => modalAlign()}
+              backdropClassName="signature-backdrop"
+            >
               <ModalHeader style={{ background: themeColor() }}>
                 <span style={{ color: "white" }}> Sign Documents</span>
               </ModalHeader>

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -626,7 +626,7 @@ option {
     padding: 16px;
   }
 
-  /* The sticky class is added to the navbar 
+  /* The sticky class is added to the navbar
   with JS when it reaches its scroll position */
   .stickyHead {
     position: fixed;
@@ -644,9 +644,9 @@ option {
     right: 0rem;
   }
 
-  /* Add some top padding to the page content 
-  to prevent sudden quick movement (as the 
-  navigation bar gets a new position at the top of the 
+  /* Add some top padding to the page content
+  to prevent sudden quick movement (as the
+  navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
   .stickyHead+.content {
     padding-top: 60px;
@@ -776,4 +776,14 @@ option {
   .mobileHead {
     display: flex;
   }
+}
+
+.signature-backdrop {
+  position: fixed;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background-color: #000;
+}
+
+.signature-backdrop.fade.in {
+  opacity: 0.5;
 }

microfrontends/SignDocuments/src/css/signature.css

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { $ } from 'select-dom';
 
 export async function getBase64FromUrl(url) {
   const data = await fetch(url);
@@ -299,3 +300,14 @@ export const contactBook = async (objectId) => {
     });
   return result;
 };
+
+export const modalAlign = () => {
+  let modalDialog = $('.modal-dialog').getBoundingClientRect();
+  let mobileHead = $('.mobileHead').getBoundingClientRect()
+  let modal = $('.modal-dialog');
+  if (modalDialog.left < mobileHead.left) {
+    let leftOffset = mobileHead.left - modalDialog.left;
+    modal.style.left = leftOffset + 'px';
+    modal.style.top = (window.innerHeight/3) + 'px';
+  }
+};