Simplify index.mst to a single div to insert the editor

packages/node_modules/@node-red/editor-api/lib/editor/theme.js

@@ -169,6 +169,9 @@ module.exports = {
                 }
             }
         }
+        themeApp.get("/", function(req,res) {
+            res.json(themeContext);
+        })
 
         if (theme.hasOwnProperty("menu")) {
             themeSettings.menu = theme.menu;

packages/node_modules/@node-red/editor-client/src/js/red.js

@@ -433,7 +433,7 @@ var RED = (function() {
         });
     }
 
-    function loadEditor() {
+    function buildMainMenu() {
         var menuOptions = [];
         if (RED.settings.theme("projects.enabled",false)) {
             menuOptions.push({id:"menu-item-projects-menu",label:RED._("menu.label.projects"),options:[
@@ -442,20 +442,7 @@ var RED = (function() {
                 {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"}
             ]});
         }
-
-
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
-            // {id:"menu-item-view-show-grid",setting:"view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"},
-            // {id:"menu-item-view-snap-grid",setting:"view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"},
-            // {id:"menu-item-status",setting:"node-show-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true},
-            //null,
-            // {id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[
-            //     {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.text.bidi.setTextDirection("")}}},
-            //     {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("ltr")}}},
-            //     {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("rtl")}}},
-            //     {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
-            // ]},
-            // null,
             {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
             {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
             {id:"menu-item-event-log",label:RED._("eventLog.title"),onselect:"core:show-event-log"},
@@ -494,6 +481,13 @@ var RED = (function() {
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
 
+        $('<li><a id="btn-sidemenu" class="button" href="#"><i class="fa fa-bars"></i></a></li>').appendTo(".red-ui-header-toolbar")
+        RED.menu.init({id:"btn-sidemenu",options: menuOptions});
+
+    }
+
+    function loadEditor() {
+
         RED.workspaces.init();
         RED.statusBar.init();
         RED.view.init();
@@ -504,6 +498,7 @@ var RED = (function() {
         RED.keyboard.init();
         RED.palette.init();
         RED.eventLog.init();
+
         if (RED.settings.theme('palette.editable') !== false) {
             RED.palette.editor.init();
         } else {
@@ -524,20 +519,50 @@ var RED = (function() {
         RED.editor.init();
         RED.diff.init();
 
-        RED.menu.init({id:"btn-sidemenu",options: menuOptions});
 
         RED.deploy.init(RED.settings.theme("deployButton",null));
 
-        RED.actions.add("core:show-about", showAbout);
+        buildMainMenu();
+
         RED.nodes.init();
         RED.comms.connect();
 
         $("#red-ui-main-container").show();
         $(".red-ui-header-toolbar").show();
 
+        RED.actions.add("core:show-about", showAbout);
+
         loadNodeList();
     }
 
+    function buildEditor(options) {
+        var header = $('<div id="red-ui-header"></div>').appendTo(options.target);
+        var logo = $('<span class="red-ui-header-logo"></span>').appendTo(header);
+        $('<ul class="red-ui-header-toolbar hide"></ul>').appendTo(header);
+        $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
+        $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
+            '<div id="red-ui-workspace"></div>'+
+            '<div id="red-ui-editor-stack"></div>'+
+            '<div id="red-ui-palette"></div>'+
+            '<div id="red-ui-sidebar"></div>'+
+            '<div id="red-ui-sidebar-separator"></div>'+
+        '</div>').appendTo(options.target);
+        $('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
+        $.getJSON(options.apiRootUrl+"theme", function(theme) {
+            if (theme.header) {
+                if (theme.header.url) {
+                    logo = $("<a>",{href:theme.header.url}).appendTo(logo);
+                }
+                if (theme.header.image) {
+                    $('<img>',{src:theme.header.image}).appendTo(logo);
+                }
+                if (theme.header.title) {
+                    $('<span>').html(theme.header.title).appendTo(logo);
+                }
+            }
+        });
+    }
+
     var initialised = false;
 
     function init(options) {
@@ -551,6 +576,8 @@ var RED = (function() {
         if (options.apiRootUrl && !/\/$/.test(options.apiRootUrl)) {
             options.apiRootUrl = options.apiRootUrl+"/";
         }
+        options.target = $("#red-ui-editor");
+        buildEditor(options);
         RED.i18n.init(options, function() {
             RED.settings.init(options, loadEditor);
         })

packages/node_modules/@node-red/editor-client/src/js/settings.js

@@ -131,7 +131,7 @@ RED.settings = (function () {
                     RED.settings.remove("auth-tokens");
                 }
                 console.log("Node-RED: " + data.version);
-                console.group("Versions");
+                console.groupCollapsed("Versions");
                 console.log("jQuery",$().jquery)
                 console.log("jQuery UI",$.ui.version);
                 console.log("ACE",ace.version);

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -150,13 +150,29 @@ RED.menu = (function() {
 
     }
     function createMenu(options) {
-        var topMenu = $("<ul/>",{class:"dropdown-menu pull-right"});
+        var topMenu = $("<ul/>",{class:"red-ui-menu dropdown-menu pull-right"});
 
         if (options.id) {
             topMenu.attr({id:options.id+"-submenu"});
             var menuParent = $("#"+options.id);
             if (menuParent.length === 1) {
                 topMenu.insertAfter(menuParent);
+                menuParent.on("click", function(evt) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    if (topMenu.is(":visible")) {
+                        $(document).off("click.red-ui-menu");
+                        topMenu.hide();
+                    } else {
+                        $(document).on("click.red-ui-menu", function(evt) {
+                            $(document).off("click.red-ui-menu");
+                            activeMenu = null;
+                            topMenu.hide();
+                        });
+                        $(".red-ui-menu").hide();
+                        topMenu.show();
+                    }
+                })
             }
         }
 

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -136,7 +136,7 @@ RED.tabs = (function() {
                             }
                         });
                         options = pinnedOptions.concat(options);
-                        collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
+                        collapsibleMenu = RED.menu.init({options: options});
                         collapsibleMenu.css({
                             position: "absolute"
                         })
@@ -150,6 +150,7 @@ RED.tabs = (function() {
                     if (collapsibleMenu.is(":visible")) {
                         $(document).off("click.tabmenu");
                     } else {
+                        $(".red-ui-menu").hide();
                         $(document).on("click.tabmenu", function(evt) {
                             $(document).off("click.tabmenu");
                             collapsibleMenu.hide();
@@ -448,7 +449,10 @@ RED.tabs = (function() {
             }
             delete tabs[id];
             updateTabWidths();
-            collapsibleMenu = null;
+            if (collapsibleMenu) {
+                collapsibleMenu.remove();
+                collapsibleMenu = null;
+            }
         }
 
         return {
@@ -626,7 +630,10 @@ RED.tabs = (function() {
                 setTimeout(function() {
                     updateTabWidths();
                 },10);
-                collapsibleMenu = null;
+                if (collapsibleMenu) {
+                    collapsibleMenu.remove();
+                    collapsibleMenu = null;
+                }
             },
             removeTab: removeTab,
             activateTab: activateTab,

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -61,7 +61,7 @@ RED.deploy = (function() {
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '<a id="btn-deploy-options" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
               RED.menu.init({id:"btn-deploy-options",
                   options: [

packages/node_modules/@node-red/editor-client/src/js/ui/library.js

@@ -202,86 +202,89 @@ RED.library = (function() {
         // Add the library button to the name <input> in the edit dialog
         $('#'+elementPrefix+"name").css("width","calc(100% - 52px)").after(
             '<div class="btn-group" style="margin-left:5px;">'+
-            '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
+            '<a id="node-input-'+options.type+'-lookup" class="editor-button"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
-            '<ul class="dropdown-menu pull-right" role="menu">'+
+            '</div>'
-            '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
+
-            '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+
+            // '<ul class="dropdown-menu pull-right" role="menu">'+
-            '</ul></div>'
+            // '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
+            // '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+
+            // '</ul></div>'
         );
+        RED.menu.init({id:'node-input-'+options.type+'-lookup', options: [
+            { id:'node-input-'+options.type+'-menu-open-library',
+                label: RED._("library.openLibrary"),
+                onselect: function() {
+                    activeLibrary = options;
+                    loadLibraryFolder("local",options.url, "", function(items) {
+                        var listing = [{
+                            library: "local",
+                            type: options.url,
+                            icon: 'fa fa-hdd-o',
+                            label: RED._("library.types.local"),
+                            path: "",
+                            expanded: true,
+                            writable: false,
+                            children: [{
+                                icon: 'fa fa-cube',
+                                label: options.type,
+                                path: options.type+"/",
+                                expanded: true,
+                                children: items
+                            }]
+                        }]
+                        loadLibraryBrowser.data(listing);
+                    });
+                    libraryEditor = ace.edit('node-dialog-library-load-preview-text',{
+                        useWorker: false
+                    });
+                    libraryEditor.setTheme("ace/theme/tomorrow");
+                    if (options.mode) {
+                        libraryEditor.getSession().setMode(options.mode);
+                    }
+                    libraryEditor.setOptions({
+                        readOnly: true,
+                        highlightActiveLine: false,
+                        highlightGutterLine: false
+                    });
+                    libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
+                    libraryEditor.$blockScrolling = Infinity;
 
-        $('#node-input-'+options.type+'-menu-open-library').on("click", function(e) {
+                    $( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
-            activeLibrary = options;
+                }
-            loadLibraryFolder("local",options.url, "", function(items) {
+            },
-                var listing = [{
+            { id:'node-input-'+options.type+'-menu-save-library',
-                    library: "local",
+                label: RED._("library.saveToLibrary"),
-                    type: options.url,
+                onselect: function() {
-                    icon: 'fa fa-hdd-o',
+                    activeLibrary = options;
-                    label: RED._("library.types.local"),
+                    //var found = false;
-                    path: "",
+                    var name = $("#"+elementPrefix+"name").val().replace(/(^\s*)|(\s*$)/g,"");
-                    expanded: true,
+                    var filename = name.replace(/[^\w-]/g,"-");
-                    writable: false,
+                    if (filename === "") {
-                    children: [{
+                        filename = "unnamed-"+options.type;
-                        icon: 'fa fa-cube',
+                    }
-                        label: options.type,
+                    $("#node-dialog-library-save-filename").attr("value",filename+".js");
-                        path: options.type+"/",
+
-                        expanded: true,
+                    loadLibraryFolder("local",options.url, "", function(items) {
-                        children: items
+                        var listing = [{
-                    }]
+                            icon: 'fa fa-archive',
-                }]
+                            label: RED._("library.types.local"),
-                loadLibraryBrowser.data(listing);
+                            path: "",
-            });
+                            expanded: true,
-            libraryEditor = ace.edit('node-dialog-library-load-preview-text',{
+                            writable: false,
-                useWorker: false
+                            children: [{
-            });
+                                icon: 'fa fa-cube',
-            libraryEditor.setTheme("ace/theme/tomorrow");
+                                label: options.type,
-            if (options.mode) {
+                                path: options.type+"/",
-                libraryEditor.getSession().setMode(options.mode);
+                                expanded: true,
+                                children: items
+                            }]
+                        }]
+                        saveLibraryBrowser.data(listing);
+                    });
+                    $( "#node-dialog-library-save" ).dialog( "open" );
+                }
             }
-            libraryEditor.setOptions({
+        ]})
-                readOnly: true,
-                highlightActiveLine: false,
-                highlightGutterLine: false
-            });
-            libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
-            libraryEditor.$blockScrolling = Infinity;
-
-            $( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
-            e.preventDefault();
-        });
-
-        $('#node-input-'+options.type+'-menu-save-library').on("click", function(e) {
-            activeLibrary = options;
-            //var found = false;
-            var name = $("#"+elementPrefix+"name").val().replace(/(^\s*)|(\s*$)/g,"");
-            var filename = name.replace(/[^\w-]/g,"-");
-            if (filename === "") {
-                filename = "unnamed-"+options.type;
-            }
-            $("#node-dialog-library-save-filename").attr("value",filename+".js");
-
-            loadLibraryFolder("local",options.url, "", function(items) {
-                var listing = [{
-                    icon: 'fa fa-archive',
-                    label: RED._("library.types.local"),
-                    path: "",
-                    expanded: true,
-                    writable: false,
-                    children: [{
-                        icon: 'fa fa-cube',
-                        label: options.type,
-                        path: options.type+"/",
-                        expanded: true,
-                        children: items
-                    }]
-                }]
-                saveLibraryBrowser.data(listing);
-            });
-
-            $( "#node-dialog-library-save" ).dialog( "open" );
-            e.preventDefault();
-        });
-
-
     }
 
     function exportFlow() {

packages/node_modules/@node-red/editor-client/src/js/ui/tray.js

@@ -16,7 +16,7 @@
 RED.tray = (function() {
 
     var stack = [];
-    var editorStack = $("#red-ui-editor-stack");
+    var editorStack;
     var openingTray = false;
 
     function resize() {
@@ -203,6 +203,7 @@ RED.tray = (function() {
 
     return {
         init: function init() {
+            editorStack = $("#red-ui-editor-stack");
             $(window).on("resize", handleWindowResize);
             RED.events.on("sidebar:resize",handleWindowResize);
             $("#editor-shade").on("click", function() {

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -107,8 +107,8 @@ RED.workspaces = (function() {
                             changed = true;
                             workspace.info = info;
                         }
-                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled);
+                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
-                        $("#red-ui-workspace").toggleClass("workspace-disabled",!!workspace.disabled);
+                        $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
 
                         if (changed) {
                             var historyEvent = {
@@ -250,7 +250,7 @@ RED.workspaces = (function() {
                 event.workspace = activeWorkspace;
                 RED.events.emit("workspace:change",event);
                 window.location.hash = 'flow/'+tab.id;
-                $("#red-ui-workspace").toggleClass("workspace-disabled",!!tab.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
                 RED.sidebar.config.refresh();
                 RED.view.focus();
             },
@@ -268,9 +268,9 @@ RED.workspaces = (function() {
                 if (tab.type === "tab") {
                     workspaceTabCount++;
                 }
-                $('<span class="workspace-disabled-icon"><i class="fa fa-ban"></i> </span>').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
+                $('<span class="red-ui-workspace-disabled-icon"><i class="fa fa-ban"></i> </span>').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
                 if (tab.disabled) {
-                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('workspace-disabled');
+                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-disabled');
                 }
                 RED.menu.setDisabled("menu-item-workspace-delete",workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {

packages/node_modules/@node-red/editor-client/src/js/user.js

@@ -213,7 +213,7 @@ RED.user = (function() {
         if (RED.settings.user) {
             if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) {
 
-                var userMenu = $('<li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"></a></li>')
+                var userMenu = $('<li><a id="btn-usermenu" class="button hide" href="#"></a></li>')
                     .prependTo(".red-ui-header-toolbar");
                 if (RED.settings.user.image) {
                     $('<span class="user-profile"></span>').css({

packages/node_modules/@node-red/editor-client/src/sass/header.scss

@@ -55,6 +55,9 @@ $headerMenuItemDivider: #464646;
         span {
             vertical-align: middle;
             font-size: 16px !important;
+            &:not(:first-child) {
+                margin-left: 5px;
+            }
         }
         img {
             height: 18px;

packages/node_modules/@node-red/editor-client/src/sass/library.scss

@@ -14,24 +14,6 @@
  * limitations under the License.
  **/
 
-#node-select-library {
-    overflow: hidden;
-}
-#node-select-library ul {
-    list-style: none;
-    padding: 0px;
-    margin: 2px;
-}
-#node-select-library li {
-    cursor: pointer;
-}
-#node-select-library li.list-selected {
-    background: #eee;
-}
-#node-select-library li.list-hover {
-    background: #ffffd0;
-}
-
 .clipboard-import-error {
     pre {
         margin: 10px 0;

packages/node_modules/@node-red/editor-client/src/sass/style.scss

@@ -76,7 +76,7 @@ body {
 
 #red-ui-editor {
     position: absolute;
-    top: 100px; left: 100px; bottom: 100px; right: 100px;
+    top: 0; left: 0; bottom: 0; right: 0;
 }
 
 #red-ui-main-container {

packages/node_modules/@node-red/editor-client/src/sass/workspace.scss

@@ -74,10 +74,10 @@
         color:#666;
     }
 }
-.workspace-disabled-icon {
+.red-ui-workspace-disabled-icon {
     display: none;
 }
-.workspace-disabled {
+.red-ui-workspace-disabled {
     &.red-ui-tab {
         border-top-style: dashed;
         border-left-style: dashed;
@@ -91,7 +91,7 @@
             font-weight: normal;
             color: #999 !important;
         }
-        .workspace-disabled-icon {
+        .red-ui-workspace-disabled-icon {
             display: inline;
         }
     }

packages/node_modules/@node-red/editor-client/templates/index.mst

@@ -32,28 +32,9 @@
 {{#page.css}}
 <link rel="stylesheet" href="{{.}}">
 {{/page.css}}
-
 </head>
 <body spellcheck="false">
-<div id="red-ui-editor">
+<div id="red-ui-editor"></div>
-    <div id="red-ui-header">
-        <span class="red-ui-header-logo">{{#header.url}}<a href="{{.}}">{{/header.url}}{{#header.image}}<img src="{{.}}">{{/header.image}} <span>{{ header.title }}</span>{{#header.url}}</a>{{/header.url}}</span>
-        <ul class="red-ui-header-toolbar hide">
-            <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
-        </ul>
-        <div id="red-ui-header-shade" class="hide"></div>
-    </div>
-    <div id="red-ui-main-container" class="red-ui-sidebar-closed hide">
-        <div id="red-ui-workspace"></div>
-        <div id="red-ui-editor-stack"></div>
-        <div id="red-ui-palette"></div>
-        <div id="red-ui-sidebar"></div>
-
-        <div id="red-ui-sidebar-separator"></div>
-    </div>
-    <div id="red-ui-full-shade" class="hide"></div>
-</div>
-
 <script src="vendor/vendor.js"></script>
 <script src="vendor/jsonata/jsonata.min.js"></script>
 <script src="vendor/ace/ace.js"></script>