diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js index 9934a6b04..1dd55d26b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js @@ -119,6 +119,7 @@ RED.tabs = (function() { menuOptions = options.menu; } menu = RED.menu.init({options: menuOptions}); + menu.attr("id",options.id+"-menu"); menu.css({ position: "absolute" }) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js index 11f82782e..87f9cabf2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js @@ -44,9 +44,9 @@ RED.tourGuide = (function() { function repositionFocus() { if (targetElement) { - var pos = targetElement[0].getBoundingClientRect(); - var dimension = Math.max(50, Math.max(pos.width,pos.height)*1.5); if (!fullscreen) { + var pos = targetElement[0].getBoundingClientRect(); + var dimension = Math.max(50, Math.max(pos.width,pos.height)*1.5); focus.css({ left: (pos.left+pos.width/2)+"px", top: (pos.top+pos.height/2)+"px", @@ -142,7 +142,19 @@ RED.tourGuide = (function() { if (step.prepare.length === 0) { step.prepare.call(state); } else { - step.prepare.call(state, done) + if (popover) { + popover.element.hide(); + if (!fullscreen) { + fullscreen = true; + repositionFocus() + } + } + step.prepare.call(state, function() { + if (popover) { + popover.element.show(); + } + done(); + }) return; } } @@ -159,7 +171,19 @@ RED.tourGuide = (function() { if (step.complete.length === 0) { step.complete.call(state); } else { - step.complete.call(state, finish) + if (popover) { + popover.element.hide(); + if (!fullscreen) { + fullscreen = true; + repositionFocus() + } + } + step.complete.call(state, function() { + if (popover) { + popover.element.show(); + } + finish(); + }) return; } } @@ -206,11 +230,10 @@ RED.tourGuide = (function() { } zIndex = targetElement.css("z-index"); - if (!fullscreen) { + if (!fullscreen && (step.interactive || step.wait)) { targetElement.css("z-index",2002); } repositionFocus(); - focus.toggleClass("disableInteraction", step.interactive === false) if (!stepContent) { stepContent = $('
'); @@ -329,7 +352,7 @@ RED.tourGuide = (function() { if (nextButton) { setTimeout(function() { nextButton.focus(); - },50); + },100); } var isSVG = targetElement[0] instanceof SVGElement; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss index d33d8d385..e5e87f8da 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss @@ -23,10 +23,6 @@ transition-property: width,height; } - &.disableInteraction { - pointer-events: none; - } - &::before { content: ''; position: absolute; @@ -49,6 +45,7 @@ h2 { text-align: center; margin-top: 0px; + line-height: 1.2em; color: var(--red-ui-tourGuide-heading-color); i.fa { font-size: 1.5em diff --git a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js index f425a3f1e..b3186a49b 100644 --- a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js +++ b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js @@ -12,6 +12,7 @@ export default { "

You can choose not to see this tour in the future by disabling it under the View tab of User Settings.

" } }, { + title: { "en-US": "New Edit menu" }, prepare() { $("#red-ui-header-button-sidemenu").trigger("click"); $("#menu-item-edit-menu").parent().addClass("open") @@ -22,12 +23,12 @@ export default { element: "#menu-item-edit-menu-submenu", interactive: false, direction: "left", - title: { "en-US": "New Edit menu" }, description: { "en-US": "

The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.

"+ "

The menu now displays keyboard shortcuts for the options.

" } }, { + title: { "en-US": "Arranging nodes" }, prepare() { $("#red-ui-header-button-sidemenu").trigger("click"); $("#menu-item-arrange-menu").parent().addClass("open") @@ -38,33 +39,97 @@ export default { element: "#menu-item-arrange-menu-submenu", interactive: false, direction: "left", - title: { "en-US": "Arranging nodes" }, description: { "en-US": "

The new 'Arrange' section of the menu provides new options to help arrange your nodes. You can align them to a common edge, spread them out evenly or change their order.

" }, }, { - element: "#red-ui-workspace-tabs > li:first-child", + title: { "en-US": "Hiding tabs" }, + element: "#red-ui-workspace-tabs > li.active", + description: { "en-US": '

Tabs can now be hidden by clicking their icon.

The Info Sidebar will still list all of your tabs, and tell you which ones are currently hidden.' }, + interactive: false, + prepare() { + $("#red-ui-workspace-tabs > li.active .red-ui-tab-close").css("display","block"); + }, + complete() { + $("#red-ui-workspace-tabs > li.active .red-ui-tab-close").css("display",""); + } + }, + { + title: { "en-US": "Tab menu" }, + element: "#red-ui-workspace-tabs-menu", + description: { "en-US": '

The new tab menu also provides lots of new options for your tabs.

' }, + interactive: false, + direction: "left", + prepare() { + $("#red-ui-workspace > .red-ui-tabs > .red-ui-tabs-menu a").trigger("click"); + }, + complete() { + $(document).trigger("click"); + } + }, + { title: { "en-US": "Flow and Group level environment variables" }, + element: "#red-ui-workspace-tabs > li.active", + interactive: false, description: { "en-US": "

Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.

" }, }, { prepare(done) { RED.editor.editFlow(RED.nodes.workspace(RED.workspaces.active()),"editor-tab-envProperties"); - setTimeout(done,800); + setTimeout(done,700); }, element: "#red-ui-tab-editor-tab-envProperties-link-button", - description: { "en-US": "

Flows and Groups now have an Environment Variables section in their edit dialog.

" }, + description: { "en-US": "

Their edit dialogs have a new Environment Variables section.

" }, }, { - element: ".node-input-env-container-row .red-ui-editableList-addButton", - direction: "top", + element: ".node-input-env-container-row", + direction: "left", description: { "en-US": '

The environment variables are listed in this table and new ones can be added by clicking the button.

' }, - complete() { + complete(done) { $("#node-dialog-cancel").trigger("click"); + setTimeout(done,500); } }, + + { + title: {"en-US":"Link Call node added"}, + prepare(done) { + $('[data-palette-type="link call"]')[0].scrollIntoView({block:"center"}) + setTimeout(done,100); + }, + element: '[data-palette-type="link call"]', + direction: "right", + description: { "en-US": '

The Link Call node lets you call another flow that begins with a Link In node and get the result back when the message reaches a Link Out node.

' }, + }, + + { + title: {"en-US":"File nodes renamed"}, + prepare(done) { + $('[data-palette-type="file"]')[0].scrollIntoView({block:"center"}) + setTimeout(done,100); + }, + element: '[data-palette-type="file"]', + direction: "right", + description: { "en-US": '

The file nodes have been renamed to make it clearer which node does what.

' }, + }, + { + title: {"en-US":"Deep copy option on Change node"}, + prepare(done) { + var def = RED.nodes.getType('change') + RED.editor.edit({id:"test",type:"change",rules:[{t:'set',p:'payload',pt:'msg', tot:'msg',to:"anotherProperty"}],_def:def, _:def._}) + setTimeout(done,700); + }, + complete(done) { + $("#node-dialog-cancel").trigger("click"); + setTimeout(done,500); + }, + element: function() { + return $(".node-input-rule-property-deepCopy").next() + }, + description: { "en-US": '

The Set rule has a new option to create a deep copy of the value. This ensures a complete copy is made, rather than using a reference.

' }, + }, { title: { "en-US": "And that's not all..." }, - description: { "en-US": "

There's more still to come before 2.1.0 is released. Watch this space!

" } - }, + description: { "en-US": "

There are many more smaller changes, including:

" } + } ] }