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

Merge pull request #1322 from Ducz0r/lm-sci-2759

Browse source 
Fix tooltip issues [SCI-2759]
This commit is contained in:
Luka Murn 2018-10-10 13:17:18 +02:00 committed by GitHub
commit 3411a0ea02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 92 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
app/assets/javascripts/sitewide/tooltip_helper.js
View file

@ -2,10 +2,11 @@
'use strict';
$.initTooltips = function() {
if ($(document.body).data("tooltips-enabled") === true || $(document.body).data("tooltips-enabled") == null) {
var popoversArray = [];
var leaveTimeout;
var enterTimeout;
var popoversArray = [];
var leaveTimeout;
var enterTimeout;
if ($(document.body).data('tooltips-enabled') === true || $(document.body).data('tooltips-enabled') == null) {
$('.tooltip_open').remove(); // Destroy all (if any) old open popovers
$('.help_tooltips').each(function(i, obj) {
var popoverObject = obj;
@ -14,62 +15,73 @@
$('.help_tooltips').each(function(i, obj) {
var link = $(obj).data('tooltiplink');
var textData = $(obj).data('tooltipcontent');
var customStyle = $(obj).data('tooltipstyle');
$(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({
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" style="' + customStyle + '">'
+ '<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');
});
$(".tooltip_" + i + "_window").off("mouseenter").on("mouseenter", function() {
$(".tooltip_" + i + "_window").addClass("tooltip-enter");
});
}
}, 1000);
});
})
}
}
}
}, 100);
})
.off('mouseenter')
.on('mouseenter', function() {
clearTimeout(leaveTimeout);
enterTimeout = setTimeout(function() {
var top;
$(document).ready(function() {
if ($(obj).hover().length > 0) {
$(obj).popover('show');
$('.tooltip_' + i + '_window').removeClass('tooltip-enter');
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).on('turbolinks:load', function() {
$.initTooltips();
});
}());

2
app/assets/stylesheets/themes/main_navigation.scss
View file

@ -175,7 +175,7 @@
}
}
.notification-settings-container {
.preferences-settings-container {
margin-bottom: 50px;
margin-top: 50px;

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

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

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

@ -111,12 +111,21 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
</button>
<!-- Invite buttons -->
<button type="button" data-role="invite-btn" class="btn btn-success" disabled="disabled" data-action="invite">
<button type="button" class="btn btn-success help_tooltips"
data-tooltiplink="<%= I18n.t('tooltips.link.invite_to_sci') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.invite_to_sci') %>"
data-role="invite-btn" data-action="invite"
disabled="disabled">
<%= t('invite_users.invite_btn') %>
</button>
<div class="btn-group" data-role="invite-with-role-div">
<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">
<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/users/settings/account/preferences/index.html.erb
View file

@ -54,7 +54,7 @@
url: update_togglable_settings_path(format: :json),
html: { method: :post, id: 'togglable-settings-panel' },
remote: true) do |f| %>
<div class="notification-settings-container">
<div class="preferences-settings-container">
<h4><%= t('notifications.title') %></h4>
<div class="row">
<div class="col-sm-2">
@ -135,7 +135,7 @@
</div>
</div>
<hr>
<div class="tooltips-settings-container">
<div class="preferences-settings-container">
<h4><%= t('users.settings.account.preferences.edit.tips.title') %></h4>
<div class="row">
<div class="col-sm-2">

6
config/locales/en.yml
View file

@ -391,7 +391,7 @@ en:
step_tab: "Step content"
results_tab: "Results content"
step_contents_inner:
instructions: "Choose what information from task protocol step/s to include in the report"
instructions: "Select the information from task protocol step/s to include in the report"
check_all: "All protocols steps content"
tables: "Tables"
no_tables: "Step contains no tables"
@ -1415,8 +1415,8 @@ en:
time_zone_title: "Time zone"
tips:
title: "Help Tips"
text1: "When you place your mouse over specific element of SciNote, we show you a tip with description of this element."
text2: "You may want to turn that off if you feel confident in here."
text1: "When you place your mouse cursor on a certain element in SciNote and hold it for a bit, a short and helpful description will appear."
text2: "If you feel confident in SciNote already, you can turn off these Help Tips."
toggle: "Show Help Tips"
update_flash: "Preferences successfully updated."
addons: