diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index 16d02456c..e2c8185cb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js @@ -159,9 +159,6 @@ RED.sidebar.config = (function() { nodeDiv.data('node',node.id); var label = $('
').text(labelText).appendTo(nodeDiv); - if (!node.valid) { - nodeDiv.addClass("red-ui-palette-node-config-invalid") - } if (node.d) { nodeDiv.addClass("red-ui-palette-node-config-disabled"); $('').prependTo(label); @@ -183,6 +180,20 @@ RED.sidebar.config = (function() { nodeDiv.addClass("red-ui-palette-node-config-unused"); } } + + if (!node.valid) { + nodeDiv.addClass("red-ui-palette-node-config-invalid") + const nodeDivAnnotations = $('').appendTo(nodeDiv) + const errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path"); + errorBadge.setAttribute("d","M 0,9 l 10,0 -5,-8 z"); + nodeDivAnnotations.append($(errorBadge)) + RED.popover.tooltip(nodeDivAnnotations, function () { + if (node.validationErrors && node.validationErrors.length > 0) { + return RED._("editor.errors.invalidProperties")+"
- "+node.validationErrors.join("
- ") + } + }) + } + nodeDiv.on('click',function(e) { e.stopPropagation(); RED.view.select(false); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index 52a2bc4e2..9d678daa1 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss @@ -36,7 +36,7 @@ ul.red-ui-sidebar-node-config-list { text-align: center; } .red-ui-palette-node { - overflow: hidden; + // overflow: hidden; cursor: default; &.selected { border-color: transparent; @@ -116,6 +116,12 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { .red-ui-palette-node-config-invalid { border-color: var(--red-ui-form-input-border-error-color) } +.red-ui-palette-node-annotations { + position: absolute; + left: calc(100% - 15px); + top: -8px; + display: block; +} .red-ui-sidebar-node-config-filter-info { position: absolute; top: 0;