Merge pull request #2319 from Nexus-Mods/load-order-styling

Load Order Styling - Part 3

src/NexusMods.App.UI/Controls/Alerts/Alert.axaml.cs

@@ -200,6 +200,11 @@ protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs chang
             }
         }
 
+        if (change.Property == IsDismissedProperty)
+        {
+            IsVisible = !IsDismissed;
+        }
+
         base.OnPropertyChanged(change);
     }
 
@@ -225,7 +230,6 @@ protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
         if (_icon == null || _dismissButton == null || _titleText == null || _bodyText == null || _bodyTextBorder == null || _actionsRowBorder == null)
             return;
 
-
         // turn off elements based on properties
         _dismissButton.IsVisible = ShowDismiss;
         _bodyTextBorder.IsVisible = ShowBody && !string.IsNullOrWhiteSpace(Body);

src/NexusMods.App.UI/Controls/Alerts/AlertSettingsWrapper.cs

@@ -22,7 +22,7 @@ public AlertSettingsWrapper()
     public AlertSettingsWrapper(ISettingsManager settingsManager, string key)
     {
         _settingsManager = settingsManager;
-
+        
         Key = key;
         IsDismissed = settingsManager.Get<AlertSettings>().IsDismissed(key);
     }
@@ -33,7 +33,17 @@ public void DismissAlert()
 
         _settingsManager?.Update<AlertSettings>(alertSettings => alertSettings with
         {
-            AlertStatus = alertSettings.AlertStatus.SetItem(Key, true),
+            AlertStatus = alertSettings.AlertStatus.SetItem(Key, IsDismissed),
+        });
+    }
+
+    public void ShowAlert()
+    {
+        IsDismissed = false;
+
+        _settingsManager?.Update<AlertSettings>(alertSettings => alertSettings with
+        {
+            AlertStatus = alertSettings.AlertStatus.SetItem(Key, IsDismissed),
         });
     }
 }

src/NexusMods.App.UI/Pages/Sorting/LoadOrder/ILoadOrderViewModel.cs

@@ -2,6 +2,7 @@
 using System.Reactive;
 using NexusMods.Abstractions.UI;
 using NexusMods.App.UI.Controls;
+using NexusMods.App.UI.Controls.Alerts;
 using ReactiveUI;
 
 namespace NexusMods.App.UI.Pages.Sorting;
@@ -71,4 +72,9 @@ public interface ILoadOrderViewModel : IViewModelInterface
     /// Contents text for the empty state, in case there are no sortable items to display
     /// </summary>
     string EmptyStateMessageContents { get; }
+
+    /// <summary>
+    /// AlertSettings wrapper for the Alert so it can be shown\hidden based on the settings
+    /// </summary>
+    AlertSettingsWrapper AlertSettingsWrapper { get; }
 }

src/NexusMods.App.UI/Pages/Sorting/LoadOrder/LoadOrderView.axaml

@@ -23,7 +23,7 @@
         <Grid RowDefinitions="Auto, Auto, *">
             <Border Grid.Row="0" Classes="Toolbar">
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
-                    <ComboBox SelectedIndex="0" Classes="Secondary">
+                    <ComboBox SelectedIndex="0" Classes="Secondary Compact">
                         <ComboBox.ItemTemplate>
                             <DataTemplate>
                                 <StackPanel Orientation="Horizontal">
@@ -45,14 +45,12 @@
                             </StackPanel>
                         </ComboBoxItem>
                     </ComboBox>
-                    <CheckBox>
-                        <TextBlock Text="Hide Disabled Collections" Theme="{StaticResource BodyMDNormalTheme}" />
-                    </CheckBox>
-                    <Separator Width="1" Height="32" Background="{StaticResource StrokeTranslucentWeakBrush}" />
+                    <CheckBox Content="Hide Disabled Collections" />
+                    <Border Width="1" Height="28" Margin="4,0" Background="{StaticResource StrokeTranslucentWeakBrush}" />
                     <controls:StandardButton
                         Size="Small"
                         Text="Add to group" />
-                    <ComboBox SelectedIndex="0" Classes="Secondary">
+                    <ComboBox SelectedIndex="0" Classes="Secondary Compact">
                         <ComboBox.ItemTemplate>
                             <DataTemplate>
                                 <TextBlock Text="New group" Theme="{StaticResource BodyMDNormalTheme}" />
@@ -66,30 +64,42 @@
             </Border>
 
             <StackPanel Grid.Row="1" Spacing="24" Margin="24">
