fix #509 Progress bar unreadable text

DominoKit · Nov 11, 2024 · 3e19bcd · 3e19bcd
1 parent a18875e
commit 3e19bcd
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 22 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/progress/ProgressBar.java b/domino-ui/src/main/java/org/dominokit/domino/ui/progress/ProgressBar.java
@@ -17,11 +17,14 @@
 
 import static org.dominokit.domino.ui.utils.Domino.*;
 
+import elemental2.dom.DomGlobal;
 import elemental2.dom.HTMLDivElement;
 import java.util.Optional;
 import org.dominokit.domino.ui.config.HasComponentConfig;
 import org.dominokit.domino.ui.config.ProgressBarConfig;
 import org.dominokit.domino.ui.elements.DivElement;
+import org.dominokit.domino.ui.elements.SpanElement;
+import org.dominokit.domino.ui.style.BooleanCssClass;
 import org.dominokit.domino.ui.utils.BaseDominoElement;
 import org.dominokit.domino.ui.utils.DominoUIConfig;
 
@@ -40,6 +43,7 @@ public class ProgressBar extends BaseDominoElement<HTMLDivElement, ProgressBar>
     implements ProgressStyles, HasComponentConfig<ProgressBarConfig> {
 
   private DivElement element;
+  private SpanElement textElement;
   private double maxValue;
   private double value = 0;
   private String textExpression;
@@ -63,7 +67,11 @@ public ProgressBar(int maxValue) {
    * @param textExpression The text expression for the progress bar.
    */
   public ProgressBar(int maxValue, String textExpression) {
-    element = div().addCss(dui_progress_bar).setAttribute("role", "progressbar");
+    element =
+        div()
+            .addCss(dui_progress_bar)
+            .setAttribute("role", "progressbar")
+            .appendChild(textElement = span().addCss(dui_progress_text));
     this.maxValue = maxValue;
     this.textExpression = textExpression;
     this.setValue(0);
@@ -126,7 +134,7 @@ public ProgressBar setValue(double value) {
   private void updateText() {
     if (showText) {
       int percent = new Double((value / maxValue) * 100).intValue();
-      element.setTextContent(
+      textElement.setTextContent(
           getConfig().evaluateProgressBarExpression(textExpression, percent, value, maxValue));
     }
   }
@@ -210,6 +218,12 @@ void updateWidth() {
             progress -> {
               element.style().setWidth(progress.calculateWidth(value) + "%");
               updateText();
+              DomGlobal.setTimeout(
+                  p0 -> {
+                    boolean overFlowing = element.isOverFlowing();
+                    BooleanCssClass.of(dui_progress_text_blind, overFlowing).apply(textElement);
+                  },
+                  0);
             });
   }
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/progress/ProgressStyles.java b/domino-ui/src/main/java/org/dominokit/domino/ui/progress/ProgressStyles.java
@@ -20,4 +20,6 @@
 public interface ProgressStyles {
   CssClass dui_progress = () -> "dui-progress";
   CssClass dui_progress_bar = () -> "dui-progress-bar";
+  CssClass dui_progress_text = () -> "dui-progress-text";
+  CssClass dui_progress_text_blind = () -> "dui-progress-text-blind";
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/tabs/ScrollTabsHandler.java b/domino-ui/src/main/java/org/dominokit/domino/ui/tabs/ScrollTabsHandler.java
@@ -19,7 +19,6 @@
 import static org.dominokit.domino.ui.style.GenericCss.dui_vertical;
 
 import elemental2.dom.DOMRect;
-import elemental2.dom.Element;
 import java.util.function.Consumer;
 import org.dominokit.domino.ui.elements.UListElement;
 import org.dominokit.domino.ui.icons.MdiIcon;
@@ -105,12 +104,12 @@ public void update(TabsPanel tabsPanel) {
   }
 
   private void updateTabs(TabsPanel tabsPanel, UListElement nav) {
-    if (isOverFlowing(nav.element())) {
+    if (nav.isOverFlowing()) {
       tabsPanel.getLeadingNav().appendChild(scrollLeftIcon);
       tabsPanel.getTailNav().appendChild(scrollRightIcon);
 
       tabsPanel.getTabs().stream()
-          .filter(tab -> isPartialVisible(nav.element(), tab.element()) && tab.isActive())
+          .filter(tab -> tab.isPartialVisible() && tab.isActive())
           .findFirst()
           .ifPresent(
               tab -> {
@@ -142,21 +141,4 @@ public void cleanUp(TabsPanel tabsPanel) {
     timer.cancel();
     resizeRecord.remove();
   }
-
-  private boolean isOverFlowing(Element element) {
-    return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
-  }
-
-  private boolean isPartialVisible(Element parent, Element child) {
-    DOMRect parentRect = parent.getBoundingClientRect();
-    DOMRect childRect = child.getBoundingClientRect();
-
-    boolean fullyVisible =
-        childRect.left >= parentRect.left
-            && childRect.right <= parentRect.right
-            && childRect.top >= parentRect.top
-            && childRect.bottom <= parentRect.bottom;
-
-    return !fullyVisible;
-  }
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java b/domino-ui/src/main/java/org/dominokit/domino/ui/utils/BaseDominoElement.java
@@ -4193,6 +4193,26 @@ public T setDefaultOptions(KeyboardEventOptions defaultOptions) {
     return (T) this;
   }
 
+  public boolean isOverFlowing() {
+    return element().scrollWidth > element().clientWidth
+        || element().scrollHeight > element().clientHeight;
+  }
+
+  public boolean isPartialVisible() {
+    return !isFullyVisible();
+  }
+
+  public boolean isFullyVisible() {
+    Element parent = parent().element();
+    DOMRect parentRect = parent.getBoundingClientRect();
+    DOMRect childRect = element().getBoundingClientRect();
+
+    return childRect.left >= parentRect.left
+        && childRect.right <= parentRect.right
+        && childRect.top >= parentRect.top
+        && childRect.bottom <= parentRect.bottom;
+  }
+
   /**
    * Retrieves the Waves support associated with this element.
    *

diff --git a/...ces/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-progressbar.css b/...ces/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-progressbar.css
@@ -45,6 +45,7 @@
     text-align: var(--dui-progress-bar-text-align);
     transition: width 500ms ease;
     background-color: var(--dui-accent);
+    overflow: visible;
 }
 
 .dui-progress-bar:first-child {
@@ -59,4 +60,16 @@
 
 .dui-progress-bar.dui-active {
     animation: dui-progress-bar-stripes 2s linear infinite;
+}
+
+.dui-progress-text {
+    width: 100%;
+    min-width: fit-content;
+    white-space: nowrap;
+    padding: 0 5px;
+}
+
+.dui-progress-text-blind {
+    filter: grayscale(17%) invert(80%);
+    mix-blend-mode: multiply;
 }