@visns-studio/visns-components 5.8.16 → 5.8.18

package/package.json

@@ -11,6 +11,7 @@
         "@nivo/core": "^0.99.0",
         "@nivo/line": "^0.99.0",
         "@nivo/pie": "^0.99.0",
+        "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
@@ -85,7 +86,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.16",
+    "version": "5.8.18",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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

@@ -118,6 +118,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         let info = [];
 
         // Always show type
+        info.push(field.label);
         info.push(fieldTypeLabel);
 
         // Show size if not default
@@ -151,7 +152,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 +255,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 +274,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 +1129,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 +1220,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 +2254,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 +2315,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 +2331,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                     zIndex: 9999,
                 }}
             />
-        </>
+        </div>
     );
 }
 

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

@@ -599,6 +599,58 @@ 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;
+    }
+
+    // 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 +1181,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 {
@@ -1171,12 +1224,13 @@ 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.85);
     color: white;
     padding: 4px 12px;
     border-radius: 12px;
@@ -1192,15 +1246,12 @@ select:not(:placeholder-shown) + .fi__span {
     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
     .interactiveField:hover & {
         opacity: 1;
         background: var(--primary-color);
         box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
+        transform: translateX(-50%) scale(1.05);
     }
 
     // Responsive behavior for smaller fields
@@ -1241,6 +1292,10 @@ select:not(:placeholder-shown) + .fi__span {
         height: 24px !important;
         stroke: currentColor !important;
         fill: none !important;
+
+        &:hover {
+            color: white !important;
+        }
     }
 
     &:hover {
@@ -1454,7 +1509,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;