WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: add customiize font size and color in checkbox, radio button,dropdown widgets

Browse Source
This commit is contained in:
RaktimaNXG
2024-08-13 15:25:06 +05:30
parent 7500797dd0
commit af0d780ac0
6 changed files with 228 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+52
View File
@@ -4,6 +4,8 @@ import ModalUi from "../../primitives/ModalUi";
import { radioButtonWidget } from "../../constant/Utils";
import Upgrade from "../../primitives/Upgrade";
import { useTranslation } from "react-i18next";
import { fontColorArr, fontsizeArr } from "../../constant/Utils";
function DropdownWidgetOption(props) {
const { t } = useTranslation();
const [dropdownOptionList, setDropdownOptionList] = useState([
@@ -330,6 +332,55 @@ function DropdownWidgetOption(props) {
</div>
</>
)}
<div className="flex items-center mt-3 mb-3">
<span>{t("font-size")} :</span>
<select
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
value={
props.fontSize ||
props.currWidgetsDetails?.options?.fontSize ||
"12"
}
onChange={(e) => props.setFontSize(e.target.value)}
>
{fontsizeArr.map((size, ind) => {
return (
<option className="text-[13px]" value={size} key={ind}>
{size}
</option>
);
})}
</select>
<div className="flex flex-row gap-1 items-center ml-4 ">
<span>{t("color")} : </span>
<select
value={
props.fontColor ||
props.currWidgetsDetails?.options?.fontColor ||
"black"
}
onChange={(e) => props.setFontColor(e.target.value)}
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
>
{fontColorArr.map((color, ind) => {
return (
<option value={color} key={ind}>
{t(`color-type.${color}`)}
</option>
);
})}
</select>
<span
style={{
background:
props.fontColor ||
props.currWidgetsDetails?.options?.fontColor ||
"black"
}}
className="w-5 h-[19px] ml-1"
></span>
</div>
</div>
{["checkbox", radioButtonWidget].includes(props.type) && (
<div className="flex flex-row gap-5 my-2 items-center text-center">
{!props.isSignYourself && (
@@ -362,6 +413,7 @@ function DropdownWidgetOption(props) {
</div>
)}
</div>
<div
className={`${
props.type === "checkbox" && !props.isSignYourself
apps/OpenSign/src/components/pdf/PlaceholderType.js
+58 -5
View File
@@ -379,7 +379,17 @@ function PlaceholderType(props) {
}}
/>
{!props.pos.options?.isHideLabel && (
<label className="text-xs mb-0 text-center">{data}</label>
<label
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
className="text-xs mb-0 text-center"
>
{data}
</label>
)}
</div>
);
@@ -433,6 +443,12 @@ function PlaceholderType(props) {
case "dropdown":
return props.data?.signerObjId === props.signerObjId ? (
<select
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
className={`${selectWidgetCls} text-[12px] bg-inherit`}
id="myDropdown"
value={selectOption}
@@ -450,20 +466,47 @@ function PlaceholderType(props) {
}}
>
{/* Default/Title option */}
<option value="" disabled hidden>
<option
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
value=""
disabled
hidden
>
{props?.pos?.options?.name}
</option>
{props.pos?.options?.values?.map((data, ind) => {
return (
<option key={ind} value={data}>
<option
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
key={ind}
value={data}
>
{data}
</option>
);
})}
</select>
) : (
<div className="text-[12px] overflow-hidden">
<div
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
className=" overflow-hidden"
>
{props.pos?.options?.name
? props.pos.options.name
: widgetTypeTraslation}
@@ -778,7 +821,17 @@ function PlaceholderType(props) {
}}
/>
{!props.pos.options?.isHideLabel && (
<label className="text-xs mb-0">{data}</label>
<label
style={{
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
className="text-xs mb-0"
>
{data}
</label>
)}
</div>
);
apps/OpenSign/src/constant/Utils.js
+37 -22
View File
@@ -1241,6 +1241,21 @@ const calculateFontSize = (position, containerScale, signyourself) => {
return font / containerScale;
}
};
const getWidgetsFontColor = (type) => {
switch (type) {
case "red":
return rgb(1, 0, 0);
case "black":
return rgb(0, 0, 0);
case "blue":
return rgb(0, 0, 1);
case "yellow":
return rgb(0.9, 1, 0);
default:
return rgb(0, 0, 0);
}
};
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
widgets,
@@ -1347,6 +1362,8 @@ export const multiSignEmbed = async (
return resizePos;
}
};
const color = position?.options?.fontColor;
let updateColorInRgb = getWidgetsFontColor(color);
const widgetTypeExist = [
textWidget,
textInputWidget,
@@ -1359,7 +1376,7 @@ export const multiSignEmbed = async (
if (position.type === "checkbox") {
let checkboxOptionGapFromTop, isCheck;
let y = yPos(position);
const optionsFontSize = 13;
const optionsFontSize = parseInt(position?.options?.fontSize) || 13;
const checkboxSize = 18;
const checkboxTextGapFromLeft = 22;
if (position?.options?.values.length > 0) {
@@ -1394,7 +1411,8 @@ export const multiSignEmbed = async (
optionsFontSize,
rgb(0, 0, 0),
font,
page
page,
updateColorInRgb
);
page.drawText(item, optionsPosition);
}
@@ -1423,20 +1441,6 @@ export const multiSignEmbed = async (
signyourself
);
parseInt(fontSize);
const color = position?.options?.fontColor;
let updateColorInRgb;
if (color === "red") {
updateColorInRgb = rgb(1, 0, 0);
} else if (color === "black") {
updateColorInRgb = rgb(0, 0, 0);
} else if (color === "blue") {
updateColorInRgb = rgb(0, 0, 1);
} else if (color === "yellow") {
updateColorInRgb = rgb(0.9, 1, 0);
} else {
updateColorInRgb = rgb(0, 0, 0);
}
let textContent;
if (position?.options?.response) {
textContent = position.options?.response;
@@ -1515,30 +1519,40 @@ export const multiSignEmbed = async (
y += 18; // Adjust the line height as needed
}
} else if (position.type === "dropdown") {
const fontsize = parseInt(position?.options?.fontSize) || 12;
const dropdownRandomId = "dropdown" + randomId();
const dropdown = form.createDropdown(dropdownRandomId);
dropdown.addOptions(position?.options?.values);
if (position?.options?.response) {
dropdown.select(position.options?.response);
} else if (position?.options?.defaultValue) {
dropdown.select(position?.options?.defaultValue);
}
dropdown.setFontSize(12);
const dropdownObj = {
x: xPos(position),
y: yPos(position),
width: widgetWidth,
height: widgetHeight
};
dropdown.defaultUpdateAppearances(font);
const dropdownOption = getWidgetPosition(page, dropdownObj, 1);
const dropdownSelected = { ...dropdownOption, font: font };
const dropdownSelected = {
...dropdownOption,
font: font,
textColor: updateColorInRgb
};
dropdown.defaultUpdateAppearances(font);
dropdown.addToPage(page, dropdownSelected);
dropdown.enableReadOnly();
} else if (position.type === radioButtonWidget) {
const radioRandomId = "radio" + randomId();
const radioGroup = form.createRadioGroup(radioRandomId);
let radioOptionGapFromTop;
const optionsFontSize = 16;
const optionsFontSize = parseInt(position?.options?.fontSize) || 16;
const radioTextGapFromLeft = 20;
const radioSize = 18;
let y = yPos(position);
@@ -1561,7 +1575,8 @@ export const multiSignEmbed = async (
optionsFontSize,
rgb(0, 0, 0),
font,
page
page,
updateColorInRgb
);
page.drawText(item, optionsPosition);
@@ -1597,8 +1612,8 @@ export const multiSignEmbed = async (
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
//console.log("pdf", pdfBytes);
return pdfBytes;
console.log("pdf", pdfBytes);
//return pdfBytes;
};
// function for validating URLs
apps/OpenSign/src/pages/PlaceHolderSign.js
+35 -3
View File
@@ -1354,7 +1354,13 @@ function PlaceHolderSign() {
values: dropdownOptions,
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false,
defaultValue: defaultValue
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1386,7 +1392,13 @@ function PlaceHolderSign() {
},
defaultValue: defaultValue,
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1398,7 +1410,13 @@ function PlaceHolderSign() {
name: dropdownName,
status: status,
values: dropdownOptions,
defaultValue: defaultValue
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1425,6 +1443,8 @@ function PlaceHolderSign() {
}
}
}
setFontSize();
setFontColor();
};
const handleWidgetdefaultdata = (defaultdata) => {
const options = ["email", "number", "text"];
@@ -1934,6 +1954,10 @@ function PlaceHolderSign() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<DropdownWidgetOption
type="checkbox"
@@ -1945,6 +1969,10 @@ function PlaceHolderSign() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<DropdownWidgetOption
type="dropdown"
@@ -1956,6 +1984,10 @@ function PlaceHolderSign() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
{/* pdf header which contain funish back button */}
apps/OpenSign/src/pages/SignyourselfPdf.js
+11 -1
View File
@@ -1093,7 +1093,11 @@ function SignYourSelf() {
name: dropdownName,
values: dropdownOptions,
isReadOnly: isReadOnly,
isHideLabel: isHideLabel || false
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor || currWidgetsDetails?.options?.fontColor || "black"
}
};
}
@@ -1111,6 +1115,8 @@ function SignYourSelf() {
handleCloseModal();
}
}
setFontSize();
setFontColor();
};
const handleCloseModal = () => {
setCurrWidgetsDetails({});
@@ -1265,6 +1271,10 @@ function SignYourSelf() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
isSignYourself={true}
handleClose={handleCloseModal}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+35 -3
View File
@@ -1089,7 +1089,13 @@ const TemplatePlaceholder = () => {
status: status,
defaultValue: defaultValue,
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1121,7 +1127,13 @@ const TemplatePlaceholder = () => {
},
isReadOnly: isReadOnly || false,
defaultValue: defaultValue,
isHideLabel: isHideLabel || false
isHideLabel: isHideLabel || false,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1133,7 +1145,13 @@ const TemplatePlaceholder = () => {
name: dropdownName,
status: status,
values: dropdownOptions,
defaultValue: defaultValue
defaultValue: defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1160,6 +1178,8 @@ const TemplatePlaceholder = () => {
}
}
}
setFontSize();
setFontColor();
};
const handleWidgetdefaultdata = (defaultdata) => {
@@ -1391,6 +1411,10 @@ const TemplatePlaceholder = () => {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<DropdownWidgetOption
type="checkbox"
@@ -1402,6 +1426,10 @@ const TemplatePlaceholder = () => {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<DropdownWidgetOption
type="dropdown"
@@ -1413,6 +1441,10 @@ const TemplatePlaceholder = () => {
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
isSubscribe={isSubscribe}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}