TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change onboarding tour order and wording

Browse Source
pull/6743/head
Henriette Dinger 6 years ago
parent 78f2ca93a2
commit 41f2fb6791
8 changed files with 91 additions and 124 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      app/assets/javascripts/application.js.erb
  2. 13
      app/assets/javascripts/onboarding/backlogs_tour.js
  3. 21
      app/assets/javascripts/onboarding/homescreen_tour.js
  4. 68
      app/assets/javascripts/onboarding/onboarding_tour.js
  5. 65
      app/assets/javascripts/onboarding/overview_tour.js
  6. 17
      app/assets/javascripts/onboarding/work_package_tour.js
  7. 3
      app/assets/stylesheets/vendor/_enjoyhint.sass
  8. 27
      config/locales/js-en.yml

1
app/assets/javascripts/application.js.erb
Unescape View File

@ -52,7 +52,6 @@
// Make sure the demo data still exists
<% if Project.find_by(identifier: 'demo-project') && Project.find_by(identifier: 'your-scrum-project') %>
<% require_asset "onboarding/homescreen_tour" %>
<% require_asset "onboarding/overview_tour" %>
<% require_asset "onboarding/backlogs_tour" %>
<% require_asset "onboarding/work_package_tour" %>
<% require_asset "onboarding/onboarding_tour" %>

13
app/assets/javascripts/onboarding/backlogs_tour.js
Unescape View File

@ -34,21 +34,12 @@
'containerClass': '-dark -hidden-arrow'
},
{
'next .toggler': I18n.t('js.onboarding.steps.wp_toggler'),
'next #main-menu-work-packages-wrapper': I18n.t('js.onboarding.steps.wp_toggler'),
'showSkip': false,
'shape': 'circle',
onNext: function () {
$('#main-menu-work-packages-wrapper .toggler').click();
$('#main-menu-work-packages')[0].click();
}
},
{
"next .wp-query-menu--item[data-category='default']": I18n.t('js.onboarding.steps.wp_query'),
'showSkip': false,
'timeout': 200,
onNext: function () {
$(".wp-query-menu--item[data-category='default'] .wp-query-menu--item-link")[0].click();
}
}
];
});
}(jQuery))

21
app/assets/javascripts/onboarding/homescreen_tour.js
Unescape View File

@ -8,17 +8,28 @@
},
{
'description': I18n.t('js.onboarding.steps.project_selection'),
'selector': '.widget-box.projects',
'selector': '.widget-box.welcome',
'event': 'custom',
'showSkip': false,
'containerClass': '-dark',
'containerClass': '-dark -hidden-arrow',
'containerClass': '-dark -hidden-arrow',
'clickable': true,
onBeforeStart: function () {
// Handle next step
$('.widget-box.projects a').click(function () {
tutorialInstance.trigger('next');
$(".widget-box.welcome a").click(function (e) {
e.preventDefault();
e.stopPropagation();
});
// Handle the correct project selection and redirection
// This will be removed once the project selection is implemented
$(".widget-box.welcome a:contains(scrumDemoProjectName)").click(function () {
tutorialInstance.trigger('next');
window.location = this.href + '/backlogs';
});
$(".widget-box.welcome a:contains(demoProjectName)").click(function () {
tutorialInstance.trigger('next');
window.location = this.href + '/work_packages';
});
// Disable clicks on the wp context menu links
$('.widget-box--blocks--buttons .button').addClass('-disabled').bind('click', preventClickHandler);
}

68
app/assets/javascripts/onboarding/onboarding_tour.js
Unescape View File

@ -19,7 +19,9 @@
childList: true,
subtree: true
});
}
};
window.demoProjectName = 'Demo Project';
window.scrumDemoProjectName = 'Scrum Project';
var storageKey = 'openProject-onboardingTour';
@ -32,56 +34,49 @@
// Start after the intro modal (language selection)
// This has to be changed once the project selection is implemented
if (url.searchParams.get("first_time_user")) {
if (url.searchParams.get("first_time_user") && demoDataVisible()) {
currentTourPart = '';
sessionStorage.setItem(storageKey, 'readyToStart');
// Start automatically when the language selection is closed
$('.op-modal--modal-close-button').click(function () {
initializeTour('startOverviewTour', '.widget-box--blocks--buttons .button');
startTour(homescreenOnboardingTourSteps);
homescreenTour();
});
}
// ------------------------------- Tutorial Homescreen page -------------------------------
if (currentTourPart === "readyToStart") {
initializeTour('startOverviewTour', '.widget-box--blocks--buttons .button');
startTour(homescreenOnboardingTourSteps);
homescreenTour();
}
// ------------------------------- Tutorial Overview page -------------------------------
if (currentTourPart === "startOverviewTour" || url.searchParams.get("start_onboarding_tour")) {
// ------------------------------- Decide for tour depending on backlogs -------------------------------
if (currentTourPart === "startProjectTour" || url.searchParams.get("start_onboarding_tour")) {
if ($('.backlogs-menu-item').length > 0) {
initializeTour('startBacklogsTour');
startTour(scrumOverviewOnboardingTourSteps);
backlogsTour();
} else {
initializeTour('startWpTour');
startTour(overviewOnboardingTourSteps);
workPackageTour();
}
}
// ------------------------------- Tutorial Backlogs page -------------------------------
if (currentTourPart === "startBacklogsTour") {
initializeTour('startTaskBoardTour', ".backlog .menu a:not('.show_task_board')");
startTour(scrumBacklogsTourSteps);
}
// ------------------------------- Tutorial Task Board page -------------------------------
if (currentTourPart === "startTaskBoardTour") {
initializeTour('startWpTour');
startTour(scrumTaskBoardTourSteps);
taskboardTour();
}
// ------------------------------- Tutorial WP page -------------------------------
if (currentTourPart === "startWpTour") {
initializeTour('wpFinished', '.wp-table--details-link, .wp-table-context-menu-link, .wp-table--cell-span');
waitForElement('.work-package--results-tbody', '.work-packages-split-view--tabletimeline-side', function() {
startTour(wpOnboardingTourSteps);
});
workPackageTour();
}
}
function demoDataVisible() {
demoProjects = jQuery.grep(jQuery(".widget-box.welcome a"), function( a ) {
return a.text === demoProjectName || a.text === scrumDemoProjectName;
});
return demoProjects.length === 2
}
function initializeTour(storageValue, disabledElements) {
tutorialInstance = new EnjoyHint({
onStart: function () {
@ -103,5 +98,28 @@
tutorialInstance.set(steps);
tutorialInstance.run();
}
function homescreenTour() {
initializeTour('startProjectTour', '.widget-box--blocks--buttons .button');
startTour(homescreenOnboardingTourSteps);
}
function backlogsTour() {
initializeTour('startTaskBoardTour', ".backlog .menu a:not('.show_task_board')");
startTour(scrumBacklogsTourSteps);
}
function taskboardTour() {
initializeTour('startWpTour');
startTour(scrumTaskBoardTourSteps);
}
function workPackageTour() {
initializeTour('wpFinished', '.wp-table--details-link, .wp-table-context-menu-link, .wp-table--cell-span');
waitForElement('.work-package--results-tbody', '.work-packages-split-view--tabletimeline-side', function() {
startTour(wpOnboardingTourSteps);
});
}
});
}(jQuery));

65
app/assets/javascripts/onboarding/overview_tour.js
Unescape View File

@ -1,65 +0,0 @@
(function ($) {
$(function() {
window.overviewOnboardingTourSteps = [
{
'next #content-wrapper': I18n.t('js.onboarding.steps.project_overview'),
'showSkip': false,
'containerClass': '-dark -hidden-arrow'
},
{
'next #menu-sidebar': I18n.t('js.onboarding.steps.sidebar'),
'showSkip': false
},
{
'next .settings-menu-item': I18n.t('js.onboarding.steps.settings'),
'showSkip': false
},
{
'next .members-menu-item': I18n.t('js.onboarding.steps.members'),
'showSkip': false
},
{
'next .toggler': I18n.t('js.onboarding.steps.wp_toggler'),
'showSkip': false,
'shape': 'circle',
onNext: function () {
$('#main-menu-work-packages-wrapper .toggler').click();
}
},
{
"next .wp-query-menu--item[data-category='default']": I18n.t('js.onboarding.steps.wp_query'),
'showSkip': false,
onNext: function () {
$(".wp-query-menu--item[data-category='default'] .wp-query-menu--item-link")[0].click();
}
}
];
window.scrumOverviewOnboardingTourSteps = [
{
'next #content-wrapper': I18n.t('js.onboarding.steps.project_overview'),
'showSkip': false,
'containerClass': '-dark'
},
{
'next #menu-sidebar': I18n.t('js.onboarding.steps.sidebar'),
'showSkip': false
},
{
'next .settings-menu-item': I18n.t('js.onboarding.steps.settings'),
'showSkip': false
},
{
'next .members-menu-item': I18n.t('js.onboarding.steps.members'),
'showSkip': false
},
{
'next .backlogs-menu-item': I18n.t('js.onboarding.steps.backlogs'),
'showSkip': false,
onNext: function () {
$('.backlogs-menu-item')[0].click();
}
}
];
});
}(jQuery))

17
app/assets/javascripts/onboarding/work_package_tour.js
Unescape View File

