From c3ffda4dd256c60bd7b12460a8d830c335f227fe Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 18 Mar 2024 12:45:08 +0530 Subject: [PATCH 1/3] fix: resolving width inconsistencies with of text widgets & default data for widgets information pop-ups in mobile display. --- .../OpenSign/src/components/pdf/Placeholder.js | 18 +++++++++++++++--- .../src/components/pdf/PlaceholderBorder.js | 2 +- .../src/components/pdf/PlaceholderType.js | 8 +++++++- apps/OpenSign/src/pages/PlaceHolderSign.js | 9 +++------ apps/OpenSign/src/styles/signature.css | 18 ++++++++++++++---- 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index d786efa9b..c6d9051bb 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -215,7 +215,8 @@ function Placeholder(props) { "company", "job title", "date", - "email" + "email", + textWidget ].includes(props.pos.type); if (widgetTypeExist) { @@ -594,7 +595,8 @@ function Placeholder(props) { disableDragging={ props.isNeedSign ? true - : props.isPlaceholder && props.pos.type !== "date" + : props.isPlaceholder && + !["date", textWidget].includes(props.pos.type) ? false : !isDraggingEnabled } @@ -652,8 +654,18 @@ function Placeholder(props) { style={{ left: props.xPos(props.pos, props.isSignYourself), top: props.yPos(props.pos, props.isSignYourself), - width: "auto", //props.posWidth(props.pos, props.isSignYourself), + width: + props.pos.type === radioButtonWidget || + props.pos.type === "checkbox" + ? "auto" + : props.posWidth(props.pos, props.isSignYourself), + // "auto", //props.posWidth(props.pos, props.isSignYourself), // height: props.posHeight(props.pos, props.isSignYourself), + height: + props.pos.type === radioButtonWidget || + props.pos.type === "checkbox" + ? "auto" + : props.posHeight(props.pos, props.isSignYourself), zIndex: "10" }} onTouchEnd={() => handleOnClickPlaceholder()} diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js index 182f85991..11ed92981 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js @@ -31,7 +31,7 @@ function PlaceholderBorder(props) { }; return (
!isMobile && props?.setDraggingEnabled(true)} className="borderResize" style={{ borderColor: themeColor, diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js index 0b851f258..52137b19a 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderType.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js @@ -2,6 +2,7 @@ import React, { useEffect, useState, forwardRef, useRef } from "react"; import { getMonth, getYear, + isMobile, onChangeInput, radioButtonWidget, range, @@ -741,6 +742,7 @@ function PlaceholderType(props) { placeholder="Enter label" rows={1} value={textValue} + onBlur={handleInputBlur} onChange={(e) => { setTextValue(e.target.value); onChangeInput( @@ -753,7 +755,11 @@ function PlaceholderType(props) { false ); }} - className="labelTextArea" + className={ + isMobile + ? "labelTextArea labelWidthMobile" + : "labelTextArea labelWidthDesktop" + } style={{ whiteSpace: "pre-wrap" }} cols="50" /> diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 8602e6505..7909fecb3 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -317,9 +317,6 @@ function PlaceHolderSign() { //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { - if (item && item.text) { - setWidgetName(item.text); - } getSignerPos(item, monitor); }; @@ -336,7 +333,7 @@ function PlaceHolderSign() { let dropData = []; let placeHolder; const dragTypeValue = item?.text ? item.text : monitor.type; - + console.log("option", dragTypeValue); if (item === "onclick") { const dropObj = { //onclick put placeholder center on pdf @@ -487,10 +484,11 @@ function PlaceHolderSign() { setIsCheckbox(true); } else if (dragTypeValue === radioButtonWidget) { setIsRadio(true); - } + } setWidgetType(dragTypeValue); setSignKey(key); setCurrWidgetsDetails({}); + setWidgetName(dragTypeValue); } } }; @@ -1755,7 +1753,6 @@ function PlaceHolderSign() {
- Date: Mon, 18 Mar 2024 16:21:14 +0530 Subject: [PATCH 2/3] fix: dragging issue of text widget in mobile view --- apps/OpenSign/src/components/pdf/PlaceholderBorder.js | 6 +++++- apps/OpenSign/src/pages/PlaceHolderSign.js | 1 - 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js index 11ed92981..d64aab3c2 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js @@ -4,7 +4,8 @@ import { defaultWidthHeight, isMobile, radioButtonWidget, - resizeBorderExtraWidth + resizeBorderExtraWidth, + textWidget } from "../../constant/Utils"; function PlaceholderBorder(props) { const getResizeBorderExtraWidth = resizeBorderExtraWidth(); @@ -32,6 +33,9 @@ function PlaceholderBorder(props) { return (
!isMobile && props?.setDraggingEnabled(true)} + onTouchEnd={() => + props.pos.type === textWidget && props?.setDraggingEnabled(true) + } className="borderResize" style={{ borderColor: themeColor, diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 7909fecb3..cffa2d77d 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -333,7 +333,6 @@ function PlaceHolderSign() { let dropData = []; let placeHolder; const dragTypeValue = item?.text ? item.text : monitor.type; - console.log("option", dragTypeValue); if (item === "onclick") { const dropObj = { //onclick put placeholder center on pdf From f1cf39576157e4a359365858268445bd89278e75 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 18 Mar 2024 17:05:15 +0530 Subject: [PATCH 3/3] fix: textInput widget popup select arrow key design --- .../src/components/pdf/Placeholder.js | 3 +-- .../src/components/pdf/WidgetNameModal.js | 16 ++--------- apps/OpenSign/src/styles/AddUser.css | 27 +++++++++++++++++++ 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index c6d9051bb..41f96a550 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -595,8 +595,7 @@ function Placeholder(props) { disableDragging={ props.isNeedSign ? true - : props.isPlaceholder && - !["date", textWidget].includes(props.pos.type) + : props.isPlaceholder && ![textWidget].includes(props.pos.type) ? false : !isDraggingEnabled } diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js index 329dea3e6..4471af317 100644 --- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js +++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js @@ -129,18 +129,7 @@ const WidgetNameModal = (props) => { >
{ // onBlur={() => handleBlurRegex()} />