[JENKINS-62496] Convert arrow pngs to CSS (jenkinsci#4757)

Co-authored-by: Félix Queiruga <[email protected]> Co-authored-by: Tim Jacomb <[email protected]>
SimoHyHa414 · Jun 12, 2020 · 2466805 · 2466805
1 parent c57880c
commit 2466805
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/core/src/main/resources/lib/layout/breadcrumbs.css b/core/src/main/resources/lib/layout/breadcrumbs.css
@@ -51,6 +51,7 @@
 
 #breadcrumbs LI:hover, A.breadcrumbBarAnchor.mouseIsOverMenuSelector {
   background-color: #e0e4dc;
+  background-color: var(--breadcrumbs-item-bg-color--hover);
 }
 
 
@@ -91,38 +92,54 @@
     display: inline-block;
     display: inline-flex;
     align-items: center;
-    background-image: url(menu_right_arrow2.png);
-    background-position: center center;
-    background-repeat: no-repeat;
+    justify-content: center;
+}
 
+#breadcrumbs LI.children:after, #breadcrumbs LI.separator:after {
+    /* Right arrow */
+    content: "";
+    border-left: 0.25em solid #bcbcbc;
+    border-top: 0.25em solid transparent;
+    border-bottom: 0.25em solid transparent;
+    border-right: 0;
 }
 
 #breadcrumbs LI.children {
     cursor: pointer;
 }
 
-#breadcrumbs LI.children:hover {
-    background-image: url(menu_right_arrow.png);
+#breadcrumbs LI.children:hover:after {
+    border-left-color: #4d545d;
+    border-left-color: var(--breadcrumbs-text-color);
 }
 
 #breadcrumbs LI.separator:last-child {/* separators are for in-between only */
     display: none;
 }
 
 #menuSelector {/* used for showing 'v' on the right of the anchor */
-    background-color:transparent;
-    background-image: url(menu_down_arrow.png);
-    background-position: center center;
-    background-repeat: no-repeat;
     width: 15px;
     height:16px;
     position: absolute;
     visibility: hidden;
     cursor: pointer;
     z-index: 2000;
-}
-#menuSelector.inverse {
-    background-image: url(menu_down_arrow2.png);
+    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+#menuSelector:after {
+    /* Down arrow */
+    content: "";
+    border-top: 0.30em solid #4d545d;
+    border-top: 0.30em solid var(--breadcrumbs-text-color);
+    border-left: 0.30em solid transparent;
+    border-right: 0.30em solid transparent;
+    border-bottom: 0;
+}
+#menuSelector.inverse:after {
+    border-top-color: #bcbcbc;
 }
 
 A.model-link.inside, #breadcrumbs A.inside {/* additional 'inside' class allows pre-allocation of the context menu space */

diff --git a/war/src/main/less/abstracts/colors.less b/war/src/main/less/abstracts/colors.less
@@ -55,6 +55,7 @@
   --breadcrumbs-bg: #f8f8f8;
   --breadcrumbs-border: #eaeff2;
   --breadcrumbs-text-color: #4d545d;
+  --breadcrumbs-item-bg-color--hover: #e0e4dc;
 
   // Monitor / bell-alert new colors
   --monitor-bg-v2: #f8d7da;

diff --git a/war/src/main/less/base/yui-compatibility.less b/war/src/main/less/base/yui-compatibility.less
@@ -156,3 +156,28 @@ DIV.yahooTree td {
   background: var(--search-box-completion-bg);
   font-weight: bold;
 }
+
+#jenkins.yui-skin-sam .yuimenuitem.yuimenuitem-hassubmenu {
+  background-image: none; //Do not use background image, use CSS arrow instead
+
+  //Center the CSS arrow
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  &:after {
+    /* Right arrow */
+    content: "";
+    border-left: 0.35em solid #333;
+    border-left: 0.35em solid var(--text-color);
+    border-top: 0.35em solid transparent;
+    border-bottom: 0.35em solid transparent;
+    border-right: 0;
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.75em;
+    display: inline-block;
+  }
+}