diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js index 0c7944c84..3739cd970 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js @@ -1,26 +1,5 @@ RED.colorPicker = (function() { - function getDarkerColor(c) { - var r,g,b; - if (/^#[a-f0-9]{6}$/i.test(c)) { - r = parseInt(c.substring(1, 3), 16); - g = parseInt(c.substring(3, 5), 16); - b = parseInt(c.substring(5, 7), 16); - } else if (/^#[a-f0-9]{3}$/i.test(c)) { - r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16); - g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16); - b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16); - } else { - return c; - } - var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ; - r = Math.max(0,r-50); - g = Math.max(0,g-50); - b = Math.max(0,b-50); - var s = ((r<<16) + (g<<8) + b).toString(16); - return '#'+'000000'.slice(0, 6-s.length)+s; - } - function create(options) { var color = options.value; var id = options.id; @@ -57,7 +36,7 @@ RED.colorPicker = (function() { "background-color": color, "opacity": opacity }); - var border = getDarkerColor(color); + var border = RED.utils.getDarkerColor(color); if (border[0] === '#') { border += Math.round(255*Math.floor(opacity*100)/100).toString(16); } else { @@ -132,7 +111,7 @@ RED.colorPicker = (function() { height: height+"px", margin: margin+"px", backgroundColor: col, - "border-color": getDarkerColor(col) + "border-color": RED.utils.getDarkerColor(col) }).appendTo(row); button.on("click", function (e) { e.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index e36e5c969..d5e6d8c1a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -790,6 +790,11 @@ RED.editor = (function() { nodeDiv.css({ 'backgroundColor': backgroundColor }); + var borderColor = RED.utils.getDarkerColor(backgroundColor); + if (borderColor !== backgroundColor) { + nodeDiv.css('border-color',borderColor) + } + } var iconContainer = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); @@ -932,7 +937,12 @@ RED.editor = (function() { $("#red-ui-editor-node-color").on('change', function(ev) { // Horribly out of scope... - nodeDiv.css('backgroundColor',$(this).val()); + var colour = $(this).val(); + nodeDiv.css('backgroundColor',colour); + var borderColor = RED.utils.getDarkerColor(colour); + if (borderColor !== colour) { + nodeDiv.css('border-color',borderColor) + } }) } @@ -948,6 +958,11 @@ RED.editor = (function() { var colour = RED.utils.getNodeColor(node.type, node._def); var icon_url = RED.utils.getNodeIcon(node._def,node); nodeDiv.css('backgroundColor',colour); + var borderColor = RED.utils.getDarkerColor(colour); + if (borderColor !== colour) { + nodeDiv.css('border-color',borderColor) + } + var iconContainer = $('',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); RED.utils.createIconElement(icon_url, iconContainer, true); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index f84fae02f..7be689c4a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -251,17 +251,7 @@ RED.search = (function() { var def = node._def; div = $('',{href:'#',class:"red-ui-search-result"}).appendTo(container); - var nodeDiv = $('