This is an automated email from the ASF dual-hosted git repository.
jleroux pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ofbiz-framework.git
The following commit(s) were added to refs/heads/trunk by this push:
new 2113d21636 Fixed: Fix tooltips display and styles leaks (OFBIZ-12730)
(#851)
2113d21636 is described below
commit 2113d2163637544ce159be2b9085a1539387c537
Author: Florian Motteau <florian.mott...@nereide.fr>
AuthorDate: Thu Nov 7 16:59:42 2024 +0100
Fixed: Fix tooltips display and styles leaks (OFBIZ-12730) (#851)
Use natives browser tooltips instead of handmade tooltips.
Fixes at least one glitch (OFBIZ-12730) due to styles leaking.
Removes the global "transition: .2s" which leads to
animate every single element modification (causes OFBIZ-13104,
and possibly other problems/lagging).
Only apply these transitions to buttons to keep a nice effect
on hover. We may have to add other selectors if needed.
OFBIZ-12638
OFBIZ-12730
OFBIZ-13104
---
.../template/macro/HtmlFormMacroLibrary.ftl | 7 +-
.../webapp/helveticus/helveticus-main-theme.less | 120 +++------------------
.../helveticus/webapp/helveticus/js/helveticus.js | 43 ++------
3 files changed, 30 insertions(+), 140 deletions(-)
diff --git a/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
b/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
index d2fa33c503..f617bcb8a5 100644
--- a/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
+++ b/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
@@ -21,10 +21,7 @@ under the License.
<#macro renderTooltip tooltip="" tooltipStyle="">
<#if tooltip?has_content>
- <span class="tooltipContainer<#if tooltipStyle?has_content>
${tooltipStyle}<#else> tooltip</#if>">
- ${tooltip}
- </span>
- <i class="hidden"></i>
- <#rt/>
+ <i class="hoverTooltip" title="${tooltip}"></i>
+ <#rt/>
</#if>
</#macro>
diff --git a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
index 108a305a72..212202a5cf 100644
--- a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
+++ b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
@@ -108,15 +108,9 @@ span.label {
}
/*** BUTTON /LINK / NAV STYLES ***/
-// * { transition: .5s } is very (too) broad, it causes slowdowns on
draggable/resizable elements like modals
-// (leads to animations for each new size/position, eventually each pixel...)
-// We should invert the logic here : transitions on chosen elements instead of
everywhere except some elements.
-a, a:hover, *:not(.ui-dialog, .ui-dialog-content) {
+a, a:hover, input.buttontext, input[type="submit"] {
text-decoration: none;
- -o-transition: .5s;
- -ms-transition: .5s;
- -moz-transition: .5s;
- -webkit-transition: .5s;
+ transition: .2s;
}
a {
@@ -1049,36 +1043,6 @@ label.has-checkbox, .has-radio {
position: absolute;
right: 1rem;
}
-
- .tooltip {
- position: absolute;
- white-space: nowrap;
- top: 0.5rem;
- margin-left: 1rem;
- }
-
- span.tooltip {
- margin-top: 0.5rem;
- position: static;
- display: block;
-
- > p {
- position: absolute;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 100%;
- padding-bottom: 0.5rem;
- }
- }
-}
-
-span.tooltip {
- position: absolute;
- left: 0;
- opacity: 0.7;
- font-style: italic;
- line-height: 1rem;
}
.has-checkbox {
@@ -1160,19 +1124,6 @@ span.tooltip {
td {
padding: 0.5rem;
vertical-align: middle;
-
- &.has-tooltip {
- position: relative;
-
- .field-lookup {
- padding-bottom: 0;
- }
-
- .tooltip {
- left: 0.5rem;
- top: -2.5rem
- }
- }
}
.button-col {
@@ -1292,11 +1243,6 @@ form .basic-table,
padding: 0.5rem;
}
- &.has-tooltip td {
- padding-bottom: 2.5rem;
- position: relative;
- }
-
.label, .group-label {
text-align: right;
padding-right: 0.5rem;
@@ -1449,54 +1395,22 @@ form .basic-table,
background: url("images/folder-open.svg") no-repeat center center
!important;
}
-#LevelSwitch td.has-tooltip {
- padding: 0;
-
- .has-checkbox {
- margin: 0 0.7rem
- }
-
- .tooltip {
- position: static;
- }
-}
-
-.has-tooltip {
- display: flex;
- position: relative;
- z-index: 90;
-
- > i {
- position: static;
- z-index: 100;
- height: 1.3rem;
- width: 1.3rem;
- border-radius: 2rem;
- background-color: @border-color;
- margin-left: 0.5rem;
- font-style: normal;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &:before {
- display: block;
- content: "i";
- font-weight: 600
- }
- }
+i.hoverTooltip {
+ display: inline-flex;
+ height: 1.3rem;
+ width: 1.3rem;
+ border-radius: 2rem;
+ background-color: @border-color;
+ margin-left: 0.5rem;
+ font-style: normal;
+ cursor: pointer;
+ justify-content: center;
+ align-items: center;
- > span.tooltipContainer {
- position: absolute;
- left: 0;
- top: -3rem;
- opacity: 1;
- line-height: 1rem;
- background: @grey-light;
- padding: 0.8rem 1rem;
- border-radius: 0.3rem;
- font-weight: 500;
+ &:before {
+ display: block;
+ content: "i";
+ font-weight: 600
}
}
diff --git a/themes/helveticus/webapp/helveticus/js/helveticus.js
b/themes/helveticus/webapp/helveticus/js/helveticus.js
index 57dcfdcc58..875234b958 100644
--- a/themes/helveticus/webapp/helveticus/js/helveticus.js
+++ b/themes/helveticus/webapp/helveticus/js/helveticus.js
@@ -18,54 +18,33 @@
*/
function showHideUserPref() {
- var userPref = document.getElementById("user-details");
+ const userPref = document.getElementById("user-details");
- if(userPref.style.display == "none") {
+ if (userPref.style.display == "none") {
userPref.style.display = "flex";
- }
- else {
+ } else {
userPref.style.display = "none";
}
}
-function selectOrgaOK(orgaName){
- var selectOrga = document.getElementById("orga"+orgaName);
- var currentModal = document.getElementById("selectOrga");
+function selectOrgaOK(orgaName) {
+ const selectOrga = document.getElementById("orga" + orgaName);
+ const currentModal = document.getElementById("selectOrga");
selectOrga.click();
currentModal.style.visibility = "hidden";
}
-document.addEventListener("DOMContentLoaded", function() {
- let tooltips = document.querySelectorAll('.tooltip'),
- checkboxs = document.querySelectorAll('input[type=checkbox]'),
- radios = document.querySelectorAll('input[type=radio]'),
- lefts = document.querySelectorAll('.lefthalf');
-
- tooltips.forEach(tooltip => {
- tooltip.classList.add('hidden');
-
- let ParentTooltip = tooltip.parentNode;
- ParentTooltip.classList.add('has-tooltip');
-
- let infoTooltips = ParentTooltip.querySelectorAll('i');
-
- infoTooltips.forEach(infoTooltip => {
- infoTooltip.classList.remove("hidden");
- infoTooltip.addEventListener("mouseenter", function( event ) {
- tooltip.classList.remove('hidden');
- });
- infoTooltip.addEventListener("mouseout", function( event ) {
- tooltip.classList.add('hidden');
- })
- })
- });
+document.addEventListener("DOMContentLoaded", function () {
+ const checkboxs = document.querySelectorAll('input[type=checkbox]');
+ const radios = document.querySelectorAll('input[type=radio]');
+ const lefts = document.querySelectorAll('.lefthalf');
checkboxs.forEach(checkbox => {
checkbox.parentNode.classList.add('has-checkbox');
});
radios.forEach(radio => {
radio.parentNode.classList.add('has-radio');
- });
+ });
lefts.forEach(left => {
left.parentNode.classList.add('screenlet-flex');
});
