[JENKINS-62175] Restyle side panel widgets (#4767)

core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly

@@ -31,7 +31,7 @@ THE SOFTWARE.
       <j:arg value="hudson.model.Job"/>
     </j:invoke>
     <j:if test="${jobClass.isAssignableFrom(it.owner.class)}">
-      <div style="float:right"><a href="${it.baseUrl}/buildTimeTrend">${%trend}</a></div>
+      <div style="float:right;margin-left:1rem;"><a href="${it.baseUrl}/buildTimeTrend">${%trend}</a></div>
       <t:buildHealth job="${it.owner}" iconSizeClass="icon-sm" link="${it.baseUrl}/lastBuild"/>
     </j:if>
   </j:parse>
@@ -41,13 +41,14 @@ THE SOFTWARE.
       RSS link
     -->
     <span class="build-rss-links">
-        <a class="build-rss-all-icon" href="${it.baseUrl}/rssAll"><l:svgIcon class="icon-small" tooltip="Atom feed" href="${imagesURL}/material-icons/svg-sprite-communication-symbol.svg#ic_rss_feed_24px" /></a>
-        <st:nbsp/>
-        <a class="build-rss-all-link" href="${it.baseUrl}/rssAll">Atom feed ${%for all}</a>
-        <st:nbsp/>
-        <a class="build-rss-failed-icon" href="${it.baseUrl}/rssFailed"><l:svgIcon class="icon-small" tooltip="Atom feed" href="${imagesURL}/material-icons/svg-sprite-communication-symbol.svg#ic_rss_feed_24px" /></a>
-        <st:nbsp/>
-        <a class="build-rss-failed-link" href="${it.baseUrl}/rssFailed">Atom feed ${%for failures}</a>
+        <a class="build-rss-all-link" href="${it.baseUrl}/rssAll">
+          <span class="build-rss-all-icon"><l:svgIcon class="icon-small" tooltip="Atom feed" href="${imagesURL}/material-icons/svg-sprite-communication-symbol.svg#ic_rss_feed_24px" /></span>
+            Atom feed ${%for all}
+        </a>
+        <a class="build-rss-failed-link" href="${it.baseUrl}/rssFailed">
+          <span class="build-rss-failed-icon"><l:svgIcon class="icon-small" tooltip="Atom feed" href="${imagesURL}/material-icons/svg-sprite-communication-symbol.svg#ic_rss_feed_24px" /></span>
+          Atom feed ${%for failures}
+        </a>
     </span>
   </j:parse>
 

core/src/main/resources/lib/hudson/executors.jelly

@@ -143,7 +143,7 @@ THE SOFTWARE.
         <j:set var="cDisplayExecutors" value="${c.displayExecutors}"/>
         <tr>
           <j:if test="${(computersSize gt 1 and !cDisplayExecutors.isEmpty()) or (c.node == app and c.offline)}">
-            <th class="pane" colspan="3">
+            <th class="pane" colspan="4">
               <local:computerCaption title="${c.displayName}" />
             </th>
           </j:if>

core/src/main/resources/lib/hudson/queue.jelly

@@ -70,7 +70,7 @@ THE SOFTWARE.
       <j:otherwise>
         <j:forEach var="item" items="${items}">
           <tr>
-            <td class="pane" width="100%" style="white-space: normal;">
+            <td class="pane pane-grow" style="white-space: normal;">
               <j:set var="stuck" value="${item.isStuck()}"/>
               <j:choose>
                 <j:when test="${h.hasPermission(item.task,item.task.READ)}">

core/src/main/resources/lib/layout/pane.jelly

@@ -52,11 +52,17 @@ THE SOFTWARE.
   <div class="container-fluid pane-frame track-mouse ${paneIsCollapsed ? 'collapsed' : 'expanded'}" id="${attrs.id}">
     <div class="row">
       <div class="col-xs-24 pane-header">
+        <span class="pane-header-title">
+          <j:out value="${title}"/>
+        </span>
+
         <a class="collapse" href="${rootURL}/toggleCollapse?paneId=${attrs.id}"
            title="${paneIsCollapsed ? '%expand' : '%collapse'}">
-          <l:icon alt="${paneIsCollapsed ? '%expand' : '%collapse'}" class="${paneIsCollapsed ? 'icon-expand' : 'icon-collapse'} icon-sm"/>
+
+          <j:set var="svgIconId"
+                 value="${paneIsCollapsed ? 'ic_expand_more_24px' : 'ic_expand_less_24px'}" />
+          <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-navigation-symbol.svg#${svgIconId}" />
         </a>
-        <j:out value="${title}"/>
       </div>
     </div>
     <j:choose>

war/src/main/less/abstracts/colors.less

@@ -141,6 +141,7 @@
   --tab-bar-add-border-color: #d8efff;
 
   // Side panel
+  --panel-header-bg-color: #eaeff2;
   --panel-border-color: #eaeff2;
   --panel-border-color--hover: #cecece;
   --side-panel-hover-color: var(--panel-border-color);

war/src/main/less/base-styles-v2.less

@@ -28,4 +28,5 @@ html {
 @import './modules/page-header.less';
 @import './modules/page-footer.less';
 @import './modules/side-panel-tasks.less';
+@import './modules/side-panel-widgets.less';
 @import './modules/manage-jenkins.less';

war/src/main/less/base/layout-commons.less

@@ -73,15 +73,15 @@ html {
 }
 
 #side-panel {
-  padding: 15px 15px 40px 15px;
-  width: 320px;
+  padding: 1rem 0 2.5rem 0;
+  width: 300px;
   flex-shrink: 0;
   border-right: 1px solid var(--panel-border-color);
 }
 
 #main-panel {
-  padding: 15px 15px 40px 15px;
   flex: 1;
+  padding: 1rem 1rem 2.5rem 1rem;
 }
 
 body.two-column #main-panel {