-                <alerts:Alert
-                    Severity="Info"
-                    Title="Load Order for REDmod files in Cyberpunk 2077 - First Loaded Wins"
-                    Body="Some Cyberpunk 2077 mods use REDmod files to alter core gameplay elements. If two REDmod files modify the same part of the game, the one loaded first will take priority and overwrite changes from those loaded later.\n\nFor example, the 1st position overwrites the 2nd, the 2nd overwrites the 3rd, and so on."
-                    IsVisible="True"
-                    ShowDismiss="False" />
-
-                <TextBlock Text="Last Loaded REDmod File Wins"
-                           Theme="{StaticResource HeadingXSSemiTheme}" />
+                <alerts:Alert x:Name="LoadOrderAlert"
+                              Severity="Info"
+                              Title="{Binding InfoAlertTitle}"
+                              Body="{Binding InfoAlertMessage}"
+                              ShowDismiss="True" />
+
+                <StackPanel Orientation="Horizontal" Spacing="4">
+                    <TextBlock Text="Last Loaded REDmod File Wins"
+                               Theme="{StaticResource HeadingXSSemiTheme}" />
+                    <controls:StandardButton ShowIcon="IconOnly"
+                                             LeftIcon="{x:Static icons:IconValues.Info}"
+                                             Type="Tertiary"
+                                             Fill="None" 
+                                             Command="{Binding InfoAlertCommand}"/>
+                </StackPanel>
             </StackPanel>
 
             <Grid Grid.Row="2" ColumnDefinitions="32, *" Margin="24,0,24,24">
 
                 <!-- left column (trophy bar) -->
                 <DockPanel x:Name="TrophyBarPanel" HorizontalAlignment="Left">
-                    <icons:UnifiedIcon x:Name="TrophyIcon" Margin="0,8,0,8" DockPanel.Dock="Top"
-                                       Value="{x:Static icons:IconValues.Trophy}" Size="20" />
+                    <icons:UnifiedIcon x:Name="TrophyIcon"
+                                       DockPanel.Dock="Top"
+                                       Margin="0,8,0,8"
+                                       Value="{x:Static icons:IconValues.Trophy}"
+                                       Size="20"
+                                       ToolTip.Tip="{Binding TrophyToolTip}" />
 
                     <Grid RowDefinitions="Auto, *, Auto" HorizontalAlignment="Center">
-                        <icons:UnifiedIcon x:Name="ArrowUpIcon" Grid.Row="0"
+                        <icons:UnifiedIcon Grid.Row="0" x:Name="ArrowUpIcon"
                                            Value="{x:Static icons:IconValues.ArrowUpThick}"
                                            Size="20" />
-                        <Border Grid.Row="1" x:Name="TrophyGradientBorder" Width="3" Margin="0,4" />
-                        <icons:UnifiedIcon x:Name="ArrowDownIcon" Grid.Row="2"
+                        <Border Grid.Row="1" x:Name="TrophyGradientBorder"
+                                Width="3"
+                                Margin="0,4" />
+                        <icons:UnifiedIcon Grid.Row="2" x:Name="ArrowDownIcon"
                                            Value="{x:Static icons:IconValues.ArrowDownThick}"
                                            Size="20" />
                     </Grid>

src/NexusMods.App.UI/Pages/Sorting/LoadOrder/LoadOrderView.axaml.cs

@@ -52,6 +52,10 @@ public LoadOrderView()
                         vm => vm.Adapter.IsSourceEmpty.Value, 
                         view => view.EmptyState.IsActive)
                     .DisposeWith(disposables);
+                
+                // alert
+                this.OneWayBind(ViewModel, vm => vm.AlertSettingsWrapper, view => view.LoadOrderAlert.AlertSettings)
+                    .DisposeWith(disposables);
             }
         );
     }

src/NexusMods.App.UI/Pages/Sorting/LoadOrder/LoadOrderViewDesignViewModel.cs

@@ -6,8 +6,11 @@
 using Avalonia.Controls.Models.TreeDataGrid;
 using DynamicData;
 using DynamicData.Binding;
+using NexusMods.Abstractions.Settings;
 using NexusMods.Abstractions.UI;
 using NexusMods.App.UI.Controls;
+using NexusMods.App.UI.Controls.Alerts;
+using NexusMods.App.UI.Settings;
 using ReactiveUI;
 
 namespace NexusMods.App.UI.Pages.Sorting;
@@ -20,15 +23,16 @@ public class LoadOrderDesignViewModel : AViewModel<ILoadOrderViewModel>, ILoadOr
     public string InfoAlertHeading { get; set;} = "Info Alert Heading";
     public string InfoAlertMessage { get; set;} = "Info Alert Message";
     public bool InfoAlertIsVisible { get; set; } = true;
-    public ReactiveCommand<Unit, Unit> InfoAlertCommand { get; } = ReactiveCommand.Create(() => { Console.WriteLine("InfoAlertCommand"); });
+    public ReactiveCommand<Unit, Unit> InfoAlertCommand { get; } = ReactiveCommand.Create(() => { });
     public string TrophyToolTip { get; set;} = "Trophy Tool Tip";
     public ListSortDirection SortDirectionCurrent { get; set; }
     public bool IsWinnerTop { get; set;}
     public string EmptyStateMessageTitle { get; } = "Empty State Message Title";
     public string EmptyStateMessageContents { get; } = "Empty State Message Contents";
+    public AlertSettingsWrapper AlertSettingsWrapper { get; }
 
-    public LoadOrderDesignViewModel()
-    {            
+    public LoadOrderDesignViewModel(ISettingsManager settingsManager)
+    {
         Adapter = new LoadOrderTreeDataGridDesignAdapter();
 
         this.WhenActivated(d =>
@@ -38,6 +42,8 @@ public LoadOrderDesignViewModel()
                     .DisposeWith(d);
             }
         );
+
+        AlertSettingsWrapper = new AlertSettingsWrapper(settingsManager, "cyberpunk2077 redmod load-order first-loaded-wins");
     }
 }
 

src/NexusMods.App.UI/Pages/Sorting/LoadOrder/LoadOrderViewModel.cs

@@ -7,8 +7,11 @@
 using DynamicData.Binding;
 using NexusMods.Abstractions.Games;
 using NexusMods.Abstractions.Loadouts;
+using NexusMods.Abstractions.Settings;
 using NexusMods.Abstractions.UI;
 using NexusMods.App.UI.Controls;
+using NexusMods.App.UI.Controls.Alerts;
+using NexusMods.App.UI.Settings;
 using ReactiveUI;
 using ReactiveUI.Fody.Helpers;
 
@@ -27,10 +30,12 @@ public class LoadOrderViewModel : AViewModel<ILoadOrderViewModel>, ILoadOrderVie
     [Reactive] public bool IsWinnerTop { get; private set; }
     public string EmptyStateMessageTitle { get; }
     public string EmptyStateMessageContents { get; }
+
+    public AlertSettingsWrapper AlertSettingsWrapper { get; }
 
     public TreeDataGridAdapter<ILoadOrderItemModel, Guid> Adapter { get; }
 
-    public LoadOrderViewModel(LoadoutId loadoutId, ISortableItemProviderFactory itemProviderFactory)
+    public LoadOrderViewModel(LoadoutId loadoutId, ISortableItemProviderFactory itemProviderFactory, ISettingsManager settingsManager)
     {
         var provider = itemProviderFactory.GetLoadoutSortableItemProvider(loadoutId);
 
@@ -52,6 +57,13 @@ public LoadOrderViewModel(LoadoutId loadoutId, ISortableItemProviderFactory item
         var sortDirectionObservable = this.WhenAnyValue(vm => vm.SortDirectionCurrent);
         Adapter = new LoadOrderTreeDataGridAdapter(provider, sortDirectionObservable);
         Adapter.ViewHierarchical.Value = true;
+
+        AlertSettingsWrapper = new AlertSettingsWrapper(settingsManager, "cyberpunk2077 redmod load-order first-loaded-wins");
+
+        InfoAlertCommand = ReactiveCommand.Create(() =>
+        {
+            AlertSettingsWrapper.ShowAlert();
+        });
 
         this.WhenActivated(d =>
             {

src/NexusMods.App.UI/Pages/Sorting/SortingSelection/SortingSelectionDesignViewModel.cs

@@ -1,24 +1,31 @@
 using System.Collections.ObjectModel;
 using NexusMods.Abstractions.UI;
+using Microsoft.Extensions.DependencyInjection;
+using NexusMods.Abstractions.Settings;
 
 namespace NexusMods.App.UI.Pages.Sorting;
 
 public class SortingSelectionDesignViewModel : AViewModel<ISortingSelectionViewModel>, ISortingSelectionViewModel
 {
+    private readonly ISettingsManager _settingsManager;
     public ReadOnlyObservableCollection<ILoadOrderViewModel> LoadOrderViewModels { get; }
-
-    public SortingSelectionDesignViewModel()
+    public SortingSelectionDesignViewModel(IServiceProvider serviceProvider)
     {
+        _settingsManager = serviceProvider.GetRequiredService<ISettingsManager>();
+
         var loadOrderViewModels = new ObservableCollection<ILoadOrderViewModel>
         {
-            new LoadOrderDesignViewModel { SortOrderName = "Load order (RedMOD)", 
+            new LoadOrderDesignViewModel(_settingsManager)
+            {
+                SortOrderName = "Load order (RedMOD)",
                 InfoAlertHeading = "Load Order for REDmod files in Cyberpunk 2077 - First Loaded Wins",
-                InfoAlertMessage = "Some Cyberpunk 2077 mods use REDmod files to alter core gameplay elements. If two REDmod files modify the same part of the game, the one loaded first will take priority and overwrite changes from those loaded later.\n\nFor example, the 1st position overwrites the 2nd, the 2nd overwrites the 3rd, and so on." 
+                InfoAlertMessage =
+                    "Some Cyberpunk 2077 mods use REDmod files to alter core gameplay elements. If two REDmod files modify the same part of the game, the one loaded first will take priority and overwrite changes from those loaded later.\n\nFor example, the 1st position overwrites the 2nd, the 2nd overwrites the 3rd, and so on."
             },
-            new LoadOrderDesignViewModel { SortOrderName = "Load Order (Archive XL)" },
-            new LoadOrderDesignViewModel { SortOrderName = "File Overwrites" }
+            new LoadOrderDesignViewModel(_settingsManager) { SortOrderName = "Load Order (Archive XL)" },
+            new LoadOrderDesignViewModel(_settingsManager) { SortOrderName = "File Overwrites" }
         };
-        
+
         LoadOrderViewModels = new ReadOnlyObservableCollection<ILoadOrderViewModel>(loadOrderViewModels);
     }
 }

src/NexusMods.App.UI/Pages/Sorting/SortingSelection/SortingSelectionViewModel.cs

@@ -2,6 +2,7 @@
 using Microsoft.Extensions.DependencyInjection;
 using NexusMods.Abstractions.Games;
 using NexusMods.Abstractions.Loadouts;
+using NexusMods.Abstractions.Settings;
 using NexusMods.Abstractions.UI;
 using NexusMods.MnemonicDB.Abstractions;
 
@@ -11,12 +12,14 @@ public class SortingSelectionViewModel : AViewModel<ISortingSelectionViewModel>,
 {
     private readonly LoadoutId _loadoutId;
     private readonly IConnection _connection;
+    private readonly ISettingsManager _settingsManager;
     public ReadOnlyObservableCollection<ILoadOrderViewModel> LoadOrderViewModels { get; }
 
     public SortingSelectionViewModel(IServiceProvider serviceProvider, LoadoutId loadutId)
     {
         _loadoutId = loadutId;
         _connection = serviceProvider.GetRequiredService<IConnection>();
+        _settingsManager = serviceProvider.GetRequiredService<ISettingsManager>();
 
         var loadout = Loadout.Load(_connection.Db, _loadoutId);
         var sortableItemProviders = loadout
@@ -26,7 +29,7 @@ public SortingSelectionViewModel(IServiceProvider serviceProvider, LoadoutId loa
 
         LoadOrderViewModels = new ReadOnlyObservableCollection<ILoadOrderViewModel>(
             new ObservableCollection<ILoadOrderViewModel>(
-                sortableItemProviders.Select(provider => new LoadOrderViewModel(_loadoutId, provider))
+                sortableItemProviders.Select(provider => new LoadOrderViewModel(_loadoutId, provider, _settingsManager))
             )
         );
     }

src/Themes/NexusMods.Themes.NexusFluentDark/Resources/ControlThemes/AlertControlTheme.axaml

@@ -196,10 +196,6 @@
             <Setter Property="Background" Value="{StaticResource BrandSuccess950}" />
             <Setter Property="BorderBrush" Value="{StaticResource SuccessWeak}" />
         </Style>
-
-        <Style Selector="^[IsDismissed=True]">
-            <Setter Property="IsVisible" Value="False" />
-        </Style>
     </ControlTheme>
 
 </ResourceDictionary>