Merge branch 'new-new-view-page' into update-forms

janfaracik · Oct 10, 2021 · 304ba88 · 304ba88
2 parents 1d3a03d + dff84c5
commit 304ba88
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 48 deletions.
diff --git a/core/src/main/resources/hudson/model/ComputerSet/new.jelly b/core/src/main/resources/hudson/model/ComputerSet/new.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
       <j:invokeStatic var="slaves" className="hudson.slaves.NodeDescriptor" method="allInstantiable" />
-      <n:form nameTitle="${%Node name}" copyTitle="${%Copy Existing Node}" copyNames="${it._slaveNames}"
+      <n:form title="${%New node}" nameTitle="${%Node name}" copyTitle="${%Copy Existing Node}" copyNames="${it._slaveNames}"
               descriptors="${slaves}" checkUrl="checkName" xmlns:n="/lib/hudson/newFromList" />
     </l:main-panel>
   </l:layout>

diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.jelly b/core/src/main/resources/jenkins/model/Jenkins/newView.jelly
@@ -30,13 +30,8 @@ THE SOFTWARE.
   <l:layout permission="${app.primaryView.CREATE}" title="${%New View}">
     <st:include page="sidepanel.jelly" />
     <l:main-panel>
-      <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}"
+      <n:form title="${%New View}" nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
               descriptors="${views}" checkUrl="checkViewName" xmlns:n="/lib/hudson/newFromList" />
     </l:main-panel>
   </l:layout>

diff --git a/core/src/main/resources/jenkins/model/Jenkins/newView.properties b/core/src/main/resources/jenkins/model/Jenkins/newView.properties
@@ -1,3 +1,2 @@
 New\ View=New view
-View\ name=View name
-View\ type=View type
+View\ name=Name
diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
@@ -51,6 +51,9 @@ THE SOFTWARE.
 
       This content is HTML (unless the boolean variable escapeEntryTitleAndDescription is set). Use h.escape if necessary.
     </st:attribute>
+    <st:attribute name="class">
+      Classes to apply to the form
+    </st:attribute>
     <st:attribute name="help">
       URL to the HTML page. When this attribute is specified, the entry gets
       a (?) icon on the right, and if the user clicks it, the contents of the
@@ -69,7 +72,7 @@ THE SOFTWARE.
   <!-- expose this so that we can look up the @field value later from prepareDatabinding.jelly -->
   <j:set var="entry" value="${attrs}" />
   <j:set var="possiblyEscapedTitle" value="${escapeEntryTitleAndDescription ? h.escape(attrs.title) : attrs.title}" />
-  <div class="jenkins-form-item">
+  <div class="jenkins-form-item ${attrs.class}">
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
         <div class="jenkins-form-label help-sibling">

diff --git a/core/src/main/resources/lib/form/textbox.jelly b/core/src/main/resources/lib/form/textbox.jelly
@@ -55,6 +55,9 @@ THE SOFTWARE.
       Additional CSS class(es) to add (such as client-side validation clazz="required",
       "number" or "positive-number"; these may be combined, as clazz="required number").
     </st:attribute>
+    <st:attribute name="placeholder">
+      Placeholder text for the text box
+    </st:attribute>
     <st:attribute name="checkMessage">
       Override the default error message when client-side validation fails,
       as with clazz="required", etc.
@@ -92,6 +95,7 @@ THE SOFTWARE.
                name="${name}"
                value="${value}"
                type="text"
+               placeholder="${placeholder}"
                ATTRIBUTES="${attrs}" EXCEPT="field clazz" />
   </f:possibleReadOnlyField>
   <j:if test="${customizedFields != null and attrs.field != null and value != default}">

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -34,6 +34,9 @@ THE SOFTWARE.
     <st:attribute name="descriptors" use="required">
       Collection of Descriptors to be rendered.
     </st:attribute>
+    <st:attribute name="title" use="required">
+      Title for the form
+    </st:attribute>
     <st:attribute name="nameTitle" use="required">
       Caption of the text box to receive the name of the newly created item. Something like "Job name"
     </st:attribute>
@@ -51,21 +54,25 @@ THE SOFTWARE.
 
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
+  <div class="jenkins-app-bar">
+    <div class="jenkins-app-bar__content">
+      <h1>${attrs.title}</h1>
+    </div>
+  </div>
+
   <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:entry title="${attrs.nameTitle}">
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
-                 onchange="updateOk()" onkeyup="updateOk()" />
+                 onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
       <script>$('name').focus();</script>
