[JENKINS 60920] header breadcrumbs CSS update (#4463)

* New styles for breadcrumbs and warnings monitor * Adds the svgxuse polyfill for svg sprites on IE 11 * Created new styles for the page header - Used the material icons svg sprites to deliver the icons - Icons are rendered using a <svg> tag * Create new base styles file and undo changes to the layout-common and style css files * Fixes and refactor for the new UI CSS code * Make the new header color and logo section opt-in - The new UI can be toggled with the -Dui.enableNewUi=true flag * Rename and refactor the page-header css - Rename the css class namespace from .main-header to .page-header - Page header CSS moved into a modules folder and now included on the new-base-styles.css. This is done to avoid loading a separate file everytime. - Extracted color variables to their own file * Updated localization for header and admin monitor - The pageHeader template receives localization strings as props - Missing translation for the admin monitor on the it, bg and pl locales * Update core/src/main/resources/lib/layout/layout.jelly Co-Authored-By: Tim Jacomb <t.jacomb@kainos.com> * Most measurements migrated to REMs * Code cleanup and apply new-ui toggle to the html.jelly file * Breadcrumb fixes - Reverts breadcrumb link styling to use nested selectors instead of the .breadcrumbs__link class. The reason is that several plugins would break. - Shifted margins so that breadcrumbs can be fullwidth in the absence of the auto refresh link * Implemented some fixes from the feedback received - Removed box shadow webkit prefix - Fixed formatting on the breadcrumbs.css and layout-commons.less files - Renamed the new UI toggle class from _new-ui_ to _ui-refresh_ - Renamed references to the _new ui_ to _v2_ * Created jelly helper to use svg icons * Fix: restore proper icon for the user on the header * Fixes for Edge, IE 11 and IE 10 * Improvements on the header and breadcrumbs - Logo v2 changed and optimized using the svgo frontend https://jakearchibald.github.io/svgomg/ - Refactored the ammonitor insertion code - Breadcrumbs are no longer capitalized - Classic logo link no longer stretches past the images - Fixed classic logo link on IE11 - Updated color of the footer - Menu items background is also changed when hovering over the menu selector - Removed copyright notice on top of some files * Bumped JTH version with the SVG download fix * Update test/pom.xml Co-Authored-By: Tim Jacomb <t.jacomb@kainos.com> * Added a function to check boolean system properties from jelly * Fix header links and add svg styles for legacy layout * Some bug fixing for the new header - The ui-refresh changes were not properly being enabled with the boolean system property. Added explicit true check on the jelly templates. - Added an explicit width for the ui-refresh logo because it would mess with the layout * Update core/src/main/java/hudson/Functions.java Co-Authored-By: Adrien Lecharpentier <adrien.lecharpentier@gmail.com> * Do not check the system property on every page render Co-authored-by: Tim Jacomb <t.jacomb@kainos.com> Co-authored-by: Adrien Lecharpentier <adrien.lecharpentier@gmail.com> Co-authored-by: Daniel Beck <1831569+daniel-beck@users.noreply.github.com>
jenkinsci · Feb 20, 2020 · 673a18c · 673a18c
1 parent 71c5fa5
commit 673a18c
Show file tree

Hide file tree

Showing 25 changed files with 2,989 additions and 166 deletions.
diff --git a/core/src/main/java/hudson/Functions.java b/core/src/main/java/hudson/Functions.java
@@ -186,6 +186,9 @@ public class Functions {
     private static final AtomicLong iota = new AtomicLong();
     private static Logger LOGGER = Logger.getLogger(Functions.class.getName());
 
+    @Restricted(NoExternalUse.class)
+    public static /* non-final */ boolean UI_REFRESH = SystemProperties.getBoolean("jenkins.ui.refresh");
+
     public Functions() {
     }
 
@@ -493,6 +496,16 @@ public static String getSystemProperty(String key) {
         return SystemProperties.getString(key);
     }
 
+    /**
+     * Returns true if and only if the UI refresh is enabled.
+     *
+     * @since TODO
+     */
+    @Restricted(DoNotUse.class)
+    public static boolean isUiRefreshEnabled() {
+        return UI_REFRESH;
+    }
+
     public static Map getEnvVars() {
         return new TreeMap<>(EnvVars.masterEnvVars);
     }

diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.jelly
@@ -27,7 +27,11 @@ THE SOFTWARE.
         <st:adjunct includes="jenkins.management.AdministrativeMonitorsDecorator.resources"/>
         <div id="visible-am-container">
             <a id="visible-am-button" href="#" onclick="toggleVisibleAmList(event)" title="${%tooltip(it.activeAdministrativeMonitorsCount)}">
-                ${it.activeAdministrativeMonitorsCount}
+                <l:svgIcon href="${resURL}/images/material-icons/svg-sprite-social-symbol.svg#ic_notifications_24px" />
+                <span class="hidden-xs hidden-sm">${%monitors(it.activeAdministrativeMonitorsCount)}</span>
+                <span class="am-monitor__count">
+                    ${it.activeAdministrativeMonitorsCount}
+                </span>
             </a>
             <div id="visible-am-list">
                 <j:forEach var="am" items="${it.activeAdministrativeMonitors}">
@@ -41,7 +45,14 @@ THE SOFTWARE.
             </div>
         </div>
         <script type="text/javascript">
-            document.getElementById("header").appendChild(document.getElementById("visible-am-container"));
+            (function() {
+                var amContainer = document.getElementById("visible-am-container");
+                var amInsertion = document.getElementById("visible-am-insertion");
+
+                if (amInsertion) {
+                    amInsertion.appendChild(amContainer);
+                }
+            })();
         </script>
     </j:if>
 </j:jelly>
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.properties b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer.properties
@@ -1 +1,2 @@
-tooltip=There are {0} active administrative monitors.
+tooltip=There are {0} active administrative monitors.
+monitors={0,choice,0#monitors|1#monitor|1<monitors}
diff --git a/...rc/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer_de.properties b/...rc/main/resources/jenkins/management/AdministrativeMonitorsDecorator/footer_de.properties
@@ -22,3 +22,4 @@
 
 Manage\ Jenkins=Jenkins verwalten
 tooltip={0,choice,0#Keine Administrator-Warnungen sind|1#{0} Administrator-Warnung ist|1<{0} Administrator-Warnungen sind} aktiv.
+monitors={0,choice,0#Warnungen|1#Warnung|1<Warnungen}
diff --git a/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css b/core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css
@@ -1,29 +1,28 @@
 #visible-am-container {
-    float: right;
+    height: 100%;
 }
+
 #visible-am-button {
-    text-align: center;
-    font-size: 20px;
-    font-weight: bold;
-    background-color: #e01716;
-    color: #fff;
-    margin: 0;
-    line-height: 40px;
-    text-decoration: none;
-    min-width: 2em;
-    display: inline-block;
     position: relative;
-    transition: all .1s;
-}
-#visible-am-button:hover, #visible-am-button:focus, #visible-am-button:active {
-    background: #e23635;
 }
-#visible-am-container.visible #visible-am-button {
-    box-shadow: inset 0px 1px 14px rgba(0,0,0,.5);
+
+#visible-am-button .am-monitor__count {
+    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    min-width: 20px;
+
+    color:#F94B4E;
+    background-color: #fff;
+    font-weight: bold;
+
+    border-radius: 4px;
 }
 #visible-am-container div#visible-am-list {
     position: absolute;
-    top: 35px;
+    top: 48px;
     right: 2%;
     height: auto;
     z-index: 0;
@@ -32,7 +31,10 @@
     display: block;
     background-color: #fff;
     border-radius: 5px;
-    box-shadow: 0 7px 20px rgba(0,0,0,.1);
+
+    /* Darken the box shadow to make the popup visible over the search box  */
+    box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3);
+
     transition: all .15s cubic-bezier(.84,.03,.21,.96);
     opacity: 0;
     transform: scale(0);
