Add animation for selected key

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

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/core/src/main/resources/hudson/model/AbstractProject/sidepanel.jelly b/core/src/main/resources/hudson/model/AbstractProject/sidepanel.jelly
@@ -47,7 +47,7 @@ THE SOFTWARE.
       </j:choose>
       <l:task contextMenu="false" href="${url}/" icon="symbol-details" title="${%Status}"/>
       <l:task href="${url}/changes" icon="symbol-changes" title="${%Changes}"/>
-      <l:task icon="symbol-folder"  href="${url}/ws/" title="${%Workspace}" permission="${it.WORKSPACE}">
+      <l:task icon="symbol-folder"  href="${url}/ws/" title="${%Workspace}" permission="${it.WORKSPACE}" keyboardShortcut="W">
         <l:task confirmationMessage="${%wipe.out.confirm}" href="${url}/doWipeOutWorkspace" icon="symbol-trash" permission="${h.isWipeOutPermissionEnabled() ? it.WIPEOUT : it.BUILD}" post="true" requiresConfirmation="true" title="${%Wipe Out Workspace}"/>
       </l:task>
       <j:if test="${it.configurable}">

diff --git a/war/src/main/js/keyboard-shortcuts.js b/war/src/main/js/keyboard-shortcuts.js
@@ -3,6 +3,22 @@ import hotkeys from "hotkeys-js"
 const ADD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"/></svg>`
 
 window.addEventListener("load", () => {
+  hotkeys("*", ({key}) => {
+    if (key === "Meta") {
+      key = "CMD";
+    }
+
+    [...document.querySelectorAll(".jenkins-keyboard-shortcut__item")]
+      .filter(shortcut => shortcut.textContent.toLowerCase() === key.toLowerCase())
+      .forEach(shortcut => {
+        shortcut.classList.add("jenkins-keyboard-shortcut__item--chosen")
+
+        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()
@@ -41,4 +57,5 @@ export function generateKeyboardShortcutUI(keyboardShortcut) {
     .join(ADD_SVG)
 }
 
+
 export default { generateKeyboardShortcutUI }
diff --git a/war/src/main/less/modules/keyboard-shortcut.less b/war/src/main/less/modules/keyboard-shortcut.less
@@ -32,6 +32,15 @@
     &::after {
       border-bottom: 2px solid var(--text-color);
     }
+
+    &--chosen {
+      padding-top: calc(0.2rem + 1px);
+      padding-bottom: calc(0.2rem - 1px);
+
+      &::after {
+        border-bottom-width: 0;
+      }
+    }
   }
 
   svg {