Push

janfaracik · Feb 3, 2025 · 6752284 · 6752284
1 parent 857885c
commit 6752284
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 33 deletions.
diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
@@ -16,16 +16,6 @@
                     <st:include page="logo" />
                   </a>
                 </li>
-                <li class="jenkins-header__breadcrumbs__list-item jenkins-hidden">
-                  <button class="jenkins-button jenkins-button--tertiary"
-                          id="button-breadcrumbs-overflow">
-                    <div class="jenkins-overflow-button__ellipsis">
-                      <span />
-                      <span />
-                      <span />
-                    </div>
-                  </button>
-                </li>
               </j:when>
               <j:otherwise>
                 <l:breadcrumb title="${anc.object.displayName}"

diff --git a/src/main/js/components/header/index.js b/src/main/js/components/header/index.js
@@ -1,4 +1,5 @@
 import Utils from "@/components/dropdowns/utils";
+import { createElementFromHtml } from "@/util/dom";
 
 function init() {
   window.addEventListener("scroll", () => {
@@ -28,16 +29,18 @@ function init() {
 }
 
 function computeBreadcrumbs() {
-  const breadcrumbsOverflow = document.querySelector("#button-breadcrumbs-overflow");
-  const breadcrumbs = [...document.querySelectorAll(".jenkins-header__breadcrumbs__list-item")].slice(2)
+  const breadcrumbs = [
+    ...document.querySelectorAll(".jenkins-header__breadcrumbs__list-item"),
+  ].slice(2);
 
-  breadcrumbsOverflow.parentNode.classList.remove("jenkins-hidden");
-  breadcrumbs.forEach(b => {
+  removeOverflowButton();
+  generateOverflowButton();
+  breadcrumbs.forEach((b) => {
     b.classList.remove("jenkins-hidden");
-  })
+  });
 
   if (!breadcrumbsBarOverflows()) {
-    breadcrumbsOverflow.parentNode.classList.add("jenkins-hidden");
+    removeOverflowButton();
   }
 
   const items = [];
@@ -47,17 +50,42 @@ function computeBreadcrumbs() {
     item.classList.add("jenkins-hidden");
   }
 
-  Utils.generateDropdown(breadcrumbsOverflow, (instance) => {
-    const mappedItems = items.map(e => (
-      {
+  const breadcrumbsOverflow = document.querySelector(
+    ".jenkins-header__breadcrumbs__list-item .jenkins-button",
+  );
+  if (breadcrumbsOverflow) {
+    Utils.generateDropdown(breadcrumbsOverflow, (instance) => {
+      const mappedItems = items.map((e) => ({
         type: "link",
         label: e.textContent,
         url: e.querySelector("a")?.href,
-      }
-    ));
+      }));
 
-    instance.setContent(Utils.generateDropdownItems(mappedItems));
-  });
+      instance.setContent(Utils.generateDropdownItems(mappedItems));
+    });
+  }
+}
+
+function generateOverflowButton() {
+  const logo = document.querySelector(
+    ".jenkins-header__breadcrumbs__list-item",
+  );
+  const element =
+    createElementFromHtml(`<li class="jenkins-header__breadcrumbs__list-item"><button class="jenkins-button jenkins-button--tertiary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <circle cx="256" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+    <circle cx="441" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+    <circle cx="71" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+</svg>
+</button></li>`);
+  logo.after(element);
+  return element;
+}
+
+function removeOverflowButton() {
+  const breadcrumbsOverflow = document.querySelector(
+    ".jenkins-header__breadcrumbs__list-item .jenkins-button",
+  )?.parentNode;
+  breadcrumbsOverflow?.remove();
 }
 
 function breadcrumbsBarOverflows() {

diff --git a/src/main/scss/components/_breadcrumbs.scss b/src/main/scss/components/_breadcrumbs.scss
@@ -28,6 +28,7 @@
             content: "";
             position: absolute;
             inset: -30px -15px -18px -100px;
+            pointer-events: all;
           }
         }
       }
@@ -80,7 +81,6 @@
         width: 1rem;
         height: 1.25rem;
         flex-shrink: 0;
-        transition: var(--standard-transition);
         background: var(--text-color-secondary);
         mask-size: contain;
         mask-position: center;
@@ -98,7 +98,6 @@
   }
 }
 
-
 .jenkins-menu-dropdown-chevron {
   position: absolute;
   display: inline-block;

diff --git a/src/main/scss/components/_dropdowns.scss b/src/main/scss/components/_dropdowns.scss
@@ -157,8 +157,9 @@ $dropdown-padding: 0.375rem;
 
       img {
         border-radius: 100px;
-        outline: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
-        background: color-mix(in srgb, var(--text-color) 5%, transparent);
+        outline: 1px solid
+          color-mix(in sRGB, var(--text-color) 10%, transparent);
+        background: color-mix(in sRGB, var(--text-color) 5%, transparent);
         outline-offset: -1px;
       }
     }

diff --git a/src/main/scss/components/_header.scss b/src/main/scss/components/_header.scss
@@ -58,8 +58,8 @@
       border-radius: 100px;
       width: 1.625rem;
       height: 1.625rem;
-      outline: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
-      background: color-mix(in srgb, var(--text-color) 5%, transparent);
+      outline: 1px solid color-mix(in sRGB, var(--text-color) 10%, transparent);
+      background: color-mix(in sRGB, var(--text-color) 5%, transparent);
       outline-offset: -1px;
     }
 

diff --git a/src/main/scss/components/_side-panel-tasks.scss b/src/main/scss/components/_side-panel-tasks.scss
@@ -31,10 +31,7 @@ $background-outset: 0.7rem;
   }
 
   & > #tasks > .jenkins-search-container {
-    margin-top: calc(var(--section-padding) * -0.5);
-    margin-left: -$background-outset;
-    margin-right: -$background-outset;
-    margin-bottom: 1rem;
+    margin: calc(var(--section-padding) * -0.5) -$background-outset 1rem;
 
     .jenkins-search__icon {
       width: 2.8rem;