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

rearrange contents of subflow template settings tab

Browse Source
This commit is contained in:
Hiroyasu Nishiyama 2019-07-11 19:37:47 +09:00
parent 944f3bd329
commit db5589f2aa
2 changed files with 87 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -953,8 +953,70 @@ RED.editor = (function() {
var i,row; var i,row;
if (node.type === "subflow") {
var categoryRow = $("<div/>", {
class: "form-row"
}).appendTo(dialogForm);
$("<i/>", {
class: "fa fa-folder-o"
}).appendTo(categoryRow);
$("<span/>").text(" ").appendTo(categoryRow);
$("<label/>", {
for: "subflow-appearance-input-category",
"data-i18n": "editor:subflow.category"
}).appendTo(categoryRow);
var categorySelector = $("<select/>", {
id: "subflow-appearance-input-category"
}).css({
width: "250px"
}).appendTo(categoryRow);
$("<input/>", {
type: "text",
id: "subflow-appearance-input-custom-category"
}).css({
display: "none",
"margin-left": "10px",
width: "calc(100% - 250px)"
}).appendTo(categoryRow);
var categories = RED.palette.getCategories();
categories.sort(function(A,B) {
return A.label.localeCompare(B.label);
})
categories.forEach(function(cat) {
categorySelector.append($("<option/>").val(cat.id).text(cat.label));
})
categorySelector.append($("<option/>").attr('disabled',true).text("---"));
categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
$("#subflow-appearance-input-category").on("change", function() {
var val = $(this).val();
if (val === "_custom_") {
$("#subflow-appearance-input-category").width(120);
$("#subflow-appearance-input-custom-category").show();
} else {
$("#subflow-appearance-input-category").width(250);
$("#subflow-appearance-input-custom-category").hide();
}
})
$("#subflow-appearance-input-category").val(node.category||"subflows");
var userCount = 0;
var subflowType = "subflow:"+node.id;
RED.nodes.eachNode(function(n) {
if (n.type === subflowType) {
userCount++;
}
});
$("#red-ui-editor-subflow-user-count")
.text(RED._("subflow.subflowInstances", {count:userCount})).show();
}
$('<div class="form-row">'+ $('<div class="form-row">'+
'<i class="fa fa-tag"> '+
'<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+ '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
'<span style="margin-right: 2px;"/>'+
'<input type="checkbox" id="node-input-show-label"/>'+ '<input type="checkbox" id="node-input-show-label"/>'+
'</div>').appendTo(dialogForm); '</div>').appendTo(dialogForm);
@ -972,6 +1034,11 @@ RED.editor = (function() {
// If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard) // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) { if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm); var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
$("<i/>", {
class: "fa fa-picture-o"
}).appendTo(iconRow);
$("<span/>").text(" ").appendTo(iconRow);
$('<label data-i18n="editor.settingIcon">').appendTo(iconRow); $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow); var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
@ -1001,7 +1068,7 @@ RED.editor = (function() {
$('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton); $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
} }
$('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm); $('<div class="form-row"><i class="fa fa-external-link"/> <span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
var inputCount = node.inputs || node._def.inputs || 0; var inputCount = node.inputs || node._def.inputs || 0;
var outputCount = node.outputs || node._def.outputs || 0; var outputCount = node.outputs || node._def.outputs || 0;
@ -1099,7 +1166,7 @@ RED.editor = (function() {
var defaultIcon; var defaultIcon;
var nodeInfoEditor; var nodeInfoEditor;
var finishedBuilding = false; var finishedBuilding = false;
editStack.push(node); editStack.push(node);
RED.view.state(RED.state.EDITING); RED.view.state(RED.state.EDITING);
var type = node.type; var type = node.type;
@ -2162,9 +2229,9 @@ RED.editor = (function() {
editing_node.icon = icon; editing_node.icon = icon;
changed = true; changed = true;
} }
var newCategory = $("#subflow-input-category").val().trim(); var newCategory = $("#subflow-appearance-input-category").val().trim();
if (newCategory === "_custom_") { if (newCategory === "_custom_") {
newCategory = $("#subflow-input-custom-category").val().trim(); newCategory = $("#subflow-appearance-input-custom-category").val().trim();
if (newCategory === "") { if (newCategory === "") {
newCategory = editing_node.category; newCategory = editing_node.category;
} }
@ -2177,15 +2244,6 @@ RED.editor = (function() {
editing_node.category = newCategory; editing_node.category = newCategory;
changed = true; changed = true;
} }
var old_env = editing_node.env;
var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
if (!isSameEnv(old_env, new_env)) {
editing_node.env = new_env;
changes.env = editing_node.env;
changed = true;
}
RED.palette.refresh(); RED.palette.refresh();
if (changed) { if (changed) {
@ -2234,13 +2292,28 @@ RED.editor = (function() {
} }
var editorRow = $("#dialog-form>div.node-input-env-container-row"); var editorRow = $("#dialog-form>div.node-input-env-container-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom"))); height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$("#node-input-env-container").editableList('height',height-80); $("#node-input-env-container").editableList('height',height-60);
}, },
open: function(tray) { open: function(tray) {
var trayFooter = tray.find(".red-ui-tray-footer"); var trayFooter = tray.find(".red-ui-tray-footer");
var trayFooterLeft = $("<div/>", {
class: "red-ui-tray-footer-left"
}).appendTo(trayFooter)
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden'); trayBody.parent().css('overflow','hidden');
if (editing_node.type === "subflow") {
var span = $("<span/>").css({
"margin-left": "10px"
}).appendTo(trayFooterLeft);
$("<i/>", {
class: "fa fa-info-circle"
}).appendTo(span);
$("<span/>").text(" ").appendTo(span);
$("<i/>", {
id: "red-ui-editor-subflow-user-count"
}).appendTo(span);
}
if (editing_node) { if (editing_node) {
RED.sidebar.info.refresh(editing_node); RED.sidebar.info.refresh(editing_node);
@ -2300,46 +2373,9 @@ RED.editor = (function() {
buildAppearanceForm(appearanceTab.content,editing_node); buildAppearanceForm(appearanceTab.content,editing_node);
editorTabs.addTab(appearanceTab); editorTabs.addTab(appearanceTab);
$("#subflow-input-name").val(subflow.name); $("#subflow-input-name").val(subflow.name);
RED.text.bidi.prepareInput($("#subflow-input-name")); RED.text.bidi.prepareInput($("#subflow-input-name"));
$("#subflow-input-category").empty();
var categories = RED.palette.getCategories();
categories.sort(function(A,B) {
return A.label.localeCompare(B.label);
})
categories.forEach(function(cat) {
$("#subflow-input-category").append($("<option></option>").val(cat.id).text(cat.label));
})
$("#subflow-input-category").append($("<option></option>").attr('disabled',true).text("---"));
$("#subflow-input-category").append($("<option></option>").val("_custom_").text(RED._("palette.addCategory")));
$("#subflow-input-category").on("change", function() {
var val = $(this).val();
if (val === "_custom_") {
$("#subflow-input-category").width(120);
$("#subflow-input-custom-category").show();
} else {
$("#subflow-input-category").width(250);
$("#subflow-input-custom-category").hide();
}
})
$("#subflow-input-category").val(subflow.category||"subflows");
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;
RED.nodes.eachNode(function(n) {
if (n.type === subflowType) {
userCount++;
}
});
$("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
trayBody.i18n(); trayBody.i18n();
finishedBuilding = true; finishedBuilding = true;
}, },

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

@ -24,10 +24,8 @@ RED.subflow = (function() {
var _subflowTemplateEditTemplate = '<script type="text/x-red" data-template-name="subflow-template">'+ var _subflowTemplateEditTemplate = '<script type="text/x-red" data-template-name="subflow-template">'+
'<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+ '<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+
'<div class="form-row"><i class="fa fa-folder-o"></i> <label for="subflow-input-category" data-i18n="editor:subflow.category"></label><select style="width: 250px;" id="subflow-input-category"></select><input style="display:none; margin-left: 10px; width:calc(100% - 250px)" type="text" id="subflow-input-custom-category"></div>'+
'<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+ '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
'<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+ '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
'<div class="form-row form-tips" id="subflow-dialog-user-count"></div>'+
'</script>'; '</script>';
function findAvailableSubflowIOPosition(subflow,isInput) { function findAvailableSubflowIOPosition(subflow,isInput) {