Made fixes according to review

This commit is contained in:
Zanz2 2018-09-14 13:07:09 +02:00
parent 2a50c3d736
commit 22a565a684
26 changed files with 173 additions and 140 deletions

View file

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

View file

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

View file

@ -1,75 +0,0 @@
(function() {
'use strict';
$.init_popover_v2 = function() {
if ($(document.body).data("tooltips-enabled")===true || $(document.body).data("tooltips-enabled")== null ){
var popovers_array = [];
$('.popover_open').remove() // Destroy all (if any) old open popovers
$('.popover_v2').each(function(i,obj) {
var popover_object = obj;
popovers_array.push(popover_object);
});
$('.popover_v2').each(function(i,obj) {
var link = $(obj).data('popoverlink')
var text_data = $(obj).data('popovercontent')
$(obj).popover({
html: true,
container: 'body',
placement: 'auto right',
trigger: 'manual',
content: 'popovers will not display if empty',
template: '<div class="popover popover_'+i+'_window popover_open" role="tooltip" style="background-color:#F0F0F0;font-family:Lato;font-size:14px;" color="#000000" >' +
'<div class="popover-body" >' + text_data + '</div>' +
'<br><br><br>' +
'<div class="popover-footer" style="position:absolute;bottom:5px;right:5px;background-color:#E8E8E8;border-radius: 3px;">' +
'<a style="color:grey;" 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>'
}).on("mouseenter", function () {
setTimeout(function () {
if ($(obj).hover().length) {
$(obj).popover("show")
var top = $(obj).offset().top;
$('.popover_'+i+'_window').css({
top: (top) + 'px'
});
$(".popover_"+i+"_window").on("mouseleave", function () {
$(obj).popover('hide');
$(".popover_"+i+"_window").css("background-color","#F0F0F0");
});
$(".popover_"+i+"_window").on("mouseenter", function () {
$(".popover_"+i+"_window").css("background-color","#DADADA");
});
}
}, 1000);
}).on("mouseleave", function () {
setTimeout(function () {
if (!$(".popover_"+i+"_window:hover").length) {
$(obj).popover("hide")
}
}, 300);
}).on("shown.bs.popover", function(){
// hide all other popovers
popovers_array.forEach(function (arrayItem) {
if(obj !== arrayItem){
$(arrayItem).popover("hide")
}
});
});
})
}
}
$(document).ready(function() {
$.init_popover_v2();
});
}());
/* copy and paste shortcut
<button class="btn btn-default popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.') %>" data-popovercontent="<%= I18n.t('popover_test.text.') %>">
*/

View file

@ -0,0 +1,71 @@
(function() {
'use strict';
$.initTooltips = function() {
if ($(document.body).data("tooltips-enabled") === true || $(document.body).data("tooltips-enabled") == null) {
var popoversArray = [];
$('.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() {
setTimeout(function() {
if (!$(".tooltip_" + i + "_window:hover").length) {
$(obj).popover("hide");
}
}, 100);
}).off("mouseenter").on("mouseenter", function() {
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();
});
}());

View file

@ -12,6 +12,10 @@ $color-gainsboro: #e3e3e3;
$color-alto: #d2d2d2;
$color-silver: #c5c5c5;
$color-silver-chalice: #a0a0a0;
$color-lightsilver: #f0f0f0;
$color-darksilver: #dadada;
$color-lightgray: #e8e8e8;
$color-darkgray: #808080;
$color-dove-gray: #666;
$color-emperor: #555;
$color-black: #000;

View file

@ -1792,6 +1792,27 @@ th.custom-field .modal-tooltiptext {
cursor: pointer;
}
.tooltip-open{
background-color:$color-lightsilver;
font-size:$font-size-base;
color: $color-black;
.popover-footer{
position:absolute;
bottom:5px;
right:5px;
background-color:$color-lightgray;
border-radius: 3px;
a{
color: $color-darkgray;
}
}
}
.tooltip_enter{
background-color:$color-darksilver;
}
.my_module-state-buttons {
padding-top: 6px;
}

View file

@ -199,11 +199,11 @@ class ProtocolsDatatable < CustomDatatable
end
def modules_html(record)
"<a href='#' data-action='load-linked-children' class='popover_v2' " \
"data-popoverlink='" +
I18n.t('popover_test.link.protocol.num_linked') +
"' data-popovercontent='" +
I18n.t('popover_test.text.protocol.num_linked') +
"<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>"

View file

@ -10,9 +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 popover_v2", id: "canvas-new-module",
data: { popoverlink: I18n.t('popover_test.link.task.new'),
popovercontent: I18n.t('popover_test.text.task.new') } 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") %>

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] %> popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.task.color_tag') %>" data-popovercontent="<%= I18n.t('popover_test.text.task.color_tag') %>" 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 %>

View file

@ -30,11 +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 popover_v2",
data: {
popoverlink: I18n.t('popover_test.link.task.due_date'),
popovercontent: I18n.t('popover_test.text.task.due_date')
} 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 %>

View file

@ -13,21 +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 popover_v2',
data: { popoverlink: I18n.t('popover_test.link.experiment.copy'), popovercontent: I18n.t('popover_test.text.experiment.copy') }
%></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 popover_v2',
data: { popoverlink: I18n.t('popover_test.link.experiment.move'), popovercontent: I18n.t('popover_test.text.experiment.move') }
%></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'),

View file

@ -9,9 +9,9 @@
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 popover_v2"
data-popoverlink="<%= I18n.t('popover_test.link.task.due_date_specific') %>"
data-popovercontent="<%= I18n.t('popover_test.text.task.due_date_specific') %>">
<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 %>

View file

@ -1,8 +1,8 @@
<div class="pull-right my_module-state-buttons">
<% if can_complete_module?(@my_module) %>
<div class="btn-group popover_v2"
data-popoverlink="<%= I18n.t('popover_test.link.protocol.complete') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.complete') %>">
<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' %>

View file

@ -1,6 +1,6 @@
<div class="panel panel-default panel-protocol-status popover_v2"
data-popoverlink="<%= I18n.t('popover_test.link.protocol.linking') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.linking') %>">
<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) %>

View file

@ -15,9 +15,9 @@
</div>
<% if can_manage_module?(@my_module) %>
<div class="popover_v2" style="width:25%"
data-popoverlink="<%= I18n.t('popover_test.link.task.results') %>"
data-popovercontent="<%= I18n.t('popover_test.text.task.results') %>">
<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"

View file

@ -19,8 +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 popover_v2",
data: { popoverlink: I18n.t('popover_test.link.new_project'), popovercontent: I18n.t('popover_test.text.new_project')} %>
<%= 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>

View file

@ -39,7 +39,7 @@
<% end %>
</div>
<% end %>
<span class="popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.experiment.dates') %>" data-popovercontent="<%= I18n.t('popover_test.text.experiment.dates') %>">
<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>

View file

@ -1,6 +1,6 @@
<div id="repository-columns-dropdown" class="dropdown popover_v2"
data-popoverlink="<%= I18n.t('popover_test.link.inventory.visibility') %>"
data-popovercontent="<%= I18n.t('popover_test.text.inventory.visibility') %>">
<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>

View file

@ -13,10 +13,10 @@
<div id="repository-toolbar">
<% if can_create_repository_rows?(@repository.team) %>
<button type="button" class="btn btn-primary editAdd popover_v2"
id="addRepositoryRecord" onclick="onClickAddRecord()"
data-popoverlink="<%= I18n.t('popover_test.link.inventory.new') %>"
data-popovercontent="<%= I18n.t('popover_test.text.inventory.new') %>">
<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>

View file

@ -14,11 +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 popover_v2"
<button class="btn btn-primary help_tooltips"
data-modal-url="<%= repository_columns_create_html_path(@repository) %>"
data-action="new-column-modal"
data-popoverlink="<%= I18n.t('popover_test.link.inventory.manage_columns') %>"
data-popovercontent="<%= I18n.t('popover_test.text.inventory.manage_columns') %>">
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>

View file

@ -1,7 +1,8 @@
<div class="well">
<div id="new-result-assets-select" class="text-center new-asset-box">
<span class="popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.protocol.step_add_files') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.step_add_files') %>">
<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">

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 popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.invite_to_sci') %>" data-popovercontent="<%= I18n.t('popover_test.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">
<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>

View file

@ -107,9 +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 %> popover_v2"
data-popoverlink="<%= I18n.t('popover_test.link.protocol.inventories') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.inventories') %>"
<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) %>

View file

@ -43,8 +43,9 @@
</div>
<div class="tab-pane" role="tabpanel" id="new-step-assets">
<div class="text-center new-asset-box">
<span class="popover_v2" data-popoverlink="<%= I18n.t('popover_test.link.protocol.step_add_files') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.step_add_files') %>">
<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">

View file

@ -20,12 +20,12 @@
data-remote="true">
<span class="fas fa-arrow-down"></a>
<a data-action="edit-step"
class="btn btn-link popover_v2"
class="btn btn-link help_tooltips"
title="<%= t("protocols.steps.options.edit_title") %>"
href="<%= edit_step_path(step, format: :json) %>"
data-remote="true"
data-popoverlink="<%= I18n.t('popover_test.link.protocol.step_edit') %>"
data-popovercontent="<%= I18n.t('popover_test.text.protocol.step_edit') %>" >
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",

View file

@ -1994,7 +1994,7 @@ en:
invite_users:
permission_error: "You don't have permission to invite additional users to this team. Contact its administrator/s."
popover_test:
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."