Reduce checkbox padding significantly (this was v painful)

janfaracik · Nov 18, 2021 · 49a71d3 · 49a71d3
1 parent 03cac28
commit 49a71d3
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 28 deletions.
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config.groovy b/core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config.groovy
@@ -32,23 +32,16 @@ st = namespace("jelly:stapler")
 f.section(title: _("Administrative monitors configuration")) {
     f.advanced(title: _("Administrative monitors")) {
         f.entry(title: _("Enabled administrative monitors")) {
-            p(_("blurb"))
-            div(width: "100%") {
-                for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
-                        .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
-                    div(class: "jenkins-checkbox-help-wrapper", style: "margin-bottom: 0.75rem;") {
-                        f.checkbox(name: "administrativeMonitor",
-                                title: am.displayName,
-                                checked: am.enabled,
-                                json: am.id)
-                        if (am.isSecurity()) {
-                            span(style: 'margin-left: 0.5rem', class: 'am-badge', _("Security"))
-                        }
-                    }
-                    div(class: "tr") {
-                        div(class: "setting-description") {
-                            st.include(from: am, page: "description", optional: true)
-                        }
+            p(class: "jenkins-form-description", _("blurb"))
+            for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
+                    .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
+                div(class: "jenkins-checkbox-help-wrapper", style: "margin-bottom: 0.75rem;") {
+                    f.checkbox(name: "administrativeMonitor",
+                            title: am.displayName,
+                            checked: am.enabled,
+                            json: am.id)
+                    if (am.isSecurity()) {
+                        span(style: 'margin-left: 0.5rem', class: 'am-badge', _("Security"))
                     }
                 }
             }

diff --git a/core/src/main/resources/jenkins/model/Jenkins/configure.jelly b/core/src/main/resources/jenkins/model/Jenkins/configure.jelly
@@ -55,7 +55,7 @@ THE SOFTWARE.
       <j:forEach var="descriptor" items="${h.getSortedDescriptorsForGlobalConfigUnclassifiedReadable()}">
         <j:set var="readOnlyMode" value="${!editable.contains(descriptor)}" />
         <j:set var="instance" value="${descriptor}" /><!-- this makes the <f:textbox field=.../> work -->
-        <f:rowSet name="${descriptor.jsonSafeClassName}">
+        <f:rowSet name="${descriptor.jsonSafeClassName}" isFormItem="false">
           <st:include page="${descriptor.globalConfigPage}" from="${descriptor}" />
         </f:rowSet>
       </j:forEach>

diff --git a/core/src/main/resources/lib/form/optionalBlock.jelly b/core/src/main/resources/lib/form/optionalBlock.jelly
@@ -66,7 +66,7 @@ THE SOFTWARE.
 
   <j:choose>
     <j:when test="${attrs.title!=null}">
-      <div class="optionalBlock-container jenkins-form-item jenkins-form-item--tight">
+      <div class="optionalBlock-container jenkins-form-item">
         <div class="help-sibling tr optional-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
           <div class="jenkins-checkbox-help-wrapper">
             <f:checkbox name="${attrs.name}" class="optional-block-control block-control" onclick="javascript:updateOptionalBlock(this,true)"
@@ -87,8 +87,7 @@ THE SOFTWARE.
     </j:when>
 
     <j:otherwise>
-      hello
-      <f:rowSet name="${attrs.name}" class="jenkins-form-item--tight">
+      <f:rowSet name="${attrs.name}">
         <d:invokeBody />
       </f:rowSet>
     </j:otherwise>

diff --git a/core/src/main/resources/lib/form/rowSet.jelly b/core/src/main/resources/lib/form/rowSet.jelly
@@ -35,8 +35,8 @@ THE SOFTWARE.
     <st:attribute name="ref">
       id of the thing that serves as the group head, if that's available separately
     </st:attribute>
-    <st:attribute name="class">
-      Classes to apply to the row set
+    <st:attribute name="isFormItem">
+      Removes the "jenkins-form-item" class if false
     </st:attribute>
   </st:documentation>
 
@@ -46,8 +46,7 @@ THE SOFTWARE.
       <d:invokeBody />
     </j:when>
     <j:otherwise>
-      <p>asda</p>
-      <div class="jenkins-form-item ${class}">
+      <div class="${isFormItem.equals('false') ? '' : 'jenkins-form-item'}">
         <div ref="${attrs.ref}" class="row-set-start row-group-start tr" style="display:none" name="${attrs.name}"></div>
         <d:invokeBody />
         <div class="row-set-end row-group-end tr"></div>

diff --git a/core/src/main/resources/lib/form/section_.js b/core/src/main/resources/lib/form/section_.js
@@ -55,8 +55,6 @@ var section = (function (){
                         if (e.className == "jenkins-section__title" && isVisible(e)) {
                             var child = new SectionNode(e);
 
-                            console.log(e.className)
-
                             parent.children.push(child);
                             // The next line seems to be unnecessary, as there are no children inside the section header itself.
                             // So this code will always returns a flat list of section headers.

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -16,7 +16,7 @@
   }
 
   &--tight + .jenkins-form-item--tight {
-    background: red;
+    margin-top: -0.9rem;
   }
 
   &--small {

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -2346,6 +2346,15 @@ var hoverNotification = (function() {
     };
 })();
 
+// Decrease vertical padding for checkboxes
+window.addEventListener('load', function () {
+    document.querySelectorAll(".jenkins-form-item").forEach(function (element) {
+        if (element.querySelector("input[type='checkbox']") != null && element.querySelector(".advancedLink") == null) {
+            element.classList.add("jenkins-form-item--tight")
+        }
+    });
+})
+
 /**
  * Loads the script specified by the URL.
  *