Wizard UI improvements and further implementation of default entries step

src/Artemis.UI/Screens/Plugins/Dialogs/PluginPrerequisitesInstallDialogView.axaml

@@ -7,7 +7,8 @@
              xmlns:prerequisites="clr-namespace:Artemis.UI.Screens.Plugins.Prerequisites"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.Plugins.PluginPrerequisitesInstallDialogView"
-             x:DataType="plugins:PluginPrerequisitesInstallDialogViewModel">
+             x:DataType="plugins:PluginPrerequisitesInstallDialogViewModel"
+             Width="800">
     <UserControl.Styles>
         <Styles>
             <Style Selector="Border.status-border">
@@ -24,7 +25,7 @@
             </Style>
         </Styles>
     </UserControl.Styles>
-    <Grid ColumnDefinitions="350,*" Width="800">
+    <Grid ColumnDefinitions="350,*">
         <Grid.RowDefinitions>
             <RowDefinition MinHeight="200" />
         </Grid.RowDefinitions>

src/Artemis.UI/Screens/Plugins/Dialogs/PluginPrerequisitesUninstallDialogView.axaml

@@ -7,7 +7,8 @@
              xmlns:prerequisites="clr-namespace:Artemis.UI.Screens.Plugins.Prerequisites"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.Plugins.PluginPrerequisitesUninstallDialogView"
-             x:DataType="plugins:PluginPrerequisitesUninstallDialogViewModel">
+             x:DataType="plugins:PluginPrerequisitesUninstallDialogViewModel"
+             Width="800">
     <UserControl.Styles>
         <Styles>
             <Style Selector="Border.status-border">
@@ -24,7 +25,7 @@
             </Style>
         </Styles>
     </UserControl.Styles>
-    <Grid ColumnDefinitions="350,*" Width="800">
+    <Grid ColumnDefinitions="350,*">
         <Grid.RowDefinitions>
             <RowDefinition MinHeight="200" />
         </Grid.RowDefinitions>

src/Artemis.UI/Screens/StartupWizard/StartupWizardView.axaml

@@ -11,7 +11,7 @@
         x:DataType="startupWizard:StartupWizardViewModel"
         Icon="/Assets/Images/Logo/application.ico"
         Title="Artemis | Startup wizard"
-        Width="1000"
+        Width="1050"
         Height="735"
         WindowStartupLocation="CenterOwner">
     <Grid Margin="15" RowDefinitions="Auto,*,Auto" ColumnDefinitions="Auto,*">

src/Artemis.UI/Screens/StartupWizard/Steps/DefaultEntriesStepView.axaml

@@ -6,14 +6,17 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.DefaultEntriesStepView"
              x:DataType="steps:DefaultEntriesStepViewModel">
-    <Border Classes="card">
+    <Panel>
-    <Grid RowDefinitions="*,Auto">
+        <!-- Selection stage -->
-        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+        <Grid RowDefinitions="Auto,*,Auto" IsVisible="{CompiledBinding CurrentEntry, Converter={x:Static ObjectConverters.IsNull}}">
-            <StackPanel>
+            <TextBlock Grid.Row="0" TextWrapping="Wrap">
-                <TextBlock TextWrapping="Wrap">
                 Below is a list of default features that can be installed to get you started with Artemis. You can always install or uninstall features later via the Workshop.
             </TextBlock>
 
+            <ProgressBar Grid.Row="1" IsVisible="{CompiledBinding FetchingDefaultEntries}" IsIndeterminate="True" />
+
+            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                <StackPanel>
                     <TextBlock Classes="card-title" IsVisible="{CompiledBinding DeviceProviderEntryViewModels.Count}">
                         Device providers
                     </TextBlock>
@@ -31,7 +34,7 @@
                     <ItemsControl ItemsSource="{CompiledBinding EssentialEntryViewModels}" Margin="0,0,5,0">
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                            <UniformGrid Columns="2" ColumnSpacing="5"/>
+                                <UniformGrid Columns="2" ColumnSpacing="5" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                     </ItemsControl>
@@ -42,17 +45,22 @@
                     <ItemsControl ItemsSource="{CompiledBinding OtherEntryViewModels}" Margin="0,0,5,0">
                         <ItemsControl.ItemsPanel>
                             <ItemsPanelTemplate>
