UI tweaks and bug fixes

Author: Reece Browne

src/main/resources/static/js/draggable-utils-form.js

@@ -180,7 +180,7 @@ const DraggableUtils = {
         window.latestId = input.getAttribute('id');
         window.populateEditForm(input.getAttribute('type'), {
           'id': input.getAttribute('id'), 'height': input.style.height, 'width': input.style.width,
-          'backgroundPalette': input.getAttribute('backgroundColor'), 'textPalette': input.getAttribute('textColor'), fontSize: parseInt(input.style.fontSize),
+          'backgroundPalette': input.getAttribute('backgroundColor'), 'textPalette': input.getAttribute('textColor'), fontSize: parseInt(input.style.fontSize) || "12",
           'font': input.style.fontFamily, 'dropdownValues': input.getAttribute("data-value"), 'value': input.value, 'optionListValues': input.getAttribute("data-value")
         });
       });
@@ -221,7 +221,7 @@ const DraggableUtils = {
       window.latestId = element.getAttribute('id');
       window.populateEditForm(element.getAttribute('type'), {
         'id': element.getAttribute('id'), 'height': element.style.height, 'width': element.style.width,
-        'backgroundPalette': element.getAttribute('backgroundColor'), 'textPalette': element.getAttribute('textColor'), fontSize: parseInt(element.style.fontSize),
+        'backgroundPalette': element.getAttribute('backgroundColor'), 'textPalette': element.getAttribute('textColor'), fontSize: parseInt(element.style.fontSize) || "12",
         'font': element.style.fontFamily, 'dropdownValues': element.getAttribute("data-value"), 'value': element.value, 'optionListValues': element.getAttribute("data-value")
       });
       resolve(canvasContainer);
@@ -732,7 +732,7 @@ const DraggableUtils = {
             radioGroup.addOptionToPage(buttonValue, page, translatedPositions);
           } else if (elementType === 'dropdown') {
             // Handle Dropdowns
-            const fieldValues = input.getAttribute('data-value')?.split(',').map(v => v.trim());
+            const fieldValues = input.getAttribute('data-value')?.split(',').map(v => v.trim() || []);
             const field = form.createDropdown(fieldKey);
             field.addOptions(fieldValues);
             field.addToPage(page, translatedPositions);

src/main/resources/static/js/pages/forms.js

@@ -62,14 +62,13 @@ const textBoxConfig = {
     { id: 'value', label: 'Placeholder', type: 'text', placeholder: '' },
     { id: 'fontSize', label: 'Font Size', type: 'number', value: '12' },
     { id: 'backgroundPalette', label: 'Background Color', type: 'color', value: '#ffffff' },
-    { id: 'Palette', label: 'Text Color', type: 'color', value: '#000000' }
+    { id: 'textPalette', label: 'Text Color', type: 'color', value: '#000000' }
   ]
 };
 
 const configMap = {
   radio: radioButtonConfig,
   textBox: textBoxConfig,
-  text: textConfig,
   checkbox: checkboxConfig,
   dropdown: dropdownConfig,
   optionList: optionListConfig
@@ -111,15 +110,15 @@ document.querySelector('input[name=pdf-upload]').addEventListener('change', asyn
       await DraggableUtils.renderPage(pdfDoc, 0);
 
       document.querySelectorAll('.show-on-file-selected').forEach((el) => {
-        el.style.cssText = '';
+        el.style.display = 'block';
       });
     }
   });
 });
 
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.show-on-file-selected').forEach((el) => {
-    el.style.cssText = 'display:none !important';
+    el.style.display = 'none !important';
   });
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Delete') {

src/main/resources/templates/forms.html

@@ -41,11 +41,12 @@
               th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multipleInputsForSingleRequest=false, disableMultipleFiles=true, accept='application/pdf')}">
             </div>
             <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
-            <div class="show-on-file-selected">
+            <div class="show-on-file-selected" style="height:23rem">
               <div style="display: flex;">
-                <div class="margin-auto-parent" style="margin-bottom: 1rem;margin-top: 0.5rem;">
-                  <div style="margin-right: 2rem; width:100%" id="addNewForm"></div>
-                  <button id="save" class="btn btn-outline-success" th:text="#{sign.add}"></button>
+                <div class="margin-auto-parent" style="margin-bottom: 1rem; margin-top: 0.5rem;">
+                  <div style="margin-right: 2rem; width:100%;" id="addNewForm"></div>
+                  <button id="save" class="btn btn-outline-success" style="height:2.3rem"
+                    th:text="#{sign.add}"></button>
                 </div>
               </div>
               <div id="formOptions"></div>