@@ -46,7 +48,7 @@
     content: '';
     display: inline-block;
     position: absolute;
-    bottom: -5px;
+    bottom: 0;
     left: 32%;
     width: 0;
     height: 0;
@@ -55,10 +57,10 @@
     border-bottom: 7px solid #fff;
     opacity: 0;
     transition: all .05s;
+    z-index: 1001;
 }
 #visible-am-container.visible #visible-am-button:after {
     opacity: 1;
-    bottom: 4px;
     transition: all .25s;
 }
 #visible-am-container .am-message {
@@ -85,3 +87,23 @@
 #visible-am-container .am-message dl dt::after {
     content: ": ";
 }
+
+/* Restore hyperlink style overriden by the page header */
+#visible-am-container #visible-am-list a:link {
+    display: inline-block;
+    color: #204A87;
+    text-decoration: underline;
+    padding: 0;
+    font-weight: normal;
+}
+#visible-am-container #visible-am-list a:visited {
+    color: #5c3566;
+}
+#visible-am-container #visible-am-list a:hover,
+#visible-am-container #visible-am-list a:focus,
+#visible-am-container #visible-am-list a:active {
+    color: #5c3566;
+    text-decoration-color: #5c3566;
+    background-color: transparent;
+    text-decoration: underline;
+}
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -39,49 +39,48 @@ THE SOFTWARE.
       <st:adjunct includes="lib.layout.breadcrumbs" />
       <div class="top-sticker noedge">
         <div class="top-sticker-inner">
