Improved tutorial styling [SCI-685]

app/assets/javascripts/my_modules/protocols.js

@@ -123,6 +123,7 @@ function initTutorial() {
           {
             intro: moduleProtocolsClickResultsTutorial,
             element: resultsTab[0],
+            position: 'bottom-right-aligned',
             tooltipClass: 'custom next-page-link'
           }
         ],

app/assets/javascripts/my_modules/results.js.erb

@@ -101,6 +101,7 @@ function initTutorial() {
           {
             element: samplesTab[0],
             intro: moduleResultsClickSamplesTutorial,
+            position: 'bottom-right-aligned',
             tooltipClass: 'custom next-page-link'
           }
         ],

app/assets/javascripts/projects/index.js.erb

@@ -417,8 +417,9 @@
               intro: archiveProjectTutorial,
               position: position
             },{
-              element: document.getElementsByClassName("avatar")[0],
+              element: document.getElementsByClassName("avatar")[0].parentNode,
-              intro: goodbye_message
+              intro: goodbye_message,
+              position: 'bottom-right-aligned'
             }],
             overlayOpacity: '0.2',
             doneLabel: 'Start using sciNote',
@@ -440,16 +441,6 @@
             restore_after_tutorial();
           })
           .start();
-
-        window.onresize = function() {
-          switch (position) {
-            case "right":
-              $(".introjs-tooltip").css("left", (demoProject.width() + 20)  + "px");
-              break;
-            default:
-              $(".introjs-tooltip").css("left", (demoProject.width()/2 - $(".introjs-tooltip").width()/2)  + "px");
-          }
-        };
       }
     }
   }

app/assets/javascripts/reports/index.js

@@ -150,6 +150,7 @@
             {
               element: document.getElementById("new-report-btn"),
               intro: reportsClickNewReportTutorial,
+              position: 'right',
               tooltipClass: "custom next-page-link"
             }
           ],

app/assets/javascripts/samples/samples.js

@@ -157,20 +157,22 @@ function sampleAlertMsgHide() {
 function initTutorial() {
   var currentStep = parseInt(Cookies.get('current_tutorial_step'), 10);
   if (showTutorial() && (currentStep > 15 && currentStep < 19)) {
-    var samplesTutorial =$("#samples-toolbar").attr("data-samples-step-text");
+    var samplesTutorial = $('#samples-toolbar').attr('data-samples-step-text');
-    var breadcrumbsTutorial = $("#samples-toolbar").attr("data-breadcrumbs-step-text");
+    var breadcrumbsTutorial = $('#samples-toolbar')
+      .attr('data-breadcrumbs-step-text');
 
     introJs()
       .setOptions({
         steps: [
           {
-            element: document.getElementById("importSamplesButton"),
+            element: document.getElementById('importSamplesButton'),
-            intro: samplesTutorial
+            intro: samplesTutorial,
+            position: 'right'
           },
           {
-            element: document.getElementById("secondary-menu"),
+            element: document.getElementById('secondary-menu'),
             intro: breadcrumbsTutorial,
-            tooltipClass: 'custom next-page-link',
+            tooltipClass: 'custom next-page-link'
           }
         ],
         overlayOpacity: '0.1',
@@ -184,27 +186,24 @@ function initTutorial() {
         disableInteraction: true,
         tooltipClass: "custom"
       })
-      .onafterchange(function (tarEl) {
+      .onafterchange(function() {
         Cookies.set('current_tutorial_step', this._currentStep + 17);
 
-        if (this._currentStep == 1) {
+        if (this._currentStep === 1) {
           setTimeout(function() {
             $('.next-page-link a.introjs-nextbutton')
               .removeClass('introjs-disabled')
-              .attr('href', $("#reports-nav-tab a").attr('href'));
+              .attr('href', $('#reports-nav-tab a').attr('href'));
             $('.introjs-disableInteraction').remove();
-            positionTutorialTooltip();
           }, 500);
-        } else {
-          positionTutorialTooltip();
         }
       })
-      .goToStep(currentStep == 18 ? 2 : 1)
+      .goToStep(currentStep === 18 ? 2 : 1)
       .start();
 
     // Destroy first-time tutorial cookies when skip tutorial
     // or end tutorial is clicked
-    $(".introjs-skipbutton").each(function (){
+    $('.introjs-skipbutton').each(function() {
       $(this).click(function() {
         Cookies.remove('tutorial_data');
         Cookies.remove('current_tutorial_step');
@@ -214,26 +213,6 @@ function initTutorial() {
   }
 }
 
-function positionTutorialTooltip() {
-  if (Cookies.get('current_tutorial_step') == 13) {
-    if ($("#reports-nav-tab").offset().left == 0) {
-      $(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50)  + "px");
-      $(".introjs-tooltip").addClass("repositioned");
-    } else if ($(".introjs-tooltip").hasClass("repositioned")) {
-      $(".introjs-tooltip").css("left", "");
-      $(".introjs-tooltip").removeClass("repositioned");
-    }
-  } else {
-    if ($(".introjs-tooltip").offset().left > window.innerWidth) {
-      $(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50)  + "px");
-      $(".introjs-tooltip").addClass("repositioned");
-    } else if ($(".introjs-tooltip").hasClass("repositioned")) {
-      $(".introjs-tooltip").css("left", "");
-      $(".introjs-tooltip").removeClass("repositioned");
-    }
-  }
-};
-
 function showTutorial() {
   var tutorialData;
   if (Cookies.get('tutorial_data'))

app/views/protocols/index.html.erb

@@ -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="20">
+  <ul class="nav nav-tabs nav-settings" data-intro="<%=t 'tutorial.protocols_index_html' %>" data-step="22" 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="21">
+        <div class="btn-group" role="group" data-intro="<%=t 'tutorial.protocols_import_export_html' %>" data-step="23">
           <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>

app/views/reports/new/_report_navigation.html.erb

@@ -5,7 +5,7 @@
         <ul class="breadcrumb" style="margin-left: 15px;">
           <li>
             <% if can_view_projects(@project.organization) %>
-              <a href="<%= projects_path :organization => @project.organization.id %>" data-intro="<%=t 'tutorial.new_report_click_org_html', private_org: @project.organization.name %>" data-step="21">
+              <a href="<%= projects_path :organization => @project.organization.id %>" data-intro="<%=t 'tutorial.new_report_click_org_html', private_org: @project.organization.name %>" data-step="21" data-position="right">
             <% end %>
             <span class="hidden-sm hidden-md hidden-lg">Org</span>
             <span class="hidden-xs"><%= @project.organization.name %></span>

config/locales/en.yml

@@ -1473,7 +1473,7 @@ en:
     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 Experiment’s 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 and add 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_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 you’ve made to the Experiment. <strong>(Step 9/25)</strong>"