Animate in/out radio children

janfaracik · Oct 10, 2021 · 281b2bd · 281b2bd
1 parent 138fe14
commit 281b2bd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -89,14 +89,14 @@ THE SOFTWARE.
           <div class="jenkins-radio">
             <input class="jenkins-radio__input" type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
             <label class="jenkins-radio__label" for="copy">${attrs.copyTitle}</label>
-          </div>
-          <s:entry class="jenkins-radio__children">
-            <j:set var="descriptor" value="${it.descriptor}" />
-            <div class="jenkins-search">
-              <s:textbox id="from" placeholder="Type for suggestions" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
-              <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+            <div class="jenkins-radio__children">
+              <j:set var="descriptor" value="${it.descriptor}" />
+              <div class="jenkins-search">
+                <s:textbox placeholder="Type for suggestions" clazz="jenkins-search__input"  name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
+                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_search_24px" class="jenkins-search__icon" />
+              </div>
             </div>
-          </s:entry>
+          </div>
         </j:if>
       </fieldset>
     </div>

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -57,6 +57,7 @@
 
 .jenkins-search {
   position: relative;
+  max-width: 420px;
 
   &__input {
     appearance: none;
@@ -65,7 +66,6 @@
     border: 2px solid var(--input-border);
     border-radius: 6px;
     width: 100%;
-    max-width: 350px;
     margin: 0;
     padding: 0 4px 0 29px;
     line-height: 30px;
@@ -236,8 +236,12 @@
 
   &__children {
     position: relative;
-    margin-top: -10px;
+    margin-top: 0;
+    opacity: 0;
     padding-left: 32px;
+    transition: 0.2s ease;
+    visibility: hidden;
+    max-height: 0;
 
     &::after {
       content: "";
@@ -257,6 +261,13 @@
       }
     }
   }
+
+  &__input:checked + &__label + &__children {
+    visibility: visible;
+    margin-top: 10px;
+    opacity: 1;
+    max-height: none;
+  }
 }
 
 .jenkins-button {