Add more shortcuts, add animation on key press

janfaracik · Apr 16, 2022 · 7bce4da · 7bce4da
1 parent 07b741b
commit 7bce4da
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/core/src/main/resources/hudson/model/AbstractBuild/sidepanel.jelly b/core/src/main/resources/hudson/model/AbstractBuild/sidepanel.jelly
@@ -36,11 +36,11 @@ THE SOFTWARE.
       <st:include page="actions.jelly" />
       <t:actions actions="${it.transientActions}"/>
       <j:if test="${it.previousBuild!=null}">
-        <l:task contextMenu="false" href="${buildUrl.previousBuildUrl}" icon="icon-previous icon-md" title="${%Previous Build}"/>
+        <l:task contextMenu="false" href="${buildUrl.previousBuildUrl}" icon="icon-previous icon-md" title="${%Previous Build}" keyboardShortcut="J" />
       </j:if>
       <j:if test="${it.nextBuild!=null}">
-        <l:task contextMenu="false" href="${buildUrl.nextBuildUrl}" icon="icon-next icon-md" title="${%Next Build}"/>
+        <l:task contextMenu="false" href="${buildUrl.nextBuildUrl}" icon="icon-next icon-md" title="${%Next Build}" keyboardShortcut="K" />
       </j:if>
     </l:tasks>
   </l:side-panel>
-</j:jelly>
+</j:jelly>
diff --git a/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly b/core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly
@@ -24,7 +24,7 @@
                 <!-- this div is used to calculate the width of the text box -->
                 <div id="search-box-sizer"/>
                 <div id="searchform">
-                    <input name="q" placeholder="${searchPlaceholder}" id="search-box" class="main-search__input" value="${request.getParameter('q')}" role="searchbox" />
+                    <input name="q" placeholder="${searchPlaceholder}" id="search-box" class="main-search__input" value="${request.getParameter('q')}" role="searchbox" data-keyboard-shortcut="CMD+K" />
 
                     <span class="main-search__icon-leading">
                         <l:icon src="symbol-search"/>

diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -80,7 +80,7 @@ THE SOFTWARE.
                 </j:if>
                 <j:choose>
                 <j:when test="${!empty(healthReports)}">
-                    <a class="build-health-link jenkins-table__button" href="${empty(link)?'#':link}" style="${attrs.style}">
+                    <a data-keyboard-shortcut="L" class="build-health-link jenkins-table__button" href="${empty(link)?'#':link}" style="${attrs.style}">
                        <l:svgIcon href="${resURL}/images/${icons.getIconByClassSpec(buildHealth.iconClassName + ' icon-md').url}" ariaHidden="true"/>
                     </a>
                 </j:when>

diff --git a/war/src/main/js/keyboard-shortcuts.js b/war/src/main/js/keyboard-shortcuts.js
@@ -13,17 +13,28 @@ window.addEventListener("load", () => {
       .forEach(shortcut => {
         shortcut.classList.add("jenkins-keyboard-shortcut__item--chosen")
 
-        setTimeout(function(){
+        setTimeout(function() {
           shortcut.classList.remove("jenkins-keyboard-shortcut__item--chosen");
         }, 500);
       })
   })
 
   document.querySelectorAll("[data-keyboard-shortcut]").forEach(function(element) {
     hotkeys(translateKeyboardShortcutForOS(element.dataset.keyboardShortcut), () => {
-      element.click()
-      // Returning false stops the event and prevents default browser events
-      return false
+      // Small delay to show animation
+      setTimeout(function() {
+        switch (element.tagName) {
+          case "A":
+            element.click()
+            break;
+          case "INPUT":
+            element.focus()
+            break;
+        }
+
+        // Returning false stops the event and prevents default browser events
+        return false
+      }, 50);
     })
   })
 })

diff --git a/war/src/main/less/modules/keyboard-shortcut.less b/war/src/main/less/modules/keyboard-shortcut.less
@@ -27,6 +27,7 @@
 
     &::before {
       background: var(--text-color);
+      transition: var(--standard-transition);
     }
 
     &::after {
@@ -37,6 +38,10 @@
       padding-top: calc(0.2rem + 1px);
       padding-bottom: calc(0.2rem - 1px);
 
+      &::before {
+        opacity: 0.075;
+      }
+
       &::after {
         border-bottom-width: 0;
       }