Redo form

janfaracik · Oct 7, 2021 · f2149db · f2149db
1 parent 170f87e
commit f2149db
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 156 deletions.
diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
@@ -26,12 +26,15 @@ THE SOFTWARE.
   New View page
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
   <l:layout permission="${app.primaryView.CREATE}" title="${%New View}">
     <st:include page="sidepanel.jelly" />
-
     <l:main-panel>
-      <h1>${%New View}</h1>
+      <div class="jenkins-app-bar">
+        <div class="jenkins-app-bar__content">
+          <h1>${%New View}</h1>
+        </div>
+      </div>
       <j:invokeStatic var="views" className="hudson.model.View" method="allInstantiable" />
       <n:form nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
               descriptors="${views}" checkUrl="checkViewName" xmlns:n="/lib/hudson/newFromList" />

diff --git a/core/src/main/resources/lib/form/form.jelly b/core/src/main/resources/lib/form/form.jelly
@@ -38,6 +38,9 @@ THE SOFTWARE.
       but in Hudson you should have it for testing and page scraping,
       so this attribute is marked required.
     </st:attribute>
+    <st:attribute name="class">
+      Classes to apply to the form
+    </st:attribute>
     <st:attribute name="enctype">
       @enctype of the &lt;form> HTML element.
     </st:attribute>
@@ -56,7 +59,7 @@ THE SOFTWARE.
       Default: false
     </st:attribute>
   </st:documentation>
-  <form id="${id}" action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
+  <form id="${id}" class="${class}" action="${action}" method="${method}" enctype="${attrs.enctype}" name="${name}" target="${attrs.target}" autocomplete="${attrs.autocomplete==true?'on':'off'}">
     <div width="100%" class="${attrs.tableClass}">
       <d:invokeBody/>
     </div>

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -49,29 +49,40 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
-  <s:form method="post" action="${attrs.action?:'createItem'}" name="createItem">
-    <s:entry title="${attrs.nameTitle}">
+  <s:form class="jenkins-form" method="post" id="createItemForm" action="${attrs.action?:'createItem'}" name="createItem">
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <label for="name" class="jenkins-form-label">${attrs.nameTitle}</label>
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
-                 onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
+                 onchange="updateOk()" onkeyup="updateOk()" />
       <script>$('name').focus();</script>
-    </s:entry>
+    </div>
+
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <fieldset class="jenkins-fieldset">
+        <legend class="jenkins-form-label">
+          View type
+        </legend>
+        <j:forEach var="descriptor" items="${descriptors}">
+          <div class="jenkins-radio">
+            <input class="jenkins-radio__input" type="radio" name="mode" id="${descriptor.id}" value="${descriptor.id}" onchange="updateOk()" onclick="updateOk()" />
+            <label for="${descriptor.id}" class="jenkins-radio__label">
+              ${descriptor.displayName}
+            </label>
+            <div class="jenkins-radio__description">
+              <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
+            </div>
+          </div>
+        </j:forEach>
+      </fieldset>
+    </div>
 
-    <j:forEach var="descriptor" items="${descriptors}">
-      <s:block>
-        <input type="radio" name="mode" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <label class="attach-previous"><b>${descriptor.displayName}</b></label>
-      </s:block>
-      <s:entry>
-        <st:set var="instance" value="${descriptor}" />
-        <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
-      </s:entry>
-    </j:forEach>
     <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
       <s:block>
-        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
+        <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk()" onclick="updateOk()" />
         <label class="attach-previous"><b>${attrs.copyTitle}</b></label>
       </s:block>
       <s:entry>
@@ -89,32 +100,47 @@ THE SOFTWARE.
       </s:entry>
     </j:if>
 
-    <s:bottomButtonBar>
+    <div class="jenkins-form-item">
       <!--
         when there's only one radio above, form.elements['mode]' won't return an array, which makes the script complex.
         So always force non-empty array
        -->
       <input type="radio" name="mode" value="dummy1" style="display:none" />
       <input type="radio" name="mode" value="dummy2" style="display:none" />
-      <input type="submit" name="Submit" value="${%OK}" id="ok" style="margin-left:5em" />
-    </s:bottomButtonBar>
+      <button type="submit" id="ok" class="jenkins-button jenkins-button--primary jenkins-button--large">
+        ${%Create}
+      </button>
+    </div>
   </s:form>
-  <script><![CDATA[
-    var okButton = makeButton($('ok'),null);
 
-    function updateOk(form) {
+  <script><![CDATA[
+    function updateOk() {
       function state() {
-        if($('name').value.length==0)   return true;
-        var radio = form.elements['mode'];
-        if (radio.length==2)  return false; // this means we only have dummy checkboxes
-        for(i=0;i<radio.length;i++)
-          if(radio[i].checked)
+        let form = document.getElementById("createItemForm");
+        let nameInput = document.getElementById("name");
+        let radios = form.querySelectorAll('input[type="radio"]');
+
+        if (nameInput.value.length == 0) {
+          return true;
+        }
+
+        // this means we only have dummy checkboxes
+        if (radios.length == 2) {
+          return true;
+        }
+
+        for (i = 0; i < radios.length; i++) {
+          if (radios[i].checked) {
             return false;
+          }
+        }
+
         return true;
       }
 
-      okButton.set('disabled',state(),false);
+      document.getElementById("ok").disabled = state();
     }
-    updateOk(okButton.getForm());
-  ]]></script>
-</j:jelly>
+
+    updateOk();
+    ]]></script>
+</j:jelly>
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -140,9 +140,9 @@
   --btn-large-font-size: var(--font-size-sm);
   --btn-large-line-height: 1.25rem;
   // Button primary
-  --btn-primary-bg: var(--primary);
-  --btn-primary-bg-hover: var(--primary-hover);
-  --btn-primary-bg-active: var(--primary-active);
+  --btn-primary-bg: #093853;
+  --btn-primary-bg-hover: #0e4869;
+  --btn-primary-bg-active: #134f72;
   // Button primary
   --btn-secondary-color: var(--secondary);
   --btn-secondary-bg: var(--btn-text-color);