From 6b51ea5f91880c17427b473e3566bffd2cfd7285 Mon Sep 17 00:00:00 2001
From: Jan Faracik <j.faracik@kainos.com>
Date: Mon, 16 Aug 2021 10:01:33 +0100
Subject: [PATCH] Initial

---
 .../jenkins/model/Jenkins/newView.jelly       |   1 +
 core/src/main/resources/lib/form/entry.jelly  |   2 +-
 .../src/main/resources/lib/form/textbox.jelly |   2 +-
 .../lib/hudson/newFromList/form.jelly         |  39 ++++---
 war/src/main/less/base-styles-v2.less         |   1 +
 war/src/main/less/modules/form.less           | 102 ++++++++++++++++++
 6 files changed, 131 insertions(+), 16 deletions(-)
 create mode 100644 war/src/main/less/modules/form.less

diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
index e9ef5debb862..991cae296479 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
@@ -31,6 +31,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
 
     <l:main-panel>
+      <h1>${%New View}</h1>
       <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/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index b32d4aadb88c..c89086875bd1 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -72,7 +72,7 @@ THE SOFTWARE.
   <div class='tr form-group'>
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
           <j:out value="${possiblyEscapedTitle}" />
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
diff --git a/core/src/main/resources/lib/form/textbox.jelly b/core/src/main/resources/lib/form/textbox.jelly
index 1789a403f064..39d866672ea2 100644
--- a/core/src/main/resources/lib/form/textbox.jelly
+++ b/core/src/main/resources/lib/form/textbox.jelly
@@ -88,7 +88,7 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
       <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-               class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
+               class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
                name="${name}"
                value="${value}"
                type="text"
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
index 446fb6114db5..be0c2cc54e65 100644
--- a/core/src/main/resources/lib/hudson/newFromList/form.jelly
+++ b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -49,26 +49,37 @@ 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" 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)" />
       <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(this.form)" onclick="updateOk(this.form)" />
+            <label for="${descriptor.id}" class="jenkins-radio__label">
+              ${descriptor.displayName}
+            </label>
+            <p class="jenkins-radio__description">
+              ${descriptor}
+            </p>
+          </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)" />
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index 6171a10ef5a1..9667af2a6f26 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -21,6 +21,7 @@ html {
 @import './base/typography.less';
 @import './base/layout-commons.less';
 @import './base/style.less';
+@import './modules/form.less';
 @import './base/visibility-utils.less';
 @import './base/yui-compatibility.less';
 @import './modules/icons.less';
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
new file mode 100644
index 000000000000..fc73b6313a15
--- /dev/null
+++ b/war/src/main/less/modules/form.less
@@ -0,0 +1,102 @@
+h1 {
+  margin-bottom: 30px;
+}
+
+#main-panel {
+  padding: 30px;
+}
+
+.jenkins-form-item {
+  margin-bottom: 30px;
+}
+
+.jenkins-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jenkins-form-label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.jenkins-input {
+  display: block;
+  border: 3px solid rgba(0,0,0,0.2);
+  padding: 8px;
+  border-radius: 6px;
+  width: 300px;
+  transition: 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0,0,0,0.5);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-color: rgba(0,0,0,1);
+  }
+}
+
+.jenkins-radio {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &__label {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 1px 34px 5px;
+    cursor: pointer;
+    font-weight: bold;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+
+    &::before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 24px;
+      height: 24px;
+
+      border: 3px solid currentColor;
+      border-radius: 50%;
+      background: transparent;
+      opacity: 0.2;
+
+      transition: 0.2s ease;
+    }
+
+    &:hover::before {
+      border-width: 5px;
+      opacity: .5;
+    }
+  }
+
+  &__input:focus + &__label:before {
+    border-width: 8px;
+    opacity: 0.5;
+  }
+
+  &__input:checked + &__label:before {
+    border-width: 8px;
+    opacity: 1;
+  }
+
+  &__description {
+    margin: 0 0 0 34px;
+    opacity: 0.5;
+  }
+}
\ No newline at end of file