-                            <UniformGrid Columns="2" ColumnSpacing="5"/>
+                                <UniformGrid Columns="2" ColumnSpacing="5" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                     </ItemsControl>
                 </StackPanel>
             </ScrollViewer>
-        <ProgressBar Grid.Row="1"
-                     Minimum="0"
-                     Maximum="{CompiledBinding TotalEntries}"
-                     IsIndeterminate="{CompiledBinding FetchingDefaultEntries}"
-                     Value="{CompiledBinding CurrentEntries}" />
         </Grid>
-        </Border>
+
+        <!-- Installation stage -->
+        <StackPanel IsVisible="{CompiledBinding CurrentEntry, Converter={x:Static ObjectConverters.IsNotNull}}">
+            <TextBlock Classes="card-title">
+                Currently installing
+            </TextBlock>
+            <ContentControl Content="{CompiledBinding CurrentEntry}"/>
+            
+            <ProgressBar ShowProgressText="True" ProgressTextFormat="{}{0}/{3} Features Installed ({1:0}%)" Minimum="0" Maximum="{CompiledBinding TotalEntries}" Value="{CompiledBinding InstalledEntries}"/>
+        </StackPanel>
+    </Panel>
 </UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/DefaultEntriesStepViewModel.cs

@@ -20,10 +20,11 @@ public partial class DefaultEntriesStepViewModel : WizardStepViewModel
 {
     [Notify] private bool _workshopReachable;
     [Notify] private bool _fetchingDefaultEntries;
-    [Notify] private bool _installed;
+    [Notify] private int _installedEntries;
-    [Notify] private int _currentEntries;
     [Notify] private int _totalEntries = 1;
+    [Notify] private DefaultEntryItemViewModel? _currentEntry;
 
+    private readonly IDeviceService _deviceService;
     private readonly IWorkshopClient _client;
     private readonly Func<IEntrySummary, DefaultEntryItemViewModel> _getDefaultEntryItemViewModel;
 
@@ -34,24 +35,17 @@ public partial class DefaultEntriesStepViewModel : WizardStepViewModel
     public DefaultEntriesStepViewModel(IWorkshopService workshopService, IDeviceService deviceService, IWorkshopClient client,
         Func<IEntrySummary, DefaultEntryItemViewModel> getDefaultEntryItemViewModel)
     {
+        _deviceService = deviceService;
         _client = client;
         _getDefaultEntryItemViewModel = getDefaultEntryItemViewModel;
 
         ContinueText = "Install selected entries";
         Continue = ReactiveCommand.CreateFromTask(async ct =>
         { 
-            if (Installed)
-                Wizard.ChangeScreen<SettingsStepViewModel>();
-            else
             await Install(ct);
+            ExecuteContinue();
         });
-        GoBack = ReactiveCommand.Create(() =>
+        GoBack = ReactiveCommand.Create(() => Wizard.ChangeScreen<WelcomeStepViewModel>());
-        {
-            if (deviceService.EnabledDevices.Count == 0)
-                Wizard.ChangeScreen<DevicesStepViewModel>();
-            else
-                Wizard.ChangeScreen<SurfaceStepViewModel>();
-        });
 
         this.WhenActivatedAsync(async d =>
         {
@@ -63,41 +57,40 @@ public partial class DefaultEntriesStepViewModel : WizardStepViewModel
         });
     }
 
+    private void ExecuteContinue()
+    {
+        // Without devices skip to the last step
+        if (_deviceService.EnabledDevices.Count == 0)
+            Wizard.ChangeScreen<SettingsStepViewModel>();
+        else
+            Wizard.ChangeScreen<LayoutsStepViewModel>();
+    }
+
     private async Task Install(CancellationToken cancellationToken)
     {
-        // Remove entries that aren't to be installed
+        List<DefaultEntryItemViewModel> entries =
-        RemoveUnselectedEntries(DeviceProviderEntryViewModels);
+        [
-        RemoveUnselectedEntries(EssentialEntryViewModels);
+            ..DeviceProviderEntryViewModels.Where(e => e.ShouldInstall && !e.IsInstalled),
-        RemoveUnselectedEntries(OtherEntryViewModels);
+            ..EssentialEntryViewModels.Where(e => e.ShouldInstall && !e.IsInstalled),
+            ..OtherEntryViewModels.Where(e => e.ShouldInstall && !e.IsInstalled)
+        ];
+        InstalledEntries = 0;
+        TotalEntries = entries.Count;
 
-        TotalEntries = DeviceProviderEntryViewModels.Count + EssentialEntryViewModels.Count + OtherEntryViewModels.Count;
+        // Continue to the next screen if there are no entries to install
-        CurrentEntries = 0;
+        if (TotalEntries == 0)
+            return;
 
-        // Install entries one by one, removing them from the list as we go
-        List<DefaultEntryItemViewModel> entries = [..DeviceProviderEntryViewModels, ..EssentialEntryViewModels, ..OtherEntryViewModels];
         foreach (DefaultEntryItemViewModel defaultEntryItemViewModel in entries)
         {
             cancellationToken.ThrowIfCancellationRequested();
-            bool removeFromList = await defaultEntryItemViewModel.InstallEntry(cancellationToken);
+            CurrentEntry = defaultEntryItemViewModel;
-            if (!removeFromList)
+            await defaultEntryItemViewModel.InstallEntry(cancellationToken);
-                break;
+            InstalledEntries++;
-
-            DeviceProviderEntryViewModels.Remove(defaultEntryItemViewModel);
-            EssentialEntryViewModels.Remove(defaultEntryItemViewModel);
-            OtherEntryViewModels.Remove(defaultEntryItemViewModel);
-            CurrentEntries++;
         }
 
-        Installed = true;
+        await Task.Delay(1000, cancellationToken);
-        ContinueText = "Continue";
+        CurrentEntry = null;
-    }
-
-    private void RemoveUnselectedEntries(ObservableCollection<DefaultEntryItemViewModel> entryViewModels)
-    {
-        List<DefaultEntryItemViewModel> toRemove = entryViewModels.Where(e => !e.ShouldInstall).ToList();
-        foreach (DefaultEntryItemViewModel defaultEntryItemViewModel in toRemove)
-            entryViewModels.Remove(defaultEntryItemViewModel);
-
     }
 
     private async Task GetDefaultEntries(CancellationToken cancellationToken)

src/Artemis.UI/Screens/StartupWizard/Steps/DefaultEntryItemViewModel.cs

@@ -49,8 +49,8 @@ public partial class DefaultEntryItemViewModel : ActivatableViewModelBase
         if (IsInstalled || !ShouldInstall || Entry.LatestRelease == null)
             return true;
 
-        // Most entries install so quick it looks broken without a small delay
+        // Most entries install so fast it looks broken without a small delay
-        Task minimumDelay = Task.Delay(100, cancellationToken);
+        Task minimumDelay = Task.Delay(200, cancellationToken);
         EntryInstallResult result = await _workshopService.InstallEntry(Entry, Entry.LatestRelease, _progress, cancellationToken);
         await minimumDelay;
 

src/Artemis.UI/Screens/StartupWizard/Steps/DevicesStepView.axaml

@@ -1,43 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:steps="clr-namespace:Artemis.UI.Screens.StartupWizard.Steps"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.StartupWizard.Steps.DevicesStepView"
-             x:DataType="steps:DevicesStepViewModel">
-    <Border Classes="card">
-        <Grid RowDefinitions="Auto,*,Auto,Auto">
-            <StackPanel Grid.Row="0">
-                <TextBlock TextWrapping="Wrap">
-                    Devices are supported through the use of device providers.
-                </TextBlock>
-                <TextBlock TextWrapping="Wrap">
-                    In the list below you can enable device providers for each brand you own by checking "Enable feature".
-                </TextBlock>
-            </StackPanel>
-
-            <ScrollViewer Grid.Row="1" Margin="0 15">
-                <ItemsControl ItemsSource="{CompiledBinding DeviceProviders}" Margin="-4 0 8 0">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <UniformGrid Columns="2" />
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-
-                    <ItemsControl.ItemTemplate>
-                        <DataTemplate>
-                            <Border Classes="card-condensed" Margin="4">
-                                <ContentControl Content="{CompiledBinding}"></ContentControl>
-                            </Border>
-                        </DataTemplate>
-                    </ItemsControl.ItemTemplate>
-                </ItemsControl>
-            </ScrollViewer>
-
-            <TextBlock Grid.Row="2" Foreground="#FFB9A40A" TextWrapping="Wrap">
-                Note: To avoid possible instability it's recommended to disable the device providers of brands you don't own.
-            </TextBlock>
-        </Grid>
-    </Border>
-</UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/DevicesStepView.axaml.cs

@@ -1,14 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-using Avalonia.ReactiveUI;
-
-namespace Artemis.UI.Screens.StartupWizard.Steps;
-
-public partial class DevicesStepView : ReactiveUserControl<DevicesStepViewModel>
-{
-    public DevicesStepView()
-    {
-        InitializeComponent();
-    }
-
-}

src/Artemis.UI/Screens/StartupWizard/Steps/DevicesStepViewModel.cs

@@ -1,33 +0,0 @@
-using ReactiveUI;
-using System;
-using System.Collections.ObjectModel;
-using System.Linq;
-using Artemis.Core;
-using Artemis.Core.DeviceProviders;
-using Artemis.Core.Services;
-
-namespace Artemis.UI.Screens.StartupWizard.Steps;
-
-public class DevicesStepViewModel : WizardStepViewModel
-{
-    public DevicesStepViewModel(IPluginManagementService pluginManagementService, Func<PluginFeatureInfo, WizardPluginFeatureViewModel> getPluginFeatureViewModel, IDeviceService deviceService)
-    {
-        // Take all compatible device providers and create a view model for them
-        DeviceProviders = new ObservableCollection<WizardPluginFeatureViewModel>(pluginManagementService.GetAllPlugins()
-            .Where(p => p.Info.IsCompatible)
-            .SelectMany(p => p.Features.Where(f => f.FeatureType.IsAssignableTo(typeof(DeviceProvider))))
-            .OrderBy(f => f.Name)
-            .Select(getPluginFeatureViewModel));
-        
-        Continue = ReactiveCommand.Create(() =>
-        {
-            if (deviceService.EnabledDevices.Count == 0)
-                Wizard.ChangeScreen<DefaultEntriesStepViewModel>();
-            else
-                Wizard.ChangeScreen<LayoutsStepViewModel>();
-        });
-        GoBack = ReactiveCommand.Create(() => Wizard.ChangeScreen<WelcomeStepViewModel>());
-    }
-
-    public ObservableCollection<WizardPluginFeatureViewModel> DeviceProviders { get; }
-}

src/Artemis.UI/Screens/StartupWizard/Steps/FinishStepView.axaml

@@ -2,16 +2,14 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
-             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              xmlns:steps="clr-namespace:Artemis.UI.Screens.StartupWizard.Steps"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.FinishStepView"
              x:DataType="steps:FinishStepViewModel">
-    <Border Classes="card" VerticalAlignment="Top">
     <StackPanel>
         <TextBlock Classes="h4">All finished!</TextBlock>
-
+        <Border Classes="card" VerticalAlignment="Top">
+            <StackPanel>
                 <TextBlock TextWrapping="Wrap">
                     You are now ready to start using Artemis, enjoy! 😁
                 </TextBlock>
@@ -50,4 +48,5 @@
                 </Grid>
             </StackPanel>
         </Border>
+    </StackPanel>
 </UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/LayoutsStepView.axaml

@@ -7,9 +7,7 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.LayoutsStepView"
              x:DataType="steps:LayoutsStepViewModel">
-    <Border Classes="card">
+    <StackPanel Spacing="10">
-        <Grid RowDefinitions="Auto,Auto,*">
-            <StackPanel Grid.Row="0">
         <TextBlock TextWrapping="Wrap">
             Device layouts provide Artemis with an image of your devices and exact LED positions. <LineBreak />
             While not strictly necessary, this helps to create effects that are perfectly aligned with your hardware.
@@ -17,16 +15,17 @@
         <TextBlock TextWrapping="Wrap" Margin="0 10">
             Below you can automatically search the Artemis Workshop for device layouts of your devices.
         </TextBlock>
-            </StackPanel>
+        <Button
-
-            <Button Grid.Row="1"
             Content="Auto-install layouts"
             Command="{CompiledBinding LayoutFinderViewModel.SearchAll}"
             ToolTip.Tip="Search layouts and if found install them automatically"
-                    HorizontalAlignment="Right"/>
+            HorizontalAlignment="Right" />
-            <ScrollViewer Grid.Row="2" Margin="0 15">
+        <Border Classes="card">
+            <StackPanel>
+                <ScrollViewer>
                     <ContentControl Content="{CompiledBinding LayoutFinderViewModel}"></ContentControl>
                 </ScrollViewer>
-        </Grid>
+            </StackPanel>
         </Border>
+    </StackPanel>
 </UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/LayoutsStepViewModel.cs

@@ -10,7 +10,7 @@ public class LayoutsStepViewModel : WizardStepViewModel
         LayoutFinderViewModel = layoutFinderViewModel;
         
         Continue = ReactiveCommand.Create(() => Wizard.ChangeScreen<SurfaceStepViewModel>());
-        GoBack = ReactiveCommand.Create(() => Wizard.ChangeScreen<DevicesStepViewModel>());
+        GoBack = ReactiveCommand.Create(() => Wizard.ChangeScreen<DefaultEntriesStepViewModel>());
     }
 
     public LayoutFinderViewModel LayoutFinderViewModel { get; }

