frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Move type-library dialogs to new treeList style

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({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-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:[
{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" );
} else {
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 saveFlow = function() {
$.ajax({
@ -80,7 +83,6 @@ RED.clipboard = (function() {
data: flowToExport,
contentType: "application/json; charset=utf-8"
}).done(function() {
// RED.library.loadFlowLibrary();
$(dialog).dialog( "close" );
RED.notify(RED._("library.exportedToLibrary"),"success");
}).fail(function(xhr,textStatus,err) {
@ -409,7 +411,7 @@ RED.clipboard = (function() {
container: $("#clipboard-dialog-export-tab-library-browser"),
addFolderButton: true,
onselect: function(file) {
if (file && file.label) {
if (file && file.label && !file.children) {
$("#clipboard-dialog-tab-library-name").val(file.label);
}
}
@ -421,17 +423,17 @@ RED.clipboard = (function() {
label: label,
path: root
};
result.children = [];
if (list.f) {
result.files = list.f.map(function(f) {
return {
list.f.forEach(function(f) {
result.children.push({
icon: 'fa fa-file-o',
label: f,
path: root+f
}
});
});
}
result.children = [];
if (list.d) {
for (var l in list.d) {
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;
}

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

212
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 activeLibrary;
var _libraryLookup = '<div id="node-dialog-library-load" class="hide">'+
'<form class="form-horizontal">'+
'<div style="height: 500px; position:relative; ">'+
'<div id="node-dialog-library-load-browser"></div>'+
'<div id="node-dialog-library-load-preview">'+
'<div id="node-dialog-library-load-preview-details">'+
'<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
'<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 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>'+
'</div>'+
'</div>'+
'</div>'+
'<div id="node-dialog-library-load-preview-text"></div>'+
'</div>'+
'</div>'+
'</form>'+
@ -54,7 +59,10 @@ RED.library = (function() {
name = RED._("library.unnamedType",{type:activeLibrary.type});
}
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 data = {};
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) {
$.getJSON("library/"+url+"/"+root,function(data) {
var files = [];
var items = data.reduce(function(acc,d) {
var items = data.map(function(d) {
if (typeof d === "string") {
acc.push({
return {
icon: 'fa fa-folder',
label: d,
path: root+d+"/",
children: function(item,done) {
loadLibraryFolder(url,root+d+"/", function(files,children) {
item.files = files;
loadLibraryFolder(url,root+d+"/", function(children) {
item.children = children; // TODO: should this be done by treeList for us
done(children);
})
}
});
};
} else {
files.push({
return {
icon: 'fa fa-file-o',
label: d.fn,
path: root+d.fn,
props: d
})
};
}
return acc;
},[]);
done(files,items);
});
items.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);
}
});
done(items);
});
}
@ -231,7 +181,6 @@ RED.library = (function() {
function createUI(options) {
var libraryData = {};
var selectedLibraryItem = null;
var elementPrefix = options.elementPrefix || "node-input-";
// Orion editor has set/getText
@ -259,7 +208,7 @@ RED.library = (function() {
$('#node-input-'+options.type+'-menu-open-library').click(function(e) {
activeLibrary = options;
loadLibraryFolder(options.url, "", function(files,items) {
loadLibraryFolder(options.url, "", function(items) {
var listing = [{
icon: 'fa fa-archive',
label: "Local",
@ -271,13 +220,14 @@ RED.library = (function() {
label: options.type,
path: options.type+"/",
expanded: true,
children: items,
files: files
children: items
}]
}]
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");
if (options.mode) {
libraryEditor.getSession().setMode(options.mode);
@ -290,7 +240,6 @@ RED.library = (function() {
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();
});
@ -305,7 +254,7 @@ RED.library = (function() {
}
$("#node-dialog-library-save-filename").attr("value",filename+".js");
loadLibraryFolder(options.url, "", function(files,items) {
loadLibraryFolder(options.url, "", function(items) {
var listing = [{
icon: 'fa fa-archive',
label: "Local",
@ -317,8 +266,7 @@ RED.library = (function() {
label: options.type,
path: options.type+"/",
expanded: true,
children: items,
files: files
children: items
}]
}]
saveLibraryBrowser.data(listing);
@ -337,20 +285,15 @@ RED.library = (function() {
function createBrowser(options) {
var panes = $('<div class="red-ui-library-browser"></div>').appendTo(options.container);
var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
var filesPane = $('<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);
//
// '<div id="clipboard-dialog-export-tab-library-panes">'+
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-sources-pane"></div>'+
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-listing-pane"></div>'+
// '</div>'+
RED.panels.create({
container:panes,
dir: "horizontal"
});
var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(dirsPane)
// RED.panels.create({
// container:panes,
// dir: "horizontal"
// });
var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(panes)
.treeList({}).on('treelistselect', function(event, item) {
fileList.treeList('data',item.files||[]);
if (addButton) {
if (item.writable === false) {
addButton.prop('disabled', true);
@ -358,21 +301,21 @@ RED.library = (function() {
addButton.prop('disabled', false);
}
}
if (options.onpathselect) {
options.onpathselect(item);
if (options.onselect) {
options.onselect(item);
}
}).on('treelistchildrenloaded', function(event) {
var selected = dirList.treeList('selected');
fileList.treeList('data',selected.files||[]);
});
var addButton;
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) {
var selected = dirList.treeList('selected');
var defaultFolderName = "new-folder";
var defaultFolderNameMatches = {};
var selected = dirList.treeList('selected');
if (!selected.children) {
selected = selected.parent;
}
selected.children.forEach(function(c) {
if (/^new-folder/.test(c.label)) {
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 {
getFile: function() {
return fileList.treeList('selected');
},
getPath: function() {
getSelected: function() {
return dirList.treeList('selected');
},
data: function(content) {
@ -494,17 +428,18 @@ RED.library = (function() {
saveLibraryBrowser = RED.library.createBrowser({
container: $("#node-dialog-library-save-browser"),
addFolderButton: true,
onpathselect: function(item) {
try {
onselect: function(item) {
if (item.label) {
if (!item.children) {
$("#node-dialog-library-save-filename").val(item.label);
item = item.parent;
}
if (item.writable === false) {
$("#node-dialog-library-save-button").button("disable");
} else {
$("#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))});
@ -527,11 +462,12 @@ RED.library = (function() {
class: "primary",
click: function() {
if (selectedLibraryItem) {
for (var i=0; i<options.fields.length; i++) {
var field = options.fields[i];
var elementPrefix = activeLibrary.elementPrefix || "node-input-";
for (var i=0; i<activeLibrary.fields.length; i++) {
var field = activeLibrary.fields[i];
$("#"+elementPrefix+field).val(selectedLibraryItem[field]);
}
options.editor.setValue(libraryEditor.getValue(),-1);
activeLibrary.editor.setValue(libraryEditor.getValue(),-1);
}
$( this ).dialog( "close" );
}
@ -551,8 +487,8 @@ RED.library = (function() {
container: $("#node-dialog-library-load-browser"),
onselect: function(file) {
var table = $("#node-dialog-library-load-preview-details-table").empty();
if (file && file.label) {
selectedLibraryItem = file.props;
if (file && file.label && !file.children) {
$.get("library/"+activeLibrary.url+"/"+file.path, function(data) {
//TODO: nls + sanitize
var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table);
@ -575,14 +511,16 @@ RED.library = (function() {
}
}
});
if (RED.settings.theme("menu.menu-item-import-library") !== false) {
loadFlowLibrary();
}
RED.panels.create({
container:$("#node-dialog-library-load-panes"),
dir: "horizontal"
});
RED.panels.create({
container:$("#node-dialog-library-load-preview"),
dir: "vertical"
});
},
create: createUI,
loadFlowLibrary: loadFlowLibrary,
createBrowser:createBrowser,
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 {
position: relative;
height: 100%;
.red-ui-treeList-container {
@ -130,29 +131,22 @@
margin-bottom: 10px;
}
#node-dialog-library-load-browser {
height: 200px;
border: 1px solid $primary-border-color;
margin-bottom: 10px;
// border: 1px solid $primary-border-color;
}
#node-dialog-library-load-panes {
border: 1px solid $primary-border-color;
}
#node-dialog-library-load-preview {
height: 300px;
height: 100%;
}
#node-dialog-library-load-preview-text {
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 {
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 {
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 {
height: 100%;
.red-ui-panel {
&>.red-ui-panel {
vertical-align: top;
display: inline-block;
height: 100%;
width: calc(50% - 4px);
}
.red-ui-panels-separator {
&>.red-ui-panels-separator {
vertical-align: top;
border-top: none;
border-bottom: none;