ofbiz-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From nma...@apache.org
Subject [ofbiz-framework] branch trunk updated: Improved: Tooltips overload labels (OFBIZ-12277)
Date Fri, 20 Aug 2021 15:43:14 GMT
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 <nicolas.malin@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>

Mime
View raw message