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

Tidy up appearance tab in edit dialog

This commit is contained in:
Nick O'Leary 2018-10-22 14:41:47 +01:00
parent 0376e0d711
commit 0a98ba6985
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 776 additions and 745 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -269,7 +269,8 @@
"editConfig": "Edit __type__ config node",
"addNewType": "Add new __type__...",
"nodeProperties": "node properties",
"portLabels": "node settings",
"label": "Label",
"portLabels": "Port labels",
"labelInputs": "Inputs",
"labelOutputs": "Outputs",
"settingIcon": "Icon",
@ -278,6 +279,8 @@
"searchIcons": "Search icons",
"useDefault": "use default",
"description": "Description",
"show": "Show",
"hide": "Hide",
"errors": {
"scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it"
}

1466
packages/node_modules/@node-red/editor-client/src/js/font-awesome.js vendored
View File

File diff suppressed because it is too large Load Diff

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

@ -778,22 +778,41 @@ RED.editor = (function() {
var i,row;
$('<div class="form-row">'+
'<label style="margin:0; margin-right: 20px; width: auto" for="node-input-show-label" data-i18n="">Show node label</label>'+
'<input style="margin:0;" type="checkbox" id="node-input-show-label"/>'+
'<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
'<button id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
'<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+
'</div>').appendTo(dialogForm);
var setToggleState = function(state) {
var i = $("#node-input-show-label-btn-i");
if (!state) {
i.addClass('fa-toggle-off');
i.removeClass('fa-toggle-on');
$("#node-input-show-label").prop("checked",false);
$("#node-input-show-label-label").text(RED._("editor.hide"));
} else {
i.addClass('fa-toggle-on');
i.removeClass('fa-toggle-off');
$("#node-input-show-label").prop("checked",true);
$("#node-input-show-label-label").text(RED._("editor.show"));
}
}
dialogForm.find('#node-input-show-label-btn').on("click",function(e) {
e.preventDefault();
var i = $("#node-input-show-label-btn-i");
setToggleState(i.hasClass('fa-toggle-off'));
})
if (!node.hasOwnProperty("l")) {
// Show label if type not link
node.l = !/^link (in|out)$/.test(node._def.type);
}
$("#node-input-show-label").prop("checked",node.l);
setToggleState(node.l);
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
$('<label style="width: 50px" data-i18n="editor.settingIcon">').appendTo(iconRow);
$('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
var iconButton = $('<button class="editor-button">').appendTo(iconRow);
var iconButton = $('<button class="editor-button" id="node-settings-icon-button">').appendTo(iconRow);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
var colour = RED.utils.getNodeColor(node.type, node._def);
@ -817,11 +836,10 @@ RED.editor = (function() {
RED.utils.createIconElement(icon_url, iconContainer, true);
});
})
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
$('<div id="node-settings-icon">').text(node.icon).appendTo(iconButton);
}
$('<hr>').appendTo(dialogForm);
$('<div class="form-row"><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;
@ -836,7 +854,7 @@ RED.editor = (function() {
var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
$('<div class="form-row"><span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
$('<div class="form-row"><span style="margin-left: 10px;" data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
var inputsDiv = $("#node-label-form-inputs");
if (inputCount > 0) {
for (i=0;i<inputCount;i++) {
@ -845,7 +863,7 @@ RED.editor = (function() {
} else {
buildLabelRow().appendTo(inputsDiv);
}
$('<div class="form-row"><span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
$('<div class="form-row"><span style="margin-left: 10px;" data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
var outputsDiv = $("#node-label-form-outputs");
if (outputCount > 0) {
for (i=0;i<outputCount;i++) {

10
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -378,6 +378,16 @@
}
}
#node-settings-icon-button {
position: relative;
padding-left: 30px;
width: calc(100% - 150px);
.red-ui-search-result-node {
position: absolute;
top: 2px;
left: 2px;
}
}
#node-settings-icon {
margin-left: 10px;
width: calc(100% - 163px);