Skip to content

Commit 03c299c

Browse files
milospplitvinovg
milospp
and
litvinovg
authored
Replace Qtip Library with Floating ui (#3937)
* fix: css for login width, inline form labels, site admin menu, data property control panel buttons * Replaced Qtip with Popper and bootstrap * Remove Qtip from ViSCommonControl is map of science * Fixed popper for Vitro, Nemo and Tenderfoot themes * Fixed tooltip design * Moved the repeated inline style to the class * Removed !important tags * Removed !important in .show class * Created tooltip css for everytheme to reduce reduntant code * Refactored code * Renaming vivoTooltip to vitroTooltip * Removed bootstrap * excluded bootstrap from popper * Revert wilma changes * Refactored code * fix: Vitro theme bug * Removed bootstrap 5 dependency * Removed unrelated changes * Migraiton popper to floating * Fixed clipped qr code popover in tenderfoot theme * Removed unnecessary css * Reverted affix change * fix: Fixed syntax error that caused nemo theme map of science not to work * Fixed tooltips in map of science page * fixes --------- Co-authored-by: Georgy Litvinov <georgy.litvinov@tib.eu>
1 parent a07d577 commit 03c299c

File tree

23 files changed

+205
-177
lines changed

23 files changed

+205
-177
lines changed

‎webapp/src/main/webapp/css/visualization/mapofscience/layout.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,11 @@ a.map-of-science-links {
271271
color: #2485AE;
272272
}
273273

274+
.visCommonControllTooltip {
275+
padding: 16px 22px;
276+
max-width: 400px;
277+
}
278+
274279
/* --------------------------------------------------------------> */
275280
/* SPECIAL STYLES FOR THE error */
276281
/* --------------------------------------------------------------> */

‎webapp/src/main/webapp/js/individual/individualQtipBubble.js‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎webapp/src/main/webapp/js/individual/individualTooltipBubble.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* $This file is distributed under the terms of the license in LICENSE$ */
2+
3+
$(document).ready(function(){
4+
$.extend(this, i18nStrings);
5+
6+
let tooltips = [
7+
{
8+
querySelector: "#researchAreaIcon",
9+
data: {
10+
title: "<div>" + i18nStrings.researchAreaTooltipOne + "</div><div>" + i18nStrings.researchAreaTooltipTwo + "</div>",
11+
placements: ['top', 'right', 'bottom', 'left'],
12+
customClass: "vitroTooltip"
13+
}
14+
},
15+
{
16+
querySelector: "#fullViewIcon",
17+
data: {
18+
title: i18nStrings.quickviewTooltip,
19+
placements: ['top', 'right', 'bottom', 'left'],
20+
customClass: "vitroTooltip"
21+
}
22+
},
23+
{
24+
querySelector: "#quickViewIcon",
25+
data: {
26+
title: "<div>" + i18nStrings.standardviewTooltipOne + '</div><div>' + i18nStrings.standardviewTooltipTwo + "</div>",
27+
placements: ['top', 'right', 'bottom', 'left'],
28+
customClass: "vitroTooltip"
29+
}
30+
},
31+
]
32+
33+
tooltips.forEach(tooltip => {
34+
setTooltip(tooltip.querySelector, tooltip.data)
35+
})
36+
37+
});

‎webapp/src/main/webapp/js/jquery_plugins/jquery.blockUI.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webapp/src/main/webapp/js/visualization/mapofscience/ComparisonDataTableWidget.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,15 @@ var ComparisonDataTableWidget = Class.extend({
7171
*/
7272
'<img class="' + dom.filterInfoIconClass + '" id="comparisonImageIconTwo" src="'+ infoIconUrl +'" alt="' + i18nStrings.infoIconString + '" title="" /></div>');
7373
me.tableDiv.append(filter);
74-
createToolTip($("#comparisonImageIconTwo"), $("#comparisonToolTipTwo").html(), "top left");
74+
75+
const tooltipDataComparisonImageIconTwo = {
76+
title: $('#comparisonToolTipTwo').html(),
77+
customClass: "vitroTooltip vitroTooltip-yellow",
78+
placements: ['right', 'top', 'bottom', 'left'],
79+
}
80+
81+
setTooltip("#comparisonImageIconTwo", tooltipDataComparisonImageIconTwo)
82+
7583
initFilter(dom);
7684

7785
/* Create table */
@@ -205,7 +213,14 @@ var ComparisonDataTableWidget = Class.extend({
205213
$( document ).on('click', "#comparison-reset-search", function() {
206214
me.widget.fnFilter("");
207215
});
208-
createToolTip($("#comparisonSearchInfoIcon"), $("#comparisonSearchInfoTooltipText").html(), "top left");
216+
217+
const tooltipDataComparisonSearchInfoIcon = {
218+
title: $('#comparisonSearchInfoTooltipText').html(),
219+
customClass: "vitroTooltip vitroTooltip-yellow",
220+
placements: ['right', 'top', 'bottom', 'left'],
221+
}
222+
223+
setTooltip("#comparisonSearchInfoIcon", tooltipDataComparisonSearchInfoIcon)
209224

210225
/* Create csv download button */
211226
var csvButton = '<hr class="subtle-hr"/><div id="main-science-areas-table-footer"><a href="' +

‎webapp/src/main/webapp/js/visualization/mapofscience/DataTableWidget.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,16 @@ var DataTableWidget = Class.extend({
109109
'<span id="' + dom.secondFilterID + '" class="' + dom.filterOptionClass + '">' + dom.secondFilterLabel + '</span>' +
110110
'<img class="'+ dom.filterInfoIconClass +'" id="imageIconTwo" src="'+ infoIconUrl +'" alt="information icon" title="" /></div>');
111111
me.tableDiv.append(filter);
112-
createToolTip($("#imageIconTwo"), $('#toolTipTwo').html(), "top left");
112+
113+
const tooltipDataImageIconTwo = {
114+
title: "<div>" + $('#toolTipTwo').html() + "</div>",
115+
customClass: "vitroTooltip vitroTooltip-yellow",
116+
placements: ['right', 'top', 'bottom', 'left'],
117+
}
118+
119+
setTooltip("#imageIconTwo", tooltipDataImageIconTwo)
120+
121+
113122
initFilter(dom);
114123

115124
var table = $('<table>');
@@ -227,15 +236,22 @@ var DataTableWidget = Class.extend({
227236
});
228237

229238

230-
var searchInputBox = $("." + me.dom.searchBarParentContainerClass).find("input[type=text]");
239+
var searchInputBox = $("." + me.dom.searchBarParentContainerClass).find("input[type=search]");
231240
searchInputBox.css("width", "140px");
232-
searchInputBox.after("<span id='reset-search' title='" + i18nStrings.clearSearchQuery + "'>X</span>"
233-
+ "<img class='filterInfoIcon' id='searchInfoIcon' src='" + infoIconUrl
241+
searchInputBox.after("<img class='filterInfoIcon' id='searchInfoIcon' src='" + infoIconUrl
234242
+ "' alt='" + i18nStrings.infoIconString + "' title='' />");
235243
$( document ).on('click', "#reset-search", function() {
236244
me.widget.fnFilter("");
237245
});
238-
createToolTip($("#searchInfoIcon"), $('#searchInfoTooltipText').html(), "top left");
246+
247+
const tooltipDataSearchInfoIcon = {
248+
title: "<div>" + $('#searchInfoTooltipText').html() + "</div>",
249+
customClass: "vitroTooltip vitroTooltip-yellow",
250+
placements: ['right', 'top', 'bottom', 'left'],
251+
}
252+
253+
setTooltip("#searchInfoIcon", tooltipDataSearchInfoIcon)
254+
239255

240256
var csvButton = '<hr class="subtle-hr"/><div id="main-science-areas-table-footer"><a id="csv" href="' +
241257
entityMapOfScienceSubDisciplineCSVURL +

‎webapp/src/main/webapp/js/visualization/mapofscience/VisCommonControl.js‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -84,36 +84,40 @@ function initVisModeTypeButton() {
8484
}
8585

8686
function initGlobalToolTips() {
87-
createToolTip($("#imageIconOne"), $('#toolTipOne').html(), "top left");
88-
createToolTip($("#exploreInfoIcon"), $('#exploreTooltipText').html(), "top left");
89-
createToolTip($("#compareInfoIcon"), $('#compareTooltipText').html(), "top left");
90-
createToolTip($("#imageIconThree"), $('#toolTipThree').html(), "top right");
91-
}
92-
93-
var visCommonToolTipInit = true;
94-
function createToolTip(target, tipText, tipLocation) {
95-
if (visCommonToolTipInit) {
96-
$('head').append('<style id="visCommonToolTipCSS">.qtip { font-size: .7em; max-width: none !important; } .visCommonToolTip {'
97-
+ ' background-color: #ffffc0;'
98-
+ ' textAlign: left;'
99-
+ ' padding: 6px 10px 6px 10px;'
100-
+ ' lineHeight: 14px;'
101-
+ '} </style>');
102-
103-
visCommonToolTipInit = false;
104-
}
10587

106-
target.qtip({
107-
content: {
108-
text: tipText
109-
},
110-
position: {
111-
my: tipLocation,
112-
at: 'center'
88+
let tooltips = [
89+
{
90+
querySelector: "#imageIconOne",
91+
data: {
92+
title: $('#toolTipOne').html(),
93+
customClass: "vitroTooltip vitroTooltip-yellow",
94+
placements: ['left', 'top', 'bottom', 'right']
95+
}
96+
},{
97+
querySelector: "#exploreInfoIcon",
98+
data: {
99+
title: $('#exploreTooltipText').html(),
100+
customClass: "vitroTooltip vitroTooltip-yellow",
101+
placements: ['left', 'top', 'bottom', 'right']
102+
}
103+
},{
104+
querySelector: "#compareInfoIcon",
105+
data: {
106+
title: $('#compareTooltipText').html(),
107+
customClass: "vitroTooltip vitroTooltip-yellow",
108+
placements: ['left', 'top', 'bottom', 'right']
109+
}
110+
},{
111+
querySelector: "#imageIconThree",
112+
data: {
113+
title: $('#toolTipThree').html(),
114+
customClass: "vitroTooltip vitroTooltip-yellow",
115+
placements: ['left', 'top', 'bottom', 'right']
116+
}
113117
},
114-
style: {
115-
classes: 'visCommonToolTip',
116-
width: 500,
117-
}
118-
});
118+
]
119+
120+
tooltips.forEach(tooltip => {
121+
setTooltip(tooltip.querySelector, tooltip.data)
122+
})
119123
}

0 commit comments

Comments
 (0)