Merge pull request #303 from mz3944/mz_and_new_tutorial_steps_SCI_571_v2

Added additional tutorial step for showing protocol link. Tutorial st…
This commit is contained in:
mz3944 2016-11-21 16:06:45 +01:00 committed by GitHub
commit c5bc3a4dc6
7 changed files with 70 additions and 61 deletions

View file

@ -348,14 +348,41 @@
Cookies.set('tutorial_data', tutorialData);
}
var demoProjectId = tutorialData[0].project;
var demoProject = $('#' + demoProjectId);
if (stepNum >= 1 && stepNum <= 3) {
var nextPage =
$('#' + demoProjectId + '-project-canvas-link').attr('href');
var thirdStepPos = (demoProject.offset().top > window.innerHeight / 2) ?
'top' : 'bottom';
var nextPage = $('#' + demoProjectId + '-project-canvas-link')
.attr('href');
var steps = [{
element: $('#projects-toolbar')[0],
intro: I18n.t('tutorial.tutorial_welcome_title_html'),
position: 'bottom'
}, {
element: $('#new-project-btn')[0],
intro: I18n.t('tutorial.create_project_html'),
position: 'left'
}, {
element: demoProject[0],
intro: I18n.t('tutorial.project_options_html'),
position: thirdStepPos
}];
initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb,
tutorialAfterCb);
} else if (stepNum >= 24 && stepNum <= 25) {
var demoProject = $('#' + demoProjectId);
tutorialAfterCb, steps);
} else if (stepNum === 22) {
var protocolLink = $('#protocol-link');
var nextPage = protocolLink.attr('href');
var steps = [{
element: protocolLink[0],
intro: I18n.t('tutorial.protocols_link_html'),
position: 'left'
}];
initPageTutorialSteps(22, 22, nextPage, function() {}, function() {},
steps);
} else if (stepNum >= 25 && stepNum <= 26) {
var firstStepPos = 'right';
if (demoProject.offset().left > window.innerWidth / 2 ||
window.innerWidth < demoProject.width() + 100) {
@ -369,16 +396,15 @@
var nextPage = $('#new-report-btn').attr('href');
var steps = [{
element: $('#' + demoProjectId)[0],
intro: $('#projects-toolbar')
.attr('data-archive-project-step-text'),
element: demoProject[0],
intro: I18n.t('tutorial.archive_project_html'),
position: firstStepPos
}, {
element: $('.avatar')[0],
intro: $('#projects-toolbar').attr('data-goodbye-tutorial'),
intro: I18n.t('tutorial.goodbye_message'),
position: 'left'
}];
initPageTutorialSteps(24, 25, nextPage, function() {}, function() {},
initPageTutorialSteps(25, 26, nextPage, function() {}, function() {},
steps);
}
}
@ -388,19 +414,6 @@
* Callback to be executed before tutorial starts
*/
function tutorialBeforeCb() {
var tutorialData = JSON.parse(Cookies.get('tutorial_data'));
var projectOptionsTutorial =
$('#projects-toolbar').attr('data-project-options-step-text');
var demoProjectId = tutorialData[0].project;
var demoProject = $('#' + demoProjectId);
demoProject.attr('data-step', '3');
demoProject.attr('data-intro', projectOptionsTutorial);
demoProject.attr('data-tooltipClass', 'custom next-page-link');
if (demoProject.offset().top > window.innerHeight / 2) {
demoProject.attr('data-position', 'top');
} // Otherwise show bottom
$.each($('.panel'), function(i, el){
$(el)
.find('.panel-title')

View file

@ -718,7 +718,7 @@ function initImport() {
*/
function initTutorial() {
var nextPage = $('.navbar-brand').attr('href');
initPageTutorialSteps(22, 23, nextPage, function() {}, function() {});
initPageTutorialSteps(23, 24, nextPage, function() {}, function() {});
}
init();

View file

@ -1149,7 +1149,7 @@ function initializeReportSidebartruncation() {
function initTutorial() {
ignoreUnsavedWorkAlert = true;
var nextPage = $('#protocol-link').attr('href');
var nextPage = $('.navbar-brand').attr('href');
initPageTutorialSteps(20, 21, nextPage, function() {}, function() {
ignoreUnsavedWorkAlert = false;
});

View file

@ -26,7 +26,8 @@ $.fn.onAjaxComplete = function (cb) {
});
}
var TUTORIAL_STEPS_CNT = 25;
// Number of all tutorial steps
var TUTORIAL_STEPS_CNT = 26;
/**
* Initializes tutorial steps for the current page.

View file

@ -53,13 +53,7 @@
</div>
</div>
<div id="projects-toolbar" data-step="1"
data-intro="<%=t 'tutorial.tutorial_welcome_title_html' %>"
data-position='bottom'
data-project-options-step-text="<%=t 'tutorial.project_options_html' %>"
data-archive-project-step-text="<%=t 'tutorial.archive_project_html' %>"
data-goodbye-tutorial="<%=t 'tutorial.goodbye_message' %>"
>
<div id="projects-toolbar">
<form class="form-inline" action="<%= projects_path %>">
@ -71,7 +65,7 @@
<!-- new project button -->
<% if @organizations.length > 0 %>
<a class="btn btn-primary pull-right" id="new-project-btn" data-step="2" data-intro="<%=t 'tutorial.create_project_html' %>" data-position='left' disableInteraction="false">
<a class="btn btn-primary pull-right" id="new-project-btn">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class="hidden-xs"><%=t "projects.index.new" %></span>
</a>

View file

@ -3,7 +3,7 @@
<% if current_organization %>
<%= render partial: "protocols/breadcrumbs.html.erb", locals: { organizations: @organizations, current_organization: @current_organization, type: @type } %>
<ul class="nav nav-tabs nav-settings" data-intro="<%=t 'tutorial.protocols_index_html' %>" data-step="22" data-position="bottom">
<ul class="nav nav-tabs nav-settings" data-intro="<%=t 'tutorial.protocols_index_html' %>" data-step="23" data-position="bottom">
<li role="presentation" class="<%= "active" if @type == :public %>">
<%= link_to t("protocols.index.navigation.public"), protocols_path(organization: @current_organization, type: :public) %>
</li>
@ -49,7 +49,7 @@
<% end %>
</div>
<div class="btn-group" role="group" data-intro="<%=t 'tutorial.protocols_import_export_html' %>" data-step="23">
<div class="btn-group" role="group" data-intro="<%=t 'tutorial.protocols_import_export_html' %>" data-step="24">
<a class="btn btn-default btn-open-file" <%= can_import_protocols(@current_organization) ? 'data-action="import"' : 'disabled="disabled"' %>>
<span class="glyphicon glyphicon-import"></span>
<span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>

View file

@ -1479,31 +1479,32 @@ en:
skip_tutorial: "Skip tutorial"
end_tutorial: "End tutorial"
finish_tutorial: "Start using sciNote"
tutorial_welcome_title_html: "Welcome to <em>sciNote</em>, your electronic lab notebook. <em>sciNote</em> organizes your work in Projects. Click <strong>Team icon</strong> to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the <strong>Sort by</strong> button. <strong>(Step 1/25)</strong>"
create_project_html: "Click here to create a Project and it will appear under the Team you've chosen. Choose public <span class='glyphicon glyphicon-eye-open'></span> if you want everyone from the Team to view the Project or choose private <span class='glyphicon glyphicon-eye-close'></span> so only the people who you invite to the Project can see it. <strong>(Step 2/25)</strong>"
project_options_html: "In the bottom row of the Project card you can check the latest activity <span class='glyphicon glyphicon-equalizer'></span>, invite collaborators <span class='glyphicon glyphicon-user'></span>, see the notifications <span class='glyphicon glyphicon-bell'></span> and write comments <span class='glyphicon glyphicon-comment'></span>. You can also edit the Project's name and visibility or archive it. You can recall the Project from the Archive <span class='glyphicon glyphicon-briefcase'></span> in the top right side of the Dashboard at any time. <strong>(Step 3/25)</strong>"
create_experiment_html: "Inside of a Project you can create Experiments. To create one click on this button and edit Experiments name and description. <strong>(Step 4/25)</strong>"
edit_experiment_html: "By clicking on the down arrow <span class='caret'></span> of an Experiment card you can choose between different actions. You can <strong>Edit details</strong> to the Experiment, such as experiment name and description, <strong>Clone</strong> it inside of a Project, where cloned Experiment is identical to the original one, <strong>Move</strong> it from one Project to another or <strong>Archive</strong> it in the Archive <span class='glyphicon glyphicon-briefcase'></span>. <strong>(Step 5/25)</strong>"
canvas_overview_html: "A Task is a basic unit of your Experiment. Within a Task, you can add Protocols, Results or Samples. You can connect Tasks into Workflows to assure traceability of your work. You can grab a Task or entire Workflow and move it in all directions on the canvas. <strong>(Step 6/25)</strong>"
canvas_click_edit_workflow_html: " Click <strong>Edit experiment</strong> to add new Tasks or to modify an existing Experiment. <strong>(Step 7/25)</strong>"
edit_workflow_html: "To add a new Task to the Experiment, click on <strong>New task</strong> and drag it onto canvas. <strong>(Step 8/25)</strong>"
edit_workflow_click_save_html: "Click <strong>Save experiment</strong> to save changes youve made to the Experiment. <strong>(Step 9/25)</strong>"
sidebar_html: "Navigation bar helps you to navigate through Experiments. It also helps you to find a specific Task on the canvas by clicking the navigate icon <span class='glyphicon glyphicon-map-marker'></span>. <strong>(Step 10/25)</strong>"
sidebar_click_module_html: "Click on the Task name <strong>qPCR</strong> to see its contents. <strong>(Step 11/25)</strong>"
module_protocols_html: "Inside of a Task you can create Protocol steps and upload existing protocol files. After you have finished a certain step, click the <strong>Complete step</strong> button. Exact time and the person who completed the step are recorded and can be seen in the <strong>Activity</strong> tab in the top right side of the Dashboard. <strong>(Step 12/25)</strong>"
module_protocols_save_html: "You can save the protocol to Protocol repository. Everyone within the same Team will be able to use it. <strong>(Step 13/25)</strong>"
module_protocols_click_results_html: "Click on the <strong>Results</strong> tab to upload experiment results. <strong>(Step 14/25)</strong>"
module_results_html: "You can upload any type of a file, insert table or write comments. <strong>(Step 15/25)</strong>"
module_results_click_samples_html: "Click on the <strong>Samples</strong> tab to import, export or assign samples to the Task. <strong>(Step 16/25)</strong>"
samples_html: "You can easily import sample tables from Excel or tab-delimited files. If you assign samples to a certain Task, these samples will be automatically assigned downstream the Workflow. <strong>(Step 17/25)</strong>"
breadcrumbs_html: "You can always use these <strong>breadcrumbs</strong> to navigate all the way back to the Dashboard. Click on the <strong>Reports</strong> tab to generate a report of your work. <strong>(Step 18/25)</strong>"
reports_index_click_new_report_html: "Click the <strong>New report</strong> button to create a new report. <strong>(Step 19/25)</strong>"
new_report_html: "To add report elements to the report, click on the <strong>—+—</strong> sign on the sheet. Select the report contents in the tabs and click <strong>Add to report</strong>. You can save the report as a PDF on your computer or save it within sciNote for later viewing and modification. <strong>(Step 20/25)</strong>"
new_report_click_org_html: "Click on <strong>%{private_org}</strong> in breadcrumbs to return to the Dashboard. <strong>(Step 21/25)</strong>"
protocols_index_html: "View your Public and Private Protocols, which you can Edit, Create new ones or Clone them. Protocols can be archived and restored from the Archive. <strong>(Step 22/25)</strong>"
protocols_import_export_html: "You can also Import or Export protocols to your hard drive. Return to the Dashboard. <strong>(Step 23/25)</strong>"
archive_project_html: "Archive Demo project - qPCR by clicking on the down arrow <span class='glyphicon glyphicon-triangle-bottom'></span>. You can always access the Archive by clicking the <span class='glyphicon glyphicon-briefcase'></span> icon on the top right side of the Dashboard and restore any item you have archived. <strong>(Step 24/25)</strong>"
goodbye_message: "To repeat the tutorial, go to your Settings and open <strong>My preferences</strong> tab. Click on the <strong>Repeat tutorial</strong> button and go through the tutorial as many times needed. <strong>(Step 25/25)</strong>"
tutorial_welcome_title_html: "Welcome to <em>sciNote</em>, your electronic lab notebook. <em>sciNote</em> organizes your work in Projects. Click <strong>Team icon</strong> to choose Projects from which Team you want to view on your Dashboard. You can also reorder them by clicking the <strong>Sort by</strong> button. <strong>(Step 1/26)</strong>"
create_project_html: "Click here to create a Project and it will appear under the Team you've chosen. Choose public <span class='glyphicon glyphicon-eye-open'></span> if you want everyone from the Team to view the Project or choose private <span class='glyphicon glyphicon-eye-close'></span> so only the people who you invite to the Project can see it. <strong>(Step 2/26)</strong>"
project_options_html: "In the bottom row of the Project card you can check the latest activity <span class='glyphicon glyphicon-equalizer'></span>, invite collaborators <span class='glyphicon glyphicon-user'></span>, see the notifications <span class='glyphicon glyphicon-bell'></span> and write comments <span class='glyphicon glyphicon-comment'></span>. You can also edit the Project's name and visibility or archive it. You can recall the Project from the Archive <span class='glyphicon glyphicon-briefcase'></span> in the top right side of the Dashboard at any time. <strong>(Step 3/26)</strong>"
create_experiment_html: "Inside of a Project you can create Experiments. To create one click on this button and edit Experiments name and description. <strong>(Step 4/26)</strong>"
edit_experiment_html: "By clicking on the down arrow <span class='caret'></span> of an Experiment card you can choose between different actions. You can <strong>Edit details</strong> to the Experiment, such as experiment name and description, <strong>Clone</strong> it inside of a Project, where cloned Experiment is identical to the original one, <strong>Move</strong> it from one Project to another or <strong>Archive</strong> it in the Archive <span class='glyphicon glyphicon-briefcase'></span>. <strong>(Step 5/26)</strong>"
canvas_overview_html: "A Task is a basic unit of your Experiment. Within a Task, you can add Protocols, Results or Samples. You can connect Tasks into Workflows to assure traceability of your work. You can grab a Task or entire Workflow and move it in all directions on the canvas. <strong>(Step 6/26)</strong>"
canvas_click_edit_workflow_html: " Click <strong>Edit experiment</strong> to add new Tasks or to modify an existing Experiment. <strong>(Step 7/26)</strong>"
edit_workflow_html: "To add a new Task to the Experiment, click on <strong>New task</strong> and drag it onto canvas. <strong>(Step 8/26)</strong>"
edit_workflow_click_save_html: "Click <strong>Save experiment</strong> to save changes youve made to the Experiment. <strong>(Step 9/26)</strong>"
sidebar_html: "Navigation bar helps you to navigate through Experiments. It also helps you to find a specific Task on the canvas by clicking the navigate icon <span class='glyphicon glyphicon-map-marker'></span>. <strong>(Step 10/26)</strong>"
sidebar_click_module_html: "Click on the Task name <strong>qPCR</strong> to see its contents. <strong>(Step 11/26)</strong>"
module_protocols_html: "Inside of a Task you can create Protocol steps and upload existing protocol files. After you have finished a certain step, click the <strong>Complete step</strong> button. Exact time and the person who completed the step are recorded and can be seen in the <strong>Activity</strong> tab in the top right side of the Dashboard. <strong>(Step 12/26)</strong>"
module_protocols_save_html: "You can save the protocol to Protocol repository. Everyone within the same Team will be able to use it. <strong>(Step 13/26)</strong>"
module_protocols_click_results_html: "Click on the <strong>Results</strong> tab to upload experiment results. <strong>(Step 14/26)</strong>"
module_results_html: "You can upload any type of a file, insert table or write comments. <strong>(Step 15/26)</strong>"
module_results_click_samples_html: "Click on the <strong>Samples</strong> tab to import, export or assign samples to the Task. <strong>(Step 16/26)</strong>"
samples_html: "You can easily import sample tables from Excel or tab-delimited files. If you assign samples to a certain Task, these samples will be automatically assigned downstream the Workflow. <strong>(Step 17/26)</strong>"
breadcrumbs_html: "You can always use these <strong>Breadcrumbs</strong> to navigate all the way back to the Dashboard. Click on the <strong>Reports</strong> tab to generate a report of your work. <strong>(Step 18/26)</strong>"
reports_index_click_new_report_html: "Click the <strong>New report</strong> button to create a new report. <strong>(Step 19/26)</strong>"
new_report_html: "To add report elements to the report, click on the <strong>—+—</strong> sign on the sheet. Select the report contents in the tabs and click <strong>Add to report</strong>. You can save the report as a PDF on your computer or save it within sciNote for later viewing and modification. <strong>(Step 20/26)</strong>"
new_report_click_org_html: "Click on <strong>%{private_org}</strong> in breadcrumbs to return to the Dashboard. <strong>(Step 21/26)</strong>"
protocols_link_html: "Click on <strong>Protocols repository icon</strong> to go to the Protocols repository page. <strong>(Step 22/26)</strong>"
protocols_index_html: "View your Public and Private Protocols, which you can Edit, Create new ones or Clone them. Protocols can be archived and restored from the Archive. <strong>(Step 23/26)</strong>"
protocols_import_export_html: "You can also Import or Export protocols to your hard drive. Return to the Dashboard. <strong>(Step 24/26)</strong>"
archive_project_html: "Archive Demo project - qPCR by clicking on the down arrow <span class='glyphicon glyphicon-triangle-bottom'></span>. You can always access the Archive by clicking the <span class='glyphicon glyphicon-briefcase'></span> icon on the top right side of the Dashboard and restore any item you have archived. <strong>(Step 25/26)</strong>"
goodbye_message: "To repeat the tutorial, go to your Settings and open <strong>My preferences</strong> tab. Click on the <strong>Repeat tutorial</strong> button and go through the tutorial as many times needed. <strong>(Step 26/26)</strong>"
notifications:
title: "Notifications"