Merge pull request #2518 from Nexus-Mods/leftmenu-small-fixes

Small left menu fixes
Nexus-Mods · Jan 22, 2025 · 77f3b70 · 77f3b70
2 parents 103eecf + d133505
commit 77f3b70
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 44 deletions.
diff --git a/src/NexusMods.App.UI/LeftMenu/Home/HomeLeftMenuView.axaml b/src/NexusMods.App.UI/LeftMenu/Home/HomeLeftMenuView.axaml
@@ -11,10 +11,12 @@
     xmlns:reactiveUi="http://reactiveui.net"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:items="clr-namespace:NexusMods.App.UI.LeftMenu.Items">
+
     <Design.DataContext>
         <home:HomeLeftMenuDesignViewModel />
     </Design.DataContext>
-    <StackPanel Margin="16,0,16,12">
+
+    <StackPanel Margin="12,0,12,12" x:Name="LeftMenuStack">
         <items:LeftMenuItemView x:Name="MyGamesItem" />
         <items:LeftMenuItemView x:Name="MyLoadoutsItem"/>
     </StackPanel>

diff --git a/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuDesignViewModel.cs b/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuDesignViewModel.cs
@@ -22,7 +22,7 @@ public class LoadoutLeftMenuDesignViewModel : AViewModel<ILoadoutLeftMenuViewMod
     public ILeftMenuItemViewModel LeftMenuItemLoadout { get; } = new LeftMenuItemDesignViewModel
     {
         Text = new StringComponent(Language.LoadoutView_Title_Installed_Mods_Default),
-        Icon = IconValues.Mods,
+        Icon = IconValues.FormatAlignJustify,
     };
     public ILeftMenuItemViewModel LeftMenuItemHealthCheck { get; } = new LeftMenuItemDesignViewModel
     {

diff --git a/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuView.axaml b/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuView.axaml
@@ -13,7 +13,7 @@
     </Design.DataContext>
 
     <Grid RowDefinitions="*, Auto" Margin="12,0,12,12">
-        <StackPanel Grid.Row="0" Orientation="Vertical">
+        <StackPanel Grid.Row="0" Orientation="Vertical" x:Name="LeftMenuStack">
             <items:LeftMenuItemView x:Name="LibraryItem" />
 
             <StackPanel>

diff --git a/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuViewModel.cs b/src/NexusMods.App.UI/LeftMenu/Loadout/LoadoutLeftMenuViewModel.cs
@@ -109,7 +109,7 @@ public LoadoutLeftMenuViewModel(
         )
         {
             Text = new StringComponent(Language.LoadoutView_Title_Installed_Mods_Default, loadoutLabelObservable),
-            Icon = IconValues.Mods,
+            Icon = IconValues.FormatAlignJustify,
             ToolTip = new StringComponent(Language.LoadoutView_Title_Installed_Mods_ToolTip),
         };
 

diff --git a/src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml b/src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml
@@ -66,18 +66,7 @@
             </Expander.Header>
             <!-- Empty State -->
 
-            <controls:EmptyState x:Name="EmptyState" Grid.Row="1"
-                                 Header="{x:Static resources:Language.EmptyLibraryTitleText}">
-                <controls:EmptyState.Subtitle>
-                    <StackPanel Orientation="Vertical" Spacing="16">
-                        <TextBlock x:Name="EmptyLibraryTextBlock" Text="Subtitle" />
-                        <controls:StandardButton x:Name="EmptyLibraryLinkButton"
-                                                 Text="Open Nexus Mods"
-                                                 ShowIcon="Left"
-                                                 LeftIcon="{x:Static icons:IconValues.Nexus}"
-                                                 HorizontalAlignment="Center" />
-                    </StackPanel>
-                </controls:EmptyState.Subtitle>
+
 
                 <Grid RowDefinitions="Auto, *">
 
@@ -145,14 +134,27 @@
 
                         </StackPanel>
                     </Border>
+
+                    <controls:EmptyState x:Name="EmptyState" Grid.Row="1"
+                                         Header="{x:Static resources:Language.EmptyLibraryTitleText}">
+                        <controls:EmptyState.Subtitle>
+                            <StackPanel Orientation="Vertical" Spacing="16">
+                                <TextBlock x:Name="EmptyLibraryTextBlock" Text="Subtitle" />
+                                <controls:StandardButton x:Name="EmptyLibraryLinkButton"
+                                                         Text="Open Nexus Mods"
+                                                         ShowIcon="Left"
+                                                         LeftIcon="{x:Static icons:IconValues.Nexus}"
+                                                         HorizontalAlignment="Center" />
+                            </StackPanel>
+                        </controls:EmptyState.Subtitle>
 
                     <TreeDataGrid Grid.Row="1" x:Name="TreeDataGrid"
                                   ShowColumnHeaders="True"
                                   CanUserResizeColumns="True"
                                   CanUserSortColumns="True"
                                   HorizontalAlignment="Stretch" />
+                    </controls:EmptyState>
                 </Grid>
-            </controls:EmptyState>
         </Expander>
     </Grid>
 

diff --git a/src/NexusMods.App.UI/Pages/LoadoutPage/LoadoutPage.cs b/src/NexusMods.App.UI/Pages/LoadoutPage/LoadoutPage.cs
@@ -53,7 +53,7 @@ public override ILoadoutViewModel CreateViewModel(LoadoutPageContext context)
         {
             SectionName = "Mods",
             ItemName = Language.LoadoutViewPageTitle,
-            Icon = IconValues.CollectionsOutline,
+            Icon = IconValues.FormatAlignJustify,
             PageData = new PageData
             {
                 FactoryId = Id,

diff --git a/src/NexusMods.App.UI/Pages/LoadoutPage/LoadoutViewModel.cs b/src/NexusMods.App.UI/Pages/LoadoutPage/LoadoutViewModel.cs
@@ -56,7 +56,7 @@ public LoadoutViewModel(IWindowManager windowManager, IServiceProvider servicePr
         else
         {
             TabTitle = Language.LoadoutViewPageTitle;
-            TabIcon = IconValues.Mods;
+            TabIcon = IconValues.FormatAlignJustify;
         }
 
         SwitchViewCommand = new ReactiveCommand<Unit>(_ => { Adapter.ViewHierarchical.Value = !Adapter.ViewHierarchical.Value; });

diff --git a/src/NexusMods.Icons/IconValues.cs b/src/NexusMods.Icons/IconValues.cs
@@ -95,6 +95,19 @@ public static class IconValues
 
     // https://pictogrammers.com/library/mdi/icon/open-in-new/
     public static readonly IconValue OpenInNew = new ProjektankerIcon("mdi-open-in-new");
+
+    // https://pictogrammers.com/library/mdi/icon/format-list-bulleted/
+    public static readonly IconValue FormatListBullet = new ProjektankerIcon("mdi-format-list-bulleted");
+
+    // https://pictogrammers.com/library/mdi/icon/format-list-checkbox/
+    public static readonly IconValue FormatListCheckbox = new ProjektankerIcon("mdi-format-list-checkbox");
+
+    // https://pictogrammers.com/library/mdi/icon/dots-grid/
+    public static readonly IconValue DotsGrid = new ProjektankerIcon("mdi-dots-grid");
+
+    // https://pictogrammers.com/library/mdi/icon/format-align-justify/
+    public static readonly IconValue FormatAlignJustify = new ProjektankerIcon("mdi-format-align-justify");
+
 
     // https://pictogrammers.com/library/mdi/icon/playlist-plus/
     public static readonly IconValue PlaylistAdd = new ProjektankerIcon("mdi-playlist-plus");
@@ -523,6 +536,12 @@ public static class IconValues
         new Rect(0, 0, 24, 24 )
     ));
 
+    // new mods icon
+    public static readonly IconValue ModsOutline = new SimpleVectorIcon(new SimpleVectorIconImage(
+        "M18.97 12.4328L17.6972 13.4184L11.985 17.8656L6.26506 13.4184L5 12.4328L11.985 7L18.97 12.4328ZM15.71 12.4309L11.985 9.53372L8.25668 12.4335L11.9842 15.3316L15.71 12.4309Z",
+        new Rect(0, 0, 24, 24 )
+    ));
+
     public static readonly IconValue AvatarTest = new IconValue(new AvaloniaImage(new Bitmap(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png")))));
 
 #endregion

diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Icons/IconsStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/Controls/Icons/IconsStyles.axaml
@@ -112,9 +112,14 @@
                     <icons:UnifiedIcon Classes="Cardiology" />
                     <icons:UnifiedIcon Classes="LibraryOutline" />
                     <icons:UnifiedIcon Classes="CollectionsOutline" />
+                    <icons:UnifiedIcon Classes="ModsOutline" />
                     <icons:UnifiedIcon Classes="InfoFilled" />
                     <icons:UnifiedIcon Classes="NexusColor" />
                     <icons:UnifiedIcon Classes="Account" />
+                    <icons:UnifiedIcon Classes="FormatListBullet" />
+                    <icons:UnifiedIcon Classes="FormatListCheckbox" />
+                    <icons:UnifiedIcon Classes="DotsGrid" />
+                    <icons:UnifiedIcon Classes="FormatAlignJustify" />
                 </WrapPanel>
                 <WrapPanel>
                     <icons:UnifiedIcon Classes="Nexus" />
@@ -588,19 +593,22 @@
     </Style>
     <Style Selector="icons|UnifiedIcon.PictogramHealth">
         <Setter Property="Value" Value="{x:Static icons:IconValues.PictogramHealth}" />
-    </Style>    
+    </Style>
     <Style Selector="icons|UnifiedIcon.Cardiology">
         <Setter Property="Value" Value="{x:Static icons:IconValues.Cardiology}" />
-    </Style> 
+    </Style>
     <Style Selector="icons|UnifiedIcon.LibraryOutline">
         <Setter Property="Value" Value="{x:Static icons:IconValues.LibraryOutline}" />
     </Style>
     <Style Selector="icons|UnifiedIcon.Swap">
         <Setter Property="Value" Value="{x:Static icons:IconValues.Swap}" />
-    </Style> 
+    </Style>
     <Style Selector="icons|UnifiedIcon.CollectionsOutline">
         <Setter Property="Value" Value="{x:Static icons:IconValues.CollectionsOutline}" />
     </Style>
+    <Style Selector="icons|UnifiedIcon.ModsOutline">
+        <Setter Property="Value" Value="{x:Static icons:IconValues.ModsOutline}" />
+    </Style>
     <Style Selector="icons|UnifiedIcon.InfoFilled">
         <Setter Property="Value" Value="{x:Static icons:IconValues.InfoFilled}" />
     </Style>
@@ -610,4 +618,16 @@
     <Style Selector="icons|UnifiedIcon.Account">
         <Setter Property="Value" Value="{x:Static icons:IconValues.Account}" />
     </Style>
+    <Style Selector="icons|UnifiedIcon.FormatListBullet">
+        <Setter Property="Value" Value="{x:Static icons:IconValues.FormatListBullet}" />
+    </Style>
+    <Style Selector="icons|UnifiedIcon.FormatListCheckbox">
+        <Setter Property="Value" Value="{x:Static icons:IconValues.FormatListCheckbox}" />
+    </Style>
+    <Style Selector="icons|UnifiedIcon.DotsGrid">
+        <Setter Property="Value" Value="{x:Static icons:IconValues.DotsGrid}" />
+    </Style>
+    <Style Selector="icons|UnifiedIcon.FormatAlignJustify">
+        <Setter Property="Value" Value="{x:Static icons:IconValues.FormatAlignJustify}" />
+    </Style>
 </Styles>
diff --git a/...Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LeftMenu/LeftMenuStyles.axaml b/...Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LeftMenu/LeftMenuStyles.axaml
@@ -1,32 +1,47 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:loadout="clr-namespace:NexusMods.App.UI.LeftMenu.Loadout;assembly=NexusMods.App.UI">
+        xmlns:loadout="clr-namespace:NexusMods.App.UI.LeftMenu.Loadout;assembly=NexusMods.App.UI"
+        xmlns:home="clr-namespace:NexusMods.App.UI.LeftMenu.Home;assembly=NexusMods.App.UI">
     <Design.PreviewWith>
-        <Border Padding="8" Width="200" Height="500" Classes="Low">
-            <loadout:LoadoutLeftMenuView>
-                <loadout:LoadoutLeftMenuView.DataContext>
-                    <loadout:LoadoutLeftMenuDesignViewModel/>
-                </loadout:LoadoutLeftMenuView.DataContext>
-            </loadout:LoadoutLeftMenuView>
+        <Border Padding="8" Width="500" Height="500" Classes="Low">
+
+            <Grid ColumnDefinitions="200, 200">
+                <home:HomeLeftMenuView Grid.Column="0" >
+                    <home:HomeLeftMenuView.DataContext>
+                        <home:HomeLeftMenuDesignViewModel/>
+                    </home:HomeLeftMenuView.DataContext>
+                </home:HomeLeftMenuView>
+
+                <loadout:LoadoutLeftMenuView Grid.Column="1">
+                    <loadout:LoadoutLeftMenuView.DataContext>
+                        <loadout:LoadoutLeftMenuDesignViewModel/>
+                    </loadout:LoadoutLeftMenuView.DataContext>
+                </loadout:LoadoutLeftMenuView>
+            </Grid>
         </Border>
     </Design.PreviewWith>
+
+    <!-- HOME & LOADOUT LEFT MENU -->
+    <Style Selector="home|HomeLeftMenuView,loadout|LoadoutLeftMenuView">
+
+        <!-- MAIN STACK -->
+        <Style Selector="^ StackPanel#LeftMenuStack">
+            <Setter Property="Spacing" Value="{StaticResource Spacing-1.5}" />
 
-    <!-- Add Styles Here -->
-
-    <Style Selector="loadout|LoadoutLeftMenuView">
-
-        <Style Selector="^ Grid > StackPanel">
-            <Setter Property="Spacing" Value="{StaticResource Spacing-2}" />
-
-            <Style Selector="^ StackPanel > Separator">
-                <Setter Property="Margin" Value="0,4,0,8" />
-                <Setter Property="Background" Value="{StaticResource StrokeTranslucentSubduedBrush}" />
-            </Style>
-
-            <Style Selector="^ > StackPanel > TextBlock">
-                <Setter Property="Theme" Value="{StaticResource TitleXSSemiTheme}" />
-                <Setter Property="Foreground" Value="{StaticResource NeutralWeakBrush}" />
+            <!-- SEPERATOR AND TITLE STACK -->
+            <Style Selector="^ > StackPanel">
+                <Setter Property="Margin" Value="0,4,0,4" />
+                <Style Selector="^ > Separator">
+                    <Setter Property="Margin" Value="0,0,0,12" />
+                    <Setter Property="Background" Value="{StaticResource StrokeTranslucentSubduedBrush}" />
+                </Style>
+                <Style Selector="^ > TextBlock">
+                    <Setter Property="Theme" Value="{StaticResource TitleXSSemiTheme}" />
+                    <Setter Property="Foreground" Value="{StaticResource NeutralWeakBrush}" />
+                </Style>
             </Style>
         </Style>
     </Style>
+
+
 </Styles>