scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-29 03:35:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1274 from Zanz2/zz_in_app_tooltips_help_sci2662

Browse source 
Added Tooltips (bootstrap popovers) for various elements in scinote [SCI-2662]
This commit is contained in:
Luka Murn 2018-09-24 16:23:53 +02:00 committed by GitHub
commit 63b4f7d909
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 244 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/projects/canvas.js.erb
View file

@ -244,6 +244,7 @@ function initializeEdit() {
{ color: 'white', shadow: true }
);
});
$.initTooltips();
}
function destroyEdit() {

1
app/assets/javascripts/sitewide/drag_n_drop.js.erb
View file

@ -7,6 +7,7 @@
function init(location) {
LOCATION = location;
global.addEventListener('paste', _listener, false);
$.initTooltips();
};
function destroy() {

75
app/assets/javascripts/sitewide/tooltip_helper.js Normal file
View file

@ -0,0 +1,75 @@
(function() {
'use strict';
$.initTooltips = function() {
if ($(document.body).data("tooltips-enabled") === true || $(document.body).data("tooltips-enabled") == null) {
var popoversArray = [];
var leaveTimeout;
var enterTimeout;
$('.tooltip_open').remove(); // Destroy all (if any) old open popovers
$('.help_tooltips').each(function(i, obj) {
var popoverObject = obj;
popoversArray.push(popoverObject);
});
$('.help_tooltips').each(function(i, obj) {
var link = $(obj).data('tooltiplink');
var textData = $(obj).data('tooltipcontent');
$(obj).popover({
html: true,
container: 'body',
placement: 'auto right',
trigger: 'manual',
content: 'popovers will not display if empty',
template: '<div class="popover tooltip_' + i + '_window tooltip-open" role="tooltip" >' +
'<div class="popover-body" >' + textData + '</div>' +
'<br><br><br>' +
'<div class="popover-footer">' +
'<a class="btn btn-link text-nowrap" href="' + link + '" target="_blank" rel="noopener noreferrer" >' +
'Read more&nbsp;&nbsp;&nbsp;<i class="fas fa-external-link-alt"></i>' +
'</a>' +
'</div>' +
'</div>'
}).off("shown.bs.popover").on("shown.bs.popover", function() {
// hide all other popovers
popoversArray.forEach(function(arrayItem) {
if (obj !== arrayItem) {
$(arrayItem).popover("hide");
}
});
}).off("mouseleave").on("mouseleave", function( ) {
clearTimeout(enterTimeout);
leaveTimeout = setTimeout(function() {
if (!$(".tooltip_" + i + "_window:hover").length > 0) {
$(obj).popover("hide");
}
}, 100);
}).off("mouseenter").on("mouseenter", function() {
clearTimeout(leaveTimeout);
enterTimeout = setTimeout(function() {
if ($(obj).hover().length > 0) {
$(obj).popover("show");
$(".tooltip_" + i + "_window").removeClass("tooltip-enter");
var top = $(obj).offset().top;
$('.tooltip_' + i + '_window').css({
top: (top) + 'px'
});
$(".tooltip_" + i + "_window").off("mouseleave").on("mouseleave", function() {
$(".tooltip_" + i + "_window").removeClass("tooltip-enter");
$(obj).popover('hide');
});
$(".tooltip_" + i + "_window").off("mouseenter").on("mouseenter", function() {
$(".tooltip_" + i + "_window").addClass("tooltip-enter");
});
}
}, 1000);
});
})
}
}
$(document).ready(function() {
$.initTooltips();
});
}());

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

@ -1801,6 +1801,28 @@ th.custom-field .modal-tooltiptext {
cursor: pointer;
}
.tooltip-open {
background-color: $color-concrete;
color: $color-black;
font-size: $font-size-base;
.popover-footer {
background-color: $color-gainsboro;
border-radius: 3px;
bottom: 5px;
position: absolute;
right: 5px;
a {
color: $color-dove-gray;
}
}
}
.tooltip-enter {
background-color: $color-alto;
}
.my_module-state-buttons {
padding-top: 6px;
}

12
app/datatables/protocols_datatable.rb
View file

@ -199,10 +199,14 @@ class ProtocolsDatatable < CustomDatatable
end
def modules_html(record)
"<a href='#' data-action='load-linked-children'" +
" data-url='#{linked_children_protocol_path(record)}'>" +
"#{record.nr_of_linked_children}" +
"</a>"
"<a href='#' data-action='load-linked-children' class='help_tooltips' " \
"data-tooltiplink='" +
I18n.t('tooltips.link.protocol.num_linked') +
"' data-tooltipcontent='" +
I18n.t('tooltips.text.protocol.num_linked') +
"' data-url='#{linked_children_protocol_path(record)}'>" \
"#{record.nr_of_linked_children}" \
"</a>"
end
def timestamp_column_html(record)

4
app/views/canvas/_edit.html.erb
View file

@ -10,7 +10,9 @@
>
<%= bootstrap_form_tag url: canvas_experiment_url, method: "post" do |f| %>
<% if can_manage_experiment?(@experiment) %>
<%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
<%=link_to "", type: "button", class: "btn btn-primary help_tooltips", id: "canvas-new-module",
data: { tooltiplink: I18n.t('tooltips.link.task.new'),
tooltipcontent: I18n.t('tooltips.text.task.new') } do %>
<span class="hbtn-default">
<span class="fas fa-credit-card"></span>
<%= t("experiments.canvas.edit.new_module") %>

6
app/views/canvas/_tags.html.erb
View file

@ -1,7 +1,11 @@
<div class="tags-container pull-right">
<% tags2 = my_module.tags[0..3] %>
<% tags2.each do |tag| %>
<div style="color: <%= tag.color %>" class="<%= "last" if tag == tags2[-1] %>" title="<%= tag.name %>">
<div style="color: <%= tag.color %>"
class="<%= "last" if tag == tags2[-1] %> help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.task.color_tag') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.task.color_tag') %>"
title="<%= tag.name %>">
<span class="fas fa-tag"></span>
</div>
<% end %>

7
app/views/canvas/full_zoom/_my_module.html.erb
View file

@ -30,7 +30,12 @@
<div class="panel-body">
<% if can_manage_module?(my_module) %>
<%= link_to due_date_my_module_path(my_module, format: :json), remote: true, class: "due-date-link due-date-refresh" do %>
<%= link_to due_date_my_module_path(my_module, format: :json), remote: true,
class: "due-date-link due-date-refresh help_tooltips",
data: {
tooltiplink: I18n.t('tooltips.link.task.due_date'),
tooltipcontent: I18n.t('tooltips.text.task.due_date')
} do %>
<%= render partial: "my_modules/due_date_label.html.erb", locals: { my_module: my_module } %>
<% end %>
<% else %>

22
app/views/experiments/_dropdown_actions.html.erb
View file

@ -13,17 +13,23 @@
<li data-hook="experiment-actions-second-child"></li>
<% if can_clone_experiment?(experiment) %>
<li><%= link_to t('experiments.clone.label_title'),
clone_modal_experiment_url(experiment),
remote: true,
type: 'button',
class: 'clone-experiment' %></li>
clone_modal_experiment_url(experiment),
remote: true, type: 'button',
class: 'clone-experiment help_tooltips',
data: {
tooltiplink: I18n.t('tooltips.link.experiment.copy'),
tooltipcontent: I18n.t('tooltips.text.experiment.copy')
} %></li>
<% end %>
<% if can_move_experiment?(experiment) %>
<li><%= link_to t('experiments.move.label_title'),
move_modal_experiment_url(experiment),
remote: true,
type: 'button',
class: 'move-experiment' %></li>
move_modal_experiment_url(experiment),
remote: true, type: 'button',
class: 'move-experiment help_tooltips',
data: {
tooltiplink: I18n.t('tooltips.link.experiment.move'),
tooltipcontent: I18n.t('tooltips.text.experiment.move')
} %></li>
<% end %>
<% if can_manage_experiment?(experiment) %>
<li><%= link_to t('experiments.archive.label_title'),

4
app/views/my_modules/_module_header.html.erb
View file

@ -9,7 +9,9 @@
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4">
<div class="col-xs-6 col-sm-6 col-md-4 help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.task.due_date_specific') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.task.due_date_specific') %>">
<div class="badge-icon">
<% if can_manage_module?(@my_module) %>
<%= link_to due_date_my_module_path(@my_module, format: :json), remote: true, class: "due-date-link", style: "color: inherit" do %>

4
app/views/my_modules/_state_buttons.html.erb
View file

@ -1,6 +1,8 @@
<div class="pull-right my_module-state-buttons">
<% if can_complete_module?(@my_module) %>
<div class="btn-group">
<div class="btn-group help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.complete') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.complete') %>">
<% if !@my_module.completed? %>
<div data-action="complete-task" data-link-url="<%= toggle_task_state_my_module_path(@my_module) %>">
<%= render 'my_modules/state_button_complete.html.erb' %>

4
app/views/my_modules/protocols/_protocol_status_bar.html.erb
View file

@ -1,4 +1,6 @@
<div class="panel panel-default panel-protocol-status">
<div class="panel panel-default panel-protocol-status help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.linking') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.linking') %>">
<div class="panel-body">
<% if @protocol.linked? %>
<%= protocol_status_href(@protocol) %>

4
app/views/my_modules/results.html.erb
View file

@ -15,6 +15,9 @@
</div>
<% if can_manage_module?(@my_module) %>
<div class="help_tooltips" style="width:25%"
data-tooltiplink="<%= I18n.t('tooltips.link.task.results') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.task.results') %>">
<span class="hidden-xs"><%= t'my_modules.results.add_label' %></span>
<a class="btn btn-primary"
id="new-result-text"
@ -37,6 +40,7 @@
<span class="fas fa-paperclip"></span>
<span class="hidden-xs"><%= t("my_modules.results.new_asset_result") %></span>
</a>
</div>
<% end %>
</div>

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

@ -19,7 +19,11 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><%=t "general.cancel" %></button>
<%= f.submit t("projects.index.modal_new_project.create"), class: "btn btn-success" %>
<%= f.submit t("projects.index.modal_new_project.create"), class: "btn btn-success help_tooltips",
data: {
tooltiplink: I18n.t('tooltips.link.new_project'),
tooltipcontent: I18n.t('tooltips.text.new_project')
} %>
</div>
</div>
</div>

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

@ -39,7 +39,7 @@
<% end %>
</div>
<% end %>
<span>
<span class="help_tooltips" data-tooltiplink="<%= I18n.t('tooltips.link.experiment.dates') %>" data-tooltipcontent="<%= I18n.t('tooltips.text.experiment.dates') %>">
<span class="fas fa-calendar-alt" aria-hidden="true"></span>
<%= localize(experiment.created_at, format: t('time.formats.full_date')) %> - <%= localize(experiment.updated_at, format: t('time.formats.full_date')) %>
</span>

4
app/views/repositories/_columns_reorder_dropdown.html.erb
View file

@ -1,4 +1,6 @@
<div id="repository-columns-dropdown" class="dropdown">
<div id="repository-columns-dropdown" class="dropdown help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.inventory.visibility') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.visibility') %>">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="fas fa-eye"></span>
<span class="hidden-xs"><%= t('repositories.index.visibility') %></span>

5
app/views/repositories/show.html.erb
View file

@ -13,7 +13,10 @@
<div id="repository-toolbar">
<% if can_create_repository_rows?(@repository.team) %>
<button type="button" class="btn btn-primary editAdd" id="addRepositoryRecord" onclick="onClickAddRecord()">
<button type="button" class="btn btn-primary editAdd help_tooltips"
id="addRepositoryRecord" onclick="onClickAddRecord()"
data-tooltiplink="<%= I18n.t('tooltips.link.inventory.new') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.new') %>">
<span class="fas fa-plus"></span>
<span class="hidden-xs"><%= t("repositories.add_new_record") %></span>
</button>

6
app/views/repository_columns/index.html.erb
View file

@ -14,9 +14,11 @@
<h2><strong><%=t 'libraries.repository_columns.index.manage_column' %></strong></h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary"
<button class="btn btn-primary help_tooltips"
data-modal-url="<%= repository_columns_create_html_path(@repository) %>"
data-action="new-column-modal">
data-action="new-column-modal"
data-tooltiplink="<%= I18n.t('tooltips.link.inventory.manage_columns') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.manage_columns') %>">
<span class="fas fa-plus"></span>&nbsp;<%=t 'libraries.repository_columns.index.new_column' %>
</button>
</div>

4
app/views/result_assets/_new.html.erb
View file

@ -1,5 +1,8 @@
<div class="well">
<div id="new-result-assets-select" class="text-center new-asset-box">
<span class="help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_add_files') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_add_files') %>">
<%=t 'assets.drag_n_drop.label_html' %>
<label>
<span class="btn btn-primary">
@ -11,6 +14,7 @@
id="drag-n-drop-assets"
style="display: none" multiple>
</label>
</span>
</div>
<br />
<div class="align-right">

2
app/views/shared/_invite_users_modal.html.erb
View file

@ -116,7 +116,7 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
</button>
<div class="btn-group" data-role="invite-with-role-div">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true" aria-expanded="false" data-role="invite-with-role-btn" disabled="disabled">
<button type="button" class="btn btn-success dropdown-toggle help_tooltips" data-tooltiplink="<%= I18n.t('tooltips.link.invite_to_sci') %>" data-tooltipcontent="<%= I18n.t('tooltips.text.invite_to_sci') %>" data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true" aria-expanded="false" data-role="invite-with-role-btn" disabled="disabled">
<%= t('invite_users.invite_btn') %>
&nbsp;
<span class="caret"></span>

4
app/views/shared/_secondary_navigation.html.erb
View file

@ -107,7 +107,9 @@
<ul class="dropdown-menu repositories-dropdown-menu" aria-labelledby="repositoriesDropdownMenuLink">
<% @my_module.experiment.project.team.repositories.order(created_at: :asc).each do |repository| %>
<li>
<a class="dropdown-item <%= "active-item" if module_repository_page? && @repository == repository %>"
<a class="dropdown-item <%= "active-item" if module_repository_page? && @repository == repository %> help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.inventories') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.inventories') %>"
href="<%= repository_my_module_url(id: @my_module, repository_id: repository) %>"
title="<%= repository.name %>">
<%= truncate(repository.name) %>

4
app/views/steps/_empty_step.html.erb
View file

@ -43,6 +43,9 @@
</div>
<div class="tab-pane" role="tabpanel" id="new-step-assets">
<div class="text-center new-asset-box">
<span class="help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_add_files') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_add_files') %>">
<%=t 'assets.drag_n_drop.label_html' %>
<label>
<span class="btn btn-primary">
@ -54,6 +57,7 @@
id="drag-n-drop-assets"
style="display: none" multiple>
</label>
</span>
</div>
<div id="new-step-assets-group" class="form-group">
<%= f.nested_fields_for :assets do |ff| %>

6
app/views/steps/_step.html.erb
View file

@ -20,10 +20,12 @@
data-remote="true">
<span class="fas fa-arrow-down"></a>
<a data-action="edit-step"
class="btn btn-link"
class="btn btn-link help_tooltips"
title="<%= t("protocols.steps.options.edit_title") %>"
href="<%= edit_step_path(step, format: :json) %>"
data-remote="true">
data-remote="true"
data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_edit') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_edit') %>" >
<span class="fas fa-pencil-alt">
</a>
<%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link",

4
app/views/users/settings/teams/index.html.erb
View file

@ -14,8 +14,12 @@
<div>
<% if @member_of > 0 %>
<%= t("users.settings.teams.index.description_label") %>
<br><br>
<%= t("users.settings.teams.index.member_of", count: @member_of) %>
<% else %>
<%= t("users.settings.teams.index.description_label") %>
<br><br>
<em><%= t("users.settings.teams.index.no_teams") %></em>
<% end %>
<% if can_create_teams? %>

66
config/locales/en.yml
View file

@ -298,7 +298,7 @@ en:
print_title: "%{project} | Report"
index:
head_title: " Reports"
new: "New"
new: "New report"
edit: "Edit"
delete: "Delete"
thead_project_name: "Project name"
@ -355,7 +355,7 @@ en:
tasks_tab: "Choose tasks"
content_tab: "Choose content"
project_contents_inner:
instructions: "Select experiments/tasks to include in the report"
instructions: "To create a project report select one or multiple experiment. You can include an entire experiment or individual experimental tasks."
no_modules: "The project contains no tasks"
no_module_group: "No workflow"
module_contents:
@ -364,7 +364,7 @@ en:
steps_tab: "Protocols content"
results_tab: "Results content"
module_contents_inner:
instructions: "Choose what information from task/s to include in the report"
instructions: "Select the information from your task that you would like to include to your report."
check_all: "All tasks content"
steps: "Steps"
completed_steps: "Completed"
@ -595,7 +595,7 @@ en:
buttons:
load_protocol: "Load Protocol"
load_protocol_from_repository: "from repository"
load_protocol_from_file: "from file"
load_protocol_from_file: "from computer"
export: "Export Protocol"
copy_to_repository: "Copy To Protocol Repository"
confirm_link_update_modal:
@ -648,7 +648,7 @@ en:
type_label: "Copy to"
type_public: "Team protocols"
type_private: "My protocols"
type_text: "You can copy the protocol to protocols repository visible to all team members, or to your protocols repository."
type_text: "You can make a copy of a protocol and save it to Team protocols or My protocols. Team protocols are visible to all team members, My protocols are for personal usage only."
link_label: "Link task to this protocol repository"
link_text: "<strong>Warning!</strong>&nbsp;This will unlink the currently linked protocol."
error_400: "Due to unknown error, protocol could not be copied to repository."
@ -1429,9 +1429,10 @@ en:
all: "All teams"
new_team: "New team"
index:
description_label: "Team is a group of SciNote users who are working on the same projects and share the inventories."
member_of:
one: "You are member of %{count} team."
other: "You are member of %{count} teams."
one: "Currently you are member of %{count} team."
other: "Currently you are member of %{count} teams."
no_teams: "You are not a member of any team."
new_team: "New Team"
thead_name: "Team"
@ -1997,3 +1998,54 @@ en:
password_confirmation_not_match: "doesn't match"
invite_users:
permission_error: "You don't have permission to invite additional users to this team. Contact its administrator/s."
tooltips:
text:
invite_to_sci: "Invite other scientists to SciNote and gain additional free storage space for your team. How?"
new_project: "Project is the topmost layer when you are organizing your data in SciNote. It allows you to assign members and keep all project-related data within one project card."
experiment:
copy: "Copy this experiment as a template to another project. Only tasks and protocol steps will be copied!"
dates: "You can see the date when this experiment was created and when it was last modified."
move: "Move your experiment with all its tasks to another project. Make sure that members of both projects are the same even if a few other members were added."
task:
due_date: "Set due dates to your tasks and stay organized."
new: "Your experiment can be defined by a series of tasks. Start by adding the tasks and, if needed, connect them into a workflow."
color_tag: "Create personalised colorful tags to mark your tasks."
due_date_specific: "Set a due date to a specific task."
results: "You have three options to save your lab results: as classic text, created table or uploaded file from computer."
protocol:
step_edit: "You can edit the name and description of a protocol step, add checklists, tables or files."
step_add_files: "Drag and drop your files here. SciNote supports all types of files and images."
linking: "By linking the protocol in your task and the protocol in a repository you can see if any of the versions has been modified and decide to update either of them at any point."
complete: "You can complete the task if you are done working on it."
inventories: "You can assign inventory items to your task."
num_linked: "This number represents how many tasks are linked to the selected protocol."
inventory:
new: "Inventories in SciNote enable you to manage all your resources, from samples, reagents, lab equipment, plasmids, etc."
visibility: "You can make inventory columns visible or hidden."
manage_columns: "Add custom columns to your inventory table and choose whether the rows will contain text, files or be defined as a dropdown list."
link:
invite_to_sci: "https://support.scinote.net/hc/en-us/articles/115003902929"
new_project: "https://support.scinote.net/hc/en-us/articles/115003373852"
experiment:
copy: "https://support.scinote.net/hc/en-us/articles/115001434365"
dates: "https://support.scinote.net/hc/en-us/articles/115001799832"
move: "https://support.scinote.net/hc/en-us/articles/115001434385"
task:
due_date: "https://support.scinote.net/hc/en-us/articles/360000527572"
new: "https://support.scinote.net/hc/en-us/articles/360000537411"
color_tag: "https://support.scinote.net/hc/en-us/articles/360007237912"
due_date_specific: "https://support.scinote.net/hc/en-us/articles/360000527572"
results: "https://support.scinote.net/hc/en-us/articles/360007238592"
protocol:
step_edit: "https://support.scinote.net/hc/en-us/articles/115001788051"
step_add_files: "https://support.scinote.net/hc/en-us/articles/360007237252"
linking: "https://support.scinote.net/hc/en-us/articles/115003680385"
complete: "https://support.scinote.net/hc/en-us/articles/115001799812"
inventories: "https://support.scinote.net/hc/en-us/articles/360004694971"
num_linked: "https://support.scinote.net/hc/en-us/articles/115001788711"
inventory:
new: "https://support.scinote.net/hc/en-us/articles/360004627792"
visibility: "https://support.scinote.net/hc/en-us/articles/360004627472"
manage_columns: "https://support.scinote.net/hc/en-us/articles/360004695831"