Fix attach-previous for radios without IDs, add styling for multi-sel…

…ects, reordeer entry for entries without titles, fix title class for dropdownLists
janfaracik · Dec 23, 2021 · e27a8c1 · e27a8c1
1 parent 54287e5
commit e27a8c1
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/core/src/main/resources/lib/form/dropdownList.jelly b/core/src/main/resources/lib/form/dropdownList.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
   </st:documentation>
 
     <div class='jenkins-form-item'>
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
             ${attrs.title}
             <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>

diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
@@ -96,18 +96,20 @@ THE SOFTWARE.
         </j:if>
       </j:when>
       <j:otherwise>
-        <div class="setting-main help-sibling">
-          <d:invokeBody />
+        <div class="help-sibling">
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
-        <!-- used to display the form validation error -->
-        <div class="validation-error-area tr"><div colspan="2"></div><div></div><div></div></div>
-        <f:helpArea />
         <j:if test="${!empty(attrs.description)}">
           <f:description>
             <j:out value="${escapeEntryTitleAndDescription ? h.escape(attrs.description) : attrs.description}"/>
           </f:description>
         </j:if>
+        <div class="setting-main">
+          <d:invokeBody />
+        </div>
+        <!-- used to display the form validation error -->
+        <div class="validation-error-area tr"><div colspan="2"></div><div></div><div></div></div>
+        <f:helpArea />
       </j:otherwise>
     </j:choose>
   </div>

diff --git a/core/src/main/resources/lib/form/radio.jelly b/core/src/main/resources/lib/form/radio.jelly
@@ -47,7 +47,7 @@ THE SOFTWARE.
         <input class="jenkins-radio__input" type="radio" name="${attrs.name}" onclick="${attrs.onclick}"
                id="${attrs.id}" value="${attrs.value}" checked="${attrs.checked?'true':null}"
                disabled="${readOnlyMode?'true':null}" />
-        <label class="jenkins-radio__label" for="${attrs.id}">${attrs.title}</label>
+        <label class="jenkins-radio__label ${attrs.id != null ? '' : 'attach-previous'}" for="${attrs.id}">${attrs.title}</label>
         <div class="jenkins-radio__children">
             <d:invokeBody />
         </div>

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -441,10 +441,6 @@ div.behavior-loading {
   }
 }
 
-label.attach-previous {
-    margin-left: 0.5em;
-}
-
 .bottom-sticker,
 #bottom-sticker {
     width: 100%;   /* it needs to occupy the entire width or else the underlying content will see through */

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -245,7 +245,7 @@
     max-width: 100% !important; // TODO remove important after https://github.com/jenkinsci/credentials-plugin/pull/255
     border-radius: 6px;
     box-shadow: 0 0 0 10px transparent;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     min-height: 38px;
 
     &:hover {
@@ -265,6 +265,25 @@
   }
 }
 
+.jenkins-multi-select {
+  position: relative;
+  width: 100%;
+  border: 2px solid var(--input-border);
+  border-radius: var(--form-input-border-radius);
+  box-shadow: 0 0 0 10px transparent;
+  transition: var(--standard-transition);
+  outline: none;
+
+  &:focus {
+    border-color: var(--focus-input-border);
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
+  }
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
 .jenkins-radio-help-wrapper {
   display: flex;
   align-items: center;