Merge pull request #499 from OpenSignLabs/fix_mobile_issue

fix:  width issue of text widget & default data for widgets information pop-ups in mobile display.

Author: prafull-opensignlabs

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,7 @@ function Placeholder(props) {
       disableDragging={
         props.isNeedSign
           ? true
-          : props.isPlaceholder && props.pos.type !== "date"
+          : props.isPlaceholder && ![textWidget].includes(props.pos.type)
             ? false
             : !isDraggingEnabled
       }
@@ -652,8 +653,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()}

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();
@@ -31,7 +32,10 @@ function PlaceholderBorder(props) {
   };
   return (
     <div
-      onMouseEnter={!isMobile && props?.setDraggingEnabled(true)}
+      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(true)}
+      onTouchEnd={() =>
+        props.pos.type === textWidget && props?.setDraggingEnabled(true)
+      }
       className="borderResize"
       style={{
         borderColor: themeColor,

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"
         />

apps/OpenSign/src/components/pdf/WidgetNameModal.js

@@ -129,27 +129,15 @@ const WidgetNameModal = (props) => {
               >
                 <div style={{ width: "100%", position: "relative" }}>
                   <input
-                    style={{
-                      padding: "0.5rem 0.75rem",
-                      width: "92%",
-                      borderWidth: "1px",
-                      borderColor: "#d1d5db",
-                      borderTopLeftRadius: "0.375rem",
-                      borderBottomLeftRadius: "0.375rem",
-                      outline: "none",
-                      fontSize: "0.75rem",
-                      position: "relative",
-                      zIndex: 2
-                    }}
+                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
                     name="textvalidate"
                     placeholder="Enter custom expression"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    style={{ position: "absolute", left: 0, zIndex: 1 }}
-                    className="addUserInput"
+                    className="validationlist addUserInput"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}

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,6 @@ function PlaceHolderSign() {
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
-
       if (item === "onclick") {
         const dropObj = {
           //onclick put placeholder center on pdf
@@ -487,10 +483,11 @@ function PlaceHolderSign() {
           setIsCheckbox(true);
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } 
+        }
         setWidgetType(dragTypeValue);
         setSignKey(key);
         setCurrWidgetsDetails({});
+        setWidgetName(dragTypeValue);
       }
     }
   };
@@ -1755,7 +1752,6 @@ function PlaceHolderSign() {
             </button>
           </div>
         </ModalUi>
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/styles/AddUser.css

@@ -60,6 +60,7 @@
   color: #ffffff;
   outline: none;
 }
+
 /* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
 .resetbutton {
   background-color: #188ae2;
@@ -75,3 +76,29 @@
   outline: none;
   margin-left: 8px;
 }
+
+.validationlist {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  appearance: none;
+  -moz-appearance: "none";
+  -webkit-appearance: "none";
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAnUlEQVR4nO2QMQrCQBBFX51NbWMp2uox7Gw8h22uYEguIZNKyB0lMIElTNzdGBvdB8PC8Gces5DJ/Cxn4Aa4QM5pbsgncQF6rQYoZ3IFcPey11jByRsaqzYuctqfZo8xki3QBURuRtDpfBQ74GEsaYHN5It8wYFEhgExlj2NniwRhC7qP70gRSRrCN6JZE2BJZJvCEb2QKVvJvMvvAD2WzaK/35kGAAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 1rem auto;
+}
+
+
+@media (max-width: 375px) {
+  .validationlist {
+    background-position: right 0.5rem top 50%;
+  }
+}
+
+@media (min-width:375px) and (max-width: 767px) {
+  .validationlist {
+    background-position: right 1rem top 50%;
+  }
+}

apps/OpenSign/src/styles/signature.css

@@ -837,10 +837,18 @@ option {
   justify-content: flex-start;
 }
 
-.labelTextArea {
-  font-size: 12px;
+.labelWidthDesktop {
   min-width: 100%;
   min-height: 100%;
+}
+
+.labelWidthMobile {
+  width: 100%;
+  height: 100%;
+}
+
+.labelTextArea {
+  font-size: 12px;
   border: 1px solid #007bff;
   outline: none;
   z-index: 999;
@@ -944,7 +952,7 @@ option {
   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 {
+  .stickyHead+.content {
     padding-top: 60px;
   }
 
@@ -1173,6 +1181,7 @@ option {
   font-size: 12px;
   margin-left: 5px;
 }
+
 .defaultOptions:focus {
   outline: none;
 }
@@ -1191,6 +1200,7 @@ option {
     min-width: 90%;
     overflow-y: auto;
   }
+
   .signatureBtn {
     width: max-content;
   }
@@ -1224,4 +1234,4 @@ option {
     min-width: 78%;
     overflow-y: auto;
   }
-}
+}