diff --git a/public/red/main.js b/public/red/main.js
index cadb8e196..33e54d4ef 100644
--- a/public/red/main.js
+++ b/public/red/main.js
@@ -245,24 +245,6 @@ var RED = (function() {
RED.view.status(statusEnabled);
}
- function showHelp() {
-
- var dialog = $('#node-help');
-
- //$("#node-help").draggable({
- // handle: ".modal-header"
- //});
-
- dialog.on('show',function() {
- RED.keyboard.disable();
- });
- dialog.on('hidden',function() {
- RED.keyboard.enable();
- });
-
- dialog.modal();
- }
-
function changeDeploymentType(type) {
deploymentType = type;
$("#btn-deploy img").attr("src",deploymentTypes[type].img);
@@ -297,7 +279,7 @@ var RED = (function() {
null
]},
null,
- {id:"btn-keyboard-shortcuts",label:"Keyboard Shortcuts",onselect:showHelp},
+ {id:"btn-keyboard-shortcuts",label:"Keyboard Shortcuts",onselect:RED.keyboard.showHelp},
{id:"btn-help",label:"Node-RED Website", href:"http://nodered.org/docs"}
]
});
@@ -361,7 +343,7 @@ var RED = (function() {
RED.clipboard.init();
RED.view.init();
- RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();});
+ RED.keyboard.add(/* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
RED.comms.connect();
loadNodeList();
}
diff --git a/public/red/ui/keyboard.js b/public/red/ui/keyboard.js
index 4792f4f1c..604e5f01c 100644
--- a/public/red/ui/keyboard.js
+++ b/public/red/ui/keyboard.js
@@ -57,12 +57,58 @@ RED.keyboard = (function() {
function removeHandler(key) {
delete handlers[key];
}
-
+
+
+ var dialog = $('
'+
+ '
'+
+ '
'+
+ 'Ctrl + a | Select all nodes |
'+
+ 'Shift + Click | Select all connected nodes |
'+
+ 'Ctrl + Click | Add/remove node from selection |
'+
+ 'Delete | Delete selected nodes or link |
'+
+ ' | |
'+
+ 'Ctrl + i | Import nodes |
'+
+ 'Ctrl + e | Export selected nodes |
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ 'Ctrl + Space | Toggle sidebar |
'+
+ ' | |
'+
+ 'Delete | Delete selected nodes or link |
'+
+ ' | |
'+
+ 'Ctrl + c | Copy selected nodes |
'+
+ 'Ctrl + x | Cut selected nodes |
'+
+ 'Ctrl + v | Paste nodes |
'+
+ '
'+
+ '
'+
+ '
')
+ .appendTo("body")
+ .dialog({
+ modal: true,
+ autoOpen: false,
+ width: "800",
+ title:"Keyboard shortcuts",
+ resizable: false,
+ open: function() {
+ RED.keyboard.disable();
+ },
+ close: function() {
+ RED.keyboard.enable();
+ }
+ });
+
+ function showKeyboardHelp() {
+ dialog.dialog("open");
+ }
+
return {
add: addHandler,
remove: removeHandler,
disable: function(){ active = false;},
- enable: function(){ active = true; }
+ enable: function(){ active = true; },
+
+ showHelp: showKeyboardHelp
}
})();
diff --git a/public/style.css b/public/style.css
index c2b9aae9e..3d1b9c252 100644
--- a/public/style.css
+++ b/public/style.css
@@ -914,13 +914,21 @@ div.node-info {
#node-help {
width: 700px;
}
-#node-help * td {
- padding: 0.8em 0.5em;
+#keyboard-help-dialog {
+ font-size: 0.9em;
}
-#node-help * tr > td:first-child+td+td {
- padding-left: 5em;
+.keyboard-shortcuts {
+ padding: 10px;
+}
+.keyboard-shortcuts td {
+ padding: 7px 5px;
+ margin-bottom: 10px;
+ white-space: pre;
+}
+.keyboard-shortcuts td:first-child {
+ text-align: right;
+ padding-right: 10px;
}
-
.help-key {
border: 1px solid #ddd;
padding: 4px;