diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index 746b790aa..304b8d9e4 100644 --- a/app/assets/javascripts/projects/index.js +++ b/app/assets/javascripts/projects/index.js @@ -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'); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index ef963b50f..a5da9def9 100644 --- a/app/assets/javascripts/projects/show.js +++ b/app/assets/javascripts/projects/show.js @@ -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(); + }); + +})(); diff --git a/app/assets/javascripts/samples/samples.js b/app/assets/javascripts/samples/samples.js index 9c6b82a37..973cd15b7 100644 --- a/app/assets/javascripts/samples/samples.js +++ b/app/assets/javascripts/samples/samples.js @@ -171,7 +171,7 @@ function initTutorial() { .setOptions({ steps: [ { - element: document.getElementById("samples-toolbar"), + element: document.getElementById("importSamplesButton"), intro: samplesTutorial }, { diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 138eeaeb1..9588a5ec4 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1168,4 +1168,4 @@ html.turbolinks-progress-bar::before { height: 20px; display: inline-block; margin-right: 5px; -} \ No newline at end of file +} diff --git a/app/utilities/first_time_data_generator.rb b/app/utilities/first_time_data_generator.rb index 565189e23..2150ca79f 100644 --- a/app/utilities/first_time_data_generator.rb +++ b/app/utilities/first_time_data_generator.rb @@ -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([ diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb index fe217fe8a..5d8b1ce58 100644 --- a/app/views/experiments/canvas.html.erb +++ b/app/views/experiments/canvas.html.erb @@ -2,7 +2,7 @@ <%= render partial: "shared/sidebar" %> <%= render partial: "shared/secondary_navigation" %> -
+
<% 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'), diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 7a42ba1b0..cf0129a2c 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -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' %>" + >
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index b9f24ab66..2e8358677 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -3,16 +3,23 @@ <%= render partial: "shared/secondary_navigation" %>
-
+
<% if can_create_experiment(@project) %>
-
+
<%= 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' + } %>
<% end %> diff --git a/app/views/projects/show/_experiment.html.erb b/app/views/projects/show/_experiment.html.erb index 14bbcffab..8a147ab88 100644 --- a/app/views/projects/show/_experiment.html.erb +++ b/app/views/projects/show/_experiment.html.erb @@ -1,6 +1,12 @@
+ 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" + >
<% if can_view_experiment_actions experiment %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 01ee8da62..e391616f0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1457,27 +1457,29 @@ en: skip_tutorial: "Skip tutorial" end_tutorial: "End tutorial" finish_tutorial: "Start using sciNote" - tutorial_welcome_title_html: "Welcome to sciNote" - create_project_html: "sciNote organizes your work in projects. Click here to create a project and it will appear under the Team you've chosen. Choose public if you want everyone from the team to view the project or choose private 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 , invite collaborators , and see the latest activity and notifications . You can also edit the project's name and visibility or archive it. You can recall the project from the archive at any time. Click on the project name Demo project - qPCR to continue." + tutorial_welcome_title_html: 'Welcome to sciNote, your electronic lab notebook. sciNote organizes your work in projects. Click Show projects from to choose how you want to view your projects. You can also reorder them by clicking the Sort by button.' + create_project_html: "Click here to create a project and it will appear under the Team you've chosen. Choose public if you want everyone from the team to view the project or choose private 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 , invite collaborators , see the notifications and write comments . You can also edit the project's name and visibility or archive it. You can recall the project from the archive 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 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 ." 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 Edit workflow to add tasks or modify your existing workflow." + canvas_click_edit_workflow_html: " Click Edit workflow to add new tasks or to modify an existing workflow." edit_workflow_html: "To add a new task to the workflow, click on New task and drag it onto canvas." - edit_workflow_click_save_html: "Click Save workflow 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 ." + edit_workflow_click_save_html: "Click Save workflow 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 . 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 qPCR to see its contents." - module_protocols_html: "Add steps to a protocol, create checklists or upload existing protocol files. After finishing one step, click Complete step 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 Activity 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 Complete step button. Exact time and the person who completed the step are recorded and can be seen in the Activity tab in the top right side of the dashboard." module_protocols_click_results_html: "Click on the Results 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 Samples 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 Reports tab to go to Demo project - qPCR 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 Reports 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 New report to create a new report." - new_report_html: "To add report elements to the report, click on the —+— sign on the sheet. Select the report contents in the tabs and click Add to report. 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 Reports, click the New report button to create a new report." + new_report_html: "To add report elements to the report, click on the —+— sign on the sheet. Select the report contents in the tabs and click Add to report. 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 %{private_org} in breadcrumbs to return to the Dashboard." - archive_project_html: "Archive demo project by clicking on the down arrow . You can always access the archive by clicking the 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 . You can always access the archive by clicking the 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 My preferences tab. Click on the Repeat tutorial button and watch the tutorial as many times needed." # This section contains general words that can be used in any parts of # application.