Big config page cleanup

janfaracik · Oct 23, 2021 · 1a55c92 · 1a55c92
1 parent 7a302b4
commit 1a55c92
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 72 deletions.
diff --git a/core/src/main/resources/jenkins/model/Jenkins/configure.jelly b/core/src/main/resources/jenkins/model/Jenkins/configure.jelly
@@ -33,7 +33,7 @@ THE SOFTWARE.
   <l:main-panel>
     <div class="jenkins-app-bar">
       <div class="jenkins-app-bar__content">
-        <h1>Configure System</h1>
+        <h1>${%Configure System}</h1>
       </div>
     </div>
     <div class="behavior-loading">${%LOADING}</div>

diff --git a/core/src/main/resources/lib/form/breadcrumb-config-outline.jelly b/core/src/main/resources/lib/form/breadcrumb-config-outline.jelly
@@ -29,5 +29,5 @@ THE SOFTWARE.
   </st:documentation>
 
   <st:adjunct includes="lib.form.breadcrumb-config-outline.init"/>
-  <l:breadcrumb title="${%configuration}" id="inpage-nav" />
+  <l:breadcrumb title="${%Configure System}" id="inpage-nav" />
 </j:jelly>
diff --git a/core/src/main/resources/lib/form/optionalBlock.jelly b/core/src/main/resources/lib/form/optionalBlock.jelly
@@ -68,7 +68,7 @@ THE SOFTWARE.
     <j:when test="${attrs.title!=null}">
       <div class="optionalBlock-container">
         <div class="help-sibling tr optional-block-start row-group-start ${attrs.inline?'':'row-set-start'}" hasHelp="${attrs.help!=null}"><!-- this ID marks the beginning -->
-          <div colspan="3">
+          <div class="jenkins-checkbox-help-wrapper">
             <f:checkbox name="${attrs.name}" class="optional-block-control block-control" onclick="javascript:updateOptionalBlock(this,true)"
                         negative="${attrs.negative}" checked="${attrs.checked}" field="${attrs.field}" title="${title}" />
             <f:helpLink url="${attrs.help}" featureName="${title}"/>

diff --git a/core/src/main/resources/lib/form/section.jelly b/core/src/main/resources/lib/form/section.jelly
@@ -36,15 +36,15 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-  <st:adjunct includes="lib.form.section_" />
-  <f:rowSet name="${attrs.name}">
+<!--  Restore-->
+<!--  <st:adjunct includes="lib.form.section_" />-->
+
+  <div class="jenkins-section">
     <j:if test="${attrs.title!=null}">
-      <f:block>
-        <div class="section-header">
-          ${title}
-        </div>
-      </f:block>
+      <div class="jenkins-section__title">
+        ${title}
+      </div>
     </j:if>
     <d:invokeBody />
-  </f:rowSet>
+  </div>
 </j:jelly>
diff --git a/core/src/main/resources/lib/form/section_.css b/core/src/main/resources/lib/form/section_.css
diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
@@ -100,7 +100,7 @@
 #jenkins{
   .jenkins-config {
     border:1px solid var(--input-border);
-    padding:10px;
+    padding: 2rem;
     border-top:none;
     background:var(--bright-bg-color);
     .border-radius-bottom(@border-radius);

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -453,71 +453,34 @@ div.behavior-loading {
   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);
+  background-color: var(--background);
   text-align: center;
-  font-size: 3rem;
-  opacity: 0.5;
+  font-size: 0.7rem;
+  letter-spacing: 2px;
+  font-weight: 700;
+  padding-top: 2rem;
 
-  &::before {
+  &::before, &::after {
     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;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--text-color);
     z-index: 2;
     border-radius: 100%;
-    animation: sk-scaleout 1s infinite ease-in-out;
-    box-shadow: #fff 0 0 0 10px;
+    margin-top: -2rem;
+    opacity: 0.4;
   }
-}
 
-.config div.behavior-loading {
-    background: rgba(255, 255, 255, 0.85);
-    left: 0;
-    width: 100%;
-    right: 0;
-    top: 15px;
-    bottom: 0;
-    height: 100%;
-    width: auto;
-    min-height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-    filter: alpha(opacity=100);
-    font-size: 1.5em;
-    z-index: 99;
+  &::after {
+    animation: loading-spinner 0.5s infinite linear;
+    clip-path: inset(0 0 10px 10px);
     opacity: 1;
-    color: #999;
-    text-shadow: #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px, #fff 0 0 5px;
-}
-
-@-webkit-keyframes sk-scaleout {
-  0% { -webkit-transform: scale(0); }
-
-  100% {
-    -webkit-transform: scale(1);
-    opacity: 0;
-  }
-}
-
-@keyframes sk-scaleout {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-
- 100% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 0;
   }
 }
 

diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
@@ -204,7 +204,6 @@
 .jenkins-select {
   position: relative;
   width: 100%;
-  max-width: 450px;
 
   &::after {
     content: "";
@@ -347,6 +346,12 @@
   }
 }
 
+.jenkins-checkbox-help-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
 .jenkins-checkbox {
   position: relative;
   display: inline-block;

diff --git a/war/src/main/less/modules/section.less b/war/src/main/less/modules/section.less
@@ -20,6 +20,7 @@
 .jenkins-section__title {
   margin: 0 0 calc(2rem) 0;
   font-size: 1rem;
+  font-weight: 700;
 }
 
 .jenkins-section__items {