@@ -115,7 +115,7 @@ body.full-screen #main-panel {
 
 @media (min-width: 1170px) {
   body.two-column #side-panel {
-    width: 360px;
+    width: 340px;
   }
 
   body.two-column #main-panel {

war/src/main/less/base/style.less

@@ -25,11 +25,7 @@
 @import '../abstracts/font.less';
 @import '../abstracts/colors.less';
 
-/* buildQueue */
 
-#buildQueue {
-  margin-bottom: 20px;
-}
 
 /* Panel */
 @media (min-width: 1600px) {
@@ -388,14 +384,6 @@ pre.console {
   border-radius: 4px;
 }
 
-#side-panel .pane-frame:hover, #side-panel .pane-frame.mouseover {
-  border: solid 1px var(--panel-border-color--hover);
-}
-
-#side-panel .pane-content td.pane {
-  font-size: var(--font-size-xs);
-}
-
 .pane-header, .pane-footer {
   padding: 8px 0px;
   background-color: var(--pane-header-color);
@@ -459,16 +447,6 @@ th.pane {
   font-weight: bold;
 }
 
-/* executors */
-
-#executors th.pane {
-  text-align: left;
-  padding: 12px 5px 5px 5px;
-}
-
-#executors th.pane a {
-  text-decoration: none;
-}
 
 /* bigtable */
 
@@ -895,6 +873,9 @@ table.parameters > tbody:hover {
 .healthReport a {
     text-decoration: none;
 }
+#side-panel .healthReport a {
+  height: 100%;
+}
 
 .healthReport div.healthReportDetails {
     display: none;
@@ -924,6 +905,10 @@ table.parameters > tbody:hover {
     margin-right: 1em;
 }
 
+#buildHistory a:visited {
+  color: fuchsia;
+}
+
 #buildHistory tr.no-wrap td.middle-align {
     padding: 0;
 }
@@ -943,6 +928,16 @@ table.parameters > tbody:hover {
 #buildHistory .build-rss-links {
   float: right;
 }
+#buildHistory .build-rss-links a {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+#buildHistory .build-rss-all-icon,
+#buildHistory .build-rss-failed-icon {
+  margin-right: 0.25rem;
+}
+
 
 #buildHistoryPage {
   position: relative;
@@ -1026,9 +1021,6 @@ table.parameters > tbody:hover {
   background-image: url(../../images/16x16/find.png);
 }
 
