Progressbar fix with UI Scale (#287)

### Gearset Switcher - Progressbar now properly scale with the global UI Scale ### Durability Widget - Progressbar now properly scale with the global UI Scale - Better layout for margins in split mode, which allow better scaling, too.
una-xiv · Oct 6, 2024 · fee6d78 · fee6d78
1 parent cdef127
commit fee6d78
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/Umbra/src/Toolbar/Widgets/Library/Durability/DurabilityWidget.Nodes.cs b/Umbra/src/Toolbar/Widgets/Library/Durability/DurabilityWidget.Nodes.cs
@@ -8,11 +8,11 @@ internal partial class DurabilityWidget
 
     private Node BarWrapperNode = new() {
         Stylesheet = Stylesheet,
-        SortIndex  = 0,
+        SortIndex  = -1,
         Id         = "BarWrapper",
         ChildNodes = [
-            new ProgressBarNode("SpiritbondBar"),
             new ProgressBarNode("DurabilityBar"),
+            new ProgressBarNode("SpiritbondBar"),
         ],
     };
 

diff --git a/Umbra/src/Toolbar/Widgets/Library/Durability/DurabilityWidget.cs b/Umbra/src/Toolbar/Widgets/Library/Durability/DurabilityWidget.cs
@@ -320,33 +320,31 @@ private void UpdateBars(byte durability, byte spiritbond)
         LabelNode.Style.IsVisible = true;
         LabelNode.Style.Size      = new(width, SafeHeight);
 
-        // Ensure wrapper offset depending on left icon visibility
-        BarWrapperNode.Style.Margin = new EdgeSize(0, 0, 0, LeftIconNode.IsVisible ? LeftIconNode.Width : 0);
-
         DurabilityBarNode.UseBorder = GetConfigValue<bool>("UseBarBorder");
         SpiritbondBarNode.UseBorder = GetConfigValue<bool>("UseBarBorder");
 
-        if (GetConfigValue<string>("BarDirection") == "R2L") {
-            DurabilityBarNode.Direction = ProgressBarNode.FillDirection.RightToLeft;
-            SpiritbondBarNode.Direction = ProgressBarNode.FillDirection.RightToLeft;
-        } else {
-            DurabilityBarNode.Direction = ProgressBarNode.FillDirection.LeftToRight;
-            SpiritbondBarNode.Direction = ProgressBarNode.FillDirection.LeftToRight;
-        }
-
         DurabilityBarNode.Value = durability;
         SpiritbondBarNode.Value = spiritbond;
     }
 
     private void UseStackedBars()
     {
         if (GetConfigValue<string>("BarDirection") == "R2L") {
-            DurabilityBarNode.Style.Anchor = Anchor.BottomRight;
-            SpiritbondBarNode.Style.Anchor = Anchor.BottomRight;
+            DurabilityBarNode.Direction = ProgressBarNode.FillDirection.RightToLeft;
+            SpiritbondBarNode.Direction = ProgressBarNode.FillDirection.RightToLeft;
         } else {
-            DurabilityBarNode.Style.Anchor = Anchor.BottomLeft;
-            SpiritbondBarNode.Style.Anchor = Anchor.BottomLeft;
+            DurabilityBarNode.Direction = ProgressBarNode.FillDirection.LeftToRight;
+            SpiritbondBarNode.Direction = ProgressBarNode.FillDirection.LeftToRight;
         }
+
+        DurabilityBarNode.Style.Anchor = Anchor.TopLeft;
+        SpiritbondBarNode.Style.Anchor = Anchor.TopLeft;
+
+        DurabilityBarNode.Style.Margin = new EdgeSize(0, 0, 0, 0);
+        SpiritbondBarNode.Style.Margin = new EdgeSize(0, 0, 0, 0);
+
+        BarWrapperNode.Style.Margin = new(0, 0, 0, LeftIconNode.IsVisible ? 23 : 0);
+
     }
 
     private void UseSplittedBars()
@@ -355,17 +353,22 @@ private void UseSplittedBars()
         SetLeftIcon(GetIconId());
         SetRightIcon(61564);
 
-        var margin = (int)(LeftIconNode.Width / 1.5f);
-        var width  = GetConfigValue<int>("BarWidth");
+        var width = GetConfigValue<int>("BarWidth");
 
         // Ensure the gap between icons and opposite bars aren't too much
-        LabelNode.Style.Size      = new(width - margin, SafeHeight);
-        BarWrapperNode.Style.Size = new(width - margin, SafeHeight);
+        LabelNode.Style.Size      = new(width, SafeHeight);
+        BarWrapperNode.Style.Size = new(width, SafeHeight);
 
+        BarWrapperNode.Style.Margin = new(0, 0, 0, 23);
+
+        int margin = SafeHeight / 2;
         DurabilityBarNode.Style.Margin = new EdgeSize(0, 0, 0, -margin);
-        SpiritbondBarNode.Style.Margin = new EdgeSize(0, 0, 0, LeftIconNode.Width / 3);
+        SpiritbondBarNode.Style.Margin = new EdgeSize(0, 0, 0, margin);
+
+        DurabilityBarNode.Direction = ProgressBarNode.FillDirection.LeftToRight;
+        SpiritbondBarNode.Direction = ProgressBarNode.FillDirection.RightToLeft;
 
-        DurabilityBarNode.Style.Anchor = Anchor.BottomLeft;
-        SpiritbondBarNode.Style.Anchor = Anchor.BottomRight;
+        DurabilityBarNode.Style.Anchor = Anchor.TopLeft;
+        SpiritbondBarNode.Style.Anchor = Anchor.BottomLeft;
     }
 }
diff --git a/Umbra/src/Windows/Components/ProgressBarNode.cs b/Umbra/src/Windows/Components/ProgressBarNode.cs
@@ -87,14 +87,17 @@ private void UpdateBar(Node _)
             progress = 1;
         }
 
+        float scaledHeight = Height / ScaleFactor;
+        float scaledWidth = Width / ScaleFactor;
+
         progress = Math.Clamp(progress, 0, 1);
         overflow = Math.Clamp(overflow, 0, 1);
 
         int padding     = UseBorder ? PaddingSize * 2 : 0;
-        int innerHeight = Height - padding;
+        int innerHeight = (int) (scaledHeight - padding);
 
-        var progressWidth = (int)(progress * (Width - padding));
-        var overflowWidth = (int)(overflow * (Width - padding));
+        var progressWidth = (int)(progress * (scaledWidth - padding));
+        var overflowWidth = (int)(overflow * (scaledWidth - padding));
 
         BarNode.Style.Size      = new(progressWidth, innerHeight);
         OverflowNode.Style.Size = new(overflowWidth, innerHeight);