From a482a92d34a82554cea0bbfd05b15544532f30b1 Mon Sep 17 00:00:00 2001 From: Rishab <33950743+rishabjasrotia@users.noreply.github.com> Date: Thu, 16 Nov 2023 04:02:34 +0000 Subject: [PATCH 1/4] #168 - Align Modal to Center of PDF if Signed --- .../SignDocuments/package-lock.json | 22 ++++++++++++++++++- microfrontends/SignDocuments/package.json | 1 + .../src/Component/SignYourselfPdf.js | 17 +++++++++++++- .../src/Component/recipientSignPdf.js | 17 +++++++++++++- 4 files changed, 54 insertions(+), 3 deletions(-) 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 6591667bc..ec1ce695b 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -25,6 +25,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import { contractUsers, contactBook } 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([]); @@ -995,6 +996,17 @@ function SignYourSelf() { }); }; + 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/2.5) + 'px'; + } + }; + return ( {isLoading.isLoad ? ( @@ -1036,7 +1048,10 @@ function SignYourSelf() { > {/* this modal is used show this document is already sign */} - + modalAlign()} + > Sign Documents diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 77b3de40e..5c03b98b1 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -25,6 +25,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; +import { $ } from 'select-dom'; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -953,6 +954,17 @@ function EmbedPdfImage() { ); }; + 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/2.5) + 'px'; + } + }; + return ( {isLoading.isLoad ? ( @@ -1016,7 +1028,10 @@ function EmbedPdfImage() { }} > {/* this modal is used show this document is already sign */} - + modalAlign()} + > Sign Documents From 16f287fdc0ac86af2e6fb23da8d144d86d2985ca Mon Sep 17 00:00:00 2001 From: rishabjasrotia Date: Thu, 16 Nov 2023 20:03:59 +0530 Subject: [PATCH 2/4] Added backdrop to modal --- .../src/Component/SignYourselfPdf.js | 3 ++- .../src/Component/recipientSignPdf.js | 5 +++-- .../SignDocuments/src/css/signature.css | 18 ++++++++++++++---- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index ec1ce695b..202af7702 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -1048,9 +1048,10 @@ 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 5c03b98b1..48c0e97c9 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -1028,9 +1028,10 @@ function EmbedPdfImage() { }} > {/* this modal is used show this document is already sign */} - modalAlign()} + backdropClassName="signature-backdrop" > Sign Documents @@ -1143,7 +1144,7 @@ function EmbedPdfImage() { )} )} - + ); } 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 From 876a2d78d504ddf0425e9fa67587ed5f19cd2670 Mon Sep 17 00:00:00 2001 From: rishabjasrotia Date: Thu, 16 Nov 2023 20:06:57 +0530 Subject: [PATCH 3/4] enhancement --- microfrontends/SignDocuments/src/Component/SignYourselfPdf.js | 2 +- microfrontends/SignDocuments/src/Component/recipientSignPdf.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 202af7702..3cead71f4 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -1003,7 +1003,7 @@ function SignYourSelf() { if (modalDialog.left < mobileHead.left) { let leftOffset = mobileHead.left - modalDialog.left; modal.style.left = leftOffset + 'px'; - modal.style.top = (window.innerHeight/2.5) + 'px'; + modal.style.top = (window.innerHeight/3) + 'px'; } }; diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 48c0e97c9..6c7369828 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -961,7 +961,7 @@ function EmbedPdfImage() { if (modalDialog.left < mobileHead.left) { let leftOffset = mobileHead.left - modalDialog.left; modal.style.left = leftOffset + 'px'; - modal.style.top = (window.innerHeight/2.5) + 'px'; + modal.style.top = (window.innerHeight/3) + 'px'; } }; From b8e8cd127a58ca3c90e22209496e487435a98e44 Mon Sep 17 00:00:00 2001 From: rishabjasrotia Date: Thu, 16 Nov 2023 20:14:32 +0530 Subject: [PATCH 4/4] Remove duplicate code --- .../SignDocuments/src/Component/SignYourselfPdf.js | 12 +----------- .../src/Component/recipientSignPdf.js | 13 +------------ microfrontends/SignDocuments/src/utils/Utils.js | 14 +++++++++++++- 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 3cead71f4..07b377d1c 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -25,6 +25,7 @@ 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() { @@ -996,17 +997,6 @@ function SignYourSelf() { }); }; - 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'; - } - }; - return ( {isLoading.isLoad ? ( diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 6c7369828..9a1bbab90 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -25,7 +25,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; -import { $ } from 'select-dom'; +import { modalAlign } from "../utils/Utils"; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -954,17 +954,6 @@ function EmbedPdfImage() { ); }; - 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'; - } - }; - return ( {isLoading.isLoad ? ( diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 0b915423d..2c960ceca 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); @@ -57,7 +58,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { (data, ind) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + if (updateFilter.length > 0) { let newWidth, newHeight; @@ -260,3 +261,14 @@ export const contactBookName = async (objectId, className) => { }); 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