mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Dynamically generate keyboard shortcut help dialog
This commit is contained in:
Nick O'Leary
parent
a55027b838
commit
b1684e82d8
@ -12,16 +12,16 @@
|
||||
"ctrl-g c": "core:show-config-tab"
|
||||
},
|
||||
"workspace": {
|
||||
"ctrl-e": "core:export",
|
||||
"ctrl-i": "core:import",
|
||||
"backspace": "core:delete",
|
||||
"delete": "core:delete",
|
||||
"enter": "core:edit",
|
||||
"ctrl-c": "core:copy",
|
||||
"ctrl-x": "core:cut",
|
||||
"ctrl-v": "core:paste",
|
||||
"ctrl-e": "core:show-export-dialog",
|
||||
"ctrl-i": "core:show-import-dialog",
|
||||
"backspace": "core:delete-selection",
|
||||
"delete": "core:delete-selection",
|
||||
"enter": "core:edit-selected-node",
|
||||
"ctrl-c": "core:copy-selection-to-internal-clipboard",
|
||||
"ctrl-x": "core:cut-selection-to-internal-clipboard",
|
||||
"ctrl-v": "core:paste-from-internal-clipboard",
|
||||
"ctrl-z": "core:undo",
|
||||
"ctrl-a": "core:select-all",
|
||||
"ctrl-a": "core:select-all-nodes",
|
||||
"shift-?": "core:show-help",
|
||||
"ctrl-space": "core:toggle-sidebar",
|
||||
"up": "core:move-selection-up",
|
||||
|
||||
@ -195,11 +195,11 @@
|
||||
]});
|
||||
menuOptions.push(null);
|
||||
menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
|
||||
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:import"},
|
||||
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
|
||||
{id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
|
||||
]});
|
||||
menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),disabled:true,options:[
|
||||
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),disabled:true,onselect:"core:export"},
|
||||
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),disabled:true,onselect:"core:show-export-dialog"},
|
||||
{id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:"core:library-export"}
|
||||
]});
|
||||
menuOptions.push(null);
|
||||
|
||||
@ -275,8 +275,8 @@ RED.clipboard = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
RED.actions.add("core:export",exportNodes);
|
||||
RED.actions.add("core:import",importNodes);
|
||||
RED.actions.add("core:show-export-dialog",exportNodes);
|
||||
RED.actions.add("core:show-import-dialog",importNodes);
|
||||
|
||||
|
||||
$('#chart').on("dragenter",function(event) {
|
||||
|
||||
@ -253,7 +253,7 @@ RED.keyboard = (function() {
|
||||
delete slot.ondown;
|
||||
}
|
||||
|
||||
var dialog = null;
|
||||
var shortcutDialog = null;
|
||||
|
||||
var cmdCtrlKey = '<span class="help-key">'+(isMac?'⌘':'Ctrl')+'</span>';
|
||||
|
||||
@ -261,51 +261,60 @@ RED.keyboard = (function() {
|
||||
if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
|
||||
return;
|
||||
}
|
||||
if (!dialog) {
|
||||
dialog = $('<div id="keyboard-help-dialog" class="hide">'+
|
||||
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
|
||||
'<table class="keyboard-shortcuts">'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">a</span></td><td>'+RED._("keyboard.selectAll")+'</td></tr>'+
|
||||
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.selectAllConnected")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Click</span></td><td>'+RED._("keyboard.addRemoveNode")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">Enter</span></td><td>'+RED._("keyboard.editSelected")+'</td></tr>'+
|
||||
'<tr><td><span class="help-key">Delete</span> / <span class="help-key">Backspace</span></td><td>'+RED._("keyboard.deleteSelected")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">i</span></td><td>'+RED._("keyboard.importNode")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">e</span></td><td>'+RED._("keyboard.exportNode")+'</td></tr>'+
|
||||
'</table>'+
|
||||
'</div>'+
|
||||
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
|
||||
'<table class="keyboard-shortcuts">'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Space</span></td><td>'+RED._("keyboard.toggleSidebar")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">f</span></td><td>'+RED._("keyboard.searchBox")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Shift</span> + <span class="help-key">p</span></td><td>'+RED._("keyboard.managePalette")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">←</span> <span class="help-key">↑</span> <span class="help-key">→</span> <span class="help-key">↓</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
|
||||
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">←</span> <span class="help-key">↑</span> <span class="help-key">→</span> <span class="help-key">↓</span></td><td>'+RED._("keyboard.moveNode")+'</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">x</span></td><td>'+RED._("keyboard.cutNode")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">v</span></td><td>'+RED._("keyboard.pasteNode")+'</td></tr>'+
|
||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">z</span></td><td>'+RED._("keyboard.undoChange")+'</td></tr>'+
|
||||
'</table>'+
|
||||
'</div>'+
|
||||
if (!shortcutDialog) {
|
||||
shortcutDialog = $('<div id="keyboard-help-dialog" class="hide">'+
|
||||
'<ol id="keyboard-shortcut-list"></ol>'+
|
||||
'</div>')
|
||||
.appendTo("body")
|
||||
.dialog({
|
||||
.appendTo("body");
|
||||
|
||||
var shortcutList = $('#keyboard-shortcut-list').editableList({
|
||||
addButton: false,
|
||||
scrollOnAdd: false,
|
||||
addItem: function(container,i,object) {
|
||||
var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
|
||||
|
||||
var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
|
||||
key.append(formatKey(object.key));
|
||||
|
||||
var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function(_,_,A,_,B,pos) {
|
||||
if (pos === 0) {
|
||||
return A.toUpperCase();
|
||||
} else {
|
||||
return " "+B.toUpperCase();
|
||||
}
|
||||
});
|
||||
var label = $('<div>').html(text).appendTo(item);
|
||||
|
||||
var scope = $('<div class="keyboard-shortcut-entry-scope">').html(object.scope).appendTo(item);
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
var shortcuts = RED.actions.list();
|
||||
shortcuts.sort(function(A,B) {
|
||||
return A.id.localeCompare(B.id);
|
||||
});
|
||||
shortcuts.forEach(function(s) {
|
||||
if (s.key) {
|
||||
shortcutList.editableList('addItem',s);
|
||||
}
|
||||
})
|
||||
|
||||
shortcutDialog.dialog({
|
||||
modal: true,
|
||||
autoOpen: false,
|
||||
width: "800",
|
||||
title:"Keyboard shortcuts",
|
||||
height: "400",
|
||||
title:RED._("keyboard.title"),
|
||||
resizable: false
|
||||
});
|
||||
}
|
||||
|
||||
dialog.dialog("open");
|
||||
shortcutDialog.dialog("open");
|
||||
}
|
||||
function formatKey(key) {
|
||||
var formattedKey = isMac?key.replace(/ctrl-?/,"⌘"):key;
|
||||
formattedKey = isMac?formattedKey.replace(/alt-?/,"⌥"):key;
|
||||
formattedKey = formattedKey.replace(/shift-?/,"⇧")
|
||||
formattedKey = formattedKey.replace(/left/,"←")
|
||||
formattedKey = formattedKey.replace(/up/,"↑")
|
||||
|
||||
@ -385,13 +385,13 @@ RED.view = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
RED.actions.add("core:copy",copySelection);
|
||||
RED.actions.add("core:cut",function(){copySelection();deleteSelection();});
|
||||
RED.actions.add("core:paste",function(){importNodes(clipboard);});
|
||||
RED.actions.add("core:delete",deleteSelection);
|
||||
RED.actions.add("core:edit",editSelection);
|
||||
RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
|
||||
RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
|
||||
RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard);});
|
||||
RED.actions.add("core:delete-selection",deleteSelection);
|
||||
RED.actions.add("core:edit-selected-node",editSelection);
|
||||
RED.actions.add("core:undo",RED.history.pop);
|
||||
RED.actions.add("core:select-all",selectAll);
|
||||
RED.actions.add("core:select-all-nodes",selectAll);
|
||||
RED.actions.add("core:zoom-in",zoomIn);
|
||||
RED.actions.add("core:zoom-out",zoomOut);
|
||||
RED.actions.add("core:zoom-reset",zoomZero);
|
||||
|
||||
@ -17,18 +17,27 @@
|
||||
#keyboard-help-dialog {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.keyboard-shortcuts {
|
||||
padding: 10px;
|
||||
#keyboard-shortcut-list {
|
||||
position: absolute;
|
||||
top:10px;
|
||||
left:10px;
|
||||
right:10px;
|
||||
bottom:10px;
|
||||
}
|
||||
.keyboard-shortcuts td {
|
||||
padding: 7px 5px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre;
|
||||
.keyboard-shortcut-entry {
|
||||
padding: 0px 20px 0 10px;
|
||||
div {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.keyboard-shortcuts td:first-child {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
.keyboard-shortcut-entry-key {
|
||||
width:150px;
|
||||
}
|
||||
.keyboard-shortcut-entry-scope {
|
||||
float: right;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.help-key {
|
||||
border: 1px solid #ddd;
|
||||
padding: 4px;
|
||||
|
||||
@ -188,6 +188,7 @@
|
||||
}
|
||||
},
|
||||
"keyboard": {
|
||||
"title": "Keyboard Shortcuts",
|
||||
"selectAll": "Select all nodes",
|
||||
"selectAllConnected": "Select all connected nodes",
|
||||
"addRemoveNode": "Add/remove node from selection",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"info": {
|
||||
"tip0" : "You can remove the selected nodes or links with {{core:delete}}",
|
||||
"tip0" : "You can remove the selected nodes or links with {{core:delete-selection}}",
|
||||
"tip1" : "Search for nodes using {{core:search}}",
|
||||
"tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
|
||||
"tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
|
||||
@ -8,8 +8,8 @@
|
||||
"tip5" : "Enable or disable these tips from the option in the menu",
|
||||
"tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
|
||||
"tip7" : "Dragging a node onto a wire will splice it into the link",
|
||||
"tip8" : "Export the selected nodes, or the current tab with {{core:export}}",
|
||||
"tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:import}}",
|
||||
"tip8" : "Export the selected nodes, or the current tab with {{core:show-export-dialog}}",
|
||||
"tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:show-import-dialog}}",
|
||||
"tip10" : "[shift] [click] and drag on a node port to move all of the attached wires or just the selected one",
|
||||
"tip11" : "Show the Info tab with {{core:show-info-tab}} or the Debug tab with {{core:show-debug-tab}}",
|
||||
"tip12" : "[ctrl] [click] in the workspace to open the quick-add dialog",
|
||||
@ -17,7 +17,8 @@
|
||||
"tip14" : "Hold down [shift] when you [click] on a node to also select all of its connected nodes",
|
||||
"tip15" : "Hold down [ctrl] when you [click] on a node to add or remove it from the current selection",
|
||||
"tip16" : "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
|
||||
"tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}"
|
||||
"tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}",
|
||||
"tip18" : "Pressing {{core:edit-selected-node}} will edit the first node in the current selection"
|
||||
},
|
||||
"info-tbd": {
|
||||
"tip1" : "Press the <code>Deploy</code> button above to start the flow running. You can choose to deploy the whole flow or just the changes.",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user