Skip to content

Commit b1684e8

Browse files
knollearyknolleary
committed
Dynamically generate keyboard shortcut help dialog
1 parent a55027b commit b1684e8

8 files changed

Lines changed: 87 additions & 67 deletions

File tree

‎editor/js/keymap.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
"ctrl-g c": "core:show-config-tab"
1313
},
1414
"workspace": {
15-
"ctrl-e": "core:export",
16-
"ctrl-i": "core:import",
17-
"backspace": "core:delete",
18-
"delete": "core:delete",
19-
"enter": "core:edit",
20-
"ctrl-c": "core:copy",
21-
"ctrl-x": "core:cut",
22-
"ctrl-v": "core:paste",
15+
"ctrl-e": "core:show-export-dialog",
16+
"ctrl-i": "core:show-import-dialog",
17+
"backspace": "core:delete-selection",
18+
"delete": "core:delete-selection",
19+
"enter": "core:edit-selected-node",
20+
"ctrl-c": "core:copy-selection-to-internal-clipboard",
21+
"ctrl-x": "core:cut-selection-to-internal-clipboard",
22+
"ctrl-v": "core:paste-from-internal-clipboard",
2323
"ctrl-z": "core:undo",
24-
"ctrl-a": "core:select-all",
24+
"ctrl-a": "core:select-all-nodes",
2525
"shift-?": "core:show-help",
2626
"ctrl-space": "core:toggle-sidebar",
2727
"up": "core:move-selection-up",

‎editor/js/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,11 +195,11 @@
195195
]});
196196
menuOptions.push(null);
197197
menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
198-
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:import"},
198+
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
199199
{id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
200200
]});
201201
menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),disabled:true,options:[
202-
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),disabled:true,onselect:"core:export"},
202+
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),disabled:true,onselect:"core:show-export-dialog"},
203203
{id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:"core:library-export"}
204204
]});
205205
menuOptions.push(null);

‎editor/js/ui/clipboard.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,8 +275,8 @@ RED.clipboard = (function() {
275275
}
276276
});
277277

278-
RED.actions.add("core:export",exportNodes);
279-
RED.actions.add("core:import",importNodes);
278+
RED.actions.add("core:show-export-dialog",exportNodes);
279+
RED.actions.add("core:show-import-dialog",importNodes);
280280

281281

