@visns-studio/visns-components 5.8.17 → 5.8.19

package/package.json

@@ -86,7 +86,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.17",
+    "version": "5.8.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericFormBuilder.jsx

@@ -151,7 +151,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         const fieldTypeLabel =
             fieldTypes.find((type) => type.value === field.type)?.label ||
             field.type;
-        let tooltip = `Type: ${fieldTypeLabel}\n`;
+        let tooltip = `Label: ${field.label}\n`;
+        tooltip += `Type: ${fieldTypeLabel}\n`;
         tooltip += `Size: ${field.size || 'Not set'}\n`;
         tooltip += `Required: ${field.required === 'yes' ? 'Yes' : 'No'}\n`;
 
@@ -253,6 +254,14 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 data-tooltip-place="top"
                 data-field-size={field.size}
             >
+                {/* Field info - always visible */}
+                <div className={styles.fieldInfo}>
+                    <span className={styles.fieldInfoText}>
+                        {getFieldInfo(field)}
+                    </span>
+                </div>
+
+                {/* Field controls - only visible on hover */}
                 <div className={styles.fieldControls}>
                     <div
                         {...attributes}
@@ -264,23 +273,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     >
                         <ChevronVertical strokeWidth={3} size={24} />
                     </div>
-                    <div className={styles.fieldInfo}>
-                        <span className={styles.fieldInfoText}>
-                            {getFieldInfo(field)}
-                        </span>
-                    </div>
                     <div className={styles.fieldActions}>
                         <Pencil
                             className={styles.editIcon}
                             strokeWidth={3}
                             size={20}
                             onClick={(e) => {
-                                console.info(
-                                    'Edit button clicked - field:',
-                                    field,
-                                    'counter:',
-                                    counter
-                                );
                                 e.preventDefault();
                                 e.stopPropagation();
                                 handleEdit(counter);
@@ -1130,7 +1128,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     }, []);
 
     return (
-        <>
+        <div className={modalShow || modalFormShow ? styles.modalOpen : ''}>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
                     <div className={`${styles.grid__full} ${styles.crmtitle}`}>
@@ -1221,6 +1219,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 onClose={handleCloseModal}
                 closeOnDocumentClick={false}
             >
+                {modalShow && <div className={styles.modalBackdrop} />}
                 <div className={styles.modalwrap}>
                     <div className={styles.modal}>
                         <div className={styles.modal__header}>
@@ -2254,6 +2253,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 onClose={handleCloseModalForm}
                 closeOnDocumentClick={false}
             >
+                {modalFormShow && <div className={styles.modalBackdrop} />}
                 <div className={styles.modalwrap}>
                     <div className={styles.modal}>
                         <div className={styles.modal__header}>
@@ -2314,8 +2314,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     lineHeight: '1.4',
                     maxWidth: '300px',
                     whiteSpace: 'pre-line',
-                    zIndex: 9999,
+                    zIndex: 99999,
                 }}
+                place="top"
+                offset={10}
             />
             <Tooltip
                 id="action-tooltip"
@@ -2328,7 +2330,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     zIndex: 9999,
                 }}
             />
-        </>
+        </div>
     );
 }
 

package/src/components/crm/generic/styles/GenericFormBuilder.module.scss

