Merge pull request WolvenKit#2628 from rayshader/fix/welcome_page_ui

feat(WelcomePageView): improve layout and responsiveness

Author: poirierlouis

WolvenKit.App/ViewModels/HomePage/HomePageViewModel.cs

@@ -1,10 +1,8 @@
-using System;
 using System.Windows;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using WolvenKit.App.Services;
 using WolvenKit.App.ViewModels.Shell;
-using WolvenKit.Core.Extensions;
 
 namespace WolvenKit.App.ViewModels.HomePage;
 
@@ -28,7 +26,7 @@ public HomePageViewModel(AppViewModel appViewModel, ISettingsManager settingsMan
     {
         _appViewModel = appViewModel;
         _settingsManager = settingsManager;
-        
+
         CurrentWindowState = WindowState.Normal;
     }
 
@@ -39,6 +37,8 @@ public HomePageViewModel(AppViewModel appViewModel, ISettingsManager settingsMan
 
     public string VersionNumber => _settingsManager.GetVersionNumber();
 
+    public bool IsNightly => VersionNumber.Contains("nightly");
+
 
     [RelayCommand]
     private void CloseHomePage()
@@ -50,5 +50,5 @@ private void CloseHomePage()
 
     [RelayCommand]
     private void CheckForUpdates() => _appViewModel.CheckForUpdatesCommand.Execute(false);
-    
+
 }

WolvenKit.App/ViewModels/Shell/AppViewModel.cs

@@ -307,12 +307,12 @@ private void HandleActivation()
             ShowHomePageSync();
         }
 
-        #if !DEBUG
+#if !DEBUG
         if (SettingsManager.AutoUpdateOnStartup)
         {
             CheckForUpdatesCommand.SafeExecute(true);
         }
-        #endif
+#endif
 
         CheckForScriptUpdatesCommand.SafeExecute();
         CheckForLongPathSupport();
@@ -2471,7 +2471,9 @@ private void UpdateScalesResource()
         resources["WolvenKitHomeSharedPaddingLeft"] = new Thickness(10, 0, 0, 0).Mul(_uiScalePercentage).Round();
 
         // WelcomePageView
-        resources["WolvenKitWelcomeRightLength"] = new GridLength(380).Mul(_uiScalePercentage).Round();
+        resources["WolvenKitWelcomeLogoMaxHeight"] = Math.Round(150 * _uiScalePercentage);
+        resources["WolvenKitWelcomeLeftMinWidth"] = Math.Round(315 * _uiScalePercentage);
+        resources["WolvenKitWelcomeRightLength"] = Math.Round(380 * _uiScalePercentage);
         resources["WolvenKitWelcomeOrderWidth"] = Math.Round(140 * _uiScalePercentage);
         resources["WolvenKitWelcomeCardSammyWidth"] = new GridLength(70).Mul(_uiScalePercentage).Round();
         resources["WolvenKitWelcomeCardSammyHeight"] = Math.Round(70 * _uiScalePercentage);
@@ -2486,6 +2488,9 @@ private void UpdateScalesResource()
         resources["WolvenKitWelcomeStackMargin"] = new Thickness(0, 4, 50, 0).Mul(_uiScalePercentage).Round();
         resources["WolvenKitWelcomeSocialButtonHeight"] = Math.Round(50 * _uiScalePercentage);
 
+        resources["WolvenKitWelcomeBreakWidth"] = Math.Round(1250 * _uiScalePercentage);
+        resources["WolvenKitWelcomeActionsColumnBreakWidth"] = Math.Round(914 * _uiScalePercentage);
+
         // SettingsPageView
         resources["WolvenKitSettingsGridLabelWidth"] = new GridLength(200).Mul(_uiScalePercentage).Round();
 

