Merge pull request #2133 from Nexus-Mods/fix/left-menu-badge-numbers

Fix for badge width with larger numbers
Nexus-Mods · Oct 8, 2024 · 91f2e97 · 91f2e97
2 parents b4cecb1 + c14a900
commit 91f2e97
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs b/src/NexusMods.App.UI/LeftMenu/Items/IconDesignViewModel.cs
@@ -0,0 +1,28 @@
+using System.Reactive;
+using System.Reactive.Linq;
+using NexusMods.App.UI.Controls.Navigation;
+using NexusMods.Icons;
+using ReactiveUI;
+using ReactiveUI.Fody.Helpers;
+
+namespace NexusMods.App.UI.LeftMenu.Items;
+
+public class IconDesignViewModel : AViewModel<IIconViewModel>, IIconViewModel
+{
+    [Reactive] public string Name { get; set; } = "";
+
+    [Reactive] public IconValue Icon { get; set; } = new();
+
+    [Reactive] public string[] Badges { get; set; } = [];
+
+    [Reactive] public ReactiveCommand<NavigationInformation, Unit> NavigateCommand { get; set; } = ReactiveCommand.Create<NavigationInformation>(_ => { }, Observable.Return(true));
+
+    [Reactive] public int RelativeOrder { get; set; } = 0;
+
+    public IconDesignViewModel() : base()
+    {
+        Icon = IconValues.ModLibrary;
+        Name = "Sample Text";
+        Badges = new[] { "82" };
+    }
+}
diff --git a/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml b/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml
@@ -1,6 +1,6 @@
 <reactiveUi:ReactiveUserControl
-    d:DesignHeight="40"
-    d:DesignWidth="184"
+    d:DesignHeight="50"
+    d:DesignWidth="300"
     mc:Ignorable="d"
     x:Class="NexusMods.App.UI.LeftMenu.Items.IconView"
     x:TypeArguments="items:IIconViewModel"
@@ -15,7 +15,7 @@
     xmlns:system="clr-namespace:System;assembly=System.Runtime">
 
     <Design.DataContext>
-        <items:IconViewModel Icon="{x:Static icons:IconValues.ModLibrary}" Name="Some long Text" />
+        <items:IconDesignViewModel />
     </Design.DataContext>
 
     <navigation:NavigationControl Classes="LeftMenuItem" 
@@ -40,16 +40,17 @@
                 </ItemsControl.ItemsPanel>
                 <ItemsControl.ItemTemplate>
                     <DataTemplate DataType="{x:Type system:String}">
-                        <Border Width="20" 
-                                Height="20" 
+                        <Border
+                                Padding="6,0"
+                                Height="20"
                                 CornerRadius="{StaticResource Rounded-full}" 
                                 Background="{StaticResource PrimaryModerate}">
                             <TextBlock
                                 x:Name="TextBlock"
                                 TextAlignment="Center"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
-                                Classes="BodySMBold"
+                                Theme="{StaticResource BodySMBoldTheme}"
                                 Foreground="{StaticResource NeutralInverted}"
                                 Text="{CompiledBinding }"/>
                         </Border>