WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-28 18:59:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile to desktop and desktop to mobile view placeholder location issue

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-07 20:01:15 +05:30
parent dec13e8b5f
commit d224a44e54
7 changed files with 302 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/component/modalComponent.js
+35 -14
View File
@@ -1,13 +1,16 @@
import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalHeader from "react-bootstrap/esm/ModalHeader";
import { useNavigate } from "react-router-dom";
function ModalComponent({ isShow, type, setIsShowEmail }) {
const navigate = useNavigate();
return (
<Modal show={isShow}>
<ModalHeader className="bg-danger" style={{ color: "white" }}>
{type === "signersAlert" ? (
<span>Select signers</span>
) : type === "alreadyPlace" ? (
<span>Already Placed!</span>
) : (
<span>Document Expired!</span>
)}
@@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) {
<Modal.Body>
{type === "signersAlert" ? (
<p>Please select signer for add placeholder!</p>
) : type === "alreadyPlace" ? (
<p>Already set placeHolder for this document.</p>
) : (
<p>This Document is no longer available.</p>
)}
</Modal.Body>
<Modal.Footer>
{type === "signersAlert" &&(
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>)}
{type === "signersAlert" ? (
<button
onClick={() => {
setIsShowEmail(false);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
) : (
type === "alreadyPlace" && (
<button
onClick={() => {
navigate(-1);
}}
style={{
color: "black"
}}
type="button"
className="finishBtn"
>
Ok
</button>
)
)}
</Modal.Footer>
</Modal>
);
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+97 -17
View File
@@ -59,30 +59,64 @@ function RenderPdf({
let width;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
return width;
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
// width =
// pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
};
const posHeight = (pos) => {
let width;
let height;
if (isMobile) {
if (!pos.isMobile) {
width = pos.Height / scale ? pos.Height / scale : 60 / scale;
return width;
if (pos.IsResize) {
// height = pos.Height ? pos.Height / scale : 60 / scale;
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height / scale : 60 / scale;
// height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
height = pos.Height ? pos.Height : 60;
return height;
}
} else {
width = pos.Height ? pos.Height : 60;
return width;
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
};
@@ -99,7 +133,7 @@ function RenderPdf({
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale - 32;
return pos.xPosition / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
@@ -169,7 +203,8 @@ function RenderPdf({
data.signerObjId === signerObjectId
? "pointer"
: "not-allowed",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
size={{
@@ -186,7 +221,8 @@ function RenderPdf({
pageNumber,
setSignerPos,
pdfOriginalWidth,
containerWH
containerWH,
true
);
}}
lockAspectRatio={pos.Width && 2.5}
@@ -262,6 +298,46 @@ function RenderPdf({
}
};
const calculateWidth = (pos) => {
let width;
if (isMobile) {
width = pos.Width ? pos.Width * scale : 150 * scale;
return width;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
width = pos.Width ? pos.Width : 150;
return width;
} else {
width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale;
return width;
}
} else {
width = pos.Width ? pos.Width : 150;
return width;
}
}
};
const calculateHeight = (pos) => {
let height;
if (isMobile) {
height = pos.Height ? pos.Height * scale : 60 * scale;
return height;
} else {
if (pos.isMobile) {
if (pos.IsResize) {
height = pos.Height ? pos.Height : 60;
return height;
} else {
height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale;
return height;
}
} else {
height = pos.Height ? pos.Height : 60;
return height;
}
}
};
return (
<>
{isMobile && scale ? (
@@ -413,7 +489,8 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
borderColor: themeColor()
borderColor: themeColor(),
background: data.blockColor
}}
className="placeholderBlock"
onDrag={() =>
@@ -464,6 +541,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}
@@ -739,8 +817,8 @@ function RenderPdf({
}}
className="placeholderBlock"
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
width: calculateWidth(pos),
height: calculateHeight(pos)
}}
lockAspectRatio={pos.Width && 2.5}
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
@@ -828,6 +906,7 @@ function RenderPdf({
bounds="parent"
style={{
cursor: "all-scroll",
background: data.blockColor,
borderColor: themeColor()
}}
className="placeholderBlock"
@@ -878,6 +957,7 @@ function RenderPdf({
setSignerPos,
pdfOriginalWidth,
containerWH,
false,
setIsResize
);
}}