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

Move edit tray buttons to top

Browse Source
This commit is contained in:
Nick O'Leary
2016-05-03 15:45:29 +01:00
parent 8080ebceb4
commit ce25fc658b
7 changed files with 317 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
editor/js/ui/editor.js
View File

@@ -15,6 +15,8 @@
**/
RED.editor = (function() {
var editStack = [];
var editing_node = null;
var editing_config_node = null;
var subflowEditor;
@@ -417,19 +419,86 @@ RED.editor = (function() {
}
}
function getEditStackTitle() {
var title = '<ul class="editor-tray-breadcrumbs">';
for (var i=0;i<editStack.length;i++) {
var node = editStack[i];
var label = node.type;
if (node.type === 'subflow') {
label = RED._("subflow.editSubflow",{name:node.name})
} else if (node.type.indexOf("subflow:")===0) {
var subflow = RED.nodes.subflow(node.type.substring(8));
label = RED._("subflow.editSubflow",{name:subflow.name})
} else {
if (typeof node._def.paletteLabel !== "undefined") {
try {
label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
} catch(err) {
console.log("Definition error: "+node.type+".paletteLabel",err);
}
}
if (i === editStack.length-1) {
if (RED.nodes.node(node.id)) {
label = RED._("editor.editNode",{type:label});
} else {
label = RED._("editor.addNewConfig",{type:label});
}
}
}
title += '<li>'+label+'</li>';
}
title += '</ul>';
return title;
}
function showEditDialog(node) {
var editing_node = node;
editStack.push(node);
RED.view.state(RED.state.EDITING);
var type = node.type;
if (node.type.substring(0,8) == "subflow:") {
type = "subflow";
}
var trayOptions = {
title: "Edit "+type+" node",
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
if (editing_node._def) {
if (editing_node._def.oneditcancel) {
editing_node._def.oneditcancel.call(editing_node);
}
for (var d in editing_node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) {
var def = editing_node._def.defaults[d];
if (def.type) {
var configTypeDef = RED.nodes.getType(def.type);
if (configTypeDef && configTypeDef.exclusive) {
var input = $("#node-input-"+d).val()||"";
if (input !== "" && !editing_node[d]) {
// This node has an exclusive config node that
// has just been added. As the user is cancelling
// the edit, need to delete the just-added config
// node so that it doesn't get orphaned.
RED.nodes.remove(input);
}
}
}
}
}
}
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.ok"),
text: RED._("common.label.done"),
class: "primary",
click: function() {
var changes = {};
var changed = false;
@@ -556,38 +625,6 @@ RED.editor = (function() {
RED.view.redraw(true);
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
if (editing_node._def) {
if (editing_node._def.oneditcancel) {
editing_node._def.oneditcancel.call(editing_node);
}
for (var d in editing_node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) {
var def = editing_node._def.defaults[d];
if (def.type) {
var configTypeDef = RED.nodes.getType(def.type);
if (configTypeDef && configTypeDef.exclusive) {
var input = $("#node-input-"+d).val()||"";
if (input !== "" && !editing_node[d]) {
// This node has an exclusive config node that
// has just been added. As the user is cancelling
// the edit, need to delete the just-added config
// node so that it doesn't get orphaned.
RED.nodes.remove(input);
}
}
}
}
}
}
RED.tray.close();
}
}
],
resize: function(dimensions) {
@@ -631,26 +668,6 @@ RED.editor = (function() {
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
prepareEditDialog(node,node._def,"node-input");
dialogForm.i18n();
// var minWidth = $(this).dialog('option','minWidth');
// if ($(this).outerWidth() < minWidth) {
// $(this).dialog('option','width',minWidth);
// } else {
// $(this).dialog('option','width',$(this).outerWidth());
// }
// if (editing_node) {
// var size = $(this).dialog('option','sizeCache-'+editing_node.type);
// if (size) {
// $(this).dialog('option','width',size.width);
// $(this).dialog('option','height',size.height);
// }
// if (editing_node._def.oneditresize) {
// setTimeout(function() {
// var form = $("#dialog-form");
// editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
// },0);
// }
// }
},
close: function() {
RED.keyboard.enable();
@@ -661,6 +678,7 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node);
}
RED.workspaces.refresh();
editStack.pop();
},
show: function() {
if (editing_node) {
@@ -668,14 +686,6 @@ RED.editor = (function() {
}
}
}
/*).parent().on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-cancel").click();
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-ok").click();
}
});
*/
if (editTrayWidthCache[type]) {
trayOptions.width = editTrayWidthCache[type];
}
@@ -683,7 +693,7 @@ RED.editor = (function() {
if (type === 'subflow') {
var id = editing_node.type.substring(8);
trayOptions.buttons.unshift({
class: 'leftButton',
class: 'leftButton primary',
text: RED._("subflow.edit"),
click: function() {
RED.workspaces.show(id);
@@ -730,9 +740,11 @@ RED.editor = (function() {
}
editing_config_node["_"] = node_def._;
}
editStack.push(editing_config_node);
RED.view.state(RED.state.EDITING);
var trayOptions = {
title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
resize: function() {
if (editing_config_node && editing_config_node._def.oneditresize) {
var form = $("#node-config-dialog-edit-form");
@@ -745,7 +757,7 @@ RED.editor = (function() {
var trayFooter = tray.find(".editor-tray-footer");
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
trayHeader.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>');
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>');
RED.keyboard.disable();
@@ -822,6 +834,7 @@ RED.editor = (function() {
RED.keyboard.enable();
}
RED.workspaces.refresh();
editStack.pop();
},
show: function() {
if (editing_config_node) {
@@ -830,9 +843,33 @@ RED.editor = (function() {
}
}
trayOptions.buttons = [
{
id: "node-config-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
var configType = type;
var configId = editing_config_node.id;
var configAdding = adding;
var configTypeDef = RED.nodes.getType(configType);
if (configTypeDef.oneditcancel) {
// TODO: what to pass as this to call
if (configTypeDef.oneditcancel) {
var cn = RED.nodes.node(configId);
if (cn) {
configTypeDef.oneditcancel.call(cn,false);
} else {
configTypeDef.oneditcancel.call({id:configId},true);
}
}
}
RED.tray.close();
}
},
{
id: "node-config-dialog-ok",
text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
class: "primary",
click: function() {
var configProperty = name;
var configId = editing_config_node.id;
@@ -931,36 +968,13 @@ RED.editor = (function() {
updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
});
}
},
{
id: "node-config-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
var configType = type;
var configId = editing_config_node.id;
var configAdding = adding;
var configTypeDef = RED.nodes.getType(configType);
if (configTypeDef.oneditcancel) {
// TODO: what to pass as this to call
if (configTypeDef.oneditcancel) {
var cn = RED.nodes.node(configId);
if (cn) {
configTypeDef.oneditcancel.call(cn,false);
} else {
configTypeDef.oneditcancel.call({id:configId},true);
}
}
}
RED.tray.close();
}
}
];
if (!adding) {
trayOptions.buttons.unshift({
class: 'leftButton',
text: RED._("editor.configDelete"),
text: RED._("editor.configDelete"), //'<i class="fa fa-trash"></i>',
click: function() {
var configProperty = name;
var configId = editing_config_node.id;
@@ -1067,15 +1081,24 @@ RED.editor = (function() {
function showEditSubflowDialog(subflow) {
var editing_node = subflow;
editStack.push(subflow);
RED.view.state(RED.state.EDITING);
var subflowEditor;
var trayOptions = {
title: RED._("subflow.editSubflow",{name:subflow.name}),
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.ok"),
class: "primary",
text: RED._("common.label.done"),
click: function() {
var i;
var changes = {};
@@ -1133,13 +1156,6 @@ RED.editor = (function() {
editing_node.dirty = true;
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
}
],
resize: function() {
@@ -1189,7 +1205,7 @@ RED.editor = (function() {
});
$("#subflow-input-name").val(subflow.name);
subflowEditor.getSession().setValue(subflow.info,-1);
subflowEditor.getSession().setValue(subflow.info||"",-1);
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;
@@ -1209,6 +1225,7 @@ RED.editor = (function() {
}
RED.sidebar.info.refresh(editing_node);
RED.workspaces.refresh();
editStack.pop();
editing_node = null;
},
show: function() {
@@ -1222,6 +1239,15 @@ RED.editor = (function() {
return {
init: function() {
RED.tray.init();
$(window).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-cancel").click();
$("#node-config-dialog-cancel").click();
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-ok").click();
$("#node-config-dialog-ok").click();
}
});
},
edit: showEditDialog,
editConfig: showEditConfigNodeDialog,

13
editor/js/ui/tab-config.js
View File

@@ -17,7 +17,7 @@ RED.sidebar.config = (function() {
var content = document.createElement("div");
content.className = "sidebar-node-config"
content.className = "sidebar-node-config";
$('<div class="button-group sidebar-header">'+
'<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
@@ -35,6 +35,9 @@ RED.sidebar.config = (function() {
var flowCategories = $("<div>").appendTo(content);
var subflowCategories = $("<div>").appendTo(content);
var shade = $('<div class="sidebar-node-config-shade hide"></div>').appendTo(content);
var showUnusedOnly = false;
var categories = {};
@@ -288,6 +291,12 @@ RED.sidebar.config = (function() {
return {
init:init,
show:show,
refresh:refreshConfigNodeList
refresh:refreshConfigNodeList,
disable: function() {
shade.show();
},
enable: function() {
shade.hide();
}
}
})();

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

@@ -22,23 +22,26 @@ RED.tray = (function() {
}
function showTray(options) {
var el = $('<div class="editor-tray"></div>');
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
var header = $('<div class="editor-tray-header"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
// var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
// var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
if (options.title) {
$('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
}
var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) {
var button = options.buttons[i];
var b = $('<button>').appendTo(footer);
var b = $('<button>').appendTo(buttonBar);
if (button.id) {
b.attr('id',button.id);
}
if (button.text) {
b.text(button.text);
b.html(button.text);
}
if (button.click) {
b.click(button.click);
@@ -56,6 +59,8 @@ RED.tray = (function() {
footer: footer,
options: options
};
stack.push(tray);
el.draggable({
handle: resizer,
axis: "x",
@@ -88,6 +93,7 @@ RED.tray = (function() {
$("#header-shade").show();
$("#editor-shade").show();
RED.sidebar.config.disable();
tray.preferredWidth = el.width();
if (options.width) {
@@ -103,8 +109,6 @@ RED.tray = (function() {
});
$("#workspace").scrollLeft(0);
stack.push(tray);
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
body.height(trayHeight-40);
@@ -123,27 +127,27 @@ RED.tray = (function() {
el.css({right:0});
},0);
growButton.click(function(e) {
e.preventDefault();
tray.lastWidth = tray.width;
tray.width = $("#editor-stack").position().left-8;
el.width(tray.width);
if (options.resize) {
options.resize({width:tray.width});
}
});
shrinkButton.click(function(e) {
e.preventDefault();
if (tray.lastWidth && tray.width > tray.lastWidth) {
tray.width = tray.lastWidth;
} else if (tray.width > tray.preferredWidth) {
tray.width = tray.preferredWidth;
}
el.width(tray.width);
if (options.resize) {
options.resize({width:tray.width});
}
});
// growButton.click(function(e) {
// e.preventDefault();
// tray.lastWidth = tray.width;
// tray.width = $("#editor-stack").position().left-8;
// el.width(tray.width);
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
// shrinkButton.click(function(e) {
// e.preventDefault();
// if (tray.lastWidth && tray.width > tray.lastWidth) {
// tray.width = tray.lastWidth;
// } else if (tray.width > tray.preferredWidth) {
// tray.width = tray.preferredWidth;
// }
// el.width(tray.width);
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
}
@@ -212,6 +216,8 @@ RED.tray = (function() {
if (stack.length === 0) {
$("#header-shade").hide();
$("#editor-shade").hide();
RED.sidebar.config.enable();
}
}
}