Initial

janfaracik · Oct 7, 2021 · 16cf101 · 16cf101
1 parent 5baf1be
commit 16cf101
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 53 deletions.
diff --git a/core/src/main/resources/hudson/views/GlobalDefaultViewConfiguration/config.groovy b/core/src/main/resources/hudson/views/GlobalDefaultViewConfiguration/config.groovy
@@ -4,10 +4,12 @@ def f=namespace(lib.FormTagLib)
 
 if (app.views.size()>1) {
     f.entry(title:_("Default view"), field:"defaultView") {
-        select("class":"setting-input", name:"primaryView") {
-            app.views.each { v ->
-                f.option(value:v.viewName, selected:app.primaryView==v) {
-                    text(v.viewName)
+        div(class:"jenkins-select") {
+            select(name:"primaryView", class:"jenkins-select__input") {
+                app.views.each { v ->
+                    f.option(value:v.viewName, selected:app.primaryView==v) {
+                        text(v.viewName)
+                    }
                 }
             }
         }

diff --git a/core/src/main/resources/jenkins/fingerprints/GlobalFingerprintConfiguration/config.jelly b/core/src/main/resources/jenkins/fingerprints/GlobalFingerprintConfiguration/config.jelly
@@ -20,9 +20,7 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
     <f:section title="${%Fingerprints}">
-        <f:entry title="Disable Fingerprint Cleanup">
-            <f:checkbox field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
-        </f:entry>
+        <f:checkbox title="Disable Fingerprint Cleanup" field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
         <j:if test="${descriptor.fingerprintStorageDescriptors.size() gt 1}">
             <f:entry>
                 <f:dropdownDescriptorSelector field="storage" title="Fingerprint Storage Engine" descriptors="${descriptor.fingerprintStorageDescriptors}"/>

diff --git a/core/src/main/resources/lib/form/dropdownList.jelly b/core/src/main/resources/lib/form/dropdownList.jelly
@@ -46,9 +46,9 @@ THE SOFTWARE.
         <j:if test="${attrs.help!=null}">
             <f:helpArea/>
         </j:if>
-        <div class="setting-main">
+        <div class="jenkins-select">
             <!-- create drop-down list -->
-            <select class="setting-input dropdownList"
+            <select class="jenkins-select__input dropdownList"
                     disabled="${readOnlyMode ? 'true' : null}"
             >
                 <j:set var="dropdownListMode" value="createSelectField"/>

diff --git a/core/src/main/resources/lib/form/number.jelly b/core/src/main/resources/lib/form/number.jelly
@@ -96,7 +96,7 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
     <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-           class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.clazz}"
+           class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.clazz}"
            name="${name}"
            value="${value}"
            type="number"

diff --git a/core/src/main/resources/lib/form/select.jelly b/core/src/main/resources/lib/form/select.jelly
@@ -63,14 +63,16 @@ THE SOFTWARE.
 
   ${descriptor.calcFillSettings(field,attrs)} <!-- this figures out the 'fillUrl' and 'fillDependsOn' attribute -->
   <j:set var="value" value="${attrs.value ?: instance[attrs.field] ?: attrs.default}" />
-  <m:select xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-         class="setting-input ${attrs.checkUrl!=null?'validated':''} select ${attrs.clazz}"
-         name="${attrs.name ?: '_.'+attrs.field}"
-         value="${value}"
-         ATTRIBUTES="${attrs}" EXCEPT="field clazz">
-    <j:if test="${value!=null}">
-      <option value="${value}">${value}</option>
-    </j:if>
-  </m:select>
+  <div class="jenkins-select">
+    <m:select xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
+              class="jenkins-select__input ${attrs.checkUrl!=null?'validated':''} select ${attrs.clazz}"
+              name="${attrs.name ?: '_.'+attrs.field}"
+              value="${value}"
+              ATTRIBUTES="${attrs}" EXCEPT="field clazz">
+      <j:if test="${value!=null}">
+        <option value="${value}">${value}</option>
+      </j:if>
+    </m:select>
+  </div>
   <!-- TODO consider customizedFields -->
 </j:jelly>
diff --git a/core/src/main/resources/lib/form/slave-mode.jelly b/core/src/main/resources/lib/form/slave-mode.jelly
@@ -42,11 +42,13 @@ THE SOFTWARE.
       </j:when>
       <j:otherwise>
 
-        <select class="setting-input" name="${name}">
-          <j:forEach var="m" items="${h.getNodeModes()}">
-            <f:option value="${m.name}" selected="${m==node.mode}">${m.description}</f:option>
-          </j:forEach>
-        </select>
+        <div class="jenkins-select">
+          <select class="jenkins-select__input" name="${name}">
+            <j:forEach var="m" items="${h.getNodeModes()}">
+              <f:option value="${m.name}" selected="${m==node.mode}">${m.description}</f:option>
+            </j:forEach>
+          </select>
+        </div>
 
       </j:otherwise>
     </j:choose>

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -460,18 +460,35 @@ pre.console {
 }
 
 div.behavior-loading {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #e4e4e4;
-    text-align: center;
-    // TODO: use a display font, maybe 3rem
-    font-size: 300%;
-    opacity: 0.5;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-    filter: alpha(opacity=50);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  background-color: var(--text-color-secondary);
+  text-align: center;
+  font-size: 3rem;
+  opacity: 0.5;
+
+  &::before {
+    content: "";
+    display: block;
+    min-width: 100px;
+    min-height: 100px;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.15);
+    border: 5px solid rgba(0, 0, 0, 0.33);
+    position: relative;
+    z-index: 2;
+    border-radius: 100%;
+    animation: sk-scaleout 1s infinite ease-in-out;
+    box-shadow: #fff 0 0 0 10px;
+  }
 }
 
 .config div.behavior-loading {
@@ -493,22 +510,6 @@ div.behavior-loading {
     text-shadow: #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px;
 }
 
-.behavior-loading::before {
-  content: ' ';
-  display: block;
-  width: 100px;
-  height: 100px;
-  margin: 200px auto 25px;
-  background-color: rgba(0, 0, 0, 0.15);
-  border: 5px solid rgba(0, 0, 0, 0.33);
-  position: relative;
-  z-index: 2;
-  border-radius: 100%;
-  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
-  animation: sk-scaleout 1s infinite ease-in-out;
-  box-shadow: #fff 0 0 0 10px;
-}
-
 @-webkit-keyframes sk-scaleout {
   0% { -webkit-transform: scale(0); }
 

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -35,7 +35,7 @@
   border: 2px solid var(--input-border);
   padding: 8px;
   border-radius: 6px;
-  width: 350px;
+  width: 450px;
   box-shadow: 0 0 0 10px transparent;
   transition: 0.2s ease;
 
@@ -165,6 +165,53 @@
   }
 }
 
+.jenkins-select {
+  position: relative;
+  width: 100%;
+  max-width: 450px;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 14px;
+    right: 15px;
+    width: 8px;
+    height: 8px;
+    color: inherit;
+    border-bottom: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  &__input {
+    appearance: none;
+    display: block;
+    border: 2px solid var(--input-border);
+    padding: 8px;
+    width: 100%;
+    border-radius: 6px;
+    box-shadow: 0 0 0 10px transparent;
+    transition: 0.2s ease;
+    min-height: 38px;
+
+    &: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);
+    }
+
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+}
+
 .jenkins-radio {
   max-width: 60ch;
   margin-top: 2px;