Update table styling and spacing (jenkinsci#6248)

janfaracik · Feb 7, 2022 · 608e411 · 608e411
1 parent 280e38e
commit 608e411
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 72 deletions.
diff --git a/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js b/core/src/main/resources/hudson/model/View/AsynchPeople/people-resources.js
@@ -27,15 +27,13 @@ function display(data) {
         d = document.createElement('td');
         var a = document.createElement('a');
         a.href = rootURL + "/" + e.url;
+        a.className = "jenkins-table__link"
         a.appendChild(document.createTextNode(e.id));
         d.appendChild(a);
         r.appendChild(d);
 
         d = document.createElement('td');
-        var a = document.createElement('a');
-        a.href = rootURL + "/" + e.url;
-        a.appendChild(document.createTextNode(e.fullName));
-        d.appendChild(a);
+        d.appendChild(document.createTextNode(e.fullName));
         r.appendChild(d);
 
         d = document.createElement('td');
@@ -55,4 +53,4 @@ function display(data) {
 
         ts_refresh(p);
     }
-}
+}
diff --git a/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly b/core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly
@@ -34,7 +34,7 @@ THE SOFTWARE.
           </h1>
         </div>
       </div>
-      <p>${%blurb}</p>
+      <p class="jenkins-description">${%blurb}</p>
 
       <table class="jenkins-table sortable" id="people">
         <thead>
@@ -49,18 +49,16 @@ THE SOFTWARE.
         <tbody>
           <j:forEach var="user" items="${it.allUsers}">
             <tr>
-              <td>
+              <td class="jenkins-table__cell--tight jenkins-table__icon">
                 <div class="jenkins-table__cell__button-wrapper">
-                  <a href="${user.url}/" class="jenkins-table__button model-link inside">
-                    <img src="${h.getUserAvatar(user,'32x32')}" alt="" height="32" width="32"/>
-                  </a>
+                  <img src="${h.getUserAvatar(user,'32x32')}" alt="" height="32" width="32"/>
                 </div>
               </td>
               <td>
-                <a href="${user.url}/" class="jenkins-table__link">${user.id}</a>
+                <a href="${user.url}/" class="jenkins-table__link model-link inside">${user.id}</a>
               </td>
               <td>
-                <a href="${user.url}/" class="jenkins-table__link">${user.fullName}</a>
+                ${user.fullName}
               </td>
               <td>
                 <div class="jenkins-table__cell__button-wrapper">

diff --git a/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly b/core/src/main/resources/hudson/views/BuildButtonColumn/columnHeader.jelly
@@ -23,5 +23,5 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core">
-    <th class="jenkins-table__cell--tight" />
-</j:jelly>
+    <th class="jenkins-table__cell--tight" data-sort-disable="true" />
+</j:jelly>
diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly
@@ -73,9 +73,6 @@ THE SOFTWARE.
             <j:forEach var="col" items="${columnExtensions}">
               <st:include page="columnHeader.jelly" it="${col}" />
             </j:forEach>
-            <th>
-              <st:nbsp/>
-            </th>
           </tr>
         </thead>
 

diff --git a/core/src/main/resources/lib/hudson/projectViewRow.jelly b/core/src/main/resources/lib/hudson/projectViewRow.jelly
@@ -34,8 +34,5 @@ THE SOFTWARE.
     <j:forEach var="col" items="${columnExtensions}">
       <st:include page="column.jelly" it="${col}"/>
     </j:forEach>
-    <td>
-      <st:nbsp/>
-    </td>
   </tr>
 </j:jelly>
diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -21,9 +21,9 @@
   // branding
   --primary: #024cb6;
   --secondary: #4d545d;