@ -36,7 +36,22 @@
{
'next .work-packages-tabletimeline--timeline-side': I18n.t('js.onboarding.steps.wp_timeline'),
'showSkip': false,
'containerClass': '-dark'
'containerClass': '-dark -hidden-arrow'
},
{
'next .main-menu--arrow-left-to-project': I18n.t('js.onboarding.steps.sidebar_arrow'),
'showSkip': false,
onNext: function () {
$('.main-menu--arrow-left-to-project')[0].click();
}
},
{
'next .members-menu-item': I18n.t('js.onboarding.steps.members'),
'showSkip': false
},
{
'next .wiki-menu--main-item': I18n.t('js.onboarding.steps.wiki'),
'showSkip': false
},
{
'next .menu-item--help': I18n.t('js.onboarding.steps.help_menu'),

3
app/assets/stylesheets/vendor/_enjoyhint.sass vendored
Unescape View File

@ -213,10 +213,11 @@
min-width: 200px
text-align: center
max-width: 80%
line-height: 28px
.-dark .enjoy_hint_label
background-color: rgba(0, 0, 0, 0.75)
padding: 10px
padding: 10px 25px
-webkit-border-radius: 40px
-moz-border-radius: 40px
border-radius: 40px

27
config/locales/js-en.yml
Unescape View File

@ -305,25 +305,22 @@ en:
onboarding:
steps:
welcome: 'Welcome to our short introduction tour to show you the important features in <b>OpenProject</b>. <br> We recommend to complete the steps till the end. This will only take three minutes.'
project_selection: 'Please select one of the projects with useful demo data to get started. <br> The <b>Demo project</b> suits best for classical project management, while the <b>Scrum project</b> is better for Agile project management'
project_overview: 'This is the project’s <b>Overview page</b>. A dashboard with important information. You can customize it with the settings icon on the right.'
sidebar: 'From the <b>Project menu</b> you can access all modules within a project. You can resize it with the handlebars on the right.'
settings: 'In the <b>Project settings</b> you can configure your project’s modules.'
welcome: 'Take a three minutes introduction tour to learn the most <b>important features</b>. <br> We recommend to complete the steps until the end. You can restart the tour any time.'
project_selection: 'Please select one of the projects with useful demo data to get started. <br> The <b>Demo project</b> suits best for classical project management, while the <b>Scrum project</b> is better for Agile project management.'
sidebar_arrow: "With the arrow you can navigate back to the project's <b>Main menu</b>."
members: 'Invite new <b>Members</b> to join your project.'
backlogs: "Manage your work in the <b>Backlogs</b> view."
backlogs_overview: "Here you can create <b>epics, user stories and bugs</b>, and prioritize via drag'n'drop and add them to a sprint."
backlogs_task_board_arrow: 'To open your <b>Task board</b>, click on the Sprint drop-down...'
backlogs_task_board_select: '... and select the Task board entry.'
backlogs_task_board: 'The <b>Task board</b> visualizes the progress for each sprint. Add new tasks or impediments with the + next to a user story.'
wp_toggler: 'Here is the <b>Work package</b> section.'
wp_query: "Let's have a look at all open <b>Work packages</b>."
wp_list: 'This is the <b>Work package list</b>. You can create or edit a work package directly inline.'
wiki: 'Within the <b>Wiki</b> you can document and share knowledge together with your team.'
backlogs_overview: "Manage your work in the <b>Backlogs</b> view. <br> Here you can create <b>epics, user stories and bugs</b>, prioritize via drag'n'drop and add them to a sprint."
backlogs_task_board_arrow: 'To see your <b>Task board</b>, open on the Sprint drop-down...'
backlogs_task_board_select: '... and select the <b>Task board</b> entry.'
backlogs_task_board: "The <b>Task board</b> visualizes the progress for this sprint. Add new tasks or impediments with the + icon next to a user story. Via drag'n'drop you can update the status."
wp_toggler: "Now let's have a look at the <b>Work package</b> section, which gives you a more detailed view of your work."
wp_list: 'This is the <b>Work package</b> list with the important work within your project, such as tasks, features, milestones, bugs, and more. <br> You can create or edit a work package directly within this list. To see its details you can double click on a row.'
wp_full_view: 'Within the <b>Work package details</b> you find all relevant information, such as description, status and priority, activities or comments.'
wp_back_button: 'With the arrow you can navigate back to the work package list.'
wp_create_button: 'The <b>Create</b> button will add a new work package to your project.'
wp_timeline_button: 'On the top, you can activate the <b>Gantt chart</b>.'
wp_timeline: 'Here you can create and visualize a project plan and share it with your team.'
wp_timeline_button: 'On the top you can activate the <b>Gantt chart</b> to create a timeline for your project.'
wp_timeline: 'Here you can edit your project plan. Create new phases, milestones, and add dependencies. All team members can see and update the latest plan at any time.'
help_menu: 'In the <b>Help</b> menu you will find a user guide and additional help resources. <br> Enjoy your work with OpenProject!'
got_it: 'Got it'

Write Preview
Loading…
Cancel
Save