'+
'
'+
@@ -175,331 +258,332 @@ RED.library = (function() {
);
$('#node-input-'+options.type+'-menu-open-library').click(function(e) {
- $("#node-select-library").children().remove();
- var bc = $("#node-dialog-library-breadcrumbs");
- bc.children().first().nextAll().remove();
- libraryEditor.setValue('',-1);
-
- $.getJSON("library/"+options.url,function(data) {
- $("#node-select-library").append(buildFileList("/",data));
- $("#node-dialog-library-breadcrumbs a").click(function(e) {
- $(this).parent().nextAll().remove();
- $("#node-select-library").children().first().replaceWith(buildFileList("/",data));
- e.stopPropagation();
- });
- $( "#node-dialog-library-lookup" ).dialog( "open" );
+ activeLibrary = options;
+ loadLibraryFolder(options.url, "", function(files,items) {
+ var listing = [{
+ icon: 'fa fa-archive',
+ label: "Local",
+ path: "",
+ expanded: true,
+ writable: false,
+ children: [{
+ icon: 'fa fa-cube',
+ label: options.type,
+ path: options.type+"/",
+ expanded: true,
+ children: items,
+ files: files
+ }]
+ }]
+ loadLibraryBrowser.data(listing);
});
+ libraryEditor = ace.edit('node-dialog-library-load-preview-text');
+ 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-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
e.preventDefault();
});
$('#node-input-'+options.type+'-menu-save-library').click(function(e) {
+ activeLibrary = options;
//var found = false;
var name = $("#"+elementPrefix+"name").val().replace(/(^\s*)|(\s*$)/g,"");
-
- //var buildPathList = function(data,root) {
- // var paths = [];
- // if (data.d) {
- // for (var i in data.d) {
- // var dn = root+(root==""?"":"/")+i;
- // var d = {
- // label:dn,
- // files:[]
- // };
- // for (var f in data.d[i].f) {
- // d.files.push(data.d[i].f[f].fn.split("/").slice(-1)[0]);
- // }
- // paths.push(d);
- // paths = paths.concat(buildPathList(data.d[i],root+(root==""?"":"/")+i));
- // }
- // }
- // return paths;
- //};
- $("#node-dialog-library-save-folder").attr("value","");
-
var filename = name.replace(/[^\w-]/g,"-");
if (filename === "") {
filename = "unnamed-"+options.type;
}
$("#node-dialog-library-save-filename").attr("value",filename+".js");
- //var paths = buildPathList(libraryData,"");
- //$("#node-dialog-library-save-folder").autocomplete({
- // minLength: 0,
- // source: paths,
- // select: function( event, ui ) {
- // $("#node-dialog-library-save-filename").autocomplete({
- // minLength: 0,
- // source: ui.item.files
- // });
- // }
- //});
+ loadLibraryFolder(options.url, "", function(files,items) {
+ var listing = [{
+ icon: 'fa fa-archive',
+ label: "Local",
+ path: "",
+ expanded: true,
+ writable: false,
+ children: [{
+ icon: 'fa fa-cube',
+ label: options.type,
+ path: options.type+"/",
+ expanded: true,
+ children: items,
+ files: files
+ }]
+ }]
+ saveLibraryBrowser.data(listing);
+ });
$( "#node-dialog-library-save" ).dialog( "open" );
e.preventDefault();
});
- libraryEditor = ace.edit('node-select-library-text');
- 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-dialog-library-lookup" ).dialog({
- title: RED._("library.typeLibrary", {type:options.type}),
- modal: true,
- autoOpen: false,
- width: 800,
- height: 450,
- buttons: [
- {
- text: RED._("common.label.cancel"),
- click: function() {
- $( this ).dialog( "close" );
- }
- },
- {
- text: RED._("common.label.load"),
- class: "primary",
- click: function() {
- if (selectedLibraryItem) {
- for (var i=0; i
').appendTo(options.container);
+ var dirsPane = $('").css({width: "100%", height: "100%"}).appendTo(dirsPane)
+ .treeList({}).on('treelistselect', function(event, item) {
+ fileList.treeList('data',item.files||[]);
+ if (addButton) {
+ if (item.writable === false) {
+ addButton.prop('disabled', true);
+ } else {
+ addButton.prop('disabled', false);
+ }
+ }
+ if (options.onpathselect) {
+ options.onpathselect(item);
+ }
+ }).on('treelistchildrenloaded', function(event) {
+ var selected = dirList.treeList('selected');
+ fileList.treeList('data',selected.files||[]);
+ });
+ var addButton;
+ if (options.addFolderButton) {
+ var tools = $("
").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(dirsPane)
+ addButton= $('
').appendTo(tools).click(function(e) {
+ var selected = dirList.treeList('selected');
+
+ var defaultFolderName = "new-folder";
+ var defaultFolderNameMatches = {};
+ selected.children.forEach(function(c) {
+ if (/^new-folder/.test(c.label)) {
+ defaultFolderNameMatches[c.label] = true
+ }
+ });
+ var folderIndex = 2;
+ while(defaultFolderNameMatches[defaultFolderName]) {
+ defaultFolderName = "new-folder-"+(folderIndex++)
+ }
+
+ selected.treeList.expand();
+ var input = $('
').val(defaultFolderName);
+ var newItem = {
+ icon: "fa fa-folder-o",
+ children:[],
+ path: selected.path,
+ element: input
+ }
+ var confirmAdd = function() {
+ var val = input.val().trim();
+ if (val === "") {
+ cancelAdd();
+ return;
+ } else {
+ for (var i=0;i
").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() {
+ return dirList.treeList('selected');
+ },
+ data: function(content) {
+ dirList.treeList('data',content);
+ setTimeout(function() {
+ dirList.treeList('select',content[0]);
+ },100);
+ }
+ }
}
return {
init: function() {
-
$(_librarySave).appendTo(document.body);
- $(_librarySaveConfirm).appendTo(document.body);
$(_libraryLookup).appendTo(document.body);
- RED.actions.add("core:library-export",exportFlow);
-
- RED.events.on("view:selection-changed",function(selection) {
- if (!selection.nodes) {
- RED.menu.setDisabled("menu-item-export-library",true);
- } else {
- RED.menu.setDisabled("menu-item-export-library",false);
+ $( "#node-dialog-library-save" ).dialog({
+ title: RED._("library.saveToLibrary"),
+ modal: true,
+ autoOpen: false,
+ width: 800,
+ resizable: false,
+ buttons: [
+ {
+ text: RED._("common.label.cancel"),
+ click: function() {
+ $( this ).dialog( "close" );
+ }
+ },
+ {
+ id: "node-dialog-library-save-button",
+ text: RED._("common.label.save"),
+ class: "primary",
+ click: function() {
+ saveToLibrary(false);
+ $( this ).dialog( "close" );
+ }
+ }
+ ],
+ open: function(e) {
+ $(this).parent().find(".ui-dialog-titlebar-close").hide();
}
});
+ saveLibraryBrowser = RED.library.createBrowser({
+ container: $("#node-dialog-library-save-browser"),
+ addFolderButton: true,
+ onpathselect: function(item) {
+ try {
+ 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))});
+ $("#node-dialog-library-save-filename").on('paste',function() { var input = $(this); setTimeout(function() { validateExportFilename(input)},10)});
+
+ $( "#node-dialog-library-load" ).dialog({
+ modal: true,
+ autoOpen: false,
+ width: 800,
+ resizable: false,
+ buttons: [
+ {
+ text: RED._("common.label.cancel"),
+ click: function() {
+ $( this ).dialog( "close" );
+ }
+ },
+ {
+ text: RED._("common.label.load"),
+ class: "primary",
+ click: function() {
+ if (selectedLibraryItem) {
+ for (var i=0; iType | | ').appendTo(table);
+ $(propRow.children()[1]).text(activeLibrary.type);
+ if (file.props.hasOwnProperty('name')) {
+ propRow = $('Name | '+file.props.name+' |
').appendTo(table);
+ $(propRow.children()[1]).text(file.props.name);
+ }
+ for (var p in file.props) {
+ if (file.props.hasOwnProperty(p) && p !== 'name' && p !== 'fn') {
+ propRow = $(' | |
').appendTo(table);
+ $(propRow.children()[0]).text(p);
+ RED.utils.createObjectElement(file.props[p]).appendTo(propRow.children()[1]);
+ }
+ }
+ libraryEditor.setValue(data,-1);
+ });
+ } else {
+ libraryEditor.setValue("",-1);
+ }
+ }
+ });
+
+
if (RED.settings.theme("menu.menu-item-import-library") !== false) {
loadFlowLibrary();
}
-
- exportToLibraryDialog = $('')
- .appendTo("body")
- .dialog({
- modal: true,
- autoOpen: false,
- width: 500,
- resizable: false,
- title: RED._("library.exportToLibrary"),
- buttons: [
- {
- id: "library-dialog-cancel",
- text: RED._("common.label.cancel"),
- click: function() {
- $( this ).dialog( "close" );
- }
- },
- {
- id: "library-dialog-ok",
- class: "primary",
- text: RED._("common.label.export"),
- click: function() {
- //TODO: move this to RED.library
- var flowName = $("#node-input-library-filename").val();
- flowName = flowName.trim();
- if(flowName === "" || flowName.endsWith("/")) {
- RED.notify(RED._("library.invalidFilename"),"warning");
- } else {
- $.ajax({
- url:'library/flows/'+flowName,
- type: "POST",
- data: $("#node-input-library-filename").attr('nodes'),
- contentType: "application/json; charset=utf-8"
- }).done(function() {
- RED.library.loadFlowLibrary();
- RED.notify(RED._("library.savedNodes"),"success");
- }).fail(function(xhr,textStatus,err) {
- if (xhr.status === 401) {
- RED.notify(RED._("library.saveFailed",{message:RED._("user.notAuthorized")}),"error");
- } else {
- RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
- }
- });
- }
- $( this ).dialog( "close" );
- }
- }
- ],
- open: function(e) {
- $(this).parent().find(".ui-dialog-titlebar-close").hide();
- },
- close: function(e) {
- }
- });
- exportToLibraryDialog.children(".dialog-form").append($(
- ''+
- ''+
- ''+
- ''+ // Second hidden input to prevent submit on Enter
- '
'
- ));
},
create: createUI,
loadFlowLibrary: loadFlowLibrary,
-
+ createBrowser:createBrowser,
export: exportFlow
}
})();
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 3066e247c..367a05a7c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -22,6 +22,10 @@ $form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc;
$form-input-border-selected-color: #aaa;
+$list-item-color: #666;
+$list-item-background-hover: #f3f3f3;
+$list-item-background-active: #efefef;
+$list-item-background-selected: #eee;
$node-selected-color: #ff7f0e;
$port-selected-color: #ff7f0e;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index cb0032cd0..26ef9fe09 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -48,3 +48,112 @@
}
}
}
+#clipboard-dialog-export-tab-clipboard {
+ padding: 10px;
+ textarea {
+ resize: none;
+ width: 100%;
+ border-radius: 4px;
+ font-family: monospace !important;
+ font-size: 13px !important;
+ height: 430px;
+ line-height: 1.3em;
+ padding: 6px 10px;
+ background: #F3E7E7;
+ color: #533;
+ }
+}
+
+#clipboard-dialog-export-tabs-content {
+ position: absolute;
+ top: 0;
+ left: 120px;
+ right: 0;
+ bottom: 0;
+ padding: 0;
+ background: white;
+
+ &>div {
+ height: calc(100% - 20px)
+ }
+}
+
+#clipboard-dialog-export-tab-library {
+ .form-row {
+ margin-left: 10px;
+ }
+}
+
+
+#clipboard-dialog-tab-library-name {
+ width: calc(100% - 120px);
+}
+#clipboard-dialog-export-tab-library-browser {
+ height: calc(100% - 40px);
+ margin-bottom: 10px;
+ border-bottom: 1px solid $primary-border-color;
+ box-sizing: border-box;
+}
+
+
+
+.red-ui-library-browser {
+ height: 100%;
+
+ .red-ui-treeList-container {
+ background: white;
+ border: none;
+ border-radius: 0;
+ li {
+ background: none;
+ }
+ label {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ .red-ui-editableList-border {
+ border-radius: 0;
+ }
+
+ .red-ui-treeList-label input.red-ui-treeList-input {
+ border-radius: 2px;
+ margin-top: -6px;
+ margin-bottom: -6px;
+ }
+}
+
+#node-dialog-library-save-browser {
+ height: calc(100% - 60px);
+ border: 1px solid $primary-border-color;
+ margin-bottom: 10px;
+}
+#node-dialog-library-load-browser {
+ height: 200px;
+ border: 1px solid $primary-border-color;
+ margin-bottom: 10px;
+}
+#node-dialog-library-load-preview {
+ height: 300px;
+}
+
+#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;
+ }
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index 8dd0fc3ae..aacda031c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -36,17 +36,10 @@
}
-@mixin workspace-button {
- @include disable-selection;
- box-sizing: border-box;
- display: inline-block;
+@mixin reset-a-style {
color: $workspace-button-color !important;
background: $workspace-button-background;
- border: 1px solid $form-input-border-color;
- text-align: center;
- margin:0;
text-decoration: none;
- cursor:pointer;
&.disabled, &:disabled {
cursor: default;
@@ -67,6 +60,19 @@
background: $workspace-button-background-active;
text-decoration: none;
}
+}
+
+@mixin workspace-button {
+ @include disable-selection;
+ @include reset-a-style;
+
+ box-sizing: border-box;
+ display: inline-block;
+ border: 1px solid $form-input-border-color;
+ text-align: center;
+ margin:0;
+ cursor:pointer;
+
// &.selected:not(.disabled):not(:disabled) {
// color: $workspace-button-color-selected !important;
// background: $workspace-button-background-active;
@@ -150,12 +156,12 @@
}
&:not(.single) {
color: $workspace-button-toggle-color !important;
- background:$workspace-button-background-active;
+ background:$workspace-button-background;
margin-bottom: 1px;
&.selected:not(.disabled):not(:disabled) {
color: $workspace-button-toggle-color-selected !important;
- background: $workspace-button-background;
+ background: $workspace-button-background-active;
border-bottom-width: 2px;
border-bottom-color: $form-input-border-selected-color;
margin-bottom: 0;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 489cce5f8..6770baf24 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -247,7 +247,7 @@
z-index: 2;
&.red-ui-tab-link-button {
&:not(.active) {
- background: #eee;
+ // background: #eee;
}
}
&.red-ui-tab-link-button-menu {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index 2d090ae72..a6f0388e5 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -72,22 +72,29 @@ label.red-ui-treeList-label {
@include disable-selection;
padding: 6px 0;
display: block;
- color: $form-text-color;
+ color: $list-item-color;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
margin: 0;
- &:hover {
- background: #f9f9f9;
- color: $form-text-color;
- text-decoration: none;
- }
+ // &:hover {
+ // background: $list-item-background-hover;
+ // color: $list-item-color;
+ // text-decoration: none;
+ // }
&:focus {
+ background: $list-item-background-hover;
outline: none;
- color: $form-text-color;
+ color: $list-item-color;
text-decoration: none;
}
+ &.selected {
+ background: $list-item-background-selected;
+ outline: none;
+ color: $list-item-color;
+ }
+
input {
margin: 0;
}