scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-31 00:19:20 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improved tutorial styling [SCI-685]

Browse source
This commit is contained in:
Oleksii Kriuchykhin 2016-11-16 15:44:06 +01:00
parent 43b85ac5c2
commit d2e29935cf
8 changed files with 25 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/my_modules/protocols.js
View file

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

1
app/assets/javascripts/my_modules/results.js.erb
View file

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

15
app/assets/javascripts/projects/index.js.erb
View file

@ -417,8 +417,9 @@
intro: archiveProjectTutorial,
position: position
},{
element: document.getElementsByClassName("avatar")[0],
intro: goodbye_message
element: document.getElementsByClassName("avatar")[0].parentNode,
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");
}
};
}
}
}

1
app/assets/javascripts/reports/index.js
View file

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

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

@ -156,21 +156,23 @@ 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 breadcrumbsTutorial = $("#samples-toolbar").attr("data-breadcrumbs-step-text");
if (showTutorial() && (currentStep > 15 && currentStep < 19)) {
var samplesTutorial = $('#samples-toolbar').attr('data-samples-step-text');
var breadcrumbsTutorial = $('#samples-toolbar')
.attr('data-breadcrumbs-step-text');
introJs()
.setOptions({
steps: [
{
element: document.getElementById("importSamplesButton"),
intro: samplesTutorial
element: document.getElementById('importSamplesButton'),
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,28 +186,25 @@ 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 (){
$(this).click(function (){
$('.introjs-skipbutton').each(function() {
$(this).click(function() {
Cookies.remove('tutorial_data');
Cookies.remove('current_tutorial_step');
restore_after_tutorial();
@ -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'))

4
app/views/protocols/index.html.erb
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="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>

2
app/views/reports/new/_report_navigation.html.erb
View file

@ -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>

2
config/locales/en.yml
View file

@ -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>"