-          <div id="right-top-nav">
-            <j:if test="${norefresh==null or norefresh==false}">
-              <div id="right-top-nav">
-                <div class="smallfont">
+          <div class="breadcrumbs__wrapper">
+            <ul id="breadcrumbs">
+              <j:forEach var="anc" items="${request.ancestors}">
+                <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
+                  <li class="item">
+                    <a href="${anc.url}/" class="${h.isModelWithContextMenu(anc.object)?'model-link':null} inside">
+                      ${anc.object.displayName}
+                    </a>
+                  </li>
                   <j:choose>
-                    <j:when test="${h.isAutoRefresh(request)}">
-                      <a href="?auto_refresh=false">${%DISABLE AUTO REFRESH}</a>
+                    <j:when test="${h.isModelWithChildren(anc.object)}">
+                      <li class="children" href="${anc.url}/">
+                        <!-- shows '>' for rendering children -->
+                      </li>
                     </j:when>
                     <j:otherwise>
-                      <a href="?auto_refresh=true">${%ENABLE AUTO REFRESH}</a>
+                      <li class="separator">
+                      </li>
                     </j:otherwise>
                   </j:choose>
-                </div>
-              </div>
-            </j:if>
-          </div>
-          <ul id="breadcrumbs">
-            <j:forEach var="anc" items="${request.ancestors}">
-              <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
-                <li class="item">
-                  <a href="${anc.url}/" class="${h.isModelWithContextMenu(anc.object)?'model-link':null} inside">
-                    ${anc.object.displayName}
-                  </a>
-                </li>
+                </j:if>
+              </j:forEach>
+
+              <!-- render additional breadcrumb items -->
+              <d:invokeBody />
+            </ul>
+
+            <j:if test="${norefresh==null or norefresh==false}">
+              <div id="right-top-nav">
                 <j:choose>
-                  <j:when test="${h.isModelWithChildren(anc.object)}">
-                    <li class="children" href="${anc.url}/">
-                      <!-- shows '>' for rendering children -->
-                    </li>
+                  <j:when test="${h.isAutoRefresh(request)}">
+                    <a href="?auto_refresh=false" class="breadcrumbs__auto-refresh">${%DISABLE AUTO REFRESH}</a>
                   </j:when>
                   <j:otherwise>
-                    <li class="separator">
-                    </li>
+                    <a href="?auto_refresh=true" class="breadcrumbs__auto-refresh">${%ENABLE AUTO REFRESH}</a>
                   </j:otherwise>
                 </j:choose>
-              </j:if>
-            </j:forEach>
-
-            <!-- render additional breadcrumb items -->
-            <d:invokeBody />
-          </ul>
+              </div>
+            </j:if>
 
-          <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
+            <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
+          </div>
         </div>
       </div>
     </td>