Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 05:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved shortcut overlay with related action highlighting

Browse Source
This commit is contained in:
Dan Brown 2022-11-05 13:57:22 +00:00
parent 78b6450031
commit 1fc994177f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/components/shortcuts.js
View File

@ -115,6 +115,10 @@ class Shortcuts {
} }
showHints() { showHints() {
const wrapper = document.createElement('div');
wrapper.classList.add('shortcut-container');
this.container.append(wrapper);
const shortcutEls = this.container.querySelectorAll('[data-shortcut]'); const shortcutEls = this.container.querySelectorAll('[data-shortcut]');
const displayedIds = new Set(); const displayedIds = new Set();
for (const shortcutEl of shortcutEls) { for (const shortcutEl of shortcutEls) {
@ -124,7 +128,7 @@ class Shortcuts {
} }
const key = this.mapById[id]; const key = this.mapById[id];
this.showHintLabel(shortcutEl, key); this.showHintLabel(shortcutEl, key, wrapper);
displayedIds.add(id); displayedIds.add(id);
} }
@ -136,24 +140,36 @@ class Shortcuts {
this.hintsShowing = true; this.hintsShowing = true;
} }
showHintLabel(targetEl, key) { /**
* @param {Element} targetEl
* @param {String} key
* @param {Element} wrapper
*/
showHintLabel(targetEl, key, wrapper) {
const targetBounds = targetEl.getBoundingClientRect(); const targetBounds = targetEl.getBoundingClientRect();
const label = document.createElement('div'); const label = document.createElement('div');
label.classList.add('shortcut-hint'); label.classList.add('shortcut-hint');
label.textContent = key; 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(); 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`; label.style.insetBlockStart = `${(targetBounds.y + (targetBounds.height - labelBounds.height) / 2)}px`;
} }
hideHints() { hideHints() {
const hints = this.container.querySelectorAll('.shortcut-hint'); const wrapper = this.container.querySelector('.shortcut-container');
for (const hint of hints) { wrapper.remove();
hint.remove();
}
window.removeEventListener('scroll', this.hideHints); window.removeEventListener('scroll', this.hideHints);
window.removeEventListener('focus', this.hideHints); window.removeEventListener('focus', this.hideHints);

16
resources/sass/_components.scss
View File

@ -984,13 +984,27 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
background-color: $negative; 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 { .shortcut-hint {
position: fixed; position: fixed;
padding: $-xxs $-xxs; padding: $-xxs $-xxs;
font-size: .85rem; font-size: .85rem;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
z-index: 99;
background-color: #eee; background-color: #eee;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b4b4b4; border: 1px solid #b4b4b4;