1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

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

This commit is contained in:
Nick O'Leary 2019-05-02 16:09:13 +01:00
parent 8dc1ad8168
commit 5b1defad9f
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
15 changed files with 171 additions and 148 deletions

View File

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

View File

@ -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);
})

View File

@ -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);

View File

@ -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();
}
})
}
}

View File

@ -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,

View File

@ -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: [

View File

@ -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>'+
'<ul class="dropdown-menu pull-right" role="menu">'+
'<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>'
'<a id="node-input-'+options.type+'-lookup" class="editor-button"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
'</div>'
// '<ul class="dropdown-menu pull-right" role="menu">'+
// '<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) {
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);
$( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
}
},
{ id:'node-input-'+options.type+'-menu-save-library',
label: RED._("library.saveToLibrary"),
onselect: function() {
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" );
}
}
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() {

View File

@ -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() {

View File

@ -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-workspace").toggleClass("workspace-disabled",!!workspace.disabled);
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-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) {

View File

@ -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({

View File

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

View File

@ -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;

View File

@ -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 {

View File

@ -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;
}
}

View File

@ -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-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>
<div id="red-ui-editor"></div>
<script src="vendor/vendor.js"></script>
<script src="vendor/jsonata/jsonata.min.js"></script>
<script src="vendor/ace/ace.js"></script>