mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Move keyboard shortcut dialog to keyboard module
This commit is contained in:
Nick O'Leary
parent
51e891ff88
commit
1c2be579d9
@ -107,57 +107,6 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="node-help" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="node-help-label" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<h5 id="node-help-label">Keyboard Shortcuts <span style="float: right;"><a href="http://nodered.org/docs" target="_blank">Open help in new window »</a></span></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<td><span class="help-key">?</span></td><td>Help</td>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">a</span></td><td>Select all nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">Space</span></td><td>Toggle sidebar</td>
|
||||
<td><span class="help-key">Shift</span> <span class="help-key">Click</span></td><td>Select all connected nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">z</span></td><td>Undo</td>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">Click</span></td><td>Add/remove node from selection</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td><td></td>
|
||||
<td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">x</span></td><td>Cut selected nodes</td>
|
||||
<td></td><td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">c</span></td><td>Copy selected nodes</td>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">v</span></td><td>Paste nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">i</span></td><td>Import nodes</td>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">e</span></td><td>Export selected nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">+</span></td><td>Zoom in</td>
|
||||
<td><span class="help-key">Ctrl</span> <span class="help-key">-</span></td><td>Zoom out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">Mac users can use the <b>⌘ - Cmd</b> key rather than Ctrl key.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="node-dialog-library-save-confirm" class="hide">
|
||||
<form class="form-horizontal">
|
||||
<div style="text-align: center; padding-top: 30px;">
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -58,11 +58,57 @@ RED.keyboard = (function() {
|
||||
delete handlers[key];
|
||||
}
|
||||
|
||||
|
||||
var 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><span class="help-key">Ctrl</span> + <span class="help-key">a</span></td><td>Select all nodes</td></tr>'+
|
||||
'<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>Select all connected nodes</td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">Click</span></td><td>Add/remove node from selection</td></tr>'+
|
||||
'<tr><td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td></tr>'+
|
||||
'<tr><td> </td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">i</span></td><td>Import nodes</td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">e</span></td><td>Export selected nodes</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><span class="help-key">Ctrl</span> + <span class="help-key">Space</span></td><td>Toggle sidebar</td></tr>'+
|
||||
'<tr><td></td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">Delete</span></td><td>Delete selected nodes or link</td></tr>'+
|
||||
'<tr><td></td><td></td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">c</span></td><td>Copy selected nodes</td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">x</span></td><td>Cut selected nodes</td></tr>'+
|
||||
'<tr><td><span class="help-key">Ctrl</span> + <span class="help-key">v</span></td><td>Paste nodes</td></tr>'+
|
||||
'</table>'+
|
||||
'</div>'+
|
||||
'</div>')
|
||||
.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
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user