Merge pull request #2060 from Nexus-Mods/treeview-styling-2

Styling bug fixes for TreeDataGrid

src/Games/NexusMods.Games.AdvancedInstaller.UI/AdvancedManualInstallerUI.cs

@@ -50,7 +50,7 @@ public override async ValueTask<InstallerResult> ExecuteAsync(
         if (Headless) return new NotSupported();
 
         var tree = LibraryArchiveTree.Create(libraryArchive);
-        var (shouldInstall, deploymentData) = await GetDeploymentDataAsync(Language.AdvancedInstaller_Manual_Mod, tree, loadout);
+        var (shouldInstall, deploymentData) = await GetDeploymentDataAsync(loadoutGroup.GetLoadoutItem(transaction).Name, tree, loadout);
 
         if (!shouldInstall) return new NotSupported();
 

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/BodyView.axaml

@@ -45,14 +45,18 @@
         <Border Grid.Row="0" x:Name="TitleContainerBorder">
             <StackPanel x:Name="HeadingAndSubHeadingStackPanel" Orientation="Vertical">
                 <!-- Mod Name -->
-                <TextBlock Classes="TitleMDSemi" x:Name="ModNameTextBlock" Text="TEMP MOD NAME" />
+                <TextBlock Theme="{StaticResource HeadingSMSemiTheme}" 
+                           x:Name="ModNameTextBlock" Text="TEMP MOD NAME" />
 
                 <!-- Installer Name -->
-                <TextBlock Classes="HeadingMDSemi" x:Name="InstallerNameTextBlock"
-                           Text="{x:Static resources:Language.InstallerNameText}" />
+                <TextBlock Theme="{StaticResource HeadingMDSemiTheme}" 
+                           x:Name="InstallerNameTextBlock"
+                           Text="{x:Static resources:Language.InstallerNameText}" 
+                           IsVisible="False"/>
 
                 <!-- 'Please Select Files' -->
-                <TextBlock Classes="BodyLGNormal" x:Name="SubHeadingTextBlock"
+                <TextBlock Theme="{StaticResource BodyLGNormalTheme}" 
+                           x:Name="SubHeadingTextBlock"
                            Text="{x:Static resources:Language.SubHeadingText_Please_select_files}" />
             </StackPanel>
         </Border>

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/BodyView.axaml.cs

@@ -18,7 +18,7 @@ public BodyView()
             // Set the mod name if VM is not null.
             this.WhenAnyValue(view => view.ViewModel)
                 .WhereNotNull()
-                .Do(vm => ModNameTextBlock.Text = vm.ModName.ToUpper())
+                .Do(vm => ModNameTextBlock.Text = vm.ModName)
                 .Subscribe()
                 .DisposeWith(disposables);
 

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Left/ModContent/ModContentView.axaml

@@ -12,12 +12,13 @@
         <modContent:ModContentDesignViewModel />
     </Design.DataContext>
 
+
     <UserControl.Styles>
         <Style Selector="Border.HeaderAreaBorder">
             <Setter Property="BorderThickness" Value="0, 0, 0, 1" />
             <Setter Property="Margin" Value="0, 0, 0, 16" />
         </Style>
-
+    
         <Style Selector="TextBlock.ContentSubHeading">
             <Setter Property="Margin" Value="0, 4, 0, 16" />
         </Style>
@@ -27,19 +28,20 @@
         <!-- "Mod Content" Header and "Description" -->
         <Border Grid.Row="0" Classes="HeaderAreaBorder OutlineWeak" x:Name="HeaderAreaBorder">
             <StackPanel Orientation="Vertical">
-                <TextBlock Classes="TitleSMSemi"
+                <TextBlock Theme="{StaticResource TitleSMSemiTheme}"
                            Text="{x:Static resources:Language.ModContentTitle_MOD_CONTENT}"
                            x:Name="ModContentTitle" />
 
-                <TextBlock Classes="BodySMNormal ForegroundSubdued ContentSubHeading"
+                <TextBlock Theme="{StaticResource BodySMNormalTheme}"
+                           Classes="ForegroundSubdued ContentSubHeading"
                            Text="{x:Static resources:Language.ModContentSubHeading_Files_with_no}"
                            x:Name="ModContentSubHeading" />
             </StackPanel>
         </Border>
 
         <!-- "Mod Content" Tree -->
         <!-- Don't remove the width, it's a hack around https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/issues/221 -->
-        <TreeDataGrid Grid.Row="1" Classes="TreeWhiteCaret" x:Name="ModContentTreeDataGrid" 
+        <TreeDataGrid Grid.Row="1" Classes="Compact" x:Name="ModContentTreeDataGrid" 
                       ShowColumnHeaders="False" Width="1"/>
     </Grid>
 </reactiveUi:ReactiveUserControl>

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Left/ModContent/TreeEntry/ModContentTreeEntryView.axaml

@@ -34,25 +34,26 @@
             <icons:UnifiedIcon Classes="FileTypeIcon" x:Name="EntryIcon" />
 
             <!-- File Name -->
-            <TextBlock Classes="BodyMDNormal" VerticalAlignment="Center"
-                       TextTrimming="CharacterEllipsis"
-                       Text="Example-file.bsa"
-                       x:Name="FileNameTextBlock" />
+            <TextBlock   Theme="{StaticResource BodyMDNormalTheme}"
+                         VerticalAlignment="Center"
+                         TextTrimming="CharacterEllipsis"
+                         Text="Example-file.bsa"
+                         x:Name="FileNameTextBlock" />
         </StackPanel>
 
         <!-- Right Elements -->
         <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"
                     x:Name="EntryRightElementsStackPanel">
 
             <!-- Install Button (Install / Install all / Install folder) -->
-            <Button Classes="Rounded Primary RightElements" HorizontalAlignment="Right" IsVisible="False"
-                    x:Name="InstallRoundedButton">
+            <Button Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right" IsVisible="False"
+                    x:Name="InstallRoundedButton" Height="24">
                 <TextBlock Text="Install temp text" x:Name="InstallRoundedButtonTextBlock" />
             </Button>
 
             <!-- X Select location ['Selecting' State] -->
-            <Button Classes="Rounded Primary Active RightElements" HorizontalAlignment="Right" IsVisible="False"
-                    x:Name="SelectLocationRoundedButton">
+            <Button Classes="Standard Secondary RightElements" HorizontalAlignment="Right" IsVisible="False"
+                    x:Name="SelectLocationRoundedButton" Height="24">
                 <StackPanel Orientation="Horizontal">
                     <icons:UnifiedIcon Classes="Close" x:Name="SelectLocationCloseIcon" />
                     <TextBlock Text="{x:Static resources:Language.SelectLocationButton_Select_location}"
@@ -61,26 +62,26 @@
             </Button>
 
             <!-- Remove from Location Button ['IncludedExplicit' State] -->
-            <Button Classes="Rounded Accent RightElements" HorizontalAlignment="Right" IsVisible="False"
-                    x:Name="RemoveFromLocationButton">
+            <Button Classes="Standard Secondary RightElements" HorizontalAlignment="Right" IsVisible="False"
+                    x:Name="RemoveFromLocationButton" Height="24">
                 <StackPanel Orientation="Horizontal">
                     <icons:UnifiedIcon Classes="Close" x:Name="RemoveFromLocationCloseIcon" />
                     <TextBlock Text="temp Loc" x:Name="RemoveFromLocationButtonTextBlock" />
                 </StackPanel>
             </Button>
 
             <!-- Include Transition Button (Include / Include folder / Include with folder) [`Selecting`,`SelectingViaParent`]-->
-            <Button Classes="Rounded Primary SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
-                    x:Name="IncludeTransitionButton">
+            <Button Classes="Standard Tertiary Weak SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
+                    x:Name="IncludeTransitionButton" Height="24">
                 <StackPanel Orientation="Horizontal">
                     <icons:UnifiedIcon Classes="Close" x:Name="IncludeTransitionCloseIcon" />
                     <TextBlock Text="Include temp text" x:Name="IncludeTransitionButtonTextBlock" />
                 </StackPanel>
             </Button>
 
             <!-- Included Remove Button (Included / Included folder / Included with folder) -->
-            <Button Classes="Rounded Accent SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
-                    x:Name="IncludedRemoveButton">
+            <Button Classes="Standard Tertiary Weak SemiActive RightElements" HorizontalAlignment="Right" IsVisible="False"
+                    x:Name="IncludedRemoveButton" Height="24">
                 <StackPanel Orientation="Horizontal">
                     <icons:UnifiedIcon Classes="Close" x:Name="IncludedRemoveButtonCloseIcon" />
                     <TextBlock Text="Included temp text" x:Name="IncludedRemoveButtonTextBlock" />

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/EmptyPreview/EmptyPreviewView.axaml

@@ -12,7 +12,8 @@
         <emptyPreview:EmptyPreviewViewModel />
     </Design.DataContext>
 
-    <Border Classes="Rounded-lg OutlineModerate">
+    <Border Classes="Rounded-lg OutlineModerate" BorderThickness="2">
+
         <Border.Styles>
             <Style Selector="TextBlock#EmptyPreviewTextBlock">
                 <Setter Property="VerticalAlignment" Value="Center" />
@@ -22,9 +23,10 @@
         </Border.Styles>
 
         <ScrollViewer>
-            <TextBlock Classes="BodyMDNormal ForegroundSubdued"
-                       Text="{x:Static resources:Language.EmptyPreviewText_Select_files_to_install}"
-                       x:Name="EmptyPreviewTextBlock" />
+            <TextBlock Theme="{StaticResource BodyMDNormalTheme}"
+                Classes="ForegroundSubdued"
+                Text="{x:Static resources:Language.EmptyPreviewText_Select_files_to_install}"
+                x:Name="EmptyPreviewTextBlock" />
         </ScrollViewer>
     </Border>
 

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Preview/PreviewView.axaml

@@ -12,13 +12,13 @@
         <preview:PreviewViewModel />
     </Design.DataContext>
 
-    <Border Classes="Rounded-lg Mid" Padding="16">
+    <Border Classes="Rounded-lg Mid" Padding="16" BorderThickness="2">
         <Border.Styles>
             <Style Selector="Border.HeaderAreaBorder">
-                <Setter Property="BorderThickness" Value="0, 0, 0, 1" />
                 <Setter Property="Margin" Value="0, 0, 0, 16" />
+                <Setter Property="BorderThickness" Value="0, 0, 0, 1" />
             </Style>
-
+        
             <Style Selector="TextBlock#InstallLocationPreviewSubHeading">
                 <Setter Property="Margin" Value="0, 4, 0, 16" />
             </Style>
@@ -27,17 +27,18 @@
         <Grid RowDefinitions="Auto *">
             <Border Grid.Row="0" Classes="OutlineWeak HeaderAreaBorder" x:Name="HeaderAreaBorder">
                 <StackPanel Orientation="Vertical">
-                    <TextBlock Classes="TitleSMSemi"
+                    <TextBlock Theme="{StaticResource TitleSMSemiTheme}"
                                Text="{x:Static resources:Language.PreviewHeader_INSTALL_LOCATION_PREVIEW}" />
 
-                    <TextBlock Classes="BodySMNormal ForegroundSubdued SubHeading"
+                    <TextBlock Theme="{StaticResource BodySMNormalTheme}"
+                               Classes="ForegroundSubdued SubHeading"
                                Text="{x:Static resources:Language.PreviewSubHeading_Files_labelled_as_new}"
                                x:Name="InstallLocationPreviewSubHeading" />
                 </StackPanel>
             </Border>
 
             <!-- Don't remove this width, it's a hack around https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/issues/221 -->
-            <TreeDataGrid Grid.Row="1" Classes="TreeWhiteCaret" x:Name="LocationPreviewTreeDataGrid" 
+            <TreeDataGrid Grid.Row="1" Classes="Compact" x:Name="LocationPreviewTreeDataGrid" 
                           ShowColumnHeaders="False" Width="1" />
         </Grid>
     </Border>

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Preview/TreeEntry/PreviewTreeEntryView.axaml

@@ -24,7 +24,7 @@
             </Style>
 
             <Style Selector="Button.RightElements">
-                <Setter Property="Margin" Value="0,0,8,0" />
+                <Setter Property="Margin" Value="0" />
             </Style>
 
             <Style Selector="Button.PillElement">
@@ -43,31 +43,32 @@
             <icons:UnifiedIcon Classes="FileTypeIcon" x:Name="EntryIcon" />
 
             <!-- File Name -->
-            <TextBlock Classes="BodyMDNormal" VerticalAlignment="Center"
-                       TextTrimming="CharacterEllipsis"
-                       Text="Example-file.bsa"
-                       x:Name="FileNameTextBlock" />
+            <TextBlock  Theme="{StaticResource BodyMDNormalTheme}"
+                        VerticalAlignment="Center"
+                        TextTrimming="CharacterEllipsis"
+                        Text="Example-file.bsa"
+                        x:Name="FileNameTextBlock" />
 
             <!-- Pills -->
             <StackPanel Orientation="Horizontal" Classes="Spacing-2">
 
                 <!-- NEW Pill Label -->
-                <Button Classes="Pill Accent Label Hug PillElement" IsVisible="False" x:Name="NewPill">
+                <Button Classes="Pill Accent Label Hug PillElement" IsVisible="False" x:Name="NewPill" Height="18">
                     <StackPanel>
                         <TextBlock Text="{x:Static resources:Language.NewFilePill_NEW}" />
                     </StackPanel>
                 </Button>
 
                 <!-- Dupe Folder Pill Label -->
-                <Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="DupeFolderPill">
+                <Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="DupeFolderPill" Height="18">
                     <StackPanel>
                         <icons:UnifiedIcon Classes="Alert" />
                         <TextBlock Text="{x:Static resources:Language.Pill_DUPE_FOLDER}" />
                     </StackPanel>
                 </Button>
 
                 <!-- Folder Merged Pill Label -->
-                <Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="FolderMergedPill">
+                <Button Classes="Pill Light Label Hug PillElement" IsVisible="False" x:Name="FolderMergedPill" Height="18">
                     <StackPanel>
                         <icons:UnifiedIcon Classes="Check" />
                         <TextBlock Text="{x:Static resources:Language.Pill_FOLDER_MERGED}" />
@@ -80,8 +81,8 @@
 
         <!-- Right Elements // Add StackPanel here if adding additional ones -->
         <!-- X Button -->
-        <Button Grid.Column="1" Classes="Rounded Primary RightElements" HorizontalAlignment="Right"
-                x:Name="XRoundedButton">
+        <Button Grid.Column="1" Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right"
+                x:Name="XRoundedButton" Height="24" Width="24">
             <icons:UnifiedIcon Classes="Close" x:Name="StandaloneCloseIcon" />
         </Button>
     </Grid>

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/Preview/TreeEntry/PreviewTreeEntryView.axaml.cs

@@ -47,9 +47,6 @@ private void InitView()
         {
             EntryIcon.Classes.Add("FolderOutline");
 
-            // Make directory name bold.
-            FileNameTextBlock.Classes.Remove("BodyMDNormal");
-            FileNameTextBlock.Classes.Add("BodyMDBold");
         }
         else
         {

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/SelectLocation/SelectLocationView.axaml

@@ -12,45 +12,46 @@
         <selectLocation:SelectLocationDesignViewModel />
     </Design.DataContext>
 
-    <Border Classes="Rounded-lg Mid OutlineStrong" Padding="16">
+    <Border Classes="Rounded-lg Mid OutlineModerate" Padding="16" BorderThickness="2">
         <Border.Styles>
             <Style Selector="Border#HeaderAreaBorder">
                 <Setter Property="Margin" Value="0, 0, 0, 16" />
             </Style>
-
+        
             <Style Selector="TextBlock#SelectLocationSubHeading">
                 <Setter Property="Margin" Value="0, 4, 0, 16" />
             </Style>
-
+        
             <Style Selector="TextBlock#AllFoldersAreaSubHeaderText">
                 <Setter Property="Margin" Value="0, 0, 0, 8" />
             </Style>
-
+        
             <Style Selector="StackPanel.SuggestedHeaderStackPanel">
                 <Setter Property="Margin" Value="0, 0, 0, 8" />
             </Style>
-
+        
             <Style Selector="Border.SuggestedAreaBorder">
                 <Setter Property="Margin" Value="0, 0, 0, 16" />
             </Style>
-
+        
             <Style Selector="Border.Padding16">
                 <Setter Property="Padding" Value="16" />
             </Style>
         </Border.Styles>
 
         <ScrollViewer>
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Vertical" Margin="0,0,16,0">
 
                 <!-- 'Select Install Location' -->
                 <Border x:Name="HeaderAreaBorder" Classes="OutlineWeak" BorderThickness="0, 0, 0, 1">
                     <StackPanel Orientation="Vertical">
                         <!-- 'Select Install Location' -->
-                        <TextBlock Classes="TitleSMSemi"
+                        <TextBlock Theme="{StaticResource TitleSMSemiTheme}"
                                    Text="{x:Static resources:Language.SelectLocationHeaderText_SELECT_INSTALL_LOCATION}" />
 
                         <!-- 'Select where to install the mod file/folder' -->
-                        <TextBlock Classes="BodySMNormal ForegroundSubdued"
+                        <TextBlock Theme="{StaticResource BodySMNormalTheme}"
+                                   Classes="ForegroundSubdued"
                                    Text="{x:Static resources:Language.SelectLocationSubHeadingText_Select_where_to}"
                                    x:Name="SelectLocationSubHeading" />
                     </StackPanel>
@@ -61,10 +62,11 @@
                     <StackPanel Orientation="Vertical">
                         <StackPanel Classes="SuggestedHeaderStackPanel" Orientation="Vertical">
                             <!-- Header: 'SUGGESTED' -->
-                            <TextBlock Classes="TitleXSSemi"
+                            <TextBlock Theme="{StaticResource TitleXSSemiTheme}"
                                        Text="{x:Static resources:Language.SuggestedHeaderText_SUGGESTED}" />
 
-                            <TextBlock Classes="BodySMNormal ForegroundSubdued"
+                            <TextBlock Theme="{StaticResource BodySMNormalTheme}"
+                                       Classes="ForegroundSubdued"
                                        TextWrapping="Wrap"
                                        Text="TEMP SUBTITLE"
                                        x:Name="SuggestedSubHeaderText" />
@@ -86,14 +88,15 @@
                     <StackPanel Orientation="Vertical">
                         <StackPanel Classes="SuggestedHeaderStackPanel" Orientation="Vertical">
                             <!-- Header: 'ALL FOLDERS' -->
-                            <TextBlock Classes="TitleXSSemi"
+                            <TextBlock Theme="{StaticResource TitleXSSemiTheme}"
                                        Text="{x:Static resources:Language.AllFoldersAreaHeaderText_ALL_FOLDERS}" />
                             <!-- Description: 'Select from full folder structure' -->
-                            <TextBlock Classes="BodySMNormal ForegroundSubdued"
+                            <TextBlock Theme="{StaticResource BodySMNormalTheme}"
+                                       Classes="ForegroundSubdued"
                                        Text="{x:Static resources:Language.AllFoldersAreaSubHeaderText_Select_from_full}" />
                         </StackPanel>
 
-                        <TreeDataGrid Classes="TreeWhiteCaret"
+                        <TreeDataGrid Classes="Compact"
                                       ShowColumnHeaders="False"
                                       x:Name="SelectTreeDataGrid" />
                     </StackPanel>

src/Games/NexusMods.Games.AdvancedInstaller.UI/Content/Right/SelectLocation/SuggestedEntry/SuggestedEntryView.axaml

@@ -49,7 +49,7 @@
         </StackPanel>
 
         <!-- Select Button -->
-        <Button Grid.Column="2" Classes="Rounded Primary RightElements" HorizontalAlignment="Right"
+        <Button Grid.Column="2" Classes="Standard Tertiary Weak RightElements" HorizontalAlignment="Right"
                 x:Name="SelectRoundedButton">
             <StackPanel Orientation="Horizontal">
                 <TextBlock Text="{x:Static resources:Language.SelectButton_Select}" />