From f2149db29c9ad88b505cddd730c86cda688a09c2 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Thu, 7 Oct 2021 20:57:01 +0100
Subject: [PATCH] Redo form

---
 .../jenkins/model/Jenkins/newView.jelly       |   9 +-
 core/src/main/resources/lib/form/form.jelly   |   5 +-
 .../lib/hudson/newFromList/form.jelly         |  88 ++++---
 war/src/main/less/abstracts/theme.less        |   6 +-
 war/src/main/less/modules/form.less           | 247 +++++++++---------
 5 files changed, 199 insertions(+), 156 deletions(-)

diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
index 991cae296479..173b187f2177 100644
--- 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
index 51ae7db9068d..39f30b49842d 100644
--- 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
index 446fb6114db5..add75c883360 100644
--- 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>
\ No newline at end of file
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
index 84f716053496..615ca98ebe05 100644
--- 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);
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index 001e5d69c889..f51d8b92256a 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -1,3 +1,56 @@
+.jenkins-form {
+  max-width: 80ch;
+}
+
+.jenkins-form-item {
+  margin-bottom: 2rem;
+}
+
+.jenkins-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jenkins-form-label {
+  display: block;
+  font-weight: bold;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.jenkins-form-description {
+  display: block;
+  opacity: 0.5;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  color: var(--text-color-secondary);
+}
+
+.jenkins-input {
+  display: block;
+  background: var(--input-color);
+  border: 2px solid var(--input-border);
+  padding: 8px;
+  border-radius: 6px;
+  width: 350px;
+  box-shadow: 0 0 0 10px transparent;
+  transition: 0.2s ease;
+
+  &:hover {
+    border-color: var(--input-border-hover);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-color: var(--focus-input-border);
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
+  }
+}
+
 .jenkins-search {
   position: relative;
 
@@ -112,70 +165,10 @@
   }
 }
 
-h1 {
-  margin-bottom: 30px;
-}
-
-#main-panel {
-  padding: 30px;
-}
-
-.jenkins-form {
-  max-width: 80ch;
-}
-
-.jenkins-form-item {
-  margin-bottom: 30px;
-}
-
-.jenkins-fieldset {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.jenkins-form-label {
-  display: block;
-  font-weight: bold;
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-.jenkins-form-description {
-  display: block;
-  opacity: 0.5;
-  margin-top: 0;
-  margin-bottom: 12px;
-}
-
-.jenkins-input {
-  display: block;
-  border: 3px solid rgba(0,0,0,0.2);
-  padding: 8px;
-  border-radius: 6px;
-  width: 300px;
-  box-shadow: 0 0 0 10px transparent;
-  transition: 0.2s ease;
-
-  &:hover {
-    border-color: rgba(0,0,0,0.5);
-    box-shadow: 0 0 0 5px var(--focus-color);
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-    border-color: rgba(0,0,0,1);
-    box-shadow: 0 0 0 5px var(--focus-color);
-  }
-}
-
-:root {
-  --focus-color: rgba(0, 0, 0, 0.1);
-  --focus-hover-color: rgba(0, 0, 0, 0.05);
-}
-
 .jenkins-radio {
+  max-width: 60ch;
+  margin-top: 2px;
+
   &:not(:last-of-type) {
     margin-bottom: 20px;
   }
@@ -189,9 +182,9 @@ h1 {
     position: relative;
     display: inline-block;
     margin-bottom: 0;
-    padding: 1px 34px 5px;
+    padding: 0 32px 5px;
     cursor: pointer;
-    font-weight: bold;
+    font-weight: 600;
     // remove 300ms pause on mobile
     touch-action: manipulation;
 
@@ -202,93 +195,111 @@ h1 {
       top: 0;
       left: 0;
 
-      width: 24px;
-      height: 24px;
+      width: 22px;
+      height: 22px;
 
-      border: 3px solid currentColor;
+      border: 2px solid var(--input-border);
       border-radius: 50%;
       background: transparent;
-      opacity: 0.2;
-      box-shadow: 0 0 0 15px transparent;
+      box-shadow: 0 0 0 10px transparent;
 
       transition: 0.2s ease;
     }
 
     &:hover::before {
       border-width: 5px;
-      opacity: .5;
-      box-shadow: 0 0 0 5px var(--focus-color);
+      border-color: var(--input-border-hover);
     }
   }
 
   &__input:focus + &__label:before, &__input:active + &__label:before {
-    box-shadow: 0 0 0 5px var(--focus-color)!important;
-    opacity: 1;
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
   }
 
   &__input:checked + &__label:before {
     border-width: 8px;
-    opacity: 1;
+    border-color: var(--focus-input-border);
   }
 
   &__description {
-    margin: 0 0 0 34px;
-    opacity: 0.5;
-  }
-
-  &__content {
-    margin: 0 0 0 34px;
-    margin-top: 8px;
+    margin: 0 0 0 32px;
+    color: var(--text-color-secondary);
+    line-height: 1.66;
   }
 }
 
 .jenkins-button {
   position: relative;
-  border: none!important;
-  padding: 10px 8px!important;
-  border-radius: 6px!important;
-  box-shadow: 0 0 0 10px transparent;
-  transition: 0.2s ease!important;
-  background: black!important;
-  color: white!important;
-  margin: 0!important;
-  min-width: 90px!important;
-  min-height: 0!important;
-  font-weight: 600;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 37px;
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-color);
+  padding: 10px 15px;
+  border-radius: 10px;
   cursor: pointer;
-  
+  text-shadow: 0 1px 0 var(--background-color);
+  box-shadow: 0 0 0 10px transparent;
+  text-decoration: none;
+  outline: none;
+  font-weight: 500;
+  transition: 0.2s ease;
+  border: 2px solid var(--btn-secondary-border);
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    color: inherit;
+    border-bottom: 2px solid var(--button-foreground-color);
+    opacity: 0.05;
+  }
+
   &:hover {
-    box-shadow: 0 0 0 5px var(--focus-hover-color)!important;
-    opacity: 0.85;
+    background: var(--btn-secondary-bg--hover);
+    color: var(--btn-secondary-color--hover);
   }
-  
-  &:active, &:focus {
-    box-shadow: 0 0 0 5px var(--focus-color)!important;
-    opacity: 0.7;
+
+  &:active {
+    background: var(--btn-secondary-bg--focus);
+    color: var(--btn-secondary-color--focus);
+    box-shadow: 0 0 0 5px var(--focus-input-glow);
   }
-  
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
+
+  &--large {
+    font-size: 0.9rem;
+    padding: 12px 20px;
   }
-}
 
-#add-item-panel {
+  &--primary {
+    background: var(--btn-primary-bg);
+    color: white;
+    border: none;
 
-  .input-help {
-    color: #666;
-    font-style: italic;
-    font-size: var(--font-size-sm);
-    padding-top: 2px;
-  }
+    &:hover {
+      background: var(--btn-primary-bg-hover);
+      color: white;
+    }
 
-  .input-validation-message {
-    color: red;
-    padding-top: 2px;
-    font-weight: bold;
+    &:active {
+      background: var(--btn-primary-bg-active);
+      color: white;
+    }
+
+    &::after {
+      border-bottom: 2px solid #0b6aa2;
+      opacity: 0.1;
+    }
   }
 
-  .input-message-disabled {
-    display: none;
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
   }
 }
+