mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
rearrange contents of subflow template settings tab
This commit is contained in:
Hiroyasu Nishiyama
parent
944f3bd329
commit
db5589f2aa
@ -953,8 +953,70 @@ RED.editor = (function() {
|
||||
|
||||
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">'+
|
||||
'<i class="fa fa-tag"> '+
|
||||
'<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"/>'+
|
||||
'</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 ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
|
||||
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);
|
||||
|
||||
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 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 outputCount = node.outputs || node._def.outputs || 0;
|
||||
@ -2162,9 +2229,9 @@ RED.editor = (function() {
|
||||
editing_node.icon = icon;
|
||||
changed = true;
|
||||
}
|
||||
var newCategory = $("#subflow-input-category").val().trim();
|
||||
var newCategory = $("#subflow-appearance-input-category").val().trim();
|
||||
if (newCategory === "_custom_") {
|
||||
newCategory = $("#subflow-input-custom-category").val().trim();
|
||||
newCategory = $("#subflow-appearance-input-custom-category").val().trim();
|
||||
if (newCategory === "") {
|
||||
newCategory = editing_node.category;
|
||||
}
|
||||
@ -2177,15 +2244,6 @@ RED.editor = (function() {
|
||||
editing_node.category = newCategory;
|
||||
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();
|
||||
|
||||
if (changed) {
|
||||
@ -2234,13 +2292,28 @@ RED.editor = (function() {
|
||||
}
|
||||
var editorRow = $("#dialog-form>div.node-input-env-container-row");
|
||||
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) {
|
||||
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');
|
||||
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) {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
@ -2300,46 +2373,9 @@ RED.editor = (function() {
|
||||
buildAppearanceForm(appearanceTab.content,editing_node);
|
||||
editorTabs.addTab(appearanceTab);
|
||||
|
||||
|
||||
|
||||
|
||||
$("#subflow-input-name").val(subflow.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();
|
||||
finishedBuilding = true;
|
||||
},
|
||||
|
||||
@ -24,10 +24,8 @@ RED.subflow = (function() {
|
||||
|
||||
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-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 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>';
|
||||
|
||||
function findAvailableSubflowIOPosition(subflow,isInput) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user