You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by nm...@apache.org on 2021/08/20 15:43:14 UTC
[ofbiz-framework] branch trunk updated: Improved: Tooltips overload
labels (OFBIZ-12277)
This is an automated email from the ASF dual-hosted git repository.
nmalin 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 fe542cf Improved: Tooltips overload labels (OFBIZ-12277)
fe542cf is described below
commit fe542cfee1294a95e5e9fc6f0eb65e7a88fe7420
Author: Nicolas Malin <ni...@nereide.fr>
AuthorDate: Fri Aug 20 17:42:54 2021 +0200
Improved: Tooltips overload labels (OFBIZ-12277)
Adding new method to display tooltip on overload when we have a mouse hover on icon information to reduce
text quantity for optional information.
Add some other improvement :
* remove bold on dynamic lookup return to avoid constant moving display
* escape error when on TopappBar if display apps are not present
Thanks to Marine Desmarchelier and Gil Portenseigne for their works
---
themes/helveticus/template/includes/TopAppBar.ftl | 8 ++
.../template/macro/HtmlFormMacroLibrary.ftl | 30 ++++++
.../webapp/helveticus/helveticus-main-theme.less | 101 +++++++++++++++++----
themes/helveticus/webapp/helveticus/javascript.css | 6 +-
.../helveticus/webapp/helveticus/js/OfbizUtil.js | 55 +++++++++++
.../helveticus/webapp/helveticus/js/helveticus.js | 27 +++++-
themes/helveticus/widget/Theme.xml | 2 +
7 files changed, 200 insertions(+), 29 deletions(-)
diff --git a/themes/helveticus/template/includes/TopAppBar.ftl b/themes/helveticus/template/includes/TopAppBar.ftl
index 79a3ab8..8a30b7b 100644
--- a/themes/helveticus/template/includes/TopAppBar.ftl
+++ b/themes/helveticus/template/includes/TopAppBar.ftl
@@ -50,6 +50,7 @@ under the License.
<ul id="app-bar-list">
<#assign appCount = 0>
<#assign firstApp = true>
+ <#if displayApps??>
<#list displayApps as display>
<#assign thisApp = display.getContextRoot()>
<#assign permission = true>
@@ -91,6 +92,8 @@ under the License.
</#if>
</#if>
</#list>
+ </#if>
+ <#if displaySecondaryApps??>
<#list displaySecondaryApps as display>
<#assign thisApp = display.getContextRoot()>
<#assign permission = true>
@@ -128,6 +131,7 @@ under the License.
<#assign appCount = appCount + 1>
</#if>
</#list>
+ </#if>
</ul>
<!-- If the number of applications is greater than the maximum number of applications that can be displayed, the rest is put
in a drop-down menu. The code is deliberately doubled because otherwise, reading the code during maintenance
@@ -135,6 +139,7 @@ under the License.
<div class="container-more-app">
<#assign appCount = 0>
<#assign moreApp = false>
+ <#if displayApps??>
<#list displayApps as display>
<#assign thisApp = display.getContextRoot()>
<#assign permission = true>
@@ -180,6 +185,8 @@ under the License.
</#if>
</#if>
</#list>
+ </#if>
+ <#if displaySecondaryApps??>
<#list displaySecondaryApps as display>
<#assign thisApp = display.getContextRoot()>
<#assign permission = true>
@@ -221,6 +228,7 @@ under the License.
<#assign appCount = appCount + 1>
</#if>
</#list>
+ </#if>
<#if moreApp>
</ul> <!-- more-app-list -->
</div> <!-- more-app -->
diff --git a/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl b/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
new file mode 100644
index 0000000..d2fa33c
--- /dev/null
+++ b/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
@@ -0,0 +1,30 @@
+<#--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<#include "component://common-theme/template/macro/HtmlFormMacroLibrary.ftl"/>
+
+<#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/>
+ </#if>
+</#macro>
diff --git a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
index fd5b3c9..7de0f55 100644
--- a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
+++ b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
@@ -91,7 +91,7 @@ span.label{
font-weight:500;
}
-.ERROR{
+.ERROR, .error{
color:@danger;
font-weight:500;
}
@@ -112,7 +112,7 @@ a {
}
}
-input[type="submit"], .smallSubmit{
+input[type="submit"], .smallSubmit, button{
display: inline-block;
background-color: @main-color-theme;
border:none;
@@ -274,9 +274,9 @@ a.buttontext{
column-gap:1rem;
border-radius: 0.5rem;
display:inline-block;
- margin:0.3rem;
margin-right:0.5rem;
font-weight: 600;
+ margin:0.3rem;
&:hover{
color: @light-color-theme;
background:@main-color-theme;
@@ -445,6 +445,7 @@ a.buttontext{
border-radius: 4px;
padding:0 2rem;
box-shadow: 0 0 50px 0 @shadow-color;
+ padding:2rem;
z-index: 15;
color: @font-color-for-main;
#user-name {
@@ -484,6 +485,7 @@ a.buttontext{
background-color: @light-color-theme;
border-radius: 0.5rem;
color: @main-color-theme;
+ display: block;
}
}
a{
@@ -503,7 +505,7 @@ a.buttontext{
#column-container {
#content-main-section{
width:100%;
- h1{
+ h1, .h1 {
font-size: 1.8rem;
margin: 1rem 0;
color:@font-color-for-main;
@@ -713,7 +715,7 @@ a.buttontext{
/* Fieldgroup Style */
/*------------------------------------ */
.fieldgroup {
- border-bottom: 1px solid @border-color ;
+ border-bottom: 1px solid @border-color;
padding: 0.5rem;
}
.fieldgroup-title-bar {
@@ -722,12 +724,12 @@ a.buttontext{
font-weight: 600;
color: @dark-color-theme;
ul {
- .expanded .expanded:hover {
- background: url("https://localhost:8443/helveticus/images/minus-circle.svg") no-repeat center left/ 14px 14px ;
+ .expanded, .expanded:hover {
+ background: url("/helveticus/images/minus-circle.svg") no-repeat center left/ 14px 14px ;
cursor: pointer;
}
.collapsed, .collapsed:hover {
- background: url("https://localhost:8443/helveticus/images/plus-circle.svg") no-repeat center left/ 14px 14px ;
+ background: url("/helveticus/images/plus-circle.svg") no-repeat center left/ 14px 14px ;
cursor: pointer;
padding-left: 1rem;
}
@@ -904,11 +906,29 @@ 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;
- bottom:0.5rem;
opacity: 0.7;
font-style: italic;
line-height: 1rem;
@@ -985,8 +1005,14 @@ span.tooltip{
padding: 0.5rem;
vertical-align: middle;
&.has-tooltip{
- padding-bottom: 2.5rem;
position: relative;
+ .field-lookup{
+ padding-bottom: 0;
+ }
+ .tooltip{
+ left:0.5rem;
+ top:-2.5rem
+ }
}
}
.button-col {
@@ -1076,7 +1102,6 @@ form table,
form .basic-table,
.screenlet-body .basic-table {
background: transparent;
- margin-bottom: 0;
width: 100%;
}
.basic-form table {
@@ -1084,9 +1109,6 @@ form .basic-table,
tr {
>td {
padding:0.5rem;
- &.has-tooltip{
- padding-bottom:1.7rem;
- }
}
&.has-tooltip td{
padding-bottom: 2.5rem;
@@ -1139,10 +1161,7 @@ form .basic-table,
border-top: 10px solid @light-color-theme;
}
}
-.has-tooltip{
- padding-bottom: 2.5rem;
- position: relative;
-}
+
/* ---------------------- */
/* Footer Style */
/* ---------------------- */
@@ -1241,10 +1260,52 @@ form .basic-table,
}
}
-#EditProdCatalog .basic-table td span.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
+ }
+ }
+ >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;
+ }
}
.select2-container--default .select2-selection--multiple{
border-color: @border-color !important
}
+
+.ui-dialog{
+ left: ~"calc(50% - 320px)" !important;
+ top: 2rem !important;
+ box-shadow: 0 0 15px 15px @shadow-color !important;
+}
+
+.hidden{
+ display: none;
+}
diff --git a/themes/helveticus/webapp/helveticus/javascript.css b/themes/helveticus/webapp/helveticus/javascript.css
index af77e63..759676c 100644
--- a/themes/helveticus/webapp/helveticus/javascript.css
+++ b/themes/helveticus/webapp/helveticus/javascript.css
@@ -1032,9 +1032,8 @@ body .ui-tooltip {
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
- border: 1px solid #79b7e7;
+ border: 0px solid #79b7e7;
background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
- font-weight: bold;
color: #1d5987;
}
@@ -1044,9 +1043,8 @@ body .ui-tooltip {
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
- border: 1px solid #79b7e7;
+ border: 0px solid #79b7e7;
background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
- font-weight: bold;
color: #e17009;
}
diff --git a/themes/helveticus/webapp/helveticus/js/OfbizUtil.js b/themes/helveticus/webapp/helveticus/js/OfbizUtil.js
new file mode 100644
index 0000000..57d557e
--- /dev/null
+++ b/themes/helveticus/webapp/helveticus/js/OfbizUtil.js
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+
+function setLookDescription(textFieldId, description, params, formName, showDescription) {
+ if (description) {
+ var start = description.lastIndexOf(' [');
+ if (start != -1) {
+ description = description.substring(0, start);
+
+ // This sets a (possibly hidden) dependent field if a description-field-name is provided
+ var dependentField = params.substring(params.indexOf("searchValueFieldName"));
+ dependentField = jQuery("#" + formName + "_" + dependentField.substring(dependentField.indexOf("=") + 1));
+ var dependentFieldValue = description.substring(0, description.lastIndexOf(' '))
+ if (dependentField.length) {
+ dependentField.val(dependentFieldValue);
+ dependentField.trigger("change"); // let the 'hidden' field know its been changed
+ }
+ }
+ var lookupWrapperEl = jQuery("#" + textFieldId).closest('.field-lookup');
+ if (lookupWrapperEl.length) {
+ if (start == -1 && showDescription) {
+ start = description.indexOf(' ');
+ if (start != -1 && description.indexOf('<script type="text/javascript">') == -1) {
+ description = description.substring(start);
+ }
+ }
+ tooltipElement = jQuery("#" + textFieldId + '_lookupDescription');
+ var descriptionElement = "<p>" + description + "</p>"
+ if (tooltipElement.length) {
+ tooltipElement.html(descriptionElement)
+ } else {
+ tooltipElement = jQuery("<span id='" + textFieldId + "_lookupDescription' class='tooltip'>" + descriptionElement + "</span>");
+ }
+ lookupWrapperEl.append(tooltipElement);
+ }
+ }
+}
diff --git a/themes/helveticus/webapp/helveticus/js/helveticus.js b/themes/helveticus/webapp/helveticus/js/helveticus.js
index a814b8d..57dcfdc 100644
--- a/themes/helveticus/webapp/helveticus/js/helveticus.js
+++ b/themes/helveticus/webapp/helveticus/js/helveticus.js
@@ -36,13 +36,30 @@ function selectOrgaOK(orgaName){
}
document.addEventListener("DOMContentLoaded", function() {
- var tooltips = document.querySelectorAll('.tooltip');
- var checkboxs = document.querySelectorAll('input[type=checkbox]');
- var radios = document.querySelectorAll('input[type=radio]');
- var lefts = document.querySelectorAll('.lefthalf');
+ 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.parentNode.classList.add('has-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');
+ })
+ })
});
+
checkboxs.forEach(checkbox => {
checkbox.parentNode.classList.add('has-checkbox');
});
diff --git a/themes/helveticus/widget/Theme.xml b/themes/helveticus/widget/Theme.xml
index e2b1587..e4acae0 100644
--- a/themes/helveticus/widget/Theme.xml
+++ b/themes/helveticus/widget/Theme.xml
@@ -54,6 +54,7 @@ under the License.
<!--javascript lib-->
<property name="VT_HDR_JAVASCRIPT['add']" value="/helveticus/js/less.min.js"/>
<property name="VT_FTR_JAVASCRIPT['add']" value="/helveticus/js/helveticus.js"/>
+ <property name="VT_FTR_JAVASCRIPT['add']" value="/helveticus/js/OfbizUtil.js"/>
<!--Css style-->
<property name="VT_STYLESHEET['add']" value="/helveticus/flag-icon.min.css"/>
<property name="VT_STYLESHEET['add']" value="/helveticus/javascript.css"/>
@@ -65,6 +66,7 @@ under the License.
<templates>
<template name="screen" type="html" content-type="UTF-8" encoding="none" encoder="html" compress="false">
<template-file widget="menu" location="component://helveticus/template/macro/HtmlMenuMacroLibrary.ftl"/>
+ <template-file widget="form" location="component://helveticus/template/macro/HtmlFormMacroLibrary.ftl"/>
</template>
</templates>
</theme>