282282
$('#chart').on("dragenter",function(event) {

‎editor/js/ui/keyboard.js‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -253,59 +253,68 @@ RED.keyboard = (function() {
253253
delete slot.ondown;
254254
}
255255

256-
var dialog = null;
256+
var shortcutDialog = null;
257257

258258
var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
259259

260260
function showKeyboardHelp() {
261261
if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
262262
return;
263263
}
264-
if (!dialog) {
265-
dialog = $('<div id="keyboard-help-dialog" class="hide">'+
266-
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
267-
'<table class="keyboard-shortcuts">'+
268-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">a</span></td><td>'+RED._("keyboard.selectAll")+'</td></tr>'+
269-
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.selectAllConnected")+'</td></tr>'+
270-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Click</span></td><td>'+RED._("keyboard.addRemoveNode")+'</td></tr>'+
271-
'<tr><td>&nbsp;</td><td></td></tr>'+
272-
'<tr><td><span class="help-key">Enter</span></td><td>'+RED._("keyboard.editSelected")+'</td></tr>'+
273-
'<tr><td><span class="help-key">Delete</span> / <span class="help-key">Backspace</span></td><td>'+RED._("keyboard.deleteSelected")+'</td></tr>'+
274-
'<tr><td>&nbsp;</td><td></td></tr>'+
275-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">i</span></td><td>'+RED._("keyboard.importNode")+'</td></tr>'+
276-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">e</span></td><td>'+RED._("keyboard.exportNode")+'</td></tr>'+
277-
'</table>'+
278-
'</div>'+
279-
'<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
280-
'<table class="keyboard-shortcuts">'+
281-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Space</span></td><td>'+RED._("keyboard.toggleSidebar")+'</td></tr>'+
282-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">f</span></td><td>'+RED._("keyboard.searchBox")+'</td></tr>'+
283-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">Shift</span> + <span class="help-key">p</span></td><td>'+RED._("keyboard.managePalette")+'</td></tr>'+
284-
'<tr><td>&nbsp;</td><td></td></tr>'+
285-
'<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>'+
286-
'<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>'+
287-
'<tr><td>&nbsp;</td><td></td></tr>'+
288-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
289-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">x</span></td><td>'+RED._("keyboard.cutNode")+'</td></tr>'+
290-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">v</span></td><td>'+RED._("keyboard.pasteNode")+'</td></tr>'+
291-
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">z</span></td><td>'+RED._("keyboard.undoChange")+'</td></tr>'+
292-
'</table>'+
293-
'</div>'+
264+
if (!shortcutDialog) {
265+
shortcutDialog = $('<div id="keyboard-help-dialog" class="hide">'+
266+
'<ol id="keyboard-shortcut-list"></ol>'+
294267
'</div>')
295-
.appendTo("body")
296-
.dialog({
268+
.appendTo("body");
269+
270+
var shortcutList = $('#keyboard-shortcut-list').editableList({
271+
addButton: false,
272+
scrollOnAdd: false,
273+
addItem: function(container,i,object) {
274+
var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
275+
276+
var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
277+
key.append(formatKey(object.key));
278+
279+
var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function(_,_,A,_,B,pos) {
280+
if (pos === 0) {
281+
return A.toUpperCase();
282+
} else {
283+
return " "+B.toUpperCase();
284+
}
285+
});
286+
var label = $('<div>').html(text).appendTo(item);
287+
288+
var scope = $('<div class="keyboard-shortcut-entry-scope">').html(object.scope).appendTo(item);
289+
290+
291+
},
292+
});
293+
var shortcuts = RED.actions.list();
294+
shortcuts.sort(function(A,B) {
295+
return A.id.localeCompare(B.id);
296+
});
297+
shortcuts.forEach(function(s) {
298+
if (s.key) {
299+
shortcutList.editableList('addItem',s);
300+
}
301+
})
302+
303+
shortcutDialog.dialog({
297304
modal: true,
298305
autoOpen: false,
299306
width: "800",
300-
title:"Keyboard shortcuts",
307+
height: "400",
308+
title:RED._("keyboard.title"),
301309
resizable: false
302310
});
303311
}
304312

305-
dialog.dialog("open");
313+
shortcutDialog.dialog("open");
306314
}
307315
function formatKey(key) {
308316
var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
317+
formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
309318
formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
310319
formattedKey = formattedKey.replace(/left/,"&#x2190;")
311320
formattedKey = formattedKey.replace(/up/,"&#x2191;")

‎editor/js/ui/view.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -385,13 +385,13 @@ RED.view = (function() {
385385
}
386386
});
387387

388-
RED.actions.add("core:copy",copySelection);
389-
RED.actions.add("core:cut",function(){copySelection();deleteSelection();});
390-
RED.actions.add("core:paste",function(){importNodes(clipboard);});
391-
RED.actions.add("core:delete",deleteSelection);
392-
RED.actions.add("core:edit",editSelection);
388+
RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
389+
RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
390+
RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard);});
391+
RED.actions.add("core:delete-selection",deleteSelection);
392+
RED.actions.add("core:edit-selected-node",editSelection);
393393
RED.actions.add("core:undo",RED.history.pop);
394-
RED.actions.add("core:select-all",selectAll);
394+
RED.actions.add("core:select-all-nodes",selectAll);
395395
RED.actions.add("core:zoom-in",zoomIn);
396396
RED.actions.add("core:zoom-out",zoomOut);
397397
RED.actions.add("core:zoom-reset",zoomZero);

‎editor/sass/keyboard.scss‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,27 @@
1717
#keyboard-help-dialog {
1818
font-size: 0.9em;
1919
}
20-
.keyboard-shortcuts {
21-
padding: 10px;
20+
#keyboard-shortcut-list {
21+
position: absolute;
22+
top:10px;
23+
left:10px;
24+
right:10px;
25+
bottom:10px;
2226
}
23-
.keyboard-shortcuts td {
24-
padding: 7px 5px;
25-
margin-bottom: 10px;
26-
white-space: pre;
27+
.keyboard-shortcut-entry {
28+
padding: 0px 20px 0 10px;
29+
div {
30+
display: inline-block;
31+
}
2732
}
28-
.keyboard-shortcuts td:first-child {
29-
text-align: right;
30-
padding-right: 10px;
33+
.keyboard-shortcut-entry-key {
34+
width:150px;
3135
}
36+
.keyboard-shortcut-entry-scope {
37+
float: right;
38+
color: #999;
39+
}
40+
3241
.help-key {
3342
border: 1px solid #ddd;
3443
padding: 4px;

‎red/api/locales/en-US/editor.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@
188188
}
189189
},
190190
"keyboard": {
191+
"title": "Keyboard Shortcuts",
191192
"selectAll": "Select all nodes",
192193
"selectAllConnected": "Select all connected nodes",
193194
"addRemoveNode": "Add/remove node from selection",

‎red/api/locales/en-US/infotips.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
{
22
"info": {
3-
"tip0" : "You can remove the selected nodes or links with {{core:delete}}",
3+
"tip0" : "You can remove the selected nodes or links with {{core:delete-selection}}",
44
"tip1" : "Search for nodes using {{core:search}}",
55
"tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
66
"tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
77
"tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can been accessed from the menu or with {{core:show-config-tab}}",
88
"tip5" : "Enable or disable these tips from the option in the menu",
99
"tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
1010
"tip7" : "Dragging a node onto a wire will splice it into the link",
11-
"tip8" : "Export the selected nodes, or the current tab with {{core:export}}",
12-
"tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:import}}",
11+
"tip8" : "Export the selected nodes, or the current tab with {{core:show-export-dialog}}",
12+
"tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:show-import-dialog}}",
1313
"tip10" : "[shift] [click] and drag on a node port to move all of the attached wires or just the selected one",
1414
"tip11" : "Show the Info tab with {{core:show-info-tab}} or the Debug tab with {{core:show-debug-tab}}",
1515
"tip12" : "[ctrl] [click] in the workspace to open the quick-add dialog",
1616
"tip13" : "Hold down [ctrl] when you [click] on a node port to enable quick-wiring",
1717
"tip14" : "Hold down [shift] when you [click] on a node to also select all of its connected nodes",
1818
"tip15" : "Hold down [ctrl] when you [click] on a node to add or remove it from the current selection",
1919
"tip16" : "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
20-
"tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}"
20+
"tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}",
21+
"tip18" : "Pressing {{core:edit-selected-node}} will edit the first node in the current selection"
2122
},
2223
"info-tbd": {
2324
"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.",

0 commit comments

Comments
 (0)