Improved shortcut overlay with related action highlighting

diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js
index 7feb9bed047f4c7f7fb480c305fa0b9fcbcf703b..a3cca5ddc8b5fc3ef74111c87dec23efa4a6f980 100644 (file)
--- a/resources/js/components/shortcuts.js
+++ b/resources/js/components/shortcuts.js
@@ -115,6 +115,10 @@ class Shortcuts {
     }
 
     showHints() {
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('shortcut-container');
+        this.container.append(wrapper);
+
         const shortcutEls = this.container.querySelectorAll('[data-shortcut]');
         const displayedIds = new Set();
         for (const shortcutEl of shortcutEls) {
@@ -124,7 +128,7 @@ class Shortcuts {
             }
 
             const key = this.mapById[id];
-            this.showHintLabel(shortcutEl, key);
+            this.showHintLabel(shortcutEl, key, wrapper);
             displayedIds.add(id);
         }
 
@@ -136,24 +140,36 @@ class Shortcuts {
         this.hintsShowing = true;
     }
 
-    showHintLabel(targetEl, key) {
+    /**
+     * @param {Element} targetEl
+     * @param {String} key
+     * @param {Element} wrapper
+     */
+    showHintLabel(targetEl, key, wrapper) {
         const targetBounds = targetEl.getBoundingClientRect();
+
         const label = document.createElement('div');
         label.classList.add('shortcut-hint');
         label.textContent = key;
-        this.container.append(label);
+
+        const linkage = document.createElement('div');
+        linkage.classList.add('shortcut-linkage');
+        linkage.style.left = targetBounds.x + 'px';
+        linkage.style.top = targetBounds.y + 'px';
+        linkage.style.width = targetBounds.width + 'px';
+        linkage.style.height = targetBounds.height + 'px';
+
+        wrapper.append(label, linkage);
 
         const labelBounds = label.getBoundingClientRect();
 
-        label.style.insetInlineStart = `${((targetBounds.x + targetBounds.width) - (labelBounds.width + 12))}px`;
+        label.style.insetInlineStart = `${((targetBounds.x + targetBounds.width) - (labelBounds.width + 6))}px`;
         label.style.insetBlockStart = `${(targetBounds.y + (targetBounds.height - labelBounds.height) / 2)}px`;
     }
 
     hideHints() {
-        const hints = this.container.querySelectorAll('.shortcut-hint');
-        for (const hint of hints) {
-            hint.remove();
-        }
+        const wrapper = this.container.querySelector('.shortcut-container');
+        wrapper.remove();
 
         window.removeEventListener('scroll', this.hideHints);
         window.removeEventListener('focus', this.hideHints);

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 661fce758180652aeeab5eda63d663b0d588594a..66d76aaa244133d16dcd4034bc6abeb55b0cc56e 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -984,13 +984,27 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   background-color: $negative;
 }
 
+.shortcut-container {
+  background-color: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+}
+.shortcut-linkage {
+  position: fixed;
+  box-shadow: 0 0 4px 0 #FFF;
+  border-radius: 3px;
+}
 .shortcut-hint {
   position: fixed;
   padding: $-xxs $-xxs;
   font-size: .85rem;
   font-weight: 700;
   line-height: 1;
-  z-index: 99;
   background-color: #eee;
   border-radius: 3px;
   border: 1px solid #b4b4b4;