dynamically translating kbd based on actions

This commit is contained in:
zadam 2019-11-22 22:35:59 +01:00
parent 98c81faedb
commit ff0245f05f
7 changed files with 54 additions and 32 deletions

View File

@ -1,3 +1,4 @@
import keyboardActionService from './keyboard_actions.js';
const $contextMenuContainer = $("#context-menu-container");
let dateContextMenuOpenedMs = 0;
@ -69,6 +70,8 @@ async function initContextMenu(event, contextMenu) {
addItems($contextMenuContainer, await contextMenu.getContextMenuItems());
keyboardActionService.updateKbdElements($contextMenuContainer);
// code below tries to detect when dropdown would overflow from page
// in such case we'll position it above click coordinates so it will fit into client
const clickPosition = event.pageY;

View File

@ -121,7 +121,7 @@ function registerEntrypoints() {
});
$("#reload-frontend-button").on('click', utils.reloadApp);
keyboardActionService.setActionHandler("ReloadApp", utils.reloadApp);
keyboardActionService.setActionHandler("ReloadFrontendApp", utils.reloadApp);
$("#open-dev-tools-button").toggle(utils.isElectron());

View File

@ -61,20 +61,39 @@ async function triggerAction(actionName) {
await action.handler();
}
async function getAction(actionName) {
async function getAction(actionName, silent = false) {
await keyboardActionsLoaded;
const action = keyboardActionRepo[actionName];
if (!action) {
throw new Error(`Cannot find action ${actionName}`);
if (silent) {
console.log(`Cannot find action ${actionName}`);
}
else {
throw new Error(`Cannot find action ${actionName}`);
}
}
return action;
}
function updateKbdElements($container) {
$container.find('kbd[data-kb-action]').each(async (i, el) => {
const actionName = $(el).attr('data-kb-action');
const action = await getAction(actionName, true);
if (action) {
$(el).text(action.effectiveShortcuts.join(', '));
}
});
}
$(() => updateKbdElements($(document)));
export default {
setActionHandler,
triggerAction,
getAction
getAction,
updateKbdElements
};

View File

@ -46,39 +46,39 @@ class TreeContextMenu {
const insertNoteAfterEnabled = isNotRoot && !isHoisted && parentNotSearch;
return [
{ title: "Open in new tab", cmd: "openInTab", uiIcon: "empty", enabled: noSelectedNotes },
{ title: "Insert note after <kbd>Ctrl+O</kbd>", cmd: "insertNoteAfter", uiIcon: "plus",
{ title: 'Open in new tab', cmd: "openInTab", uiIcon: "empty", enabled: noSelectedNotes },
{ title: 'Insert note after <kbd data-kb-action="CreateNoteAfter"></kbd>', cmd: "insertNoteAfter", uiIcon: "plus",
items: insertNoteAfterEnabled ? this.getNoteTypeItems("insertNoteAfter") : null,
enabled: insertNoteAfterEnabled && noSelectedNotes },
{ title: "Insert child note <kbd>Ctrl+P</kbd>", cmd: "insertChildNote", uiIcon: "plus",
{ title: 'Insert child note <kbd data-kb-action="CreateNoteInto"></kbd>', cmd: "insertChildNote", uiIcon: "plus",
items: notSearch ? this.getNoteTypeItems("insertChildNote") : null,
enabled: notSearch && noSelectedNotes },
{ title: "Delete <kbd>Delete</kbd>", cmd: "delete", uiIcon: "trash",
{ title: 'Delete <kbd data-kb-action="DeleteNotes"></kbd>', cmd: "delete", uiIcon: "trash",
enabled: isNotRoot && !isHoisted && parentNotSearch },
{ title: "----" },
{ title: "Search in subtree <kbd>Ctrl+Shift+S</kbd>", cmd: "searchInSubtree", uiIcon: "search",
{ title: 'Search in subtree <kbd data-kb-action="SearchInSubtree"></kbd>', cmd: "searchInSubtree", uiIcon: "search",
enabled: notSearch && noSelectedNotes },
isHoisted ? null : { title: "Hoist note <kbd>Ctrl-H</kbd>", cmd: "hoist", uiIcon: "empty", enabled: noSelectedNotes && notSearch },
!isHoisted || !isNotRoot ? null : { title: "Unhoist note <kbd>Ctrl-H</kbd>", cmd: "unhoist", uiIcon: "arrow-up" },
{ title: "Edit branch prefix <kbd>F2</kbd>", cmd: "editBranchPrefix", uiIcon: "empty",
isHoisted ? null : { title: 'Hoist note <kbd data-kb-action="ToggleNoteHoisting"></kbd>', cmd: "hoist", uiIcon: "empty", enabled: noSelectedNotes && notSearch },
!isHoisted || !isNotRoot ? null : { title: 'Unhoist note <kbd data-kb-action="ToggleNoteHoisting"></kbd>', cmd: "unhoist", uiIcon: "arrow-up" },
{ title: 'Edit branch prefix <kbd data-kb-action="EditBranchPrefix"></kbd>', cmd: "editBranchPrefix", uiIcon: "empty",
enabled: isNotRoot && parentNotSearch && noSelectedNotes},
{ title: "----" },
{ title: "Protect subtree", cmd: "protectSubtree", uiIcon: "check-shield", enabled: noSelectedNotes },
{ title: "Unprotect subtree", cmd: "unprotectSubtree", uiIcon: "shield", enabled: noSelectedNotes },
{ title: "----" },
{ title: "Copy / clone <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "copy",
{ title: 'Copy / clone <kbd data-kb-action="CopyNotesToClipboard"></kbd>', cmd: "copy", uiIcon: "copy",
enabled: isNotRoot && !isHoisted },
{ title: "Clone to ... <kbd>Ctrl+Shift+C</kbd>", cmd: "cloneTo", uiIcon: "empty",
{ title: 'Clone to ... <kbd data-kb-action="CloneNotesTo"></kbd>', cmd: "cloneTo", uiIcon: "empty",
enabled: isNotRoot && !isHoisted },
{ title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "cut",
{ title: 'Cut <kbd data-kb-action="CutNotesToClipboard"></kbd>', cmd: "cut", uiIcon: "cut",
enabled: isNotRoot && !isHoisted && parentNotSearch },
{ title: "Move to ... <kbd>Ctrl+Shift+X</kbd>", cmd: "moveTo", uiIcon: "empty",
{ title: 'Move to ... <kbd data-kb-action="MoveNotesTo">Ctrl+Shift+X</kbd>', cmd: "moveTo", uiIcon: "empty",
enabled: isNotRoot && !isHoisted && parentNotSearch },
{ title: "Paste into <kbd>Ctrl+V</kbd>", cmd: "pasteInto", uiIcon: "paste",
{ title: 'Paste into <kbd data-kb-action="PasteNotesFromClipboard">Ctrl+V</kbd>', cmd: "pasteInto", uiIcon: "paste",
enabled: !clipboard.isClipboardEmpty() && notSearch && noSelectedNotes },
{ title: "Paste after", cmd: "pasteAfter", uiIcon: "paste",
{ title: 'Paste after', cmd: "pasteAfter", uiIcon: "paste",
enabled: !clipboard.isClipboardEmpty() && isNotRoot && !isHoisted && parentNotSearch && noSelectedNotes },
{ title: "Duplicate note here", cmd: "duplicateNote", uiIcon: "empty",
{ title: 'Duplicate note here', cmd: "duplicateNote", uiIcon: "empty",
enabled: noSelectedNotes && parentNotSearch && (!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable()) },
{ title: "----" },
{ title: "Export", cmd: "export", uiIcon: "empty",
@ -86,9 +86,9 @@ class TreeContextMenu {
{ title: "Import into note", cmd: "importIntoNote", uiIcon: "empty",
enabled: notSearch && noSelectedNotes },
{ title: "----" },
{ title: "Collapse subtree <kbd>Alt+-</kbd>", cmd: "collapseSubtree", uiIcon: "align-justify", enabled: noSelectedNotes },
{ title: 'Collapse subtree <kbd data-kb-action="CollapseSubtree">Alt+-</kbd>', cmd: "collapseSubtree", uiIcon: "align-justify", enabled: noSelectedNotes },
{ title: "Force note sync", cmd: "forceNoteSync", uiIcon: "recycle", enabled: noSelectedNotes },
{ title: "Sort alphabetically <kbd>Alt+S</kbd>", cmd: "sortAlphabetically", uiIcon: "empty", enabled: noSelectedNotes && notSearch }
{ title: 'Sort alphabetically <kbd data-kb-action="SortChildNotes">Alt+S</kbd>', cmd: "sortAlphabetically", uiIcon: "empty", enabled: noSelectedNotes && notSearch }
].filter(row => row !== null);
}

View File

@ -34,7 +34,7 @@ const fixedKeyBindings = {
};
const templates = {
"DeleteNote": node => {
"DeleteNotes": node => {
treeChangesService.deleteNodes(treeService.getSelectedOrActiveNodes(node));
},
"MoveNoteUp": node => {

View File

@ -114,7 +114,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
defaultShortcuts: ["CommandOrControl+return"]
},
{
actionName: "DeleteNote",
actionName: "DeleteNotes",
defaultShortcuts: ["Delete"],
description: "Delete note"
},
@ -185,7 +185,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
},
{
actionName: "ToggleNoteHoisting",
defaultShortcuts: ["Alt+h"],
defaultShortcuts: ["Alt+H"],
description: "Toggles note hoisting of active note"
},
{
@ -195,7 +195,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
},
{
actionName: "EditNoteTitle",
defaultShortcuts: ["return"],
defaultShortcuts: ["Return"],
description: "Edit active note title"
},
{
@ -236,7 +236,7 @@ const DEFAULT_KEYBOARD_ACTIONS = [
defaultShortcuts: ["Alt+T"]
},
{
actionName: "ReloadApp",
actionName: "ReloadFrontendApp",
defaultShortcuts: ["F5", "CommandOrControl+R"]
},
{

View File

@ -66,37 +66,37 @@
<a class="dropdown-item" id="open-dev-tools-button">
<span class="bx bx-terminal"></span>
Open Dev Tools
<kbd>CTRL+SHIFT+I</kbd>
<kbd data-kb-action="OpenDevTools"></kbd>
</a>
<a class="dropdown-item" id="open-sql-console-button">
<span class="bx bx-data"></span>
Open SQL Console
<kbd>ALT+O</kbd>
<kbd data-kb-action="ShowSQLConsole"></kbd>
</a>
<a class="dropdown-item" id="reload-frontend-button" title="Reload can help with some visual glitches without restarting the whole app.">
<span class="bx bx-empty"></span>
Reload frontend
<kbd>CTRL+R</kbd>
<kbd data-kb-action="ReloadFrontendApp"></kbd>
</a>
<a class="dropdown-item" id="toggle-zen-mode-button">
<span class="bx bx-empty"></span>
Toggle Zen mode
<kbd>ALT+M</kbd>
<kbd data-kb-action="ToggleZenMode"></kbd>
</a>
<a class="dropdown-item" id="toggle-fullscreen-button">
<span class="bx bx-empty"></span>
Toggle fullscreen
<kbd>F11</kbd>
<kbd data-kb-action="ToggleFullscreen"></kbd>
</a>
<a class="dropdown-item" id="show-help-button">
<span class="bx bx-info-circle"></span>
Show Help
<kbd>F1</kbd>
<kbd data-kb-action="ShowHelp"></kbd>
</a>
<a class="dropdown-item" id="show-about-dialog-button">