Skip to content

Commit 30811a1

Browse files
janfaraciktimjakrissternmawinter69
committed
Redesign the Jenkins header (jenkinsci#10245)
* WB * Push * More responsive * Update headerContent.jelly * Push * Update logo.jelly * Update _page-header.scss * Update _page-header.scss * Update header * Tidy up breadcrumbs * Tidy up focus * Update _breadcrumbs.scss * Update configure.jelly * push * Add badges * Tidy * Push * Update headerContent.jelly * Update ManageJenkinsAction.java * Update headerContent.jelly * Working! * WB * Tidy up * Fixes * Update sidepanel.jelly * Lint * Tidy up * Update ManageJenkinsAction.java * Simplify * Update _side-panel-tasks.scss * Update _side-panel-tasks.scss * Update UserAction.java * Update Jenkins.java * Add border to account image * Tidy up avatars * Update _side-panel-tasks.scss * Init * Tidy up * Hide behind flag * Update sidepanel.jelly * Push * Tidy up * Update logo.jelly * Accessibility * Update _breadcrumbs-new.scss * Fix dropdown theme * Update _breadcrumbs.scss * Update _header.scss * Update ManageJenkinsAction.java * Remove flag * Tidy up * Update with HeaderAction * Revert "Update with HeaderAction" This reverts commit 2ea0b1f. * Tidy * Update RootAction.java * Update _breadcrumbs.scss * Push * Update _header.scss * Update _header.scss * Fix invisible actions not actually being invisible, make avatar huge to please Tim * Tidy * Push * Fix breadcrumbs + notification * Update jumplist.jelly * Getting there 🚀 * WB * Update index.jelly * Update headerContent.jelly * Responsive * Push * Push * Push * Update index.js * Push * Tidy up * Tidy up * Tidy * Update logo.jelly * Delete NewHeaderUserExperimentalFlag.java * Lint * Update index.js * Update index.js * Fix some tests * Update headerContent.jelly * Update headerContent.jelly * Remove bravo test - need to confirm this * Update Security3349Test.java * Update pom.xml * Fix SpotBugs + i18n * Add doc for header scroll, support prefers contrast * Add overflow menu for actions, improve accessibility * Update actions-overflow.js * Fix tests + accessibility * Fix JS * Update breadcrumbs-overflow.js * Update breadcrumbs-overflow.js * Add breadcrumb menu on hover, fix issues on mobile * Update _breadcrumbs.scss * i18n * Update pom.xml * Add tab support for user dropdown * Squashed commit of the following: commit 847981e Merge: 0ea6dcf 23f2b9e Author: Kris Stern <krisstern@outlook.com> Date: Wed Feb 26 09:16:52 2025 +0800 Merge branch 'master' into add-groups-to-command-palette commit 0ea6dcf Merge: c0777db 68425e2 Author: Kris Stern <krisstern@outlook.com> Date: Wed Feb 26 01:06:33 2025 +0800 Merge branch 'master' into add-groups-to-command-palette commit c0777db Merge: 1638afe c37293c Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 24 13:40:35 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 1638afe Merge: c987a9e b97764d Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri Feb 21 11:49:03 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit c987a9e Merge: f909eec 16748f4 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu Feb 20 08:17:19 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit f909eec Merge: 85eedb7 217b0f5 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Feb 19 16:12:45 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 85eedb7 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Feb 19 16:11:24 2025 +0000 Move to Item commit 8f4f117 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Feb 19 15:43:50 2025 +0000 Tighten up animations + improve contrast commit d7b7d63 Merge: 8750f7c 4fa6127 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Feb 19 08:50:45 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 8750f7c Merge: 7b52734 a05c33f Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Feb 18 21:42:31 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 7b52734 Merge: e2c133d 3505fb3 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 17 20:59:02 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit e2c133d Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun Feb 16 18:23:14 2025 +0000 Update require-changelog-label.yml commit d32a61c Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun Feb 16 17:11:18 2025 +0000 Update _theme.scss commit 42ecfca Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun Feb 16 17:10:48 2025 +0000 Rename to Items commit cc37791 Merge: 0f1cb21 2b9d4d6 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sun Feb 16 17:10:25 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 0f1cb21 Merge: 04dc6cd 9474c89 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Feb 12 20:42:01 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 04dc6cd Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Feb 11 17:06:31 2025 +0000 Reduce spacing a touch, fix icon spacing commit 0ab3665 Merge: 7c9e172 848ac9b Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Feb 11 14:44:03 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 7c9e172 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Feb 11 11:23:27 2025 +0000 Update Messages.properties commit ec6a5e5 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Feb 11 08:51:16 2025 +0000 Fix test commit 14a6488 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 16:44:39 2025 +0000 Tidy up commit 46a9e56 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 16:28:15 2025 +0000 Tidy commit d7270b1 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 16:06:04 2025 +0000 Tidy commit b2da3f8 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 16:03:37 2025 +0000 Tidy up commit b746fba Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 15:53:53 2025 +0000 Move to extensionpoint commit 7827304 Merge: cac127d d03a2e1 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Feb 10 15:45:28 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit cac127d Merge: add75bf e3e3c45 Author: Tim Jacomb <21194782+timja@users.noreply.github.com> Date: Mon Jan 13 11:03:10 2025 +0000 Merge branch 'jenkinsci:master' into add-groups-to-command-palette commit add75bf Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Jan 11 19:02:52 2025 +0000 Update _command-palette.scss commit eb4073f Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Jan 11 18:59:37 2025 +0000 Tidy up commit 323e48f Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Jan 11 18:47:34 2025 +0000 Update Job.java commit 3cbdfbc Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Jan 11 18:47:13 2025 +0000 Update _command-palette.scss commit 8fecf0d Merge: 428e826 331c768 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Jan 11 18:45:30 2025 +0000 Merge branch 'master' into add-groups-to-command-palette commit 428e826 Merge: 5657369 f1b6d31 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon Dec 16 20:53:15 2024 +0000 Merge branch 'master' into add-groups-to-command-palette commit 5657369 Merge: 26f17a2 674d508 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri Dec 13 09:46:35 2024 +0000 Merge branch 'add-icons-to-command-palette' into add-groups-to-command-palette commit 674d508 Merge: 809d2e6 7020e80 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri Dec 13 09:42:59 2024 +0000 Merge branch 'master' into add-icons-to-command-palette commit 26f17a2 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 22:10:56 2024 +0000 Update _command-palette.scss commit 2b6ffc8 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 22:09:09 2024 +0000 Init commit 809d2e6 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 21:37:47 2024 +0000 Make iconXml private, rename to icon commit 3d45ca7 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 21:29:27 2024 +0000 Add group field commit 80f24cb Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 21:25:23 2024 +0000 Init commit 1b9faa8 Merge: d6868c9 2673844 Author: Tim Jacomb <timjacomb1@gmail.com> Date: Wed Dec 11 21:11:56 2024 +0000 Merge branch 'add-icons-to-command-palette' of github.com:janfaracik/jenkins into add-icons-to-command-palette commit d6868c9 Author: Tim Jacomb <timjacomb1@gmail.com> Date: Wed Dec 11 21:11:41 2024 +0000 Reword javadoc commit 2673844 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 21:03:29 2024 +0000 Implement IconSpec in IComputer commit 5791010 Merge: 661f994 05ed756 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 20:23:58 2024 +0000 Merge branch 'master' into add-icons-to-command-palette commit 661f994 Merge: 2357020 dad5ef3 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 20:15:22 2024 +0000 Merge branch 'refine-command-palette' into add-icons-to-command-palette commit 2357020 Merge: 436a02b 788ae63 Author: Tim Jacomb <timjacomb1@gmail.com> Date: Wed Dec 11 16:35:43 2024 +0000 Merge branch 'add-icons-to-command-palette' of github.com:janfaracik/jenkins into add-icons-to-command-palette commit 436a02b Author: Tim Jacomb <timjacomb1@gmail.com> Date: Wed Dec 11 16:35:24 2024 +0000 Add support for images commit a3fdb3e Merge: ea67d6a d22cc2f Author: Tim Jacomb <timjacomb1@gmail.com> Date: Wed Dec 11 15:27:12 2024 +0000 Merge branch 'master' into add-icons-to-command-palette commit 788ae63 Merge: ea67d6a d22cc2f Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Wed Dec 11 10:00:04 2024 +0000 Merge branch 'jenkinsci:master' into add-icons-to-command-palette commit dad5ef3 Merge: cc63c9c d22cc2f Author: Tim Jacomb <21194782+timja@users.noreply.github.com> Date: Wed Dec 11 09:07:05 2024 +0000 Merge branch 'master' into refine-command-palette commit ea67d6a Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Dec 10 22:26:16 2024 +0000 Update Search.java commit a9aadba Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Dec 10 22:25:40 2024 +0000 Revert "Update Search.java" This reverts commit 24837ea. commit 24837ea Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Dec 10 21:59:03 2024 +0000 Update Search.java commit d43a8d3 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Dec 10 21:54:23 2024 +0000 Init commit cc63c9c Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Tue Dec 10 21:37:09 2024 +0000 Refine command palette * Move logo * Revert "Move logo" This reverts commit 25647d6. * Move actions to taglib * Split logo from breadcrumbs * Fix sticky app bar * Update _page-header.scss * Update HudsonTest.java * Update _page-header.scss * Move breadcrumb loading above setting mode to header * Reduce header height * Increase logo height * Move getActions to Header * Update header avatar with jenkins-avatar * Squashed commit of the following: commit 5060044 Merge: 0ea3e49 2fb523f Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Mar 22 17:56:53 2025 +0000 Merge branch 'master' into improve-tooltips-dropdowns commit 0ea3e49 Merge: 3dd0b9f a1f9d3e Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Sat Mar 22 12:24:49 2025 +0000 Merge branch 'master' into improve-tooltips-dropdowns commit 3dd0b9f Merge: 7f5f814 73185b2 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri Mar 21 09:57:52 2025 +0000 Merge branch 'master' into improve-tooltips-dropdowns commit 7f5f814 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu Mar 20 10:26:32 2025 +0000 Update _dropdowns.scss commit e9eee3c Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu Mar 20 10:25:35 2025 +0000 Update _theme.scss commit ce11fd1 Author: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Thu Mar 20 10:22:07 2025 +0000 Init * Delete idea files * Update core/src/main/java/jenkins/views/Header.java Co-authored-by: Markus Winter <m.winter@sap.com> * Sort actions manually in header * Update markup and CSS * Handle that dodgy SVG messing up the label * Fix new computer missing sidepanel * Update core/src/main/resources/lib/layout/header/actions.jelly Co-authored-by: Markus Winter <m.winter@sap.com> * Update core/src/main/java/jenkins/views/Header.java Co-authored-by: Markus Winter <m.winter@sap.com> * Update core/src/main/resources/lib/layout/header/actions.jelly Co-authored-by: Markus Winter <m.winter@sap.com> * Update Header.java --------- Co-authored-by: Tim Jacomb <21194782+timja@users.noreply.github.com> Co-authored-by: Kris Stern <krisstern@outlook.com> Co-authored-by: Markus Winter <m.winter@sap.com> (cherry picked from commit c42ab43)
1 parent a6f1071 commit 30811a1

File tree

11 files changed

+256
-184
lines changed

11 files changed

+256
-184
lines changed

‎core/src/main/java/hudson/model/RootAction.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ public interface RootAction extends Action, ExtensionPoint {
4545
* A {@link Badge} shown on the button for the action.
4646
*
4747
* @return badge or {@code null} if no badge should be shown.
48-
* @since 2.507
48+
* @since TODO
4949
*/
5050
default @CheckForNull Badge getBadge() {
5151
return null;

‎core/src/main/java/jenkins/model/navigation/SearchAction.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* The MIT License
33
*
4-
* Copyright (c) 2025, Jan Faracik
4+
* Copyright (c) 2011, CloudBees, Inc.
55
*
66
* Permission is hereby granted, free of charge, to any person obtaining a copy
77
* of this software and associated documentation files (the "Software"), to deal

‎core/src/main/resources/hudson/model/View/sidepanel.jelly‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ THE SOFTWARE.
6060
<st:include page="sidepanel2.jelly" optional="true"/>
6161

6262
<st:include page="tasks-bottom.jelly" it="${it.owner}" optional="true" />
63-
<t:actions />
6463
</l:tasks>
6564
<j:forEach var="w" items="${it.widgets}">
6665
<j:set var="view" value="${it}" /><!-- expose the view that's rendering this sidepanel to the widget -->

‎core/src/main/resources/hudson/views/MyViewsTabBar/GlobalConfigurationImpl/config.jelly‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<?jelly escape-by-default='true'?>
23
<j:jelly xmlns:j="jelly:core">
34
</j:jelly>

‎core/src/main/resources/lib/layout/header/actions.jelly‎

Lines changed: 53 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,68 @@
33
<div class="jenkins-header__actions">
44
<st:include page="suffix" optional="true" />
55

6-
<j:set var="allActions" value="${it.actions}"/>
7-
8-
<!-- first render all primary actions (except the user login )-->
9-
<j:forEach var="action" items="${allActions}">
6+
<j:forEach var="action" items="${it.actions}">
107
<j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" />
11-
<j:set var="isPrimary" value="${h.showInPrimaryHeader(action)}"/>
128

13-
<j:if test="${isCurrent or isPrimary}">
14-
<!-- do not show the user avatar -->
15-
<j:if test="${action.class.name != 'jenkins.model.navigation.UserAction'}">
16-
<h:primaryAction action="${action}" isCurrent="${isCurrent}"/>
17-
</j:if>
9+
<j:set var="jumplist">
10+
<st:include it="${action}" page="jumplist.jelly" optional="true" />
11+
</j:set>
12+
13+
<j:if test="${jumplist.length() == 0}">
14+
<j:set var="tooltip">
15+
<st:include it="${action}" page="tooltip.jelly" optional="true" />
16+
</j:set>
1817
</j:if>
19-
</j:forEach>
2018

21-
<!-- we only want the hamburger menu if there is something to display -->
22-
<!-- render all non primary non current actions -->
23-
<j:set var="hamburgerHasBadgeWithSeverityError" value="false" />
24-
<j:set var="hamburgerHasBadgeWithSeverityWarning" value="false" />
25-
<j:set var="hamburgerHasBadgeWithSeverityInfo" value="false" />
26-
<j:set var="hamburgerEntries">
27-
<j:forEach var="action" items="${allActions}">
28-
<j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" />
29-
<j:set var="isPrimary" value="${h.showInPrimaryHeader(action)}"/>
30-
<j:if test="${!isCurrent and !isPrimary}">
31-
<h:secondaryAction action="${action}"/>
32-
<j:set var="currentBadge" value="${action.badge}"/>
33-
<j:if test="${currentBadge != null}">
34-
<j:choose>
35-
<j:when test="${currentBadge.severity == 'danger'}">
36-
<j:set var="hamburgerHasBadgeWithSeverityError" value="true" />
37-
</j:when>
38-
<j:when test="${currentBadge.severity == 'warning'}">
39-
<j:set var="hamburgerHasBadgeWithSeverityWarning" value="true" />
40-
</j:when>
41-
<j:otherwise>
42-
<j:set var="hamburgerHasBadgeWithSeverityInfo" value="true" />
43-
</j:otherwise>
44-
</j:choose>
19+
<j:set var="badge" value="${action.badge}" />
20+
<j:if test="${jumplist.length() == 0 and tooltip.length() == 0}">
21+
<j:set var="tooltip">
22+
<div style="text-align: center;">${action.displayName}</div>
23+
<j:if test="${badge != null}">
24+
<div style="text-align: center; color: var(--text-color-secondary)">${badge.tooltip}</div>
4525
</j:if>
26+
</j:set>
27+
</j:if>
28+
29+
<j:set var="interactive" value="${jumplist.length() gt 0}" />
30+
<j:set var="icon" value="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"/>
31+
<x:element name="${action.urlName == null ? 'button' : 'a'}">
32+
<x:attribute name="data-dropdown">${interactive}</x:attribute>
33+
<x:attribute name="id">root-action-${action.class.simpleName}</x:attribute>
34+
<x:attribute name="href">${h.getActionUrl(app.url, action)}</x:attribute>
35+
<j:if test="${interactive}">
36+
<x:attribute name="data-tippy-offset">[0, 10]</x:attribute>
4637
</j:if>
47-
</j:forEach>
48-
</j:set>
49-
<j:if test="${hamburgerEntries.length() gt 0}">
50-
<j:set var="hamburgerBadge">
51-
<j:choose>
52-
<j:when test="${hamburgerHasBadgeWithSeverityError}">
53-
<span class="jenkins-badge jenkins-!-danger-color" />
54-
</j:when>
55-
<j:when test="${hamburgerHasBadgeWithSeverityWarning}">
56-
<span class="jenkins-badge jenkins-!-warning-color" />
57-
</j:when>
58-
<j:when test="${hamburgerHasBadgeWithSeverityInfo}">
59-
<span class="jenkins-badge jenkins-!-info-color" />
60-
</j:when>
61-
</j:choose>
62-
</j:set>
63-
<l:overflowButton icon="symbol-menu-hamburger" id="header-more-actions" html="${hamburgerBadge}" clazz="jenkins-button--tertiary">
64-
<j:out value="${hamburgerEntries}" />
65-
</l:overflowButton>
66-
</j:if>
38+
<j:if test="${!interactive}">
39+
<x:attribute name="data-html-tooltip" escapeText="false"><j:out value="${tooltip}" /></x:attribute>
40+
</j:if>
41+
<x:attribute name="data-tooltip-interactive">${interactive}</x:attribute>
42+
<x:attribute name="data-tippy-animation">tooltip</x:attribute>
43+
<x:attribute name="data-tippy-theme">${interactive ? 'dropdown' : 'tooltip'}</x:attribute>
44+
<x:attribute name="data-tippy-trigger">mouseenter focus</x:attribute>
45+
<x:attribute name="data-tippy-touch">${interactive}</x:attribute>
46+
<x:attribute name="data-type">header-action</x:attribute>
47+
<x:attribute name="draggable">false</x:attribute>
48+
<x:attribute name="class">jenkins-button ${isCurrent ? '' : 'jenkins-button--tertiary'}</x:attribute>
49+
<l:icon src="${icon}" class="jenkins-avatar" />
50+
<span class="jenkins-visually-hidden" data-type="action-label">${action.displayName}</span>
51+
<j:if test="${badge != null}">
52+
<span class="jenkins-badge jenkins-!-${badge.severity}-color" />
53+
</j:if>
54+
</x:element>
6755

68-
<!-- finally the user avatar or login button (if required) -->
69-
<j:forEach var="action" items="${allActions}">
70-
<j:if test="${action.class.name == 'jenkins.model.navigation.UserAction'}">
71-
<h:primaryAction action="${action}" isCurrent="${h.hyperlinkMatchesCurrentPage(action.urlName)}"/>
56+
<j:if test="${interactive}">
57+
<template>
58+
<div class="jenkins-dropdown">
59+
<j:out value="${jumplist}" />
60+
</div>
61+
</template>
7262
</j:if>
63+
64+
<j:set var="jumplist" />
65+
<j:set var="tooltip" />
7366
</j:forEach>
67+
7468
<h:login/>
7569
</div>
7670
</j:jelly>

‎src/main/js/components/dropdowns/jumplists.js‎

Lines changed: 11 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -45,65 +45,17 @@ function generateDropdowns() {
4545
return;
4646
}
4747

48-
const hasModelLink = element.classList.contains(
49-
"hoverable-model-link",
50-
);
51-
const hasChildrenLink = element.classList.contains(
52-
"hoverable-children-model-link",
53-
);
54-
55-
const sections = {
56-
model: null,
57-
children: null,
58-
};
59-
60-
const fetchSection = function (urlSuffix) {
61-
return fetch(Path.combinePath(href, urlSuffix))
62-
.then((response) => response.json())
63-
.then((json) => {
64-
const items = mapChildrenItemsToDropdownItems(json.items);
65-
const section = document.createElement("div");
66-
section.appendChild(Utils.generateDropdownItems(items));
67-
return section;
68-
});
69-
};
70-
71-
const promises = [];
72-
73-
if (hasModelLink) {
74-
promises.push(
75-
fetchSection("contextMenu").then((section) => {
76-
sections.model = section;
77-
}),
78-
);
79-
}
80-
81-
if (hasChildrenLink) {
82-
promises.push(
83-
fetchSection("childrenContextMenu").then((section) => {
84-
sections.children = section;
85-
}),
86-
);
87-
}
88-
89-
Promise.all(promises)
90-
.then(() => {
91-
const container = document.createElement("div");
92-
container.className = "jenkins-dropdown__split-container";
93-
if (sections.model) {
94-
container.appendChild(sections.model);
95-
}
96-
if (sections.children) {
97-
container.appendChild(sections.children);
98-
}
99-
instance.setContent(container);
100-
})
101-
.catch((error) => {
102-
console.log(`Dropdown fetch failed: ${error}`);
103-
})
104-
.finally(() => {
105-
instance.loaded = true;
106-
});
48+
fetch(Path.combinePath(href, "contextMenu"))
49+
.then((response) => response.json())
50+
.then((json) =>
51+
instance.setContent(
52+
Utils.generateDropdownItems(
53+
mapChildrenItemsToDropdownItems(json.items),
54+
),
55+
),
56+
)
57+
.catch((error) => console.log(`Jumplist request failed: ${error}`))
58+
.finally(() => (instance.loaded = true));
10759
},
10860
false,
10961
{

‎src/main/js/components/dropdowns/utils.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,6 @@ function generateDropdown(element, callback, immediate, options = {}) {
6969
});
7070
}
7171
},
72-
onHide() {
73-
const dropdowns = document.querySelectorAll("[data-tippy-root]");
74-
const isMouseOverAnyDropdown = Array.from(dropdowns).some(
75-
(dropdown) => dropdown.matches(":hover"),
76-
);
77-
78-
return !isMouseOverAnyDropdown;
79-
},
8072
},
8173
options,
8274
),

