frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Move type-library dialogs to new treeList style

Browse Source
This commit is contained in:
Nick O'Leary 2019-04-23 15:46:15 +01:00
parent 3263008379
commit 6f37d5ca5c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
7 changed files with 108 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/js/red.js vendored
View File

@ -464,7 +464,7 @@ var RED = (function() {
menuOptions.push(null); menuOptions.push(null);
menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[ menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"}, {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
{id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]} {id:"menu-item-import-library",label:RED._("menu.label.library"),onselect:"core:library-import"}
]}); ]});
menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),options:[ menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),options:[
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-export-dialog"}, {id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-export-dialog"},

25
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -71,7 +71,10 @@ RED.clipboard = (function() {
$( this ).dialog( "close" ); $( this ).dialog( "close" );
} else { } else {
var flowToExport = $("#clipboard-export").val(); var flowToExport = $("#clipboard-export").val();
var selectedPath = libraryBrowser.getPath(); var selectedPath = libraryBrowser.getSelected();
if (!selectedPath.children) {
selectedPath = selectedPath.parent;
}
var filename = $("#clipboard-dialog-tab-library-name").val().trim(); var filename = $("#clipboard-dialog-tab-library-name").val().trim();
var saveFlow = function() { var saveFlow = function() {
$.ajax({ $.ajax({
@ -80,7 +83,6 @@ RED.clipboard = (function() {
data: flowToExport, data: flowToExport,
contentType: "application/json; charset=utf-8" contentType: "application/json; charset=utf-8"
}).done(function() { }).done(function() {
// RED.library.loadFlowLibrary();
$(dialog).dialog( "close" ); $(dialog).dialog( "close" );
RED.notify(RED._("library.exportedToLibrary"),"success"); RED.notify(RED._("library.exportedToLibrary"),"success");
}).fail(function(xhr,textStatus,err) { }).fail(function(xhr,textStatus,err) {
@ -409,7 +411,7 @@ RED.clipboard = (function() {
container: $("#clipboard-dialog-export-tab-library-browser"), container: $("#clipboard-dialog-export-tab-library-browser"),
addFolderButton: true, addFolderButton: true,
onselect: function(file) { onselect: function(file) {
if (file && file.label) { if (file && file.label && !file.children) {
$("#clipboard-dialog-tab-library-name").val(file.label); $("#clipboard-dialog-tab-library-name").val(file.label);
} }
} }
@ -421,17 +423,17 @@ RED.clipboard = (function() {
label: label, label: label,
path: root path: root
}; };
result.children = [];
if (list.f) { if (list.f) {
result.files = list.f.map(function(f) { list.f.forEach(function(f) {
return { result.children.push({
icon: 'fa fa-file-o', icon: 'fa fa-file-o',
label: f, label: f,
path: root+f path: root+f
} });
}); });
} }
result.children = [];
if (list.d) { if (list.d) {
for (var l in list.d) { for (var l in list.d) {
if (list.d.hasOwnProperty(l)) { if (list.d.hasOwnProperty(l)) {
@ -441,6 +443,15 @@ RED.clipboard = (function() {
} }
} }
} }
result.children.sort(function(A,B){
if (A.children && !B.children) {
return -1;
} else if (!A.children && B.children) {
return 1;
} else {
return A.label.localeCompare(B.label);
}
});
return result; return result;
} }

1
packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js vendored
View File

@ -263,6 +263,5 @@ RED.menu = (function() {
addItem: addItem, addItem: addItem,
removeItem: removeItem, removeItem: removeItem,
setAction: setAction setAction: setAction
//TODO: add an api for replacing a submenu - see library.js:loadFlowLibrary
} }
})(); })();

7
packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js vendored
View File

@ -73,7 +73,7 @@
this.data(this.options.data); this.data(this.options.data);
} }
}, },
_addChildren: function(container,children,depth) { _addChildren: function(container,parent,children,depth) {
var that = this; var that = this;
var subtree = $('<ol>').appendTo(container).editableList({ var subtree = $('<ol>').appendTo(container).editableList({
addButton: false, addButton: false,
@ -84,6 +84,7 @@
} }
}); });
for (var i=0;i<children.length;i++) { for (var i=0;i<children.length;i++) {
children[i].parent = parent;
subtree.editableList('addItem',children[i]) subtree.editableList('addItem',children[i])
} }
return subtree; return subtree;
@ -122,7 +123,7 @@
var spinner; var spinner;
item.children(item,function(children) { item.children(item,function(children) {
childrenAdded = true; childrenAdded = true;
item.treeList.childList = that._addChildren(container,children,depth); item.treeList.childList = that._addChildren(container,parent,children,depth);
if (spinner) { if (spinner) {
spinner.remove(); spinner.remove();
} }
@ -180,7 +181,7 @@
} }
if (item.children) { if (item.children) {
if (Array.isArray(item.children)) { if (Array.isArray(item.children)) {
item.treeList.childList = that._addChildren(container,item.children,depth); item.treeList.childList = that._addChildren(container,item,item.children,depth);
} }
if (item.expanded) { if (item.expanded) {
item.treeList.expand(); item.treeList.expand();

208
packages/node_modules/@node-red/editor-client/src/js/ui/library.js vendored
View File

@ -21,15 +21,20 @@ RED.library = (function() {
var libraryEditor; var libraryEditor;
var activeLibrary; var activeLibrary;
var _libraryLookup = '<div id="node-dialog-library-load" class="hide">'+ var _libraryLookup = '<div id="node-dialog-library-load" class="hide">'+
'<form class="form-horizontal">'+ '<form class="form-horizontal">'+
'<div style="height: 500px; position:relative; ">'+ '<div style="height: 500px; position:relative; ">'+
'<div id="node-dialog-library-load-browser"></div>'+ '<div id="node-dialog-library-load-panes">'+
'<div class="red-ui-panel" id="node-dialog-library-load-browser"></div>'+
'<div class="red-ui-panel">'+
'<div id="node-dialog-library-load-preview">'+ '<div id="node-dialog-library-load-preview">'+
'<div id="node-dialog-library-load-preview-details">'+ '<div class="red-ui-panel" id="node-dialog-library-load-preview-text"></div>'+
'<div class="red-ui-panel" id="node-dialog-library-load-preview-details">'+
'<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+ '<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
'</div>'+ '</div>'+
'<div id="node-dialog-library-load-preview-text"></div>'+ '</div>'+
'</div>'+
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'</form>'+ '</form>'+
@ -54,7 +59,10 @@ RED.library = (function() {
name = RED._("library.unnamedType",{type:activeLibrary.type}); name = RED._("library.unnamedType",{type:activeLibrary.type});
} }
var filename = $("#node-dialog-library-save-filename").val().trim() var filename = $("#node-dialog-library-save-filename").val().trim()
var selectedPath = saveLibraryBrowser.getPath(); var selectedPath = saveLibraryBrowser.getSelected();
if (!selectedPath.children) {
selectedPath = selectedPath.parent;
}
var queryArgs = []; var queryArgs = [];
var data = {}; var data = {};
for (var i=0; i<activeLibrary.fields.length; i++) { for (var i=0; i<activeLibrary.fields.length; i++) {
@ -116,98 +124,40 @@ RED.library = (function() {
} }
} }
function loadFlowLibrary() {
$.getJSON("library/flows",function(data) {
//console.log(data);
var buildMenu = function(data,root) {
var i;
var li;
var a;
var ul = document.createElement("ul");
if (root === "") {
ul.id = "menu-item-import-library-submenu";
}
ul.className = "dropdown-menu";
if (data.d) {
for (i in data.d) {
if (data.d.hasOwnProperty(i)) {
li = document.createElement("li");
li.className = "dropdown-submenu pull-left";
a = document.createElement("a");
a.href="#";
var label = i.replace(/^@.*\//,"").replace(/^node-red-contrib-/,"").replace(/^node-red-node-/,"").replace(/-/g," ").replace(/_/g," ");
a.innerText = label;
li.appendChild(a);
li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i));
ul.appendChild(li);
}
}
}
if (data.f) {
for (i in data.f) {
if (data.f.hasOwnProperty(i)) {
li = document.createElement("li");
a = document.createElement("a");
a.href="#";
a.innerText = data.f[i];
a.flowName = root+(root!==""?"/":"")+data.f[i];
a.onclick = function() {
$.get('library/flows/'+this.flowName, function(data) {
RED.view.importNodes(data);
});
};
li.appendChild(a);
ul.appendChild(li);
}
}
}
return ul;
};
var examples;
if (data.d && data.d._examples_) {
examples = data.d._examples_;
delete data.d._examples_;
}
var menu = buildMenu(data,"");
$("#menu-item-import-examples").remove();
if (examples) {
RED.menu.addItem("menu-item-import",{id:"menu-item-import-examples",label:RED._("menu.label.examples"),options:[]})
$("#menu-item-import-examples-submenu").replaceWith(buildMenu(examples,"_examples_"));
}
//TODO: need an api in RED.menu for this
$("#menu-item-import-library-submenu").replaceWith(menu);
});
}
function loadLibraryFolder(url,root,done) { function loadLibraryFolder(url,root,done) {
$.getJSON("library/"+url+"/"+root,function(data) { $.getJSON("library/"+url+"/"+root,function(data) {
var files = []; var items = data.map(function(d) {
var items = data.reduce(function(acc,d) {
if (typeof d === "string") { if (typeof d === "string") {
acc.push({ return {
icon: 'fa fa-folder', icon: 'fa fa-folder',
label: d, label: d,
path: root+d+"/", path: root+d+"/",
children: function(item,done) { children: function(item,done) {
loadLibraryFolder(url,root+d+"/", function(files,children) { loadLibraryFolder(url,root+d+"/", function(children) {
item.files = files;
item.children = children; // TODO: should this be done by treeList for us item.children = children; // TODO: should this be done by treeList for us
done(children); done(children);
}) })
} }
}); };
} else { } else {
files.push({ return {
icon: 'fa fa-file-o', icon: 'fa fa-file-o',
label: d.fn, label: d.fn,
path: root+d.fn, path: root+d.fn,
props: d props: d
}) };
} }
return acc; });
},[]); items.sort(function(A,B){
done(files,items); if (A.children && !B.children) {
return -1;
} else if (!A.children && B.children) {
return 1;
} else {
return A.label.localeCompare(B.label);
}
});
done(items);
}); });
} }
@ -231,7 +181,6 @@ RED.library = (function() {
function createUI(options) { function createUI(options) {
var libraryData = {}; var libraryData = {};
var selectedLibraryItem = null;
var elementPrefix = options.elementPrefix || "node-input-"; var elementPrefix = options.elementPrefix || "node-input-";
// Orion editor has set/getText // Orion editor has set/getText
@ -259,7 +208,7 @@ RED.library = (function() {
$('#node-input-'+options.type+'-menu-open-library').click(function(e) { $('#node-input-'+options.type+'-menu-open-library').click(function(e) {
activeLibrary = options; activeLibrary = options;
loadLibraryFolder(options.url, "", function(files,items) { loadLibraryFolder(options.url, "", function(items) {
var listing = [{ var listing = [{
icon: 'fa fa-archive', icon: 'fa fa-archive',
label: "Local", label: "Local",
@ -271,13 +220,14 @@ RED.library = (function() {
label: options.type, label: options.type,
path: options.type+"/", path: options.type+"/",
expanded: true, expanded: true,
children: items, children: items
files: files
}] }]
}] }]
loadLibraryBrowser.data(listing); loadLibraryBrowser.data(listing);
}); });
libraryEditor = ace.edit('node-dialog-library-load-preview-text'); libraryEditor = ace.edit('node-dialog-library-load-preview-text',{
useWorker: false
});
libraryEditor.setTheme("ace/theme/tomorrow"); libraryEditor.setTheme("ace/theme/tomorrow");
if (options.mode) { if (options.mode) {
libraryEditor.getSession().setMode(options.mode); libraryEditor.getSession().setMode(options.mode);
@ -290,7 +240,6 @@ RED.library = (function() {
libraryEditor.renderer.$cursorLayer.element.style.opacity=0; libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
libraryEditor.$blockScrolling = Infinity; libraryEditor.$blockScrolling = Infinity;
$( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" ); $( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
e.preventDefault(); e.preventDefault();
}); });
@ -305,7 +254,7 @@ RED.library = (function() {
} }
$("#node-dialog-library-save-filename").attr("value",filename+".js"); $("#node-dialog-library-save-filename").attr("value",filename+".js");
loadLibraryFolder(options.url, "", function(files,items) { loadLibraryFolder(options.url, "", function(items) {
var listing = [{ var listing = [{
icon: 'fa fa-archive', icon: 'fa fa-archive',
label: "Local", label: "Local",
@ -317,8 +266,7 @@ RED.library = (function() {
label: options.type, label: options.type,
path: options.type+"/", path: options.type+"/",
expanded: true, expanded: true,
children: items, children: items
files: files
}] }]
}] }]
saveLibraryBrowser.data(listing); saveLibraryBrowser.data(listing);
@ -337,20 +285,15 @@ RED.library = (function() {
function createBrowser(options) { function createBrowser(options) {
var panes = $('<div class="red-ui-library-browser"></div>').appendTo(options.container); var panes = $('<div class="red-ui-library-browser"></div>').appendTo(options.container);
var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes); // var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes); // var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
// //
// '<div id="clipboard-dialog-export-tab-library-panes">'+ // RED.panels.create({
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-sources-pane"></div>'+ // container:panes,
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-listing-pane"></div>'+ // dir: "horizontal"
// '</div>'+ // });
RED.panels.create({ var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(panes)
container:panes,
dir: "horizontal"
});
var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(dirsPane)
.treeList({}).on('treelistselect', function(event, item) { .treeList({}).on('treelistselect', function(event, item) {
fileList.treeList('data',item.files||[]);
if (addButton) { if (addButton) {
if (item.writable === false) { if (item.writable === false) {
addButton.prop('disabled', true); addButton.prop('disabled', true);
@ -358,21 +301,21 @@ RED.library = (function() {
addButton.prop('disabled', false); addButton.prop('disabled', false);
} }
} }
if (options.onpathselect) { if (options.onselect) {
options.onpathselect(item); options.onselect(item);
} }
}).on('treelistchildrenloaded', function(event) {
var selected = dirList.treeList('selected');
fileList.treeList('data',selected.files||[]);
}); });
var addButton; var addButton;
if (options.addFolderButton) { if (options.addFolderButton) {
var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(dirsPane) var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(panes)
addButton= $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-plus"> <i class="fa fa-folder-o"></button>').appendTo(tools).click(function(e) { addButton= $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-plus"> <i class="fa fa-folder-o"></button>').appendTo(tools).click(function(e) {
var selected = dirList.treeList('selected');
var defaultFolderName = "new-folder"; var defaultFolderName = "new-folder";
var defaultFolderNameMatches = {}; var defaultFolderNameMatches = {};
var selected = dirList.treeList('selected');
if (!selected.children) {
selected = selected.parent;
}
selected.children.forEach(function(c) { selected.children.forEach(function(c) {
if (/^new-folder/.test(c.label)) { if (/^new-folder/.test(c.label)) {
defaultFolderNameMatches[c.label] = true defaultFolderNameMatches[c.label] = true
@ -435,17 +378,8 @@ RED.library = (function() {
}); });
} }
var fileList = $("<div>").css({width: "100%", height: "100%"}).appendTo(filesPane)
.treeList({}).on('treelistselect', function(event, item) {
if (options.onselect) {
options.onselect(item);
}
})
return { return {
getFile: function() { getSelected: function() {
return fileList.treeList('selected');
},
getPath: function() {
return dirList.treeList('selected'); return dirList.treeList('selected');
}, },
data: function(content) { data: function(content) {
@ -494,17 +428,18 @@ RED.library = (function() {
saveLibraryBrowser = RED.library.createBrowser({ saveLibraryBrowser = RED.library.createBrowser({
container: $("#node-dialog-library-save-browser"), container: $("#node-dialog-library-save-browser"),
addFolderButton: true, addFolderButton: true,
onpathselect: function(item) { onselect: function(item) {
try { if (item.label) {
if (!item.children) {
$("#node-dialog-library-save-filename").val(item.label);
item = item.parent;
}
if (item.writable === false) { if (item.writable === false) {
$("#node-dialog-library-save-button").button("disable"); $("#node-dialog-library-save-button").button("disable");
} else { } else {
$("#node-dialog-library-save-button").button("enable"); $("#node-dialog-library-save-button").button("enable");
} }
} catch(err) {} }
},
onselect: function(file) {
$("#node-dialog-library-save-filename").val(file.label);
} }
}); });
$("#node-dialog-library-save-filename").keyup(function() { validateExportFilename($(this))}); $("#node-dialog-library-save-filename").keyup(function() { validateExportFilename($(this))});
@ -527,11 +462,12 @@ RED.library = (function() {
class: "primary", class: "primary",
click: function() { click: function() {
if (selectedLibraryItem) { if (selectedLibraryItem) {
for (var i=0; i<options.fields.length; i++) { var elementPrefix = activeLibrary.elementPrefix || "node-input-";
var field = options.fields[i]; for (var i=0; i<activeLibrary.fields.length; i++) {
var field = activeLibrary.fields[i];
$("#"+elementPrefix+field).val(selectedLibraryItem[field]); $("#"+elementPrefix+field).val(selectedLibraryItem[field]);
} }
options.editor.setValue(libraryEditor.getValue(),-1); activeLibrary.editor.setValue(libraryEditor.getValue(),-1);
} }
$( this ).dialog( "close" ); $( this ).dialog( "close" );
} }
@ -551,8 +487,8 @@ RED.library = (function() {
container: $("#node-dialog-library-load-browser"), container: $("#node-dialog-library-load-browser"),
onselect: function(file) { onselect: function(file) {
var table = $("#node-dialog-library-load-preview-details-table").empty(); var table = $("#node-dialog-library-load-preview-details-table").empty();
selectedLibraryItem = file.props;
if (file && file.label) { if (file && file.label && !file.children) {
$.get("library/"+activeLibrary.url+"/"+file.path, function(data) { $.get("library/"+activeLibrary.url+"/"+file.path, function(data) {
//TODO: nls + sanitize //TODO: nls + sanitize
var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table); var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table);
@ -575,14 +511,16 @@ RED.library = (function() {
} }
} }
}); });
RED.panels.create({
container:$("#node-dialog-library-load-panes"),
if (RED.settings.theme("menu.menu-item-import-library") !== false) { dir: "horizontal"
loadFlowLibrary(); });
} RED.panels.create({
container:$("#node-dialog-library-load-preview"),
dir: "vertical"
});
}, },
create: createUI, create: createUI,
loadFlowLibrary: loadFlowLibrary,
createBrowser:createBrowser, createBrowser:createBrowser,
export: exportFlow export: exportFlow
} }

22
packages/node_modules/@node-red/editor-client/src/sass/library.scss vendored
View File

@ -98,6 +98,7 @@
.red-ui-library-browser { .red-ui-library-browser {
position: relative;
height: 100%; height: 100%;
.red-ui-treeList-container { .red-ui-treeList-container {
@ -130,29 +131,22 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
#node-dialog-library-load-browser { #node-dialog-library-load-browser {
height: 200px; // border: 1px solid $primary-border-color;
border: 1px solid $primary-border-color;
margin-bottom: 10px;
} }
#node-dialog-library-load-panes {
border: 1px solid $primary-border-color;
}
#node-dialog-library-load-preview { #node-dialog-library-load-preview {
height: 300px; height: 100%;
} }
#node-dialog-library-load-preview-text { #node-dialog-library-load-preview-text {
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
height: 100%;
width: calc(50% - 5px);
border: 1px solid $primary-border-color;
} }
#node-dialog-library-load-preview-details { #node-dialog-library-load-preview-details {
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
height: 100%;
width: calc(50% - 5px);
margin-right: 10px;
border: 1px solid $primary-border-color;
.node-info-node-row:first-child { .node-info-node-row:first-child {
border-top: none; border-top: none;
} }

4
packages/node_modules/@node-red/editor-client/src/sass/panels.scss vendored
View File

@ -41,13 +41,13 @@
.red-ui-panels.red-ui-panels-horizontal { .red-ui-panels.red-ui-panels-horizontal {
height: 100%; height: 100%;
.red-ui-panel { &>.red-ui-panel {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
width: calc(50% - 4px); width: calc(50% - 4px);
} }
.red-ui-panels-separator { &>.red-ui-panels-separator {
vertical-align: top; vertical-align: top;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;