frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign node edit dialog to tabbed style

Browse Source
This commit is contained in:
Nick O'Leary
2018-09-14 10:54:24 +01:00
parent 0529eed0c9
commit f30ff7a2fd
4 changed files with 253 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
editor/js/nodes.js
View File

@@ -509,9 +509,9 @@ RED.nodes = (function() {
node.icon = n.icon;
}
}
if (n.info) {
node.info = n.info;
}
}
if (n.info) {
node.info = n.info;
}
return node;
}
@@ -907,7 +907,14 @@ RED.nodes = (function() {
}
if (!existingConfigNode || existingConfigNode._def.exclusive) { //} || !compareNodes(existingConfigNode,n,true) || existingConfigNode.z !== n.z) {
configNode = {id:n.id, z:n.z, type:n.type, users:[], _config:{}};
configNode = {
id:n.id,
z:n.z,
type:n.type,
info: n.info,
users:[],
_config:{}
};
for (d in def.defaults) {
if (def.defaults.hasOwnProperty(d)) {
configNode[d] = n[d];

321
editor/js/ui/editor.js
View File

@@ -20,7 +20,6 @@ RED.editor = (function() {
var editing_node = null;
var editing_config_node = null;
var subflowEditor;
var nodeInfoEditor;
var editTrayWidthCache = {};
@@ -773,7 +772,7 @@ RED.editor = (function() {
searchInput.focus();
}
function buildLabelForm(container,node) {
function buildAppearanceForm(container,node) {
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
var inputCount = node.inputs || node._def.inputs || 0;
@@ -840,20 +839,6 @@ RED.editor = (function() {
})
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
}
if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
$('<hr>').appendTo(dialogForm);
$('<div class="form-row"><span data-i18n="editor.description"></span><div id="node-label-form-info"></div></div>').appendTo(dialogForm);
$('<div style="height: 150px;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(dialogForm);
nodeInfoEditor = RED.editor.createEditor({
id: 'node-info-input-info-editor',
mode: 'ace/mode/markdown',
value: ""
});
if (node.info) {
nodeInfoEditor.getSession().setValue(node.info, -1);
}
}
}
function updateLabels(editing_node, changes, outputMap) {
@@ -897,10 +882,27 @@ RED.editor = (function() {
return changed;
}
function buildDescriptionForm(container,node) {
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
$('<div style="height: 100%;" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(dialogForm);
var nodeInfoEditor = RED.editor.createEditor({
id: "node-info-input-info-editor",
mode: 'ace/mode/markdown',
value: ""
});
if (node.info) {
nodeInfoEditor.getSession().setValue(node.info, -1);
}
return nodeInfoEditor;
}
function showEditDialog(node) {
var editing_node = node;
var isDefaultIcon;
var defaultIcon;
var nodeInfoEditor;
var finishedBuilding = false;
editStack.push(node);
RED.view.state(RED.state.EDITING);
var type = node.type;
@@ -1141,8 +1143,31 @@ RED.editor = (function() {
}
}
if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
node.info = nodeInfoEditor.getValue();
var oldInfo = node.info;
if (nodeInfoEditor) {
var newInfo = nodeInfoEditor.getValue();
if (!!oldInfo) {
// Has existing info property
if (newInfo.trim() === "") {
// New value is blank - remove the property
changed = true;
changes.info = oldInfo;
delete node.info;
} else if (newInfo !== oldInfo) {
// New value is different
changed = true;
changes.info = oldInfo;
node.info = newInfo;
}
} else {
// No existing info
if (newInfo.trim() !== "") {
// New value is not blank
changed = true;
changes.info = undefined;
node.info = newInfo;
}
}
}
if (changed) {
@@ -1193,8 +1218,8 @@ RED.editor = (function() {
],
resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width;
$(".editor-tray-content").height(dimensions.height - 78);
var form = $(".editor-tray-content form").height(dimensions.height - 78 - 40);
$(".editor-tray-content").height(dimensions.height - 50);
var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
if (editing_node && editing_node._def.oneditresize) {
try {
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@@ -1208,25 +1233,23 @@ RED.editor = (function() {
var trayBody = tray.find('.editor-tray-body');
trayBody.parent().css('overflow','hidden');
var stack = RED.stack.create({
container: trayBody,
singleExpanded: true
});
var nodeProperties = stack.add({
title: RED._("editor.nodeProperties"),
expanded: true
});
nodeProperties.content.addClass("editor-tray-content");
var editorTabEl = $('<ul></ul>').appendTo(trayBody);
var editorContent = $('<div></div>').appendTo(trayBody);
var portLabels = stack.add({
title: RED._("editor.portLabels"),
onexpand: function() {
refreshLabelForm(this.content,node);
}
var editorTabs = RED.tabs.create({
element:editorTabEl,
onchange:function(tab) {
editorContent.children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
tab.content.show();
if (finishedBuilding) {
RED.tray.resize();
}
},
collapsible: true
});
portLabels.content.addClass("editor-tray-content");
if (editing_node) {
RED.sidebar.info.refresh(editing_node);
}
@@ -1243,11 +1266,48 @@ RED.editor = (function() {
} else {
isDefaultIcon = true;
}
buildEditForm(nodeProperties.content,"dialog-form",type,ns);
buildLabelForm(portLabels.content,node);
var nodePropertiesTab = {
id: "editor-tab-properties",
label: "Properties",
name: "Properties",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog"
};
buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns);
editorTabs.addTab(nodePropertiesTab);
if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info')) {
var descriptionTab = {
id: "editor-tab-description",
label: "Description",
name: "Description",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o",
onchange: function() {
nodeInfoEditor.focus();
}
};
editorTabs.addTab(descriptionTab);
nodeInfoEditor = buildDescriptionForm(descriptionTab.content,node);
}
var appearanceTab = {
id: "editor-tab-appearance",
label: "Appearance",
name: "Appearance",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-object-group",
onchange: function() {
refreshLabelForm(this.content,node);
}
};
buildAppearanceForm(appearanceTab.content,node);
editorTabs.addTab(appearanceTab);
prepareEditDialog(node,node._def,"node-input", function() {
trayBody.i18n();
finishedBuilding = true;
done();
});
},
@@ -1259,8 +1319,9 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node);
}
RED.workspaces.refresh();
if (node.type.indexOf("subflow") != 0 && node.type !== "comment") {
if (nodeInfoEditor) {
nodeInfoEditor.destroy();
nodeInfoEditor = null;
}
RED.view.redraw(true);
editStack.pop();
@@ -1299,6 +1360,8 @@ RED.editor = (function() {
var adding = (id == "_ADD_");
var node_def = RED.nodes.getType(type);
var editing_config_node = RED.nodes.node(id);
var nodeInfoEditor;
var finishedBuilding = false;
var ns;
if (node_def.set.module === "node-red") {
@@ -1331,7 +1394,8 @@ RED.editor = (function() {
RED.view.state(RED.state.EDITING);
var trayOptions = {
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
resize: function() {
resize: function(dimensions) {
$(".editor-tray-content").height(dimensions.height - 50);
if (editing_config_node && editing_config_node._def.oneditresize) {
var form = $("#node-config-dialog-edit-form");
try {
@@ -1343,6 +1407,7 @@ RED.editor = (function() {
},
open: function(tray, done) {
var trayHeader = tray.find(".editor-tray-header");
var trayBody = tray.find('.editor-tray-body');
var trayFooter = tray.find(".editor-tray-footer");
if (node_def.hasUsers !== false) {
@@ -1350,7 +1415,49 @@ RED.editor = (function() {
}
trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
var dialogForm = buildEditForm(tray.find('.editor-tray-body'),"node-config-dialog-edit-form",type,ns);
var editorTabEl = $('<ul></ul>').appendTo(trayBody);
var editorContent = $('<div></div>').appendTo(trayBody);
var editorTabs = RED.tabs.create({
element:editorTabEl,
onchange:function(tab) {
editorContent.children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
tab.content.show();
if (finishedBuilding) {
RED.tray.resize();
}
},
collapsible: true
});
var nodePropertiesTab = {
id: "editor-tab-cproperties",
label: "Properties",
name: "Properties",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog"
};
editorTabs.addTab(nodePropertiesTab);
buildEditForm(nodePropertiesTab.content,"node-config-dialog-edit-form",type,ns);
if (!node_def.defaults || !node_def.defaults.hasOwnProperty('info')) {
var descriptionTab = {
id: "editor-tab-description",
label: "Description",
name: "Description",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o",
onchange: function() {
nodeInfoEditor.focus();
}
};
editorTabs.addTab(descriptionTab);
nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_config_node);
}
prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
if (editing_config_node._def.exclusive) {
@@ -1398,17 +1505,20 @@ RED.editor = (function() {
}
});
}
tabSelect.i18n();
dialogForm.i18n();
if (node_def.hasUsers !== false) {
$("#node-config-dialog-user-count").find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
}
trayBody.i18n();
finishedBuilding = true;
done();
});
},
close: function() {
RED.workspaces.refresh();
if (nodeInfoEditor) {
nodeInfoEditor.destroy();
nodeInfoEditor = null;
}
editStack.pop();
},
show: function() {
@@ -1502,6 +1612,31 @@ RED.editor = (function() {
}
}
}
if (nodeInfoEditor) {
editing_config_node.info = nodeInfoEditor.getValue();
var oldInfo = editing_config_node.info;
if (nodeInfoEditor) {
var newInfo = nodeInfoEditor.getValue();
if (!!oldInfo) {
// Has existing info property
if (newInfo.trim() === "") {
// New value is blank - remove the property
delete editing_config_node.info;
} else if (newInfo !== oldInfo) {
// New value is different
editing_config_node.info = newInfo;
}
} else {
// No existing info
if (newInfo.trim() !== "") {
// New value is not blank
editing_config_node.info = newInfo;
}
}
}
}
editing_config_node.label = configTypeDef.label;
editing_config_node.z = scope;
@@ -1689,7 +1824,7 @@ RED.editor = (function() {
editStack.push(subflow);
RED.view.state(RED.state.EDITING);
var subflowEditor;
var finishedBuilding = false;
var trayOptions = {
title: getEditStackTitle(),
buttons: [
@@ -1790,48 +1925,76 @@ RED.editor = (function() {
}
],
resize: function(dimensions) {
$(".editor-tray-content").height(dimensions.height - 78);
var form = $(".editor-tray-content form").height(dimensions.height - 78 - 40);
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var editorRow = $("#dialog-form>div.node-text-editor-row");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
subflowEditor.resize();
$(".editor-tray-content").height(dimensions.height - 50);
var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
},
open: function(tray) {
var trayFooter = tray.find(".editor-tray-footer");
var trayBody = tray.find('.editor-tray-body');
trayBody.parent().css('overflow','hidden');
var stack = RED.stack.create({
container: trayBody,
singleExpanded: true
});
var nodeProperties = stack.add({
title: RED._("editor.nodeProperties"),
expanded: true
});
nodeProperties.content.addClass("editor-tray-content");
var portLabels = stack.add({
title: RED._("editor.portLabels")
});
portLabels.content.addClass("editor-tray-content");
if (editing_node) {
RED.sidebar.info.refresh(editing_node);
}
var dialogForm = buildEditForm(nodeProperties.content,"dialog-form","subflow-template");
subflowEditor = RED.editor.createEditor({
id: 'subflow-input-info-editor',
mode: 'ace/mode/markdown',
value: ""
var editorTabEl = $('<ul></ul>').appendTo(trayBody);
var editorContent = $('<div></div>').appendTo(trayBody);
var editorTabs = RED.tabs.create({
element:editorTabEl,
onchange:function(tab) {
editorContent.children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
tab.content.show();
if (finishedBuilding) {
RED.tray.resize();
}
},
collapsible: true
});
var nodePropertiesTab = {
id: "editor-tab-properties",
label: "Properties",
name: "Properties",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog"
};
buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template");
editorTabs.addTab(nodePropertiesTab);
var descriptionTab = {
id: "editor-tab-description",
label: "Description",
name: "Description",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o",
onchange: function() {
subflowEditor.focus();
}
};
editorTabs.addTab(descriptionTab);
subflowEditor = buildDescriptionForm(descriptionTab.content,editing_node);
var appearanceTab = {
id: "editor-tab-appearance",
label: "Appearance",
name: "Appearance",
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-object-group",
onchange: function() {
refreshLabelForm(this.content,editing_node);
}
};
buildAppearanceForm(appearanceTab.content,editing_node);
editorTabs.addTab(appearanceTab);
$("#subflow-input-name").val(subflow.name);
RED.text.bidi.prepareInput($("#subflow-input-name"));
@@ -1858,10 +2021,7 @@ RED.editor = (function() {
}
})
$("#subflow-input-category").val(subflow.category||"subflows");
subflowEditor.getSession().setValue(subflow.info||"",-1);
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;
@@ -1872,8 +2032,8 @@ RED.editor = (function() {
});
$("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
buildLabelForm(portLabels.content,subflow);
trayBody.i18n();
finishedBuilding = true;
},
close: function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
@@ -1882,6 +2042,7 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node);
RED.workspaces.refresh();
subflowEditor.destroy();
subflowEditor = null;
editStack.pop();
editing_node = null;
},

1
editor/js/ui/tray.js
View File

@@ -232,6 +232,7 @@ RED.tray = (function() {
}
},
resize: handleWindowResize,
close: function close(done) {
if (stack.length > 0) {
var tray = stack.pop();

7
editor/templates/index.mst
View File

@@ -136,13 +136,6 @@
<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 for="subflow-input-info" data-i18n="editor:subflow.info"></label>
<a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
</div>
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="subflow-input-info-editor"></div>
</div>
<div class="form-row form-tips" id="subflow-dialog-user-count"></div>
</script>
<script src="vendor/vendor.js"></script>