Seperated info messages to their own file

auto detect size still needs work

editor/js/i18n.js

@@ -23,7 +23,7 @@ RED.i18n = (function() {
                 dynamicLoad: false,
                 load:'current',
                 ns: {
-                    namespaces: ["editor","node-red"],
+                    namespaces: ["editor","node-red","infotips"],
                     defaultNs: "editor"
                 },
                 fallbackLng: ['en-US'],

editor/js/ui/tab-info.js

@@ -127,7 +127,6 @@ RED.sidebar.info = (function() {
             //$('<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
         }
 
-
         $(".node-info-property-header").click(function(e) {
             var icon = $(this).find("i");
             if (icon.hasClass("fa-caret-right")) {
@@ -146,8 +145,14 @@ RED.sidebar.info = (function() {
         });
     }
 
+    var infotimeout;
     function clear() {
-        $(content).html("");
+        //$(content).html("");
+        if (!infotimeout) {
+            var r = parseInt(Math.random() * RED._("infotips:infoLength"));
+            $(content).html('<div class="node-info-tip">'+RED._("infotips:info.tip"+r)+'</div>');
+            infotimeout = setTimeout(function() { infotimeout=null; }, 20000);
+        }
     }
 
     function set(html) {

editor/sass/tab-info.scss

@@ -81,3 +81,21 @@ div.node-info {
         margin: 8px auto;
     }
 }
+.node-info-tip {
+    margin: 10px;
+    margin-top: 30px;
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 18px;
+    text-align: center;
+    color : #aaa;
+    background-color: #fff;
+    code {
+        font-size: 16px;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 700;
+        padding: 3px 8px 3px 8px;
+        border-radius: 4px;
+        color: #aaa;
+    }
+}

red/api/index.js

@@ -155,7 +155,7 @@ function init(_server,_runtime) {
     }
 }
 function start() {
-    return i18n.registerMessageCatalog("editor",path.resolve(path.join(__dirname,"locales")),"editor.json").then(function(){
+    return i18n.registerMessageCatalog("editor",path.resolve(path.join(__dirname,"locales")),"editor.json").then(i18n.registerMessageCatalog("infotips",path.resolve(path.join(__dirname,"locales")),"infotips.json")).then(function() {
         comms.start();
     });
 }

red/api/info.js

@@ -42,13 +42,13 @@ module.exports = {
         if (settings.flowFilePretty) {
             safeSettings.flowFilePretty = settings.flowFilePretty;
         }
+
         if (!runtime.nodes.paletteEditorEnabled()) {
             safeSettings.editorTheme = safeSettings.editorTheme || {};
             safeSettings.editorTheme.palette = safeSettings.editorTheme.palette || {};
             safeSettings.editorTheme.palette.editable = false;
         }
 
-
         res.json(safeSettings);
     }
 }

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

@@ -0,0 +1,16 @@
+{
+    "info": {
+        "tip0" : "Use the <code>delete</code> key to remove a node.",
+        "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>",
+        "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.",
+        "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.",
+        "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.",
+        "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>"
+    },
+    "infoLength": "11"
+}