-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
[JENKINS-75727] Distinguish between primary and secondary actions in the header #10729
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
7c09e8a
8adbd0a
c701361
188baf0
35ce8c1
edec134
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,68 +3,44 @@ | |
| <div class="jenkins-header__actions"> | ||
| <st:include page="suffix" optional="true" /> | ||
|
|
||
| <j:forEach var="action" items="${it.actions}"> | ||
| <j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" /> | ||
|
|
||
| <j:set var="jumplist"> | ||
| <st:include it="${action}" page="jumplist.jelly" optional="true" /> | ||
| </j:set> | ||
| <j:set var="allActions" value="${it.actions}"/> | ||
|
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. tbh this all seems a bit wrong. We have a generic taglib, but this rendering is specific to the Open to better suggestions. |
||
|
|
||
| <j:if test="${jumplist.length() == 0}"> | ||
| <j:set var="tooltip"> | ||
| <st:include it="${action}" page="tooltip.jelly" optional="true" /> | ||
| </j:set> | ||
| </j:if> | ||
| <!-- first render all primary actions (except the user login )--> | ||
| <j:forEach var="action" items="${allActions}"> | ||
| <j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" /> | ||
| <j:set var="isPrimary" value="${action.isPrimaryAction()}"/> | ||
|
|
||
| <j:set var="badge" value="${action.badge}" /> | ||
| <j:if test="${jumplist.length() == 0 and tooltip.length() == 0}"> | ||
| <j:set var="tooltip"> | ||
| <div style="text-align: center;">${action.displayName}</div> | ||
| <j:if test="${badge != null}"> | ||
| <div style="text-align: center; color: var(--text-color-secondary)">${badge.tooltip}</div> | ||
| </j:if> | ||
| </j:set> | ||
| <j:if test="${isCurrent or isPrimary}"> | ||
| <!-- do not show the user avatar --> | ||
| <j:if test="${action.class.name != 'jenkins.model.navigation.UserAction'}"> | ||
| <h:primaryAction action="${action}" isCurrent="${isCurrent}"/> | ||
| </j:if> | ||
| </j:if> | ||
| </j:forEach> | ||
|
|
||
| <j:set var="interactive" value="${jumplist.length() gt 0}" /> | ||
| <j:set var="icon" value="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"/> | ||
| <x:element name="${action.urlName == null ? 'button' : 'a'}"> | ||
| <x:attribute name="data-dropdown">${interactive}</x:attribute> | ||
| <x:attribute name="id">root-action-${action.class.simpleName}</x:attribute> | ||
| <x:attribute name="href">${h.getActionUrl(app.url, action)}</x:attribute> | ||
| <j:if test="${interactive}"> | ||
| <x:attribute name="data-tippy-offset">[0, 10]</x:attribute> | ||
| <!-- we only want the hamburger menu if there is something to display --> | ||
| <!-- render all non primary non current actions --> | ||
| <j:set var="hamburgerEntries"> | ||
| <j:forEach var="action" items="${allActions}"> | ||
| <j:set var="isCurrent" value="${h.hyperlinkMatchesCurrentPage(action.urlName)}" /> | ||
| <j:set var="isPrimary" value="${action.isPrimaryAction()}"/> | ||
| <j:if test="${!isCurrent and !isPrimary}"> | ||
| <h:secondaryAction action="${action}"/> | ||
| </j:if> | ||
| <j:if test="${!interactive}"> | ||
| <x:attribute name="data-html-tooltip" escapeText="false"><j:out value="${tooltip}" /></x:attribute> | ||
| </j:if> | ||
| <x:attribute name="data-tooltip-interactive">${interactive}</x:attribute> | ||
| <x:attribute name="data-tippy-animation">tooltip</x:attribute> | ||
| <x:attribute name="data-tippy-theme">${interactive ? 'dropdown' : 'tooltip'}</x:attribute> | ||
| <x:attribute name="data-tippy-trigger">mouseenter focus</x:attribute> | ||
| <x:attribute name="data-tippy-touch">${interactive}</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> | ||
| <l:icon src="${icon}" class="${action.class.name == 'jenkins.model.navigation.UserAction' ? 'jenkins-avatar' : ''}"/> | ||
| <span class="jenkins-visually-hidden" data-type="action-label">${action.displayName}</span> | ||
| <j:if test="${badge != null}"> | ||
| <span class="jenkins-badge jenkins-!-${badge.severity}-color" /> | ||
| </j:if> | ||
| </x:element> | ||
|
|
||
| <j:if test="${interactive}"> | ||
| <template> | ||
| <div class="jenkins-dropdown"> | ||
| <j:out value="${jumplist}" /> | ||
| </div> | ||
| </template> | ||
| </j:forEach> | ||
| </j:set> | ||
| <j:if test="${hamburgerEntries.length() gt 0}"> | ||
| <l:overflowButton icon="symbol-menu-hamburger"> | ||
jtnord marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| <j:out value="${hamburgerEntries}" /> | ||
| </l:overflowButton> | ||
| </j:if> | ||
|
|
||
| <!-- finally the user avatar or login button (if required) --> | ||
| <j:forEach var="action" items="${allActions}"> | ||
| <j:if test="${action.class.name == 'jenkins.model.navigation.UserAction'}"> | ||
| <h:primaryAction action="${action}" isCurrent="${h.hyperlinkMatchesCurrentPage(action.urlName)}"/> | ||
| </j:if> | ||
|
|
||
| <j:set var="jumplist" /> | ||
| <j:set var="tooltip" /> | ||
| </j:forEach> | ||
|
|
||
| <h:login/> | ||
| </div> | ||
| </j:jelly> | ||
| </j:jelly> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <?jelly escape-by-default='true'?> | ||
| <j:jelly xmlns:j="jelly:core" xmlns:h="/lib/layout/header" xmlns:l="/lib/layout" xmlns:st="jelly:stapler" xmlns:x="jelly:xml"> | ||
|
|
||
|
|
||
| <st:documentation> <![CDATA[ | ||
| Used inside <h:actions> to render primaryActions. | ||
| ]]> | ||
| <st:attribute name="action" use="required"> | ||
| The action to render | ||
| </st:attribute> | ||
| <st:attribute name="isCurrent" use="required"> | ||
| true if the action is the action for the current page | ||
| </st:attribute> | ||
|
|
||
| </st:documentation> | ||
|
|
||
| <j:set var="jumplist"> | ||
| <st:include it="${action}" page="jumplist.jelly" optional="true" /> | ||
| </j:set> | ||
| <x:comment>rendering primary action: ${action.class.name}</x:comment> | ||
| <j:if test="${jumplist.length() == 0}"> | ||
| <j:set var="tooltip"> | ||
| <st:include it="${action}" page="tooltip.jelly" optional="true" /> | ||
| </j:set> | ||
| </j:if> | ||
|
|
||
| <j:set var="badge" value="${action.badge}" /> | ||
| <j:if test="${jumplist.length() == 0 and tooltip.length() == 0}"> | ||
| <j:set var="tooltip"> | ||
| <div style="text-align: center;">${action.displayName}</div> | ||
| <j:if test="${badge != null}"> | ||
| <div style="text-align: center; color: var(--text-color-secondary)">${badge.tooltip}</div> | ||
| </j:if> | ||
| </j:set> | ||
| </j:if> | ||
|
|
||
| <j:set var="interactive" value="${jumplist.length() gt 0}" /> | ||
| <j:set var="icon" value="${action.iconClassName != null ? action.iconClassName : action.iconFileName}"/> | ||
| <x:element name="${action.urlName == null ? 'button' : 'a'}"> | ||
| <x:attribute name="data-dropdown">${interactive}</x:attribute> | ||
| <x:attribute name="id">root-action-${action.class.simpleName}</x:attribute> | ||
|
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. NB: existing code, |
||
| <x:attribute name="href">${h.getActionUrl(app.url, action)}</x:attribute> | ||
| <j:if test="${interactive}"> | ||
| <x:attribute name="data-tippy-offset">[0, 10]</x:attribute> | ||
| </j:if> | ||
| <j:if test="${!interactive}"> | ||
| <x:attribute name="data-html-tooltip" escapeText="false"><j:out value="${tooltip}" /></x:attribute> | ||
| </j:if> | ||
| <x:attribute name="data-tooltip-interactive">${interactive}</x:attribute> | ||
| <x:attribute name="data-tippy-animation">tooltip</x:attribute> | ||
| <x:attribute name="data-tippy-theme">${interactive ? 'dropdown' : 'tooltip'}</x:attribute> | ||
| <x:attribute name="data-tippy-trigger">mouseenter focus</x:attribute> | ||
| <x:attribute name="data-tippy-touch">${interactive}</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> | ||
| <l:icon src="${icon}" class="${action.class.name == 'jenkins.model.navigation.UserAction' ? 'jenkins-avatar' : ''}"/> | ||
| <span class="jenkins-visually-hidden" data-type="action-label">${action.displayName}</span> | ||
| <j:if test="${badge != null}"> | ||
| <span class="jenkins-badge jenkins-!-${badge.severity}-color" /> | ||
| </j:if> | ||
| </x:element> | ||
|
|
||
| <j:if test="${interactive}"> | ||
| <template> | ||
| <div class="jenkins-dropdown"> | ||
| <j:out value="${jumplist}" /> | ||
| </div> | ||
| </template> | ||
| </j:if> | ||
|
|
||
| </j:jelly> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <?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"> | ||
|
|
||
|
|
||
| <st:documentation> <![CDATA[ | ||
| Used inside <h:actions> to render primaryActions. | ||
| ]]> | ||
| <st:attribute name="action" use="required"> | ||
| The action to render | ||
| </st:attribute> | ||
| </st:documentation> | ||
|
|
||
| <j:set var="badge" value="${action.badge}"/> | ||
| <j:set var="badgeClazz" value="${badge != null ? '' : 'jenkins-badge jenkins-!-${badge.severity}-color'}"/> | ||
jtnord marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| <dd:item icon="${action.iconClassName != null ? action.iconClassName : action.iconFileName}" | ||
| text="${action.displayName}" | ||
| href="${h.getActionUrl(app.url, action)}" | ||
| clazz="${badgeClazz}"> | ||
| </dd:item> | ||
|
|
||
| </j:jelly> | ||
|
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. renamed to |
This file was deleted.
Uh oh!
There was an error while loading. Please reload this page.