From a71d4223ff761ea23770306d5ccdc0f7b4fe45b6 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 23 May 2019 23:38:42 +0100 Subject: [PATCH] Add node-select to typedInput --- .../editor-client/locales/en-US/editor.json | 2 +- .../src/images/typedInput/target.png | Bin 0 -> 944 bytes .../src/js/ui/common/typedInput.js | 70 +++++++++++++++++- .../@node-red/editor-client/src/js/ui/view.js | 59 ++++++++------- .../src/sass/ui/common/typedInput.scss | 9 +++ .../@node-red/nodes/core/core/25-catch.html | 1 - .../@node-red/nodes/core/core/25-status.html | 1 - .../nodes/locales/en-US/messages.json | 1 - 8 files changed, 113 insertions(+), 30 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/images/typedInput/target.png diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 023ca4b60..f5a3a0e8b 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -29,7 +29,7 @@ "enabled": "Enabled", "disabled":"Disabled", "info": "Description", - "selectNodes": "Select nodes" + "selectNodes": "Click nodes to select" }, "menu": { "label": { diff --git a/packages/node_modules/@node-red/editor-client/src/images/typedInput/target.png b/packages/node_modules/@node-red/editor-client/src/images/typedInput/target.png new file mode 100644 index 0000000000000000000000000000000000000000..cc9833b73c2db1156146db7eec1477f77829347e GIT binary patch literal 944 zcmV;h15f;kP)m-OT_113gJZ zK~#9!?VG=E(?Aq}Kc@u=QB@2by>|dH5$QyhbgYEb`~|3689P817-0d1j_ran(5(Y3 zWndr-NGG);3~UVE=zuB}F;s-17q}jFa=uIK5Z;q2r;hL4eRybF4*@Nh%*^?OCv3We~Liy0CQsHxLn-YDub^NGa9Nxi6EM0L+7{ z3Non^t_sMR-$eyb00mG01yBG5PynTx$jd>m0v+I`$K?xJ>(hS%P$_jC*aX&rdCy^I zKo{87T7Q~aK&8|(;C`f<=UVFrQw3qSGK(I_8{jF>^HkFYwt!XZ+%eG6T7Rew&{(eLz}*9O166JSI}T(!#*(pN zqHDpO04ou2n6WEH*T9v#wOBA`Ls`jlNv-uLJw-12ZX6p=65*O3hq>h_Fb`1IU2lZA zYN(5DIvYw9T)~)KqdRZT$yv~3DBr9ge!(?E;D%VzcGWZBTG@;QW~7WC;~=Ex)9$*=_%!I`}<{RmmAV2w+40xnko z7&S*D^3hdmSkmAV^gXU=g)UBOoiyy25g={Bq?4*OO*+*x z3s11V*)&+J15zd|wXJGDC{=3&d@`p_jkaYkd;m2f$or;rTXyXk(s>KrWVWr>tERN+ z=eeqH@?B6atrpDbEps7*vMl?Wrs)E3+nl-sya&Fxn@yHwBf-)%&2!Ctr{LWSS!--h z=8!*~v=g%-^oWx-=bgAk^Z$|7x>;8oT(?rGMN_+NMCjWvIu@-oZN0WYZ(0Z)CtutF z4vZzrSnYtnJ8GTS-l#NwOM*^a>wa#WfLWHkP1AHAxD4DZaSNOQFMzwDyJaO7%*l9W z@9|kt>%b>(oW^=^<_lf{6hHwKKmim$0TjUcM1B}DNysXG+9M(&A|fL4Kg%!w2P%)& SfOeMv0000',{class:"red-ui-search-result-node"}).css({ + "margin-top": "2px", + "margin-left": "3px" + }).appendTo(container); + var nodeLabel = $('').css({ + "line-height": "32px", + "margin-left": "6px" + }).appendTo(container); + if (node) { + var colour = RED.utils.getNodeColor(node.type,node._def); + var icon_url = RED.utils.getNodeIcon(node._def,node); + if (node.type === 'tab') { + colour = "#C0DEED"; + } + nodeDiv.css('backgroundColor',colour); + var iconContainer = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); + RED.utils.createIconElement(icon_url, iconContainer, true); + var l = RED.utils.getNodeLabel(node,node.id); + nodeLabel.text(l); + } else { + nodeDiv.css({ + 'backgroundColor': '#eee', + 'border-style' : 'dashed' + }); + + } + }, + expand: function() { + var that = this; + RED.tray.hide(); + RED.view.selectNodes({ + single: true, + selected: [that.value()], + onselect: function(selection) { + that.value(selection.id); + RED.tray.show(); + }, + oncancel: function() { + RED.tray.show(); + } + }) + } } }; var nlsd = false; @@ -212,6 +261,8 @@ that.uiSelect.addClass('red-ui-typedInput-focus'); }) + this.valueLabelContainer = $('
').appendTo(this.uiSelect) + // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline' this.optionSelectTrigger = $('').appendTo(this.uiSelect); this.optionSelectLabel = $('').prependTo(this.optionSelectTrigger); @@ -394,10 +445,13 @@ this.selectTrigger.removeClass("red-ui-typedInput-full-width"); var labelWidth = this._getLabelWidth(this.selectTrigger); this.elementDiv.css('left',labelWidth+"px"); + this.valueLabelContainer.css('left',labelWidth+"px"); if (this.optionExpandButton.is(":visible")) { this.elementDiv.css('right',"22px"); + this.valueLabelContainer.css('right',"22px"); } else { this.elementDiv.css('right','0'); + this.valueLabelContainer.css('right','0'); this.input.css({ 'border-top-right-radius': '4px', 'border-bottom-right-radius': '4px' @@ -520,8 +574,13 @@ selectedOption = {value:""} } this._updateOptionSelectLabel(selectedOption) + } else { + this.input.val(value); + } + if (this.typeMap[this.propertyType].valueLabel) { + this.valueLabelContainer.empty(); + this.typeMap[this.propertyType].valueLabel.call(this,this.valueLabelContainer,value); } - this.input.val(value); this.input.trigger('change',this.type(),value); } }, @@ -566,8 +625,10 @@ this.optionSelectTrigger.show(); if (!opt.hasValue) { this.elementDiv.hide(); + this.valueLabelContainer.hide(); } else { this.elementDiv.show(); + this.valueLabelContainer.hide(); } this.activeOptions = {}; opt.options.forEach(function(o) { @@ -655,11 +716,18 @@ this.oldValue = this.input.val(); this.input.val(""); this.elementDiv.hide(); + this.valueLabelContainer.hide(); + } else if (opt.valueLabel) { + this.valueLabelContainer.show(); + this.valueLabelContainer.empty(); + opt.valueLabel.call(this,this.valueLabelContainer,this.input.val()); + this.elementDiv.hide(); } else { if (this.oldValue !== undefined) { this.input.val(this.oldValue); delete this.oldValue; } + this.valueLabelContainer.hide(); this.elementDiv.show(); } if (this.optionExpandButton) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 70feb2693..c71891c31 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -1386,6 +1386,9 @@ RED.view = (function() { } function selectAll() { + if (mouse_mode === RED.state.SELECTING_NODE && selectNodesOptions.single) { + return; + } RED.nodes.eachNode(function(n) { if (n.z == RED.workspaces.active()) { if (mouse_mode === RED.state.SELECTING_NODE) { @@ -2269,6 +2272,10 @@ RED.view = (function() { return; } else if (mouse_mode === RED.state.SELECTING_NODE) { d3.event.stopPropagation(); + if (selectNodesOptions.single) { + selectNodesOptions.done(d); + return; + } if (d.selected) { d.selected = false; for (i=0;iError: __message__", "errors": { "not-deployed": "node not deployed",