Add breadcrumb menu on hover, fix issues on mobile

janfaracik · Feb 22, 2025 · d967de5 · d967de5
1 parent 5fae312
commit d967de5
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 57 deletions.
diff --git a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
@@ -45,58 +45,60 @@ THE SOFTWARE.
       <j:forEach var="category" items="${app.categorizedManagementLinks.entrySet()}">
         <section class="jenkins-section jenkins-section--bottom-padding">
           <h2 class="jenkins-section__title">${category.key.label}</h2>
+          ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.addHeader(category.key.label) : null}
           <div class="jenkins-section__items">
-          <j:forEach var="m" items="${category.value}">
-            <j:if test="${m.iconFileName != null}">
-              <div class="jenkins-section__item">
-              <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
-              <j:set var="iconSrc" value="${h.tryGetIconPath(m.iconFileName, context)}"/>
-              <j:set var="sure" value="${%sure}"/>
-              <j:set var="iconXml">
-                <l:icon src="${m.iconFileName}" />
-              </j:set>
-              <j:choose>
-                <j:when test="${m.requiresConfirmation}">
-                  <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%sure}" title="${m.displayName}">
-                    <div class="jenkins-section__item__icon" aria-hidden="true">
-                      <l:icon src="${m.iconFileName}" class="icon" />
-                    </div>
-                    <dl>
-                      <dt>${m.displayName}</dt>
-                      <dd><j:out value="${m.description}"/></dd>
-                      <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                    </dl>
-                  </l:confirmationLink>
-                </j:when>
-                <j:when test="${m.requiresPOST}">
-                  <f:link href="${m.urlName}" post="${m.requiresPOST}">
-                    <div class="jenkins-section__item__icon" aria-hidden="true">
-                      <l:icon src="${m.iconFileName}" class="icon" />
-                    </div>
-                    <dl>
-                      <dt>${m.displayName}</dt>
-                      <dd><j:out value="${m.description}"/></dd>
-                      <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                    </dl>
-                  </f:link>
-                </j:when>
-                <j:otherwise>
-                  <a href="${m.urlName}">
-                    <div class="jenkins-section__item__icon" aria-hidden="true">
-                      <l:icon src="${m.iconFileName}" class="icon" />
-                      <l:badge badge="${m.badge}" class="jenkins-section__item__icon__badge"/>
-                    </div>
-                    <dl>
-                      <dt>${m.displayName}</dt>
-                      <dd><j:out value="${m.description}"/></dd>
-                      <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
-                    </dl>
-                  </a>
-                </j:otherwise>
-              </j:choose>
-              </div>
-            </j:if>
-          </j:forEach>
+            <j:forEach var="m" items="${category.value}">
+              <j:if test="${m.iconFileName != null}">
+                <div class="jenkins-section__item">
+                  <j:set var="alt" value="${icon.replaceAll('\\d*\\.[^.]+$', '')}"/>
+                  <j:set var="iconSrc" value="${h.tryGetIconPath(m.iconFileName, context)}"/>
+                  <j:set var="sure" value="${%sure}"/>
+                  <j:set var="iconXml">
+                    <l:icon src="${m.iconFileName}" />
+                  </j:set>
+                  ${taskTags!=null and attrs.contextMenu!='false' ? it.addContextMenuItem(taskTags, m.urlName, iconSrc, iconXml, m.displayName, m.requiresPOST, m.requiresConfirmation, m.badge, sure) : null}
+                  <j:choose>
+                    <j:when test="${m.requiresConfirmation}">
+                      <l:confirmationLink href="${m.urlName}" post="${m.requiresPOST}" message="${%sure}" title="${m.displayName}">
+                        <div class="jenkins-section__item__icon" aria-hidden="true">
+                          <l:icon src="${m.iconFileName}" class="icon" />
+                        </div>
+                        <dl>
+                          <dt>${m.displayName}</dt>
+                          <dd><j:out value="${m.description}"/></dd>
+                          <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                        </dl>
+                      </l:confirmationLink>
+                    </j:when>
+                    <j:when test="${m.requiresPOST}">
+                      <f:link href="${m.urlName}" post="${m.requiresPOST}">
+                        <div class="jenkins-section__item__icon" aria-hidden="true">
+                          <l:icon src="${m.iconFileName}" class="icon" />
+                        </div>
+                        <dl>
+                          <dt>${m.displayName}</dt>
+                          <dd><j:out value="${m.description}"/></dd>
+                          <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                        </dl>
+                      </f:link>
+                    </j:when>
+                    <j:otherwise>
+                      <a href="${m.urlName}">
+                        <div class="jenkins-section__item__icon" aria-hidden="true">
+                          <l:icon src="${m.iconFileName}" class="icon" />
+                          <l:badge badge="${m.badge}" class="jenkins-section__item__icon__badge"/>
+                        </div>
+                        <dl>
+                          <dt>${m.displayName}</dt>
+                          <dd><j:out value="${m.description}"/></dd>
+                          <dd><st:include it="${m}" page="info.jelly" optional="true"/></dd>
+                        </dl>
+                      </a>
+                    </j:otherwise>
+                  </j:choose>
+                </div>
+              </j:if>
+            </j:forEach>
           </div>
         </section>
       </j:forEach>

diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
@@ -1,5 +1,6 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:h="/lib/layout/header" xmlns:l="/lib/layout" xmlns:dd="/lib/layout/dropdowns" xmlns:st="jelly:stapler" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:h="/lib/layout/header" xmlns:l="/lib/layout" xmlns:st="jelly:stapler"
+         xmlns:x="jelly:xml">
   <header id="page-header" class="jenkins-header">
     <div id="breadcrumbBar" class="jenkins-breadcrumbs" aria-label="breadcrumb">
       <ol class="jenkins-breadcrumbs__list" id="breadcrumbs">
@@ -65,7 +66,8 @@
             <x:attribute name="data-html-tooltip" escapeText="false"><j:out value="${tooltip}" /></x:attribute>
             <x:attribute name="data-tooltip-interactive">${interactive}</x:attribute>
             <x:attribute name="data-tippy-theme">${interactive ? 'dropdown' : 'tooltip'}</x:attribute>
-            <x:attribute name="data-tippy-trigger">${interactive ? 'mouseenter click' : 'mouseenter'}</x:attribute>
+            <x:attribute name="data-tippy-trigger">${interactive ? 'mouseenter focus' : 'mouseenter'}</x:attribute>
+            <x:attribute name="data-tippy-touch">false</x:attribute>
             <x:attribute name="data-type">header-action</x:attribute>
             <x:attribute name="draggable">false</x:attribute>
             <x:attribute name="class">jenkins-button ${isCurrent ? '' : 'jenkins-button--tertiary'}</x:attribute>

diff --git a/core/src/main/resources/lib/layout/breadcrumb.jelly b/core/src/main/resources/lib/layout/breadcrumb.jelly
@@ -50,7 +50,7 @@ THE SOFTWARE.
           <span>${attrs.title}</span>
         </j:when>
         <j:otherwise>
-          <a href="${attrs.href}">
+          <a href="${attrs.href}" class="${attrs.hasMenu ? 'hoverable-model-link' : ''}">
             ${attrs.title}
           </a>
         </j:otherwise>

diff --git a/src/main/js/components/dropdowns/jumplists.js b/src/main/js/components/dropdowns/jumplists.js
@@ -30,6 +30,43 @@ function generateJumplistAccessors() {
  * Generates the dropdowns for the jump lists
  */
 function generateDropdowns() {
+  behaviorShim.specify(
+    ".hoverable-model-link",
+    "-hoverable-dropdown-",
+    1000,
+    (element) =>
+      Utils.generateDropdown(
+        element,
+        (instance) => {
+          const href = element.href;
+
+          if (element.items) {
+            instance.setContent(Utils.generateDropdownItems(element.items));
+            return;
+          }
+
+          fetch(Path.combinePath(href, "contextMenu"))
+            .then((response) => response.json())
+            .then((json) =>
+              instance.setContent(
+                Utils.generateDropdownItems(
+                  mapChildrenItemsToDropdownItems(json.items),
+                ),
+              ),
+            )
+            .catch((error) => console.log(`Jumplist request failed: ${error}`))
+            .finally(() => (instance.loaded = true));
+        },
+        false,
+        {
+          trigger: "mouseenter",
+          offset: [0, 10],
+          animation: "tooltip",
+          touch: false,
+        },
+      ),
+  );
+
   behaviorShim.specify(
     "li.children, .jenkins-jumplist-link, #menuSelector, .jenkins-menu-dropdown-chevron",
     "-dropdown-",

diff --git a/src/main/js/components/header/actions-overflow.js b/src/main/js/components/header/actions-overflow.js
@@ -64,7 +64,7 @@ export default function computeActions() {
     },
     true,
     {
-      trigger: "mouseenter click",
+      trigger: "mouseenter focus",
       offset: [0, 10],
       animation: "tooltip",
     },

diff --git a/src/main/js/components/header/breadcrumbs-overflow.js b/src/main/js/components/header/breadcrumbs-overflow.js
@@ -51,7 +51,7 @@ export default function computeBreadcrumbs() {
     },
     true,
     {
-      trigger: "mouseenter click",
+      trigger: "mouseenter focus",
       offset: [0, 10],
       animation: "tooltip",
     },

diff --git a/src/main/js/components/tooltips/index.js b/src/main/js/components/tooltips/index.js
@@ -5,6 +5,7 @@ const TOOLTIP_BASE = {
   arrow: false,
   theme: "tooltip",
   animation: "tooltip",
+  touch: false,
   popperOptions: {
     modifiers: [
       {

diff --git a/src/main/scss/components/_dropdowns.scss b/src/main/scss/components/_dropdowns.scss
@@ -10,7 +10,7 @@ $dropdown-padding: 0.375rem;
   background: color-mix(in sRGB, var(--background) 85%, transparent);
   backdrop-filter: var(--dropdown-backdrop-filter);
   max-width: unset !important;
-  max-height: 75vh;
+  max-height: 60vh;
   overflow-y: auto;
 
   .tippy-content {