WolvenKit/Converters/LessThanConverter.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace WolvenKit.Converters
+{
+    /// <summary>
+    /// Runs condition `Value < Parameter` where `Parameter` can be:
+    /// - a number as a double
+    /// - a resource as a string (as found in App.Sizes.xaml)
+    /// </summary>
+    [ValueConversion(typeof(double), typeof(bool))]
+    public sealed class LessThanConverter : IValueConverter
+    {
+        public static readonly LessThanConverter Default = new();
+
+        public object Convert(object rawValue, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (rawValue is double value)
+            {
+                if (double.TryParse(parameter as string, out var threshold))
+                {
+                    return value < threshold;
+                }
+                else
+                {
+                    var resources = Application.Current.Resources;
+                    return value < (double)resources[parameter as string]!;
+                }
+            }
+            return false;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

WolvenKit/Themes/App.Sizes.xaml

@@ -120,7 +120,9 @@
     <Thickness x:Key="WolvenKitHomeSharedPaddingLeft">10,0,0,0</Thickness>
 
     <!-- WelcomePageView -->
-    <GridLength x:Key="WolvenKitWelcomeRightLength">380</GridLength>
+    <system:Double x:Key="WolvenKitWelcomeLogoMaxHeight">150</system:Double>
+    <system:Double x:Key="WolvenKitWelcomeLeftMinWidth">315</system:Double>
+    <system:Double x:Key="WolvenKitWelcomeRightLength">380</system:Double>
     <system:Double x:Key="WolvenKitWelcomeOrderWidth">140</system:Double>
     <GridLength x:Key="WolvenKitWelcomeCardSammyWidth">70</GridLength>
     <system:Double x:Key="WolvenKitWelcomeCardSammyHeight">70</system:Double>
@@ -135,6 +137,9 @@
     <Thickness x:Key="WolvenKitWelcomeStackMargin">0,4,50,0</Thickness>
     <system:Double x:Key="WolvenKitWelcomeSocialButtonHeight">50</system:Double>
 
+    <system:Double x:Key="WolvenKitWelcomeBreakWidth">1250</system:Double>
+    <system:Double x:Key="WolvenKitWelcomeActionsColumnBreakWidth">914</system:Double>
+
     <!-- SettingsPageView -->
     <GridLength x:Key="WolvenKitSettingsGridLabelWidth">200</GridLength>
 

WolvenKit/Views/HomePage/HomePageView.xaml

@@ -48,13 +48,13 @@
                 <RowDefinition />
             </Grid.RowDefinitions>
 
-            <!-- Left Bottom Button -->
+            <!-- Continue to Editor Button -->
             <Button
                 x:Name="ToEditorButton"
                 Grid.Row="0"
                 Margin="4,4,4,30"
                 Padding="0"
-                HorizontalAlignment="Stretch"
+                HorizontalAlignment="Left"
                 Background="{StaticResource ContentBackgroundAlt}"
                 BorderThickness="0">
                 <Grid>
@@ -82,12 +82,42 @@
                 </Grid>
             </Button>
 
-            <!-- Left Bottom Version Number -->
-            <StackPanel
+            <!-- Version Number -->
+            <Grid
                 Grid.Row="1"
                 Margin="{DynamicResource WolvenKitHomeVersionMargin}"
-                HorizontalAlignment="Left"
-                Orientation="Horizontal">
+                HorizontalAlignment="Left">
+                <Grid.Resources>
+                    <Style
+                        x:Key="NightlyResponsiveStyle"
+                        TargetType="{x:Type StackPanel}">
+                        <Setter Property="Grid.Column" Value="1" />
+                        <Setter Property="Grid.Row" Value="0" />
+
+                        <Style.Triggers>
+                            <DataTrigger
+                                Binding="{Binding IsNightly}"
+                                Value="True">
+                                <Setter Property="Grid.Column" Value="0" />
+                                <Setter Property="Grid.ColumnSpan" Value="2" />
+                                <Setter Property="Grid.Row" Value="1" />
+                                <Setter Property="HorizontalAlignment" Value="Right" />
+                            </DataTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Grid.Resources>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition />
+                    <!-- 2nd row reserved for responsiveness -->
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition />
+                    <ColumnDefinition />
+                </Grid.ColumnDefinitions>
+
                 <TextBlock
                     Margin="{DynamicResource WolvenKitHomeVersionMargin}"
                     VerticalAlignment="Center"
@@ -97,19 +127,21 @@
                     FlowDirection="LeftToRight"
                     Text="{Binding VersionNumber}" />
 
-                <templates:IconBox
-                    IconPack="Codicons"
-                    Kind="Versions"
-                    Size="{DynamicResource WolvenKitIcon}"
-                    Foreground="{StaticResource WolvenKitRed}" />
-
-                <Button
-                    x:Name="CheckForUpdateButton"
-                    Margin="{DynamicResource WolvenKitHomeVersionMargin}"
-                    Padding="0"
-                    Background="Transparent"
-                    BorderThickness="0">
-                    <Grid>
+                <StackPanel
+                    Style="{StaticResource NightlyResponsiveStyle}"
+                    Orientation="Horizontal">
+                    <templates:IconBox
+                        IconPack="Codicons"
+                        Kind="Versions"
+                        Size="{DynamicResource WolvenKitIcon}"
+                        Foreground="{StaticResource WolvenKitRed}" />
+
+                    <Button
+                        x:Name="CheckForUpdateButton"
+                        Margin="{DynamicResource WolvenKitHomeVersionMargin}"
+                        Padding="0"
+                        Background="Transparent"
+                        BorderThickness="0">
                         <templates:IconBox
                             IconPack="Material"
                             Kind="Update"
@@ -118,10 +150,9 @@
                             VerticalAlignment="Center"
                             Size="{DynamicResource WolvenKitIconMilli}"
                             Foreground="{StaticResource WolvenKitRed}" />
-                    </Grid>
-                </Button>
-
-            </StackPanel>
+                    </Button>
+                </StackPanel>
+            </Grid>
         </Grid>
 
         <!-- Left Navigation -->