-.build-row {
-  padding: 3px 4px 3px 4px;
-}
 
 .build-row.model-link-active {
   background: #e8e8e8 !important;
@@ -1071,89 +1063,6 @@ table.parameters > tbody:hover {
   text-decoration: underline;
 }
 
-.build-row.multi-line .build-row-cell .pane.build-name.block {
-  width: 100%;
-}
-.build-row-cell .pane.build-controls.block {
-  width: 100%;
-}
-
-.build-row-cell .pane.build-name .build-icon,
-.build-row-cell .pane.build-name .display-name {
-  display: inline-block;
-}
-.build-row-cell .pane.build-name .build-icon {
-  position: absolute;
-}
-
-.build-row-cell .build-stop {
-  display: inline-block;
-  width: 30%;
-}
-.build-row-cell .build-badge {
-  display: inline-block;
-  text-align: right;
-  width: 70%;
-  padding: 2px 0;
-}
-.build-row-cell .build-badge > span {
-  display: inline-block;
-  max-width: 256px;
-  padding: 0 1px;
-  overflow: hidden;
-}
-.build-row-cell .build-badge > span + span {
-  margin: 0 0 0 2px !important;
-}
-@media (min-width: 1170px) {
-  .build-row-cell .build-badge > span {
-    max-width: 296px;
-  }
-}
-
-.build-row .build-name-controls .pane.build-name,
-.build-row .build-details-controls .pane.build-details {
-  width: 70%;
-}
-
-.build-row .build-row-cell .pane {
-  padding: 0px 2px; /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
-  display: inline-block;
-  overflow: hidden;
-}
-
-.build-row.multi-line .build-row-cell .block {
-  display: block;
-  overflow: auto;
-}
-
-.build-row.multi-line .build-row-cell .indent-multiline {
-  margin-top: 5px;
-}
-
-.build-row.multi-line .build-row-cell .left-bar {
-  position: absolute;
-  top: 19px;
-  bottom: 3px;
-  left: 14px;
-  border-left: 1px solid #cdcdcd;
-}
-
-.build-row-cell .pane.build-name .display-name {
-  margin-left: 20px;
-}
-
-.build-row-cell .indent-multiline {
-  padding-left: 20px !important;  /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
-}
-
-.build-row .build-row-cell {
-  /*visibility: hidden;*/
-}
-.build-row.overflow-checked .build-row-cell {
-  visibility: visible;
-}
-
 /* ================ Element overflow calculation helper styles ================ */
 
 .force-wrap, .force-wrap a {

war/src/main/less/modules/side-panel-tasks.less

@@ -5,10 +5,7 @@
   margin-bottom: 20px;
   display: inline-block;
 
-  // The task list is touching the side of the screen. This should be removed
-  // once .side-panel loses it's padding.
-  width: calc(100% + 30px);
-  margin-left: -15px;
+  width: 100%;
 }
 
 #tasks .task {

war/src/main/less/modules/side-panel-widgets.less

+@import '../abstracts/colors.less';
+@import '../abstracts/font.less';
+
+#side-panel .pane-frame {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-color: var(--panel-border-color);
+}
+
+#side-panel .pane-header {
+  font-size: var(--font-size-sm);
+  display: inline-flex;
+}
+#side-panel .pane-footer {
+  font-size: var(--font-size-xs);
+}
+#side-panel .pane-header,
+#side-panel .pane-footer {
+  color: var(--link-dark-color);
+  background-color: var(--panel-header-bg-color);
+  border-radius: 0;
+  padding: 0.5rem 1.25rem;
+}
+
+#side-panel .pane-header {
+  font-weight: bold;
+}
+#side-panel .pane-header-title {
+  display: inline-block;
+  flex: 1;
+}
+#side-panel .pane-header .expand,
+#side-panel .pane-header .collapse {
+  margin-left: auto;
+  padding-left: 0.5rem;
+}
+
+#side-panel .pane-content {
+  font-size: var(--font-size-xs);
+}
+
+#side-panel .pane-content .pane {
+  font-size: var(--font-size-xs);
+  padding: 0.5rem 0.25rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+}
+
+#side-panel .pane-content > table {
+  padding: 0 1.25rem;
+}
+
+#side-panel .pane-content tbody tr {
+  &:not(:first-child) {
+    border-top: 1px solid var(--panel-border-color);
+  }
+}
+
+#side-panel .pane-header a,
+#side-panel .pane-footer a,
+#side-panel .pane-content a {
+  &:link,
+  &:visited {
+    color: var(--link-dark-color);
+  }
+
+  &:focus,
+  &:hover {
+    color: var(--link-dark-color--hover);
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--link-dark-color--active);
+    text-decoration: underline;
+  }
+}
+
+#side-panel .pane-content a {
+  font-weight: 600;
+}
+
+/**
+ * Build Queue
+ */
+#buildQueue {
+  margin-bottom: 1.25rem;
+}
+
+/**
+ * Executors
+ */
+#executors th.pane {
+  text-align: left;
+}
+
+/**
+ * Build history
+ */
+.build-row {
+  padding: 3px 4px 3px 4px;
+}
+.build-row.model-link-active {
+  background: var(--very-light-grey) !important;
+}
+.build-row-cell {
+  font-size: var(--font-size-xs);
+}
+.build-row-cell .pane.build-name {
+  width: 25%;
+  font-weight: bold;
+  vertical-align: top;
+}
+.build-row-cell .pane.build-details {
+  width: 50%;
+}
+.build-row-cell .pane.build-controls {
+  width: 25%;
+  text-align: right;
+}
+.build-row-cell .pane.build-details.block {
+  width: 100%;
+}
+.build-row.multi-line .build-row-cell .pane.build-name.block {
+  width: 100%;
+}
+.build-row-cell .pane.build-controls.block {
+  width: 100%;
+}
+.build-row-cell .pane.build-name .build-icon,
+.build-row-cell .pane.build-name .display-name {
+  display: inline-block;
+}
+.build-row-cell .pane.build-name .build-icon {
+  position: absolute;
+}
+.build-row-cell .build-stop {
+  display: inline-block;
+  width: 30%;
+}
+.build-row-cell .build-badge {
+  display: inline-block;
+  text-align: right;
+  width: 70%;
+  padding: 2px 0;
+}
+.build-row-cell .build-badge > span {
+  display: inline-block;
+  max-width: 256px;
+  padding: 0 1px;
+  overflow: hidden;
+}
+.build-row-cell .build-badge > span + span {
+  margin: 0 0 0 2px !important;
+}
+@media (min-width: 1170px) {
+  .build-row-cell .build-badge > span {
+    max-width: 296px;
+  }
+}
+.build-row .build-name-controls .pane.build-name,
+.build-row .build-details-controls .pane.build-details {
+  width: 70%;
+}
+.build-row .build-row-cell .pane,
+#side-panel .build-row .build-row-cell .pane,
+.build-row .build-row-cell .pane {
+  padding: 0px 2px; /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
+  display: inline-block;
+  overflow: hidden;
+}
+.build-row.multi-line .build-row-cell .block {
+  display: block;
+  overflow: auto;
+}
+.build-row.multi-line .build-row-cell .indent-multiline {
+  margin-top: 5px;
+}
+.build-row.multi-line .build-row-cell .left-bar {
+  position: absolute;
+  top: 19px;
+  bottom: 3px;
+  left: 14px;
+  border-left: 1px solid var(--panel-border-color--hover);
+}
+.build-row-cell .pane.build-name .display-name {
+  margin-left: 20px;
+}
+.build-row-cell .indent-multiline {
+  padding-left: 20px !important;  /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
+}
+.build-row.overflow-checked .build-row-cell {
+  visibility: visible;
+}

