mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Merge pull request #3172 from node-red/tour-210
Update welcome tour for 2.1.0-beta.1
This commit is contained in:
Nick O'Leary
GitHub
commit
a296b1c9c8
@ -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"
|
||||
})
|
||||
|
||||
@ -44,9 +44,9 @@ RED.tourGuide = (function() {
|
||||
|
||||
function repositionFocus() {
|
||||
if (targetElement) {
|
||||
if (!fullscreen) {
|
||||
var pos = targetElement[0].getBoundingClientRect();
|
||||
var dimension = Math.max(50, Math.max(pos.width,pos.height)*1.5);
|
||||
if (!fullscreen) {
|
||||
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 = $('<div style="position:relative"></div>');
|
||||
@ -329,7 +352,7 @@ RED.tourGuide = (function() {
|
||||
if (nextButton) {
|
||||
setTimeout(function() {
|
||||
nextButton.focus();
|
||||
},50);
|
||||
},100);
|
||||
}
|
||||
|
||||
var isSVG = targetElement[0] instanceof SVGElement;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -12,6 +12,7 @@ export default {
|
||||
"<p>You can choose not to see this tour in the future by disabling it under the View tab of User Settings.</p>" }
|
||||
},
|
||||
{
|
||||
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": "<p>The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.</p>"+
|
||||
"<p>The menu now displays keyboard shortcuts for the options.</p>" }
|
||||
|
||||
},
|
||||
{
|
||||
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": "<p>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.</p>" },
|
||||
},
|
||||
{
|
||||
element: "#red-ui-workspace-tabs > li:first-child",
|
||||
title: { "en-US": "Hiding tabs" },
|
||||
element: "#red-ui-workspace-tabs > li.active",
|
||||
description: { "en-US": '<p>Tabs can now be hidden by clicking their <i class="fa fa-times"></i> icon.</p><p>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": '<p>The new tab menu also provides lots of new options for your tabs.</p>' },
|
||||
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": "<p>Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.</p>" },
|
||||
},
|
||||
{
|
||||
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": "<p>Flows and Groups now have an Environment Variables section in their edit dialog.</p>" },
|
||||
description: { "en-US": "<p>Their edit dialogs have a new Environment Variables section.</p>" },
|
||||
},
|
||||
{
|
||||
element: ".node-input-env-container-row .red-ui-editableList-addButton",
|
||||
direction: "top",
|
||||
element: ".node-input-env-container-row",
|
||||
direction: "left",
|
||||
description: { "en-US": '<p>The environment variables are listed in this table and new ones can be added by clicking the <i class="fa fa-plus"></i> button.</p>' },
|
||||
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": '<p>The <code>Link Call</code> node lets you call another flow that begins with a <code>Link In</code> node and get the result back when the message reaches a <code>Link Out</code> node.</p>' },
|
||||
},
|
||||
|
||||
{
|
||||
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": '<p>The file nodes have been renamed to make it clearer which node does what.</p>' },
|
||||
},
|
||||
{
|
||||
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": '<p>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.</p>' },
|
||||
},
|
||||
{
|
||||
title: { "en-US": "And that's not all..." },
|
||||
description: { "en-US": "<p>There's more still to come before 2.1.0 is released. Watch this space!</p>" }
|
||||
},
|
||||
description: { "en-US": "<p>There are many more smaller changes, including:</p><ul><li>Auto-complete suggestions in the <code>msg</code> TypedInput.</li><li>Support for <code>msg.resetTimeout</code> in the <code>Join</code> node.</li><li>Pushing messages to the front of the queue in the <code>Delay</code> node's rate limiting mode.</li><li>An optional second output on the <code>Delay</code> node for rate limited messages.</li></ul>" }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user