Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-04 18:41:19 +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() {
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);

16
resources/sass/_components.scss
View File

@ -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;