diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index cbd08a5ea..a57b93852 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -596,7 +596,8 @@ RED.editor = (function() { },0); } }, - open: function(trayBody) { + open: function(tray) { + var trayBody = tray.find('.editor-tray-body'); RED.keyboard.disable(); var dialogForm = $('
').appendTo(trayBody); dialogForm.html($("script[data-template-name='"+type+"']").html()); @@ -656,7 +657,6 @@ RED.editor = (function() { RED.sidebar.info.refresh(editing_node); } RED.workspaces.refresh(); - RED.tray.close(); } } /*).parent().on('keydown', function(evt) { @@ -669,11 +669,15 @@ RED.editor = (function() { */ RED.tray.show(trayOptions); } - + /** + * name - name of the property that holds this config node + * type - type of config node + * id - id of config node to edit. _ADD_ for a new one + */ function showEditConfigNodeDialog(name,type,id) { var adding = (id == "_ADD_"); var node_def = RED.nodes.getType(type); - editing_config_node = RED.nodes.node(id); + var editing_config_node = RED.nodes.node(id); var ns; if (node_def.set.module === "node-red") { @@ -681,12 +685,10 @@ RED.editor = (function() { } else { ns = node_def.set.id; } - var activeWorkspace = RED.nodes.workspace(RED.workspaces.active()); if (!activeWorkspace) { activeWorkspace = RED.nodes.subflow(RED.workspaces.active()); } - if (editing_config_node == null) { editing_config_node = { id: (1+Math.random()*4294967295).toString(16), @@ -702,149 +704,251 @@ RED.editor = (function() { } editing_config_node["_"] = node_def._; } - - $("#node-config-dialog-edit-form").html($("script[data-template-name='"+type+"']").html()); - - $("#dialog-config-form").find('[data-i18n]').each(function() { - var current = $(this).attr("data-i18n"); - if (current.indexOf(":") === -1) { - var prefix = ""; - if (current.indexOf("[")===0) { - var parts = current.split("]"); - prefix = parts[0]+"]"; - current = parts[1]; + editStack.push({node:editing_config_node}); + RED.view.state(RED.state.EDITING); + var trayOptions = { + title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})), + resize: function() { + var editing_node = editStack[editStack.length-1]; + if (editing_node && editing_node.node._def.oneditresize) { + setTimeout(function() { + var form = $("#node-config-dialog-edit-form"); + editing_node.node._def.oneditresize.call(editing_node.node,{width:form.width(),height:form.height()}); + },0); } - $(this).attr("data-i18n",prefix+ns+":"+current); + }, + open: function(tray) { + var trayHeader = tray.find(".editor-tray-header"); + var trayBody = tray.find(".editor-tray-body"); + var trayFooter = tray.find(".editor-tray-footer"); + + trayFooter.prepend('
'); + trayHeader.append(''); + + if (RED.view.state() != RED.state.EDITING) { + RED.keyboard.disable(); + } + var dialogForm = $('
').appendTo(trayBody); + dialogForm.html($("script[data-template-name='"+type+"']").html()); + dialogForm.find('[data-i18n]').each(function() { + var current = $(this).attr("data-i18n"); + if (current.indexOf(":") === -1) { + var prefix = ""; + if (current.indexOf("[")===0) { + var parts = current.split("]"); + prefix = parts[0]+"]"; + current = parts[1]; + } + $(this).attr("data-i18n",prefix+ns+":"+current); + } + }); + $('').prependTo(dialogForm); + prepareEditDialog(editing_config_node,node_def,"node-config-input"); + if (editing_config_node._def.exclusive) { + $("#node-config-dialog-scope").hide(); + } else { + $("#node-config-dialog-scope").show(); + } + $("#node-config-dialog-scope-warning").hide(); + + var nodeUserFlows = {}; + editing_config_node.users.forEach(function(n) { + nodeUserFlows[n.z] = true; + }); + var flowCount = Object.keys(nodeUserFlows).length; + var tabSelect = $("#node-config-dialog-scope").empty(); + tabSelect.off("change"); + tabSelect.append(''); + tabSelect.append(''); + RED.nodes.eachWorkspace(function(ws) { + var workspaceLabel = ws.label; + if (nodeUserFlows[ws.id]) { + workspaceLabel = "* "+workspaceLabel; + } + tabSelect.append(''); + }); + tabSelect.append(''); + RED.nodes.eachSubflow(function(ws) { + var workspaceLabel = ws.name; + if (nodeUserFlows[ws.id]) { + workspaceLabel = "* "+workspaceLabel; + } + tabSelect.append(''); + }); + if (flowCount > 0) { + tabSelect.on('change',function() { + var newScope = $(this).val(); + if (newScope === '') { + // global scope - everyone can use it + $("#node-config-dialog-scope-warning").hide(); + } else if (!nodeUserFlows[newScope] || flowCount > 1) { + // a user will loose access to it + $("#node-config-dialog-scope-warning").show(); + } else { + $("#node-config-dialog-scope-warning").hide(); + } + }); + } + tabSelect.i18n(); + + dialogForm.i18n(); + + $("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); + + }, + close: function() { + if (RED.view.state() != RED.state.EDITING) { + RED.keyboard.enable(); + } + RED.workspaces.refresh(); } - }); - - - prepareEditDialog(editing_config_node,node_def,"node-config-input"); - - var buttons = $( "#node-config-dialog" ).dialog("option","buttons"); - if (adding) { - if (buttons.length == 3) { - buttons = buttons.splice(1); - } - buttons[0].text = "Add"; - $("#node-config-dialog-user-count").find("span").html("").parent().hide(); - } else { - if (buttons.length == 2) { - buttons.unshift({ - class: 'leftButton', - text: RED._("editor.configDelete"), - click: function() { - var configProperty = $(this).dialog('option','node-property'); - var configId = $(this).dialog('option','node-id'); - var configType = $(this).dialog('option','node-type'); - - var configTypeDef = RED.nodes.getType(configType); - - if (configTypeDef.ondelete) { - configTypeDef.ondelete.call(editing_config_node); + } + trayOptions.buttons = [ + { + id: "node-config-dialog-ok", + text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"), + click: function() { + var configProperty = name; + var configId = editing_config_node.id; + var configType = type; + var configAdding = adding; + var configTypeDef = RED.nodes.getType(configType); + var d; + var input; + var scope = $("#node-config-dialog-scope").val(); + for (d in configTypeDef.defaults) { + if (configTypeDef.defaults.hasOwnProperty(d)) { + input = $("#node-config-input-"+d); + if (input.attr('type') === "checkbox") { + editing_config_node[d] = input.prop('checked'); + } else { + editing_config_node[d] = input.val(); } - if (configTypeDef.oneditdelete) { - configTypeDef.oneditdelete.call(editing_config_node); - } - var historyEvent = { - t:'delete', - nodes:[editing_config_node], - changes: {}, - dirty: RED.nodes.dirty() - } - RED.nodes.remove(configId); - for (var i=0;i'); - tabSelect.append(''); - RED.nodes.eachWorkspace(function(ws) { - var workspaceLabel = ws.label; - if (nodeUserFlows[ws.id]) { - workspaceLabel = "* "+workspaceLabel; - } - tabSelect.append(''); - }); - tabSelect.append(''); - RED.nodes.eachSubflow(function(ws) { - var workspaceLabel = ws.name; - if (nodeUserFlows[ws.id]) { - workspaceLabel = "* "+workspaceLabel; - } - tabSelect.append(''); - }); - if (flowCount > 0) { - tabSelect.on('change',function() { - var newScope = $(this).val(); - if (newScope === '') { - // global scope - everyone can use it - $("#node-config-dialog-scope-warning").hide(); - } else if (!nodeUserFlows[newScope] || flowCount > 1) { - // a user will loose access to it - $("#node-config-dialog-scope-warning").show(); - } else { - $("#node-config-dialog-scope-warning").hide(); + if (configTypeDef.ondelete) { + configTypeDef.ondelete.call(editing_config_node); + } + if (configTypeDef.oneditdelete) { + configTypeDef.oneditdelete.call(editing_config_node); + } + var historyEvent = { + t:'delete', + nodes:[editing_config_node], + changes: {}, + dirty: RED.nodes.dirty() + } + RED.nodes.remove(configId); + for (var i=0;i'+workspaceLabel+''); - tabSelect.i18n(); - - $( "#node-config-dialog" ).dialog("option","buttons",buttons); - - $("#node-config-dialog").i18n(); - - $( "#node-config-dialog" ) - .dialog("option","node-adding",adding) - .dialog("option","node-property",name) - .dialog("option","node-id",editing_config_node.id) - .dialog("option","node-type",type) - .dialog("option","title",(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type}))) - .dialog( "open" ); + RED.tray.show(trayOptions); } + function updateConfigNodeSelect(name,type,value) { var button = $("#node-input-edit-"+name); if (button.length) { diff --git a/editor/js/ui/tray.js b/editor/js/ui/tray.js index 9b83986f9..38775e328 100644 --- a/editor/js/ui/tray.js +++ b/editor/js/ui/tray.js @@ -20,6 +20,62 @@ RED.tray = (function() { function resize() { } + function showTray(options) { + var el = $('
'); + var header = $('
'+(options.title||"")+'
').appendTo(el); + var body = $('
').appendTo(el); + var footer = $('').appendTo(el); + if (options.buttons) { + for (var i=0;i').appendTo(footer); + if (button.id) { + b.attr('id',button.id); + } + if (button.text) { + b.text(button.text); + } + if (button.click) { + b.click(button.click); + } + if (button.class) { + b.addClass(button.class); + } + } + } + el.appendTo("#editor-stack"); + var tray = { + tray: el, + header: header, + body: body, + footer: footer, + options: options + }; + if (options.open) { + options.open(el); + } + + $("#editor-shade").show(); + el.css({ + right: -(el.width()+10)+"px", + transition: "right 0.2s ease" + }); + $("#workspace").scrollLeft(0); + + stack.push(tray); + + setTimeout(function() { + var trayHeight = el.height()-header.outerHeight()-footer.outerHeight(); + body.height(trayHeight-40); + + if (options.resize) { + options.resize(); + } + el.css({right:0}); + },0); + } + return { init: function() { $( window ).resize(function() { @@ -43,61 +99,12 @@ RED.tray = (function() { }); setTimeout(function() { oldTray.tray.detach(); - },400) - } - var el = $('
'); - var header = $('
'+(options.title||"")+'
').appendTo(el); - var body = $('
').appendTo(el); - var footer = $('').appendTo(el); - //'
'+ - // ''+ - // ''+ - if (options.buttons) { - for (var i=0;i').appendTo(footer); - if (button.id) { - b.attr('id',button.id); - } - if (button.text) { - b.text(button.text); - } - if (button.click) { - b.click(button.click); - } - } - } - el.appendTo("#editor-stack"); - var tray = { - tray: el, - header: header, - body: body, - footer: footer, - options: options - }; - if (options.open) { - options.open(body); + showTray(options); + },200) + } else { + showTray(options); } - $("#editor-shade").show(); - el.css({ - right: -(el.width()+10)+"px", - transition: "right 0.3s ease" - }); - $("#workspace").scrollLeft(0); - - stack.push(tray); - - setTimeout(function() { - var trayHeight = el.height()-header.outerHeight()-footer.outerHeight(); - body.height(trayHeight-40); - - if (options.resize) { - options.resize(); - } - el.css({right:0}); - },0); }, close: function close() { if (stack.length > 0) { @@ -117,7 +124,7 @@ RED.tray = (function() { oldTray.tray.css({right:0}); },0); } - },400) + },200) if (stack.length === 0) { $("#editor-shade").hide(); } diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index 59e2430f0..e93c01ba2 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -23,10 +23,6 @@ border-color: rgb(214, 97, 95) !important; } -.ui-dialog .ui-dialog-buttonpane button.leftButton { - margin-right: 40px; -} - .form-row { clear: both; color: $form-text-color; diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss index f64dca97c..da11d8ba1 100644 --- a/editor/sass/sidebar.scss +++ b/editor/sass/sidebar.scss @@ -22,7 +22,7 @@ width: 315px; background: #fff; box-sizing: border-box; - z-index: 100; + z-index: 10; @include component-border; } @@ -47,7 +47,7 @@ right: 315px; bottom:10px; width: 7px; - z-index: 101; + z-index: 11; background: $background-color url(images/grip.png) no-repeat 50% 50%; cursor: col-resize; } diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss index 4d7b0d74b..6bfc2d1ab 100644 --- a/editor/sass/workspace.scss +++ b/editor/sass/workspace.scss @@ -97,9 +97,14 @@ button { @include workspace-button; padding: 0.4em 1em; - } + margin-right: 8px; + &.leftButton { + margin-right: 40px; + } + } } + #editor-shade { position: absolute; top:0; diff --git a/red/api/locales/en-US/editor.json b/red/api/locales/en-US/editor.json index 01643954c..d92f97f45 100644 --- a/red/api/locales/en-US/editor.json +++ b/red/api/locales/en-US/editor.json @@ -121,8 +121,9 @@ } }, "editor": { - "configEdit": "edit", - "configAdd": "add", + "configEdit": "Edit", + "configAdd": "Add", + "configUpdate": "Update", "configDelete": "Delete", "nodesUse": "__count__ node uses this config", "nodesUse_plural": "__count__ nodes use this config",