@@ -599,6 +599,72 @@ select:not(:placeholder-shown) + .fi__span {
     overflow: visible;
     border-top-left-radius: var(--br);
     border-top-right-radius: var(--br);
+    position: relative;
+    z-index: 10000;
+}
+
+/* Modal backdrop to prevent background interactions */
+.modalBackdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+}
+
+/* Prevent interactions with background content when modal is open */
+.modalOpen {
+    .grid,
+    .formSplit,
+    .polActions {
+        pointer-events: none;
+        user-select: none;
+    }
+
+    // Completely hide field info when modal is open
+    .fieldInfo {
+        opacity: 0 !important;
+        visibility: hidden !important;
+        z-index: 1 !important; // Much lower than modal backdrop
+    }
+
+    // Lower z-index of field controls when modal is open
+    .fieldControls {
+        z-index: 1 !important; // Much lower than modal backdrop
+        opacity: 0 !important;
+        visibility: hidden !important;
+    }
+
+    // Disable hover effects on interactive fields when modal is open
+    .interactiveField {
+        &:hover {
+            border-color: transparent !important;
+            background-color: transparent !important;
+
+            .fieldControls {
+                opacity: 0 !important;
+            }
+        }
+    }
+
+    // Disable hover effects on form elements when modal is open
+    .formItem textarea:hover,
+    .formItem select:hover,
+    .formItem input[type]:hover {
+        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15) !important;
+        transition: none !important;
+    }
+
+    // Disable hover effects on buttons when modal is open
+    .btn:hover {
+        background: var(--primary-color) !important;
+        border: 1px solid rgba(var(--primary-rgb), 1.1) !important;
+        color: var(--tertiary-color) !important;
+    }
 }
 
 .modal {
@@ -1129,6 +1195,7 @@ select:not(:placeholder-shown) + .fi__span {
     flex-direction: column;
     min-height: 100px;
     height: 100%;
+    margin-top: 15px; // Add margin to provide space for tooltip above
 
     // Ensure proper layout during sorting
     &.sortableHelper {
@@ -1163,7 +1230,7 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: flex-start;
     opacity: 0;
     transition: opacity 0.2s ease;
-    z-index: 10000;
+    z-index: 1002; // Reduced from 10000 to be below modals but above content
     pointer-events: none;
 
     > * {
@@ -1171,42 +1238,44 @@ select:not(:placeholder-shown) + .fi__span {
     }
 }
 
+// Field info is now separate from field controls and always visible
 .fieldInfo {
     position: absolute;
-    top: 4px;
+    top: 8px; // Increased from 4px to provide more space for tooltip above
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(var(--primary-rgb), 0.9);
+    background: rgba(
+        var(--primary-rgb),
+        0.4
+    ); // Much more subtle - reduced from 0.85
     color: white;
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
+    padding: 3px 10px; // Slightly smaller padding
+    border-radius: 10px; // Slightly smaller border radius
+    font-size: 0.7rem; // Smaller font size
+    font-weight: 400; // Lighter font weight - reduced from 500
     white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
-    z-index: 10001;
+    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.15); // Much softer shadow
+    z-index: 1001; // Reduced from 10001 to be below modals but above content
     pointer-events: none;
-    opacity: 1; // Always visible
+    opacity: 0.7; // More subtle - reduced from 1
     transition: all 0.2s ease;
     max-width: calc(100% - 120px); // Leave space for drag handle and actions
     overflow: hidden;
     text-overflow: ellipsis;
 
-    // Ensure it's visible even when field controls are hidden
-    .interactiveField:not(:hover) & {
-        opacity: 0.8;
-    }
-
+    // Enhanced styling on hover - more prominent when needed
     .interactiveField:hover & {
         opacity: 1;
-        background: var(--primary-color);
+        background: rgba(var(--primary-rgb), 0.85); // Full opacity on hover
         box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
+        transform: translateX(-50%) scale(1.05);
+        font-weight: 500; // Bolder on hover
     }
 
     // Responsive behavior for smaller fields
     @media (max-width: 768px) {
-        font-size: 0.7rem;
-        padding: 3px 8px;
+        font-size: 0.65rem;
+        padding: 2px 8px;
         max-width: calc(100% - 100px);
     }
 }
@@ -1233,7 +1302,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 40px;
     min-height: 40px;
     position: relative;
-    z-index: 10001;
+    z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;
@@ -1241,6 +1310,10 @@ select:not(:placeholder-shown) + .fi__span {
         height: 24px !important;
         stroke: currentColor !important;
         fill: none !important;
+
+        &:hover {
+            color: white !important;
+        }
     }
 
     &:hover {
@@ -1279,7 +1352,7 @@ select:not(:placeholder-shown) + .fi__span {
     min-width: 36px;
     min-height: 36px;
     position: relative;
-    z-index: 10001;
+    z-index: 1003; // Reduced from 10001 to be below modals but above content
 
     svg {
         display: block !important;
@@ -1454,7 +1527,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fieldContent {
     position: relative;
     z-index: 1;
-    padding-top: 50px; /* Add space for the larger controls */
+    padding-top: 55px; /* Increased space for field info and controls */
     flex-grow: 1;
     display: flex;
     flex-direction: column;