frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Dynamically generate keyboard shortcut help dialog

This commit is contained in:
Nick O'Leary 2017-01-11 11:35:48 +00:00
parent a55027b838
commit b1684e82d8
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 87 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
editor/js/keymap.json
View File

@ -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",

4
editor/js/main.js
View File

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

4
editor/js/ui/clipboard.js
View File

@ -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) {

79
editor/js/ui/keyboard.js
View File

@ -253,7 +253,7 @@ RED.keyboard = (function() {
delete slot.ondown;
}
var dialog = null;
var shortcutDialog = null;
var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td></td></tr>'+
'<tr><td><span class="help-key">&#x2190</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.nudgeNode")+'</td></tr>'+
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">&#x2190;</span> <span class="help-key">&#x2191;</span> <span class="help-key">&#x2192;</span> <span class="help-key">&#x2193;</span></td><td>'+RED._("keyboard.moveNode")+'</td></tr>'+
'<tr><td>&nbsp;</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-?/,"&#8984;"):key;
formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
formattedKey = formattedKey.replace(/left/,"&#x2190;")
formattedKey = formattedKey.replace(/up/,"&#x2191;")

12
editor/js/ui/view.js
View File

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

27
editor/sass/keyboard.scss
View File

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

1
red/api/locales/en-US/editor.json
View File

@ -188,6 +188,7 @@
}
},
"keyboard": {
"title": "Keyboard Shortcuts",
"selectAll": "Select all nodes",
"selectAllConnected": "Select all connected nodes",
"addRemoveNode": "Add/remove node from selection",

9
red/api/locales/en-US/infotips.json
View File

@ -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.",