diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json index 30f707e44..4945bb084 100644 --- a/microfrontends/SignDocuments/package-lock.json +++ b/microfrontends/SignDocuments/package-lock.json @@ -36,6 +36,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" } }, @@ -18702,6 +18703,20 @@ "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz", "integrity": "sha512-HSdN78VMvFCSGCkh0oYX/tY4R3P1DW61f8+TeZZ4j2VLgfwvw0bpRSOv4PCVKisktIwbzHCfZsx+rLbbDBqIBA==" }, + "node_modules/select-dom": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/select-dom/-/select-dom-9.0.0.tgz", + "integrity": "sha512-AD1NfASSwJQc1Sy713R1vT9CMmUSUo2tg0j1FtkRGIxllTphDrkuH2pYYvhRlGaoq3pS6tcKkKS/diEZLy+7BQ==", + "dependencies": { + "typed-query-selector": "^2.11.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/fregante" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -20203,6 +20218,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typed-query-selector": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz", + "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg==" + }, "node_modules/typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", @@ -21527,4 +21547,4 @@ } } } -} +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json index 97970e988..5bc6f7685 100644 --- a/microfrontends/SignDocuments/package.json +++ b/microfrontends/SignDocuments/package.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": { diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 2b5eebdc8..5638cfae3 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -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 */} - + modalAlign()} + backdropClassName="signature-backdrop" + > Sign Documents diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 0b9a106c9..fe43add21 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.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 */} - + modalAlign()} + backdropClassName="signature-backdrop" + > Sign Documents diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 273b6990e..e47a21f08 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -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; } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index ecf6d0359..a02d3abcd 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -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'; + } +}; \ No newline at end of file