mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Info-tips update
This commit is contained in:
parent
59ffacb3df
commit
555f96cfaf
@ -15,6 +15,8 @@
|
|||||||
**/
|
**/
|
||||||
RED.keyboard = (function() {
|
RED.keyboard = (function() {
|
||||||
|
|
||||||
|
var isMac = /Mac/i.test(window.navigator.platform);
|
||||||
|
|
||||||
var handlers = {};
|
var handlers = {};
|
||||||
var partialState;
|
var partialState;
|
||||||
|
|
||||||
@ -253,7 +255,6 @@ RED.keyboard = (function() {
|
|||||||
|
|
||||||
var dialog = null;
|
var dialog = null;
|
||||||
|
|
||||||
var isMac = /Mac/i.test(window.navigator.platform);
|
|
||||||
var cmdCtrlKey = '<span class="help-key">'+(isMac?'⌘':'Ctrl')+'</span>';
|
var cmdCtrlKey = '<span class="help-key">'+(isMac?'⌘':'Ctrl')+'</span>';
|
||||||
|
|
||||||
function showKeyboardHelp() {
|
function showKeyboardHelp() {
|
||||||
@ -281,7 +282,7 @@ RED.keyboard = (function() {
|
|||||||
'<tr><td>'+cmdCtrlKey+' + <span class="help-key">f</span></td><td>'+RED._("keyboard.searchBox")+'</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>'+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> </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">←</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><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> </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">c</span></td><td>'+RED._("keyboard.copyNode")+'</td></tr>'+
|
||||||
@ -303,6 +304,15 @@ RED.keyboard = (function() {
|
|||||||
|
|
||||||
dialog.dialog("open");
|
dialog.dialog("open");
|
||||||
}
|
}
|
||||||
|
function formatKey(key) {
|
||||||
|
var formattedKey = isMac?key.replace(/ctrl-?/,"⌘"):key;
|
||||||
|
formattedKey = formattedKey.replace(/shift-?/,"⇧")
|
||||||
|
formattedKey = formattedKey.replace(/left/,"←")
|
||||||
|
formattedKey = formattedKey.replace(/up/,"↑")
|
||||||
|
formattedKey = formattedKey.replace(/right/,"→")
|
||||||
|
formattedKey = formattedKey.replace(/down/,"↓")
|
||||||
|
return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
init: init,
|
init: init,
|
||||||
@ -310,7 +320,8 @@ RED.keyboard = (function() {
|
|||||||
remove: removeHandler,
|
remove: removeHandler,
|
||||||
getShortcut: function(actionName) {
|
getShortcut: function(actionName) {
|
||||||
return actionToKeyMap[actionName];
|
return actionToKeyMap[actionName];
|
||||||
}
|
},
|
||||||
|
formatKey: formatKey
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
@ -67,6 +67,7 @@ RED.sidebar.info = (function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function refresh(node) {
|
function refresh(node) {
|
||||||
|
tips.stop();
|
||||||
$(content).empty();
|
$(content).empty();
|
||||||
var table = $('<table class="node-info"></table>');
|
var table = $('<table class="node-info"></table>');
|
||||||
var tableBody = $('<tbody>').appendTo(table);
|
var tableBody = $('<tbody>').appendTo(table);
|
||||||
@ -145,20 +146,76 @@ RED.sidebar.info = (function() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var infotimeout;
|
|
||||||
function clear() {
|
var tips = (function() {
|
||||||
//$(content).html("");
|
var startDelay = 2000;
|
||||||
if (!infotimeout) {
|
var cycleDelay = 10000;
|
||||||
var r = parseInt(Math.random() * RED._("infotips:infoLength"));
|
var startTimeout;
|
||||||
$(content).html('<div class="node-info-tip">'+RED._("infotips:info.tip"+r)+'</div>');
|
var refreshTimeout;
|
||||||
infotimeout = setTimeout(function() { infotimeout=null; }, 20000);
|
var tipCount = -1;
|
||||||
|
|
||||||
|
|
||||||
|
function setTip() {
|
||||||
|
|
||||||
|
var r = Math.floor(Math.random() * tipCount);
|
||||||
|
var tip = RED._("infotips:info.tip"+r);
|
||||||
|
|
||||||
|
var m;
|
||||||
|
while ((m=/({{(.*?)}})/.exec(tip))) {
|
||||||
|
var shortcut = RED.keyboard.getShortcut(m[2]);
|
||||||
|
if (shortcut) {
|
||||||
|
tip = tip.replace(m[1],RED.keyboard.formatKey(shortcut.key));
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
while ((m=/(\[(.*?)\])/.exec(tip))) {
|
||||||
|
tip = tip.replace(m[1],RED.keyboard.formatKey(m[2]));
|
||||||
|
}
|
||||||
|
$('<div class="node-info-tip hide">'+tip+'</div>').appendTo(content).fadeIn(200);
|
||||||
|
if (startTimeout) {
|
||||||
|
startTimeout = null;
|
||||||
|
refreshTimeout = setInterval(cycleTips,cycleDelay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function cycleTips() {
|
||||||
|
$(".node-info-tip").fadeOut(300,function() {
|
||||||
|
$(this).remove();
|
||||||
|
setTip();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
start: function() {
|
||||||
|
if (!startTimeout && !refreshTimeout) {
|
||||||
|
$(content).html("");
|
||||||
|
if (tipCount === -1) {
|
||||||
|
do {
|
||||||
|
tipCount++;
|
||||||
|
} while(RED._("infotips:info.tip"+tipCount)!=="infotips:info.tip"+tipCount);
|
||||||
|
}
|
||||||
|
startTimeout = setTimeout(setTip,startDelay);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stop: function() {
|
||||||
|
clearInterval(refreshTimeout);
|
||||||
|
clearTimeout(startTimeout);
|
||||||
|
refreshTimeout = null;
|
||||||
|
startTimeout = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
tips.start();
|
||||||
|
}
|
||||||
|
|
||||||
function set(html) {
|
function set(html) {
|
||||||
|
tips.stop();
|
||||||
$(content).html(html);
|
$(content).html(html);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
RED.events.on("view:selection-changed",function(selection) {
|
RED.events.on("view:selection-changed",function(selection) {
|
||||||
if (selection.nodes) {
|
if (selection.nodes) {
|
||||||
if (selection.nodes.length == 1) {
|
if (selection.nodes.length == 1) {
|
||||||
|
@ -37,4 +37,6 @@
|
|||||||
font-family: Courier, monospace;
|
font-family: Courier, monospace;
|
||||||
box-shadow: #999 1px 1px 1px;
|
box-shadow: #999 1px 1px 1px;
|
||||||
}
|
}
|
||||||
|
.help-key-block {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
@ -82,20 +82,17 @@ div.node-info {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.node-info-tip {
|
.node-info-tip {
|
||||||
margin: 10px;
|
position: absolute;
|
||||||
margin-top: 30px;
|
top: 40%;
|
||||||
border-radius: 6px;
|
left:0;
|
||||||
padding: 12px;
|
right:0;
|
||||||
font-size: 18px;
|
padding: 20px;
|
||||||
text-align: center;
|
|
||||||
color : #aaa;
|
|
||||||
background-color: #fff;
|
|
||||||
code {
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
text-align: center;
|
||||||
font-weight: 700;
|
line-height: 1.9em;
|
||||||
padding: 3px 8px 3px 8px;
|
color : #bbb;
|
||||||
border-radius: 4px;
|
background-color: #fff;
|
||||||
color: #aaa;
|
@include disable-selection;
|
||||||
}
|
cursor: default;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,16 +1,32 @@
|
|||||||
{
|
{
|
||||||
"info": {
|
"info": {
|
||||||
"tip0" : "Use the <code>delete</code> key to remove a node.",
|
"tip0" : "You can remove the selected nodes or links with {{core:delete}}",
|
||||||
|
"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}}",
|
||||||
|
"tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can been accessed from the menu or with {{core:show-config-tab}}",
|
||||||
|
"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}}",
|
||||||
|
"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",
|
||||||
|
"tip13" : "Hold down [ctrl] when you [click] on a node port to enable quick-wiring",
|
||||||
|
"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}}"
|
||||||
|
},
|
||||||
|
"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.",
|
"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.",
|
||||||
"tip2" : "Options like <b>Show grid</b> and <b>Snap to grid</b> are under the menu icon<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>View</b>",
|
"tip2" : "Options like <b>Show grid</b> and <b>Snap to grid</b> are under the menu icon<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>View</b>",
|
||||||
"tip3" : "<code>ctrl .</code> or <code>⌘ .</code> can be used to search for nodes and tabs.",
|
|
||||||
"tip4" : "<i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Manage palette</b> can be used to find, add and remove extra nodes.",
|
"tip4" : "<i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Manage palette</b> can be used to find, add and remove extra nodes.",
|
||||||
"tip5" : "Nodes may install examples under<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Import</b> <i class='fa fa-caret-right'></i> <b>Examples</b>",
|
"tip5" : "Nodes may install examples under<br/><i class='fa fa-bars'></i> <i class='fa fa-caret-right'></i> <b>Import</b> <i class='fa fa-caret-right'></i> <b>Examples</b>",
|
||||||
"tip6" : "Lots of example flows can be found on <a href='http://flows.nodered.org' target='_blank'>flows.nodered.org</a><br/>They can then be imported by drag and drop to the workspace.",
|
"tip6" : "Lots of example flows can be found on <a href='http://flows.nodered.org' target='_blank'>flows.nodered.org</a><br/>They can then be imported by drag and drop to the workspace.",
|
||||||
"tip7" : "<b>Shift-click and drag</b> on a connector to move all the attached wires in one go.",
|
"tip7" : "<b>Shift-click and drag</b> on a connector to move all the attached wires in one go.",
|
||||||
"tip8" : "The <b>Node-RED Dashboard</b> package can be used to create simple User Interfaces.",
|
"tip8" : "The <b>Node-RED Dashboard</b> package can be used to create simple User Interfaces.",
|
||||||
"tip9" : "<code>ctrl</code><code>space</code> will toggle the view of this sidebar.",
|
|
||||||
"tip10": "Got a question?<br/>Join us on <a href='https://node-red.slack.com/' target='_blank'>Slack</a><br/>or the<br/><a href='https://groups.google.com/forum/#!forum/node-red' target='_blank'>Node-RED Google group</a>"
|
"tip10": "Got a question?<br/>Join us on <a href='https://node-red.slack.com/' target='_blank'>Slack</a><br/>or the<br/><a href='https://groups.google.com/forum/#!forum/node-red' target='_blank'>Node-RED Google group</a>"
|
||||||
},
|
}
|
||||||
"infoLength": "11"
|
|
||||||
}
|
}
|
||||||
|
@ -24,6 +24,13 @@ var defaultLang = "en-US";
|
|||||||
var resourceMap = {};
|
var resourceMap = {};
|
||||||
var resourceCache = {};
|
var resourceCache = {};
|
||||||
|
|
||||||
|
function registerMessageCatalogs(catalogs) {
|
||||||
|
var promises = catalogs.map(function(catalog) {
|
||||||
|
return registerMessageCatalog(catalog.namespace,catalog.dir,catalog.file);
|
||||||
|
});
|
||||||
|
return when.settle(promises);
|
||||||
|
}
|
||||||
|
|
||||||
function registerMessageCatalog(namespace,dir,file) {
|
function registerMessageCatalog(namespace,dir,file) {
|
||||||
return when.promise(function(resolve,reject) {
|
return when.promise(function(resolve,reject) {
|
||||||
resourceMap[namespace] = { basedir:dir, file:file};
|
resourceMap[namespace] = { basedir:dir, file:file};
|
||||||
@ -109,6 +116,7 @@ function getCatalog(namespace,lang) {
|
|||||||
var obj = module.exports = {
|
var obj = module.exports = {
|
||||||
init: init,
|
init: init,
|
||||||
registerMessageCatalog: registerMessageCatalog,
|
registerMessageCatalog: registerMessageCatalog,
|
||||||
|
registerMessageCatalogs: registerMessageCatalogs,
|
||||||
catalog: getCatalog,
|
catalog: getCatalog,
|
||||||
i: i18n,
|
i: i18n,
|
||||||
defaultLang: defaultLang
|
defaultLang: defaultLang
|
||||||
|
Loading…
Reference in New Issue
Block a user