war/src/main/webapp/images/material-icons/svg-sprite-navigation-symbol.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="ic_apps_24px"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_back_24px"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_downward_24px"><path fill="#010101" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_drop_down_24px"><path d="M7 10l5 5 5-5z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_drop_down_circle_24px"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_drop_up_24px"><path d="M7 14l5-5 5 5z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_forward_24px"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_upward_24px"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></symbol><symbol viewBox="0 0 24 24" id="ic_cancel_24px"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></symbol><symbol viewBox="0 0 24 24" id="ic_check_24px"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></symbol><symbol viewBox="0 0 24 24" id="ic_chevron_left_24px"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></symbol><symbol viewBox="0 0 24 24" id="ic_chevron_right_24px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></symbol><symbol viewBox="0 0 24 24" id="ic_close_24px"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol><symbol viewBox="0 0 24 24" id="ic_expand_less_24px"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></symbol><symbol viewBox="0 0 24 24" id="ic_expand_more_24px"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></symbol><symbol viewBox="0 0 24 24" id="ic_first_page_24px"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/></symbol><symbol viewBox="0 0 24 24" id="ic_fullscreen_24px"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></symbol><symbol viewBox="0 0 24 24" id="ic_fullscreen_exit_24px"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></symbol><symbol viewBox="0 0 24 24" id="ic_last_page_24px"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_menu_24px"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></symbol><symbol viewBox="0 0 24 24" id="ic_more_horiz_24px"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_more_vert_24px"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_refresh_24px"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></symbol><symbol viewBox="0 0 24 24" id="ic_subdirectory_arrow_left_24px"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6 6-6z"/></symbol><symbol viewBox="0 0 24 24" id="ic_subdirectory_arrow_right_24px"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"/></symbol><symbol viewBox="0 0 24 24" id="ic_unfold_less_24px"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"/></symbol><symbol viewBox="0 0 24 24" id="ic_unfold_more_24px"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></symbol></svg>
\ No newline at end of file