From 1cd281138269a3bfaef7b2e33ceda953c724be5c Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Fri, 7 Apr 2023 16:51:36 +0200
Subject: [PATCH] MVC: base_dialog: apply collapsible table headers to the
 standard dialog form as well.

---
 .../mvc/app/views/layout_partials/base_dialog.volt     | 10 ++++++++--
 .../mvc/app/views/layout_partials/base_form.volt       |  4 ++--
 src/opnsense/mvc/app/views/layouts/default.volt        |  3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt b/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
index 75e778396..fd63f8f39 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
@@ -107,10 +107,16 @@
         </colgroup>
         <thead>
           <tr{% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
-            <th colspan="3"><h2>{{field['label']}}</h2></th>
+            <th colspan="3">
+                <div style="padding-bottom: 5px; padding-top: 5px; font-size: 16px;">
+                    <i class="fa fa-angle-down" aria-hidden="true"></i>
+                    &nbsp;
+                    <b>{{field['label']}}</b>
+                </div>
+            </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="collapsible">
 {#- endmacro #}
 
                             {% else %}
diff --git a/src/opnsense/mvc/app/views/layout_partials/base_form.volt b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
index b12495e87..e7cdcab50 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_form.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
@@ -85,13 +85,13 @@
         </colgroup>
         <thead>
           <tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
-            <td colspan="3">
+            <th colspan="3">
                 <div style="padding-bottom: 5px; padding-top: 5px; font-size: 16px;">
                     <i class="fa fa-angle-down" aria-hidden="true"></i>
                     &nbsp;
                     <b>{{field['label']}}</b>
                 </div>
-            </td>
+            </th>
           </tr>
         </thead>
         <tbody class="collapsible">
diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt
index 88ef2e2e7..2205c8fae 100644
--- a/src/opnsense/mvc/app/views/layouts/default.volt
+++ b/src/opnsense/mvc/app/views/layouts/default.volt
@@ -112,11 +112,12 @@
                     });
                 }, 500);
 
+                // Register collapsible table headers
                 $('.table').on('click', 'thead', function(event) {
                     let collapse = $(event.currentTarget).next();
                     let id = collapse.attr('class');
                     if (collapse != undefined && id !== undefined && id === "collapsible") {
-                        let icon = $('> tr > td > div > i', event.currentTarget);
+                        let icon = $('> tr > th > div > i', event.currentTarget);
                         icon.toggleClass("fa-angle-down fa-angle-right");
                         $('> tr > td', collapse).fadeToggle(150);
                     }