-    </div>
+    </s:entry>
 
-    <!-- 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()" />
@@ -77,28 +84,19 @@ THE SOFTWARE.
             </div>
           </div>
         </j:forEach>
-      </fieldset>
-    </div>
 
-    <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
-      <s:block>
-        <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>
-        ${%Copy from}
-        <j:choose>
-          <j:when test="${attrs.copyNames}">
-            <!-- deprecated as of 1.402. -->
-            <s:editableComboBox id="from" name="from" items="${attrs.copyNames}" />
-          </j:when>
-          <j:otherwise>
+        <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
+          <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}" />
-            <s:textbox id="from" name="from" field="copyNewItemFrom" style="width:40em" onfocus="$('copy').click()" />
-          </j:otherwise>
-        </j:choose>
-      </s:entry>
-    </j:if>
+            <s:textbox id="from" placeholder="Type for suggestions" name="from" field="copyNewItemFrom" onfocus="$('copy').click()" />
+          </s:entry>
+        </j:if>
+      </fieldset>
+    </div>
 
     <div class="jenkins-form-item">
       <!--
@@ -120,12 +118,12 @@ THE SOFTWARE.
         let nameInput = document.getElementById("name");
         let radios = form.querySelectorAll('input[type="radio"]');
 
-        if (nameInput.value.length == 0) {
+        if (nameInput.value.length === 0) {
           return true;
         }
 
         // this means we only have dummy checkboxes
-        if (radios.length == 2) {
+        if (radios.length === 2) {
           return true;
         }
 

diff --git a/core/src/main/resources/lib/hudson/newFromList/form.properties b/core/src/main/resources/lib/hudson/newFromList/form.properties
@@ -0,0 +1,2 @@
+View\ type=Type
+Create=Create
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -263,7 +263,6 @@ pre.console {
 }
 
 .setting-main {
-  margin-top: 0.25rem;
   width: 100%; /* try to make this column as big as possible. */
 }
 
@@ -568,9 +567,10 @@ label.attach-previous {
     padding-left: 20px;
     min-height: 16px;
     line-height: 16px;
-    background-image: url("../../images/16x16/error.png");
+    background-image: url("../../images/svgs/error.svg");
     background-position: left center;
     background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .error-inline {
@@ -584,10 +584,10 @@ label.attach-previous {
     padding-left: 20px;
     min-height: 16px;
     line-height: 16px;
-    background-image: url("../../images/16x16/warning.png");
-    background-size: 16px 16px;
+    background-image: url("../../images/svgs/warning.svg");
     background-position: left center;
     background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .warning-inline {

diff --git a/war/src/main/less/base/yui-compatibility.less b/war/src/main/less/base/yui-compatibility.less
@@ -12,11 +12,6 @@
   // for this selector
 }
 
-.yui-skin-sam .yui-ac-input {
-  position: absolute;
-  width: 100%;
-}
-
 .yui-skin-sam .yui-ac-container {
   position: absolute;
   top: 1.6em;

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -10,6 +10,10 @@
   border: none;
   margin: 0;
   padding: 0;
+
+  .jenkins-form-item:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .jenkins-form-label {
@@ -293,6 +297,30 @@
     color: var(--text-color-secondary);
     line-height: 1.66;
   }
+
+  &__children {
+    position: relative;
+    margin-top: -10px;
+    padding-left: 32px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 10px;
+      bottom: 0;
+      width: 2px;
+      background: var(--input-border);
+      border-radius: 2px;
+      transition: 0.2s ease;
+    }
+
+    &:focus-within {
+      &::after {
+        background: var(--focus-input-border);
+      }
+    }
+  }
 }
 
 .jenkins-checkbox {

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -355,7 +355,7 @@ function findAncestorClass(e, cssClass) {
 }
 
 function isTR(tr, nodeClass) {
-    return tr.tagName == 'TR' || tr.classList.contains(nodeClass || 'tr');
+    return tr.tagName == 'TR' || tr.classList.contains(nodeClass || 'tr') || tr.classList.contains('jenkins-form-item');
 }
 
 function findFollowingTR(node, className, nodeClass) {