‎src/main/js/components/header/actions-overflow.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import Utils from "@/components/dropdowns/utils";
2+
import { createElementFromHtml } from "@/util/dom";
3+
4+
const OVERFLOW_ID = "jenkins-header-actions-overflow";
5+
6+
export default function computeActions() {
7+
document
8+
.querySelectorAll(
9+
".jenkins-header__actions .jenkins-button[data-type='header-action'].jenkins-hidden",
10+
)
11+
.forEach((e) => {
12+
e.classList.remove("jenkins-hidden");
13+
});
14+
15+
if (!actionsOverflows()) {
16+
removeOverflowButton();
17+
return;
18+
}
19+
20+
const items = [];
21+
const actions = Array.from(
22+
document.querySelectorAll(
23+
".jenkins-header__actions .jenkins-button[data-type='header-action']",
24+
),
25+
).slice(1, -1);
26+
27+
const overflowButton = generateOverflowButton();
28+
29+
while (actionsOverflows()) {
30+
const item = actions.pop();
31+
32+
if (!item) {
33+
break;
34+
}
35+
36+
items.unshift(item);
37+
item.classList.add("jenkins-hidden");
38+
}
39+
40+
Utils.generateDropdown(
41+
overflowButton,
42+
(instance) => {
43+
const mappedItems = items.map((e) => {
44+
let icon = e.querySelector("img");
45+
if (icon) {
46+
icon = icon.src;
47+
}
48+
let iconXml = e.querySelector("svg");
49+
if (iconXml) {
50+
icon = true;
51+
iconXml = iconXml.outerHTML;
52+
}
53+
54+
const span = e.querySelector("[data-type='action-label']");
55+
let label = e.textContent;
56+
if (span !== null) {
57+
label = span.textContent;
58+
}
59+
60+
return {
61+
type: "link",
62+
icon: icon,
63+
iconXml: iconXml,
64+
label: label,
65+
url: e.href,
66+
};
67+
});
68+
69+
instance.setContent(Utils.generateDropdownItems(mappedItems));
70+
},
71+
true,
72+
{
73+
trigger: "mouseenter focus",
74+
offset: [0, 10],
75+
animation: "tooltip",
76+
},
77+
);
78+
79+
// We want to disable the User action href on touch devices so that they can still activate the overflow menu
80+
const link = document.querySelector("#root-action-UserAction");
81+
82+
if (link) {
83+
const originalHref = link.getAttribute("href");
84+
const isTouchDevice = window.matchMedia("(hover: none)").matches;
85+
86+
// HTMLUnit doesn't register itself as supporting hover, thus the href is removed when it shouldn't be
87+
if (isTouchDevice && !window.isRunAsTest) {
88+
link.removeAttribute("href");
89+
} else {
90+
link.setAttribute("href", originalHref);
91+
}
92+
}
93+
}
94+
95+
function actionsOverflows() {
96+
const actions = document.querySelector(".jenkins-header__actions");
97+
return actions.offsetWidth > Math.max(window.innerWidth / 4.5, 150);
98+
}
99+
100+
function generateOverflowButton() {
101+
// If an overflow menu already exists let's use that
102+
const overflowMenu = document.querySelector("#" + OVERFLOW_ID);
103+
if (overflowMenu) {
104+
return overflowMenu;
105+
}
106+
107+
// Generate an overflow menu to store actions
108+
const element =
109+
createElementFromHtml(`<button id="${OVERFLOW_ID}" class="jenkins-button jenkins-button--tertiary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
110+
<circle cx="256" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
111+
<circle cx="441" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
112+
<circle cx="71" cy="256" r="45" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
113+
</svg>
114+
</button>`);
115+
116+
const actionsContainer = document.querySelector(".jenkins-header__actions");
117+
118+
// Insert the new element before the last child
119+
actionsContainer.insertBefore(
120+
element,
121+
actionsContainer.children[actionsContainer.children.length - 2],
122+
);
123+
124+
return element;
125+
}
126+
127+
function removeOverflowButton() {
128+
const overflowButton = document.querySelector("#" + OVERFLOW_ID);
129+
130+
if (overflowButton) {
131+
overflowButton.remove();
132+
}
133+
}

‎src/main/js/components/header/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import computeActions from "@/components/header/actions-overflow";
12
import updateActionsForTouch from "@/components/header/actions-touch";
23
import computeBreadcrumbs from "@/components/header/breadcrumbs-overflow";
34

@@ -64,6 +65,7 @@ function init() {
6465
}
6566

6667
function computeOverflow() {
68+
computeActions();
6769
computeBreadcrumbs();
6870
}
6971

0 commit comments

Comments
 (0)