-  --success: #138347;
-  --danger: #cc0003;
-  --warning: #ea6b19;
+  --success: var(--green);
+  --danger: var(--red);
+  --warning: var(--orange);
   --focus: #3fb3f7;
   --focus-btn-primary: fade(#0b6aa2, 50%);
   --focus-btn-secondary: fade(#0b6aa2, 50%);
@@ -174,7 +174,7 @@
   --table-body-background: white;
   --table-body-foreground: black;
   --table-border-radius: 10px;
-  --table-body-radius: 6px;
+  --table-row-border-radius: 4px;
 
   // Deprecated
   --even-row-color: var(--very-light-grey);

diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
@@ -718,6 +718,12 @@ table.parameters > tbody:hover {
   table {
     border-radius: 0;
     min-width: 450px;
+    box-sizing: content-box;
+    padding-bottom: 2px;
+
+    * {
+      box-sizing: border-box;
+    }
   }
 }
 

diff --git a/war/src/main/less/modules/table.less b/war/src/main/less/modules/table.less
@@ -1,12 +1,12 @@
 .jenkins-table {
+  --table-padding: 0.55rem;
+
   width: calc(100% - 10px);
   background: var(--table-background);
-  border-collapse: collapse;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 0 0 0 5px var(--table-background);
-  margin: 5px;
-  --table-padding: 0.55rem;
+  border-radius: calc(var(--table-border-radius) + 2px);
+  border: 5px solid var(--table-background);
+  border-bottom-width: 3px;
+  border-spacing: 0 2px;
 
   * {
     -webkit-border-horizontal-spacing: 0;
@@ -52,7 +52,6 @@
     & > tr {
       background: var(--table-body-background);
       color: var(--table-body-foreground);
-      border-bottom: 2px solid var(--table-background);
 
       & > td {
         vertical-align: middle;
@@ -61,36 +60,43 @@
         height: 50px;
 
         &:first-of-type {
-          border-radius: var(--table-body-radius) 0 0 var(--table-body-radius);
           padding-left: calc(var(--table-padding) * 2);
         }
 
         &:last-of-type {
-          border-radius: 0 var(--table-body-radius) var(--table-body-radius) 0;
           padding-right: var(--table-padding);
         }
       }
 
-      &:last-of-type {
-        border-bottom: none;
-      }
-    }
-
-    & > tr:first-of-type {
+      // Style the rows so that the first and last have a larger border radius
       & > td:first-of-type {
-        border-radius: var(--table-border-radius) 0 0 var(--table-body-radius);
+        border-top-left-radius: var(--table-row-border-radius);
+        border-bottom-left-radius: var(--table-row-border-radius);
       }
+
       & > td:last-of-type {
-        border-radius: 0 var(--table-border-radius) var(--table-body-radius) 0;
+        border-top-right-radius: var(--table-row-border-radius);
+        border-bottom-right-radius: var(--table-row-border-radius);
       }
-    }
 
-    & > tr:last-of-type {
-      & > td:first-of-type {
-        border-radius: var(--table-body-radius) 0 0 var(--table-border-radius);
+      // First row
+      &:first-of-type {
+        & > td:first-of-type {
+          border-top-left-radius: var(--table-border-radius);
+        }
+        & > td:last-of-type {
+          border-top-right-radius: var(--table-border-radius);
+        }
       }
-      & > td:last-of-type {
-        border-radius: 0 var(--table-body-radius) var(--table-border-radius) 0;
+
+      // Last row
+      &:last-of-type {
+        & > td:first-of-type {
+          border-bottom-left-radius: var(--table-border-radius);
+        }
+        & > td:last-of-type {
+          border-bottom-right-radius: var(--table-border-radius);
+        }
       }
     }
   }
@@ -102,10 +108,10 @@
   }
 
   &__cell--tight {
-    padding-left: 0!important;
-    text-align: center!important;
+    padding-left: 0 !important;
+    text-align: center !important;
     white-space: nowrap;
-    width: 60px;
+    width: 3.5rem;
   }
 
   &__cell--no-wrap {
@@ -120,24 +126,24 @@
     display: inline-flex;
   }
 
-  &__button, &__link, &__icon {
+  &__button, &__icon {
     svg, .build-status-icon__wrapper, img {
-      width: 24px!important;
-      height: 24px!important;
+      width: 24px !important;
+      height: 24px !important;
     }
   }
 
   &--medium {
-    --table-padding: 0.4rem!important;
+    --table-padding: 0.4rem !important;
 
     tbody > tr > td {
       height: 40px;
     }
 
     .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
       svg, .build-status-icon__wrapper, img {
-        width: 20px!important;
-        height: 20px!important;
+        width: 20px !important;
+        height: 20px !important;
       }
     }
   }
@@ -151,14 +157,14 @@
 
     .jenkins-table__button, .jenkins-table__link, .jenkins-table__icon {
       svg, .build-status-icon__wrapper, img {
-        width: 16px!important;
-        height: 16px!important;
+        width: 16px !important;
+        height: 16px !important;
       }
     }
   }
 
   &__button, &__link {
-    color: var(--link-color)!important;
+    color: var(--link-color) !important;
   }
 
   &__button, .sortheader, &__link {
@@ -176,54 +182,68 @@
     font-weight: inherit;
     font-size: inherit;
     background: transparent;
-    text-decoration: none!important;
-    line-height: 1!important;
+    text-decoration: none !important;
+    line-height: 1 !important;
+    transition: var(--standard-transition);
 
-    &::before {
+    &::before,
+    &::after {
       content: "";
       position: absolute;
       top: -7px;
       left: -10px;
       bottom: -7px;
       right: -10px;
-      border-radius: 5px;
-      background: var(--text-color);
+      border-radius: 6px;
       z-index: -1;
+      transition: var(--standard-transition);
+    }
+
+    &::before {
+      background: var(--text-color);
       opacity: 0;
-      transition: 0.2s ease;
+    }
+
+    &::after {
+      opacity: 0.05;
+      box-shadow: 0 0 0 10px transparent;
     }
 
     &:hover {
       &::before {
-        opacity: 0.05!important;
-        border-radius: 5px;
+        opacity: 0.05 !important;
+        border-radius: 6px;
         background: var(--text-color);
       }
     }
 
     &:focus, &:active {
       &::before {
-        opacity: 0.1!important;
+        opacity: 0.1 !important;
         border-radius: 5px;
         background: var(--text-color);
       }
+
+      &::after {
+        box-shadow: 0 0 0 5px var(--text-color);
+      }
     }
 
     &--green {
-      color: var(--green)!important;
+      color: var(--green) !important;
     }
 
     &--orange {
-      color: var(--orange)!important;
+      color: var(--orange) !important;
     }
 
     &--red {
-      color: var(--red)!important;
+      color: var(--red) !important;
     }
   }
 
   &__badge {
-    margin-left: 1rem!important;
+    margin-left: 1rem !important;
 
     &::before {
       top: -5px;
@@ -234,5 +254,12 @@
       background: var(--link-color);
       opacity: 0.05;
     }
+
+    &::after {
+      top: -5px;
+      left: -8px;
+      bottom: -5px;
+      right: -8px;
+    }
   }
 }