src/Artemis.UI/Screens/StartupWizard/Steps/SettingsStepView.axaml

@@ -9,7 +9,6 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.SettingsStepView"
              x:DataType="steps:SettingsStepViewModel">
-    <Border Classes="card" VerticalAlignment="Top">
     <ScrollViewer>
         <StackPanel>
             <TextBlock>
@@ -122,5 +121,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-    </Border>
 </UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/SettingsStepViewModel.cs

@@ -37,8 +37,9 @@ public class SettingsStepViewModel : WizardStepViewModel
         Continue = ReactiveCommand.Create(() => Wizard.ChangeScreen<FinishStepViewModel>());
         GoBack = ReactiveCommand.Create(() =>
         {
+            // Without devices, skip to the default entries screen
             if (deviceService.EnabledDevices.Count == 0)
-                Wizard.ChangeScreen<DevicesStepViewModel>();
+                Wizard.ChangeScreen<DefaultEntriesStepViewModel>();
             else
                 Wizard.ChangeScreen<SurfaceStepViewModel>();
         });

src/Artemis.UI/Screens/StartupWizard/Steps/SurfaceStepView.axaml

@@ -8,10 +8,8 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.SurfaceStepView"
              x:DataType="steps:SurfaceStepViewModel">
-
     <Grid RowDefinitions="Auto,*,Auto,Auto" ColumnDefinitions="*,*">
-        <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Classes="card">
+        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Spacing="10">
-            <StackPanel>
             <TextBlock TextWrapping="Wrap">
                 Artemis uses "spatial awareness" to create realistic effects across multiple devices.
             </TextBlock>
@@ -19,7 +17,6 @@
                 In order to do this correctly, we need to know where your devices are located on your desk. Select one of the two presets below, after the setup wizard finishes you can tweak this in detail in the surface editor.
             </TextBlock>
         </StackPanel>
-        </Border>
         
         <Button Grid.Row="1"
                 Grid.Column="0"

src/Artemis.UI/Screens/StartupWizard/Steps/WelcomeStepView.axaml

@@ -6,19 +6,17 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.StartupWizard.Steps.WelcomeStepView"
              x:DataType="steps:WelcomeStepViewModel">
-    <Border Classes="card">
+        <StackPanel Margin="0 50 0 0">
-        <StackPanel>
+            <TextBlock Classes="h4" TextAlignment="Center">Welcome to the Artemis startup wizard!</TextBlock>
-            <TextBlock Classes="h4">Welcome to the Artemis startup wizard!</TextBlock>
 
-            <TextBlock TextWrapping="Wrap">
+            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
                 In this wizard we'll walk you through the initial configuration of Artemis.
             </TextBlock>
-            <TextBlock TextWrapping="Wrap">
+            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
                 Before you can start you need to tell Artemis which devices you want to use and where they are placed on your desk.
             </TextBlock>
-            <TextBlock Classes="subtitle" TextWrapping="Wrap" Margin="0 15 0 0">
+            <TextBlock Classes="subtitle" TextWrapping="Wrap" Margin="0 15 0 0" TextAlignment="Center">
                 PS: You can also skip the wizard and set things up yourself.
             </TextBlock>
         </StackPanel>
-    </Border>
 </UserControl>

src/Artemis.UI/Screens/StartupWizard/Steps/WelcomeStepViewModel.cs

@@ -6,7 +6,7 @@ public class WelcomeStepViewModel : WizardStepViewModel
 {
     public WelcomeStepViewModel()
     {
-        Continue = ReactiveCommand.Create(() => Wizard.ChangeScreen<DevicesStepViewModel>());
+        Continue = ReactiveCommand.Create(() => Wizard.ChangeScreen<DefaultEntriesStepViewModel>());
         ShowGoBack = false;
     }
 }