scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-01 04:32:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

add experiment level tutorial step [fixes SCI-338]

Browse source
This commit is contained in:
zmagod 2016-08-24 19:03:58 +02:00
parent 0de7ea31ea
commit dbdbff12eb
10 changed files with 131 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/projects/index.js
View file

@ -414,7 +414,9 @@
$introjs
.setOptions({
overlayOpacity: '0.2',
hidePrev: true,
nextLabel: 'Next',
prevLabel: 'Back',
doneLabel: 'End tutorial',
skipLabel: 'End tutorial',
showBullets: false,
@ -461,6 +463,7 @@
}
else if (goToStep > 18) {
var archiveProjectTutorial = $("#projects-toolbar").attr("data-archive-project-step-text");
var goodbye_message = $("#projects-toolbar").attr("data-goodbye-tutorial");
Cookies.set('current_tutorial_step', '20');
var position = "right";
if (demoProject.offset().left > window.innerWidth / 2 || window.innerWidth < demoProject.width() + 100) {
@ -477,15 +480,20 @@
element: document.getElementById(demoProjectId),
intro: archiveProjectTutorial,
position: position
},{
element: document.getElementById("projects-toolbar"),
intro: goodbye_message
}],
overlayOpacity: '0.2',
doneLabel: 'Start using sciNote',
nextLabel: 'Next',
skipLabel: 'End tutorial',
showBullets: false,
showStepNumbers: false,
disableInteraction: true,
exitOnOverlayClick: false,
exitOnEsc: false,
tooltipClass: 'custom disabled-next'
tooltipClass: 'custom next-page-link'
})
.oncomplete(function () {
Cookies.remove('tutorial_data');

74
app/assets/javascripts/projects/show.js
View file

@ -63,3 +63,77 @@
// init
init();
})();
/* Initialize the first-time demo tutorial if needed. */
(function(){
function initializeTutorial() {
if (showTutorial()) {
introJs()
.setOptions({
overlayOpacity: '0.2',
hidePrev: true,
nextLabel: 'Next',
doneLabel: 'End tutorial',
skipLabel: 'End tutorial',
showBullets: false,
showStepNumbers: false,
exitOnOverlayClick: false,
exitOnEsc: false,
tooltipClass: 'custom next-page-link',
disableInteraction: true
})
.onafterchange(function (tarEl) {
Cookies.set('current_tutorial_step', this._currentStep + 2);
if (this._currentStep == 1) {
setTimeout(function() {
$('.next-page-link a.introjs-nextbutton')
.removeClass('introjs-disabled')
.attr('href', $('[data-canvas-link]').data('canvasLink'));
$('.introjs-disableInteraction').remove();
}, 500);
} else {
}
})
.start();
window.onresize = function() {
if (Cookies.get('current_tutorial_step') == 4 ) {
$(".introjs-tooltip").css("right", ($(".new-element.initial").width() + 60) + "px");
}
};
// Destroy first-time tutorial cookies when skip tutorial
// or end tutorial is clicked
$(".introjs-skipbutton").each(function (){
$(this).click(function (){
Cookies.remove('tutorial_data');
Cookies.remove('current_tutorial_step');
});
});
}
}
function showTutorial() {
var tutorialData;
if (Cookies.get('tutorial_data'))
tutorialData = JSON.parse(Cookies.get('tutorial_data'));
else
return false;
var currentStep = Cookies.get('current_tutorial_step');
if (currentStep < 3 || currentStep > 5)
return false;
var tutorialProjectId = tutorialData[0].project;
var currentProjectId = $("#data-holder").attr("data-project-id");
return tutorialProjectId == currentProjectId;
}
$(document).ready(function(){
initializeTutorial();
});
})();

2
app/assets/javascripts/samples/samples.js
View file

@ -171,7 +171,7 @@ function initTutorial() {
.setOptions({
steps: [
{
element: document.getElementById("samples-toolbar"),
element: document.getElementById("importSamplesButton"),
intro: samplesTutorial
},
{

2
app/assets/stylesheets/themes/scinote.scss
View file

@ -1168,4 +1168,4 @@ html.turbolinks-progress-bar::before {
height: 20px;
display: inline-block;
margin-right: 5px;
}
}

3
app/utilities/first_time_data_generator.rb
View file

@ -813,6 +813,9 @@ module FirstTimeDataGenerator
)
)
# create thumbnail
experiment.generate_workflow_img
# Lastly, create cookie with according ids
# so tutorial steps can be properly positioned
JSON.generate([

10
app/views/experiments/canvas.html.erb
View file

@ -2,7 +2,7 @@
<%= render partial: "shared/sidebar" %>
<%= render partial: "shared/secondary_navigation" %>
<div id="diagram-buttons" data-intro="<%=t ('tutorial.canvas_click_edit_workflow_html') %>" data-step="5" data-position="left">
<div id="diagram-buttons">
<% if can_edit_canvas(@experiment) %>
<%=link_to t('experiments.canvas.canvas_edit'),
canvas_edit_experiment_url(@experiment),
@ -10,7 +10,13 @@
type: "button",
id: "edit-canvas-button",
class: "ajax btn btn-default",
"data-action" => "edit" %>
data: {
action: 'edit',
intro: t('tutorial.canvas_click_edit_workflow_html'),
step: '5',
position: 'left'
}
%>
<% end %>
<% if can_create_experiment(@project) && @experiment.active? %>
<%= link_to t('experiments.new.create'),

4
app/views/projects/index.html.erb
View file

@ -57,7 +57,9 @@
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-archive-project-step-text="<%=t 'tutorial.archive_project_html' %>"
data-goodbye-tutorial="<%=t 'tutorial.goodbye_message' %>"
>
<form class="form-inline" action="<%= projects_path %>">

13
app/views/projects/show.html.erb
View file

@ -3,16 +3,23 @@
<%= render partial: "shared/secondary_navigation" %>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12"
id="data-holder"
data-project-id="<%= @project.id %>">
<% if can_create_experiment(@project) %>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="col-sm-4 col-sm-offset-4" >
<%= link_to t('experiments.new.create'),
new_project_experiment_url(@project),
remote: true,
type: "button",
id: 'new-experiment',
class: "btn btn-primary center-btn" %>
class: "btn btn-primary center-btn",
data: {
intro: t('tutorial.create_experiment_html'),
step: '4',
position: 'left'
} %>
</div>
</div>
<% end %>

8
app/views/projects/show/_experiment.html.erb
View file

@ -1,6 +1,12 @@
<div class="col-md-6">
<div class="panel panel-default experiment-panel"
data-id="<%= experiment.id %>">
data-id="<%= experiment.id %>"
data-intro="<%= t('tutorial.edit_experiment_html') %>"
data-step="5"
data-position="right"
data-canvas-link="<%= canvas_experiment_url(experiment) %>"
data-disableInteraction="false"
>
<div class="panel-heading">
<% if can_view_experiment_actions experiment %>
<div class="dropdown pull-right">

28
config/locales/en.yml
View file

@ -1457,27 +1457,29 @@ en:
skip_tutorial: "Skip tutorial"
end_tutorial: "End tutorial"
finish_tutorial: "Start using sciNote"
tutorial_welcome_title_html: "Welcome to <em>sciNote</em>"
create_project_html: "<em>sciNote</em> organizes your work in projects. 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."
project_options_html: "In the bottom row of the project box you can view and add comments <span class='glyphicon glyphicon-comment'></span>, invite collaborators <span class='glyphicon glyphicon-user'></span>, and see the latest activity <span class='glyphicon glyphicon-equalizer'></span> and notifications <span class='glyphicon glyphicon-bell'></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> at any time. Click on the project name <strong>Demo project - qPCR</strong> to continue."
tutorial_welcome_title_html: 'Welcome to <em>sciNote</em>, your electronic lab notebook. sciNote organizes your work in projects. Click <strong>Show projects from</strong> to choose how you want to view your projects. You can also reorder them by clicking the <strong>Sort by</strong> button.'
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."
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."
create_experiment_html: "Inside of a project you can create experiments. To create one click on this button and edit experiment’s name and description."
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 Edit details to the experiment, such as experiment name and description, Clone it inside of a project, where cloned experiment is identical to the original one, Move it from one project to another or Archive it in the archive <span class='glyphicon glyphicon-briefcase'></span>."
canvas_overview_html: "A task is a basic unit of your experiment. Within a task, you can add protocols, results and add samples. You can connect tasks into workflows to assure traceability of your work. You can grab the task or entire workflow and move it in all directions on the canvas."
canvas_click_edit_workflow_html: " Click <strong>Edit workflow</strong> to add tasks or modify your existing workflow."
canvas_click_edit_workflow_html: " Click <strong>Edit workflow</strong> to add new tasks or to modify an existing workflow."
edit_workflow_html: "To add a new task to the workflow, click on <strong>New task</strong> and drag it onto canvas."
edit_workflow_click_save_html: "Click <strong>Save workflow</strong> to save the changes you've made."
sidebar_html: "Browse the contents in the folder structure or navigate to a specific task on the canvas by clicking the navigate icon <span class='glyphicon glyphicon-map-marker'></span>."
edit_workflow_click_save_html: "Click <strong>Save workflow</strong> to save changes you’ve made to the workflow."
sidebar_html: "Navigation bar helps you orient on which experiment you are currently working. It also helps you to find a specific task on the canvas by clicking the navigate icon <span class='glyphicon glyphicon-map-marker'></span>. The line that follows down the tasks on their left side signifies they are connected into a workflow."
sidebar_click_module_html: "Click on the task name <strong>qPCR</strong> to see its contents."
module_protocols_html: "Add steps to a protocol, create checklists or upload existing protocol files. After finishing one step, click <strong>Complete step</strong> to proceed to the next step. Exact time and the person who completed the step are recorded and can be seen at any time in <strong>Activity</strong> tab."
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."
module_protocols_click_results_html: "Click on the <strong>Results</strong> tab to upload experiment results."
module_results_html: "You can upload any type of a file, insert table or write comments."
module_results_click_samples_html: "Click on the <strong>Samples</strong> tab to import, export or assign samples to the task."
samples_html: "You can easily import sample tables from Excel or tab-delimited files. If you assign samples to one task in a workflow, these samples will be automatically assigned to downstream tasks."
breadcrumbs_html: "You can always use these breadcrumbs to navigate back. Click on the <strong>Reports</strong> tab to go to <strong>Demo project - qPCR</strong> reports page."
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."
breadcrumbs_html: "You can always use these breadcrumbs to navigate all the way back to the dashboard. Click on the <strong>Reports</strong> tab to generate reports for meetings, projects, patents or thesis."
reports_index_html: "You can automatically generate reports for meetings, projects, patents or theses."
reports_index_click_new_report_html: "Click <strong>New report</strong> to create a new report."
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 to view and modify later."
reports_index_click_new_report_html: "When inside of <strong>Reports</strong>, click the <strong>New report</strong> button to create a new report."
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."
new_report_click_org_html: "Click on <strong>%{private_org}</strong> in breadcrumbs to return to the Dashboard."
archive_project_html: "Archive demo project 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> button on the top right side of the dashboard and restore any item you have archived."
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."
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 watch the tutorial as many times needed."
# This section contains general words that can be used in any parts of
# application.