diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js index 381bb9d3a..308f25f0e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js @@ -673,6 +673,74 @@ RED.popover = (function() { show:show, hide:hide } + }, + dialog: function(options) { + + const dialogContent = $('
'); + + if (options.closeButton !== false) { + $('').appendTo(dialogContent).click(function(evt) { + evt.preventDefault(); + close(); + }) + } + + const dialogBody = $('
').appendTo(dialogContent); + if (options.title) { + $('

').text(options.title).appendTo(dialogBody); + } + $('
').css("text-align","left").html(options.content).appendTo(dialogBody); + + const stepToolbar = $('
',{class:"red-ui-dialog-toolbar"}).appendTo(dialogContent); + + if (options.buttons) { + options.buttons.forEach(button => { + const btn = $('').text(button.text).appendTo(stepToolbar); + if (button.class) { + btn.addClass(button.class); + } + if (button.click) { + btn.on('click', function(evt) { + evt.preventDefault(); + button.click(); + }) + } + + }) + } + + const width = 500; + const maxWidth = Math.min($(window).width()-10,Math.max(width || 0, 300)); + + let shade = $('
').appendTo(document.body); + shade.fadeIn() + + let popover = RED.popover.create({ + target: $(".red-ui-editor"), + width: width || "auto", + maxWidth: maxWidth+"px", + direction: "inset", + class: "red-ui-dialog", + trigger: "manual", + content: dialogContent + }).open() + + function close() { + if (shade) { + shade.fadeOut(() => { + shade.remove() + shade = null + }) + } + if (popover) { + popover.close() + popover = null + } + } + + return { + close + } } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss index 3df2b495b..027e783a3 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss @@ -205,3 +205,39 @@ background: var(--red-ui-secondary-background); z-index: 2000; } + + +.red-ui-popover.red-ui-dialog { + z-index: 2003; + --red-ui-popover-background: var(--red-ui-secondary-background); + --red-ui-popover-border: var(--red-ui-tourGuide-border); + --red-ui-popover-color: var(--red-ui-primary-text-color); + + .red-ui-popover-content { + h2 { + text-align: center; + margin-top: 0px; + line-height: 1.2em; + color: var(--red-ui-tourGuide-heading-color); + i.fa { + font-size: 1.5em + } + } + } + +} + +.red-ui-dialog-toolbar { + min-height: 36px; + position: relative; + display: flex; + justify-content: flex-end; + gap: 10px; +} +.red-ui-dialog-body { + padding: 20px 40px 10px; + a { + color: var(--red-ui-text-color-link) !important; + text-decoration: none; + } +}