feat(App): Theme selector redesign

suntrise · Aug 26, 2024 · d139e68 · d139e68
1 parent f8e23fb
commit d139e68
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 121 deletions.
diff --git a/src/uWidgets/App.axaml b/src/uWidgets/App.axaml
@@ -56,9 +56,11 @@
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Default">
                     <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{DynamicResource SystemAccentColorDark1}" />
+                    <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="#A3BED3" />
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Dark">
                     <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{DynamicResource SystemAccentColorLight2}" />
+                    <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="#0B1830" />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>

diff --git a/src/uWidgets/Locales/Locale.Designer.cs b/src/uWidgets/Locales/Locale.Designer.cs
diff --git a/src/uWidgets/Locales/Locale.de.resx b/src/uWidgets/Locales/Locale.de.resx
@@ -56,7 +56,7 @@
     <data name="Settings_Appearance_DarkMode_Title" xml:space="preserve">
         <value>Wählen Sie den Modus</value>
     </data>
-    <data name="Settings_Appearance_Theme" xml:space="preserve">
+    <data name="Settings_Appearance_Colors" xml:space="preserve">
         <value>Thema</value>
     </data>
     <data name="Settings_Appearance_Transparency_Subtitle" xml:space="preserve">

diff --git a/src/uWidgets/Locales/Locale.resx b/src/uWidgets/Locales/Locale.resx
@@ -27,8 +27,8 @@
     <data name="Settings_About" xml:space="preserve">
         <value>About</value>
     </data>
-    <data name="Settings_Appearance_Theme" xml:space="preserve">
-        <value>Theme</value>
+    <data name="Settings_Appearance_Colors" xml:space="preserve">
+        <value>Colors</value>
     </data>
     <data name="Settings_Appearance_DarkMode_Title" xml:space="preserve">
         <value>Choose your mode</value>
@@ -225,8 +225,8 @@
     <data name="Settings_Advanced_Dimensions" xml:space="preserve">
         <value>Dimensions</value>
     </data>
-    <data name="Settings_Appearance_Presets" xml:space="preserve">
-        <value>Presets</value>
+    <data name="Settings_Appearance_ApplyTheme" xml:space="preserve">
+        <value>Apply a theme</value>
     </data>
     <data name="Settings_Appearance_Presets_Windows_Title" xml:space="preserve">
         <value>Windows</value>

diff --git a/src/uWidgets/Locales/Locale.ru.resx b/src/uWidgets/Locales/Locale.ru.resx
@@ -32,8 +32,8 @@
     <data name="Settings_Advanced_Size" xml:space="preserve">
         <value>Размер</value>
     </data>
-    <data name="Settings_Appearance_Theme" xml:space="preserve">
-        <value>Тема</value>
+    <data name="Settings_Appearance_Colors" xml:space="preserve">
+        <value>Цвета</value>
     </data>
     <data name="Settings_Appearance_Transparency_Title" xml:space="preserve">
         <value>Эффекты прозрачности</value>
@@ -218,8 +218,8 @@
     <data name="Settings_Advanced_WidgetRadius_Title" xml:space="preserve">
         <value>Радиус виджета</value>
     </data>
-    <data name="Settings_Appearance_Presets" xml:space="preserve">
-        <value>Шаблоны</value>
+    <data name="Settings_Appearance_ApplyTheme" xml:space="preserve">
+        <value>Применить тему</value>
     </data>
     <data name="Settings_Appearance_Presets_Windows_Title" xml:space="preserve">
         <value>Windows</value>

diff --git a/src/uWidgets/Locales/Locale.zh-Hans.resx b/src/uWidgets/Locales/Locale.zh-Hans.resx
@@ -126,9 +126,6 @@
   <data name="Settings_About" xml:space="preserve">
     <value>关于</value>
   </data>
-  <data name="Settings_Appearance_Theme" xml:space="preserve">
-    <value>主题</value>
-  </data>
   <data name="Settings_Appearance_DarkMode_Title" xml:space="preserve">
     <value>选择模式</value>
   </data>
@@ -324,9 +321,6 @@
   <data name="Settings_Advanced_Dimensions" xml:space="preserve">
     <value>形状</value>
   </data>
-  <data name="Settings_Appearance_Presets" xml:space="preserve">
-    <value>预设</value>
-  </data>
   <data name="Settings_Appearance_Presets_Windows_Title" xml:space="preserve">
     <value>Windows 风格</value>
   </data>

diff --git a/src/uWidgets/Locales/Locale.zh-Hant.resx b/src/uWidgets/Locales/Locale.zh-Hant.resx
@@ -126,9 +126,6 @@
   <data name="Settings_About" xml:space="preserve">
     <value>關於</value>
   </data>
-  <data name="Settings_Appearance_Theme" xml:space="preserve">
-    <value>主題</value>
-  </data>
   <data name="Settings_Appearance_DarkMode_Title" xml:space="preserve">
     <value>選擇模式</value>
   </data>
@@ -324,9 +321,6 @@
   <data name="Settings_Advanced_Dimensions" xml:space="preserve">
     <value>形狀</value>
   </data>
-  <data name="Settings_Appearance_Presets" xml:space="preserve">
-    <value>預設</value>
-  </data>
   <data name="Settings_Appearance_Presets_Windows_Title" xml:space="preserve">
     <value>Windows 風格</value>
   </data>

diff --git a/src/uWidgets/ViewModels/AppearanceViewModel.cs b/src/uWidgets/ViewModels/AppearanceViewModel.cs
@@ -1,4 +1,7 @@
+using System.Diagnostics;
 using System.Linq;
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Media;
 using ReactiveUI;
 using uWidgets.Core.Interfaces;
@@ -10,9 +13,73 @@ public class AppearanceViewModel(IAppSettingsProvider appSettingsProvider) : Rea
 {
     public ThemeViewModel[] Themes =>
     [
-        new ThemeViewModel(Locale.Settings_Appearance_DarkMode_False, false),
-        new ThemeViewModel(Locale.Settings_Appearance_DarkMode_True, true),
-        new ThemeViewModel(Locale.Settings_Appearance_DarkMode_Null, null)
+        new ThemeViewModel(
+            false, 
+            new FontFamily("avares://Avalonia.Fonts.Inter#Inter"),
+            !appSettingsProvider.Get().Theme.UseNativeFrame,
+            ApplyAppleStyle),
+        new ThemeViewModel(
+            true, 
+            new FontFamily("Segoe UI"),
+            appSettingsProvider.Get().Theme.UseNativeFrame,
+            ApplyWindowsStyle),
+    ];
+
+    private void ApplyWindowsStyle()
+    {
+        var settings = appSettingsProvider.Get();
+        var newSettings = settings with
+        {
+            Theme = settings.Theme with
+            {
+                UseNativeFrame = true,
+                FontFamily = "Segoe UI"
+            },
+            Dimensions = settings.Dimensions with
+            {
+                Radius = 0,
+            },
+        };
+
+        appSettingsProvider.Save(newSettings);
+        Restart();
+    }
+
+    private void ApplyAppleStyle()
+    {
+        var settings = appSettingsProvider.Get();
+        var newSettings = settings with
+        {
+            Theme = settings.Theme with
+            {
+                UseNativeFrame = false,
+                FontFamily = "Inter"
+            },
+            Dimensions = settings.Dimensions with
+            {
+                Radius = 24,
+            },
+        };
+
+        appSettingsProvider.Save(newSettings);
+        Restart();
+    }
+
+    private void Restart()
+    {
+        var executablePath = Process.GetCurrentProcess().MainModule?.FileName;
+        if (executablePath == null) return;
+
+        Process.Start(executablePath);
+        if (Application.Current?.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktopApp) 
+            desktopApp.Shutdown();
+    }
+
+    public DarkModeViewModel[] DarkModes =>
+    [
+        new DarkModeViewModel(Locale.Settings_Appearance_DarkMode_False, false),
+        new DarkModeViewModel(Locale.Settings_Appearance_DarkMode_True, true),
+        new DarkModeViewModel(Locale.Settings_Appearance_DarkMode_Null, null)
     ];
 
     public AccentColorViewModel[] AccentComboboxItems =>
@@ -48,9 +115,9 @@ public Color AccentColor
         }
     }
 
-    public ThemeViewModel? DarkMode
+    public DarkModeViewModel? DarkMode
     {
-        get => Themes.FirstOrDefault(theme => theme.Value == appSettingsProvider.Get().Theme.DarkMode);
+        get => DarkModes.FirstOrDefault(theme => theme.Value == appSettingsProvider.Get().Theme.DarkMode);
         set
         {
             var settings = appSettingsProvider.Get();

diff --git a/src/uWidgets/ViewModels/DarkModeViewModel.cs b/src/uWidgets/ViewModels/DarkModeViewModel.cs
@@ -0,0 +1,3 @@
+namespace uWidgets.ViewModels;
+
+public record DarkModeViewModel(string Name, bool? Value);
diff --git a/src/uWidgets/ViewModels/ThemeViewModel.cs b/src/uWidgets/ViewModels/ThemeViewModel.cs
@@ -1,3 +1,18 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Media;
+
 namespace uWidgets.ViewModels;
 
-public record ThemeViewModel(string Name, bool? Value);
+public record ThemeViewModel(bool UseNativeFrame, FontFamily FontFamily, bool IsSelected, Action Apply)
+{
+    public CornerRadius CornerRadius => new(Radius);
+    public double Radius => UseNativeFrame ? 2 : 8;
+    public Thickness BorderThickness => new(UseNativeFrame ? 1 : 0);
+    public BoxShadows Shadow => UseNativeFrame 
+        ? new(BoxShadow.Parse("0 0 10 0 #40000000"))
+        : new();
+
+    public Classes Classes => IsSelected ? ["Active"] : [];
+}
diff --git a/src/uWidgets/Views/Controls/ThemeButton.axaml b/src/uWidgets/Views/Controls/ThemeButton.axaml
@@ -0,0 +1,23 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:viewModels="clr-namespace:uWidgets.ViewModels"
+             x:Class="uWidgets.Views.Controls.ThemeButton"
+             x:DataType="viewModels:ThemeViewModel">
+    <Button Click="Button_OnClick" Padding="1" CornerRadius="5" Background="Transparent">
+        <Canvas Width="115" Height="90" ClipToBounds="True">
+            <Rectangle Width="115" Height="90" RadiusX="4" RadiusY="4"
+                       Fill="{DynamicResource ThemeBackgroundBrush}" />
+            <Border Canvas.Left="65" Canvas.Top="40" Width="45" Height="45" 
+                       CornerRadius="{Binding CornerRadius}"
+                       Background="{DynamicResource WidgetBackground}"
+                       BorderThickness="{Binding BorderThickness}"
+                       BorderBrush="#60808080"
+                       BoxShadow="{Binding Shadow}" />
+            <TextBlock Canvas.Left="65" Canvas.Top="48" Width="45"
+                       TextAlignment="Center" VerticalAlignment="Center"
+                       FontSize="28" LineHeight="24" Text="Aa"
+                       FontFamily="{Binding FontFamily}"
+                       Foreground="{DynamicResource SystemControlForegroundAccentBrush}" />
+        </Canvas>
+    </Button>
+</UserControl>
diff --git a/src/uWidgets/Views/Controls/ThemeButton.axaml.cs b/src/uWidgets/Views/Controls/ThemeButton.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using uWidgets.ViewModels;
+
+namespace uWidgets.Views.Controls;
+
+public partial class ThemeButton : UserControl
+{
+    public ThemeButton()
+    {
+        InitializeComponent();
+    }
+
+    private void Button_OnClick(object? sender, RoutedEventArgs e)
+    {
+        (DataContext as ThemeViewModel)!.Apply();
+    }
+}
diff --git a/src/uWidgets/Views/Pages/Appearance.axaml b/src/uWidgets/Views/Pages/Appearance.axaml
@@ -16,28 +16,28 @@
     </UserControl.Styles>
     <StackPanel Orientation="Vertical" Spacing="3">
         <TextBlock FontSize="14" FontWeight="SemiBold" Margin="0 0 0 10" 
-                   Text="{x:Static locales:Locale.Settings_Appearance_Presets}"/>
-        <controls:Setting Icon="{DynamicResource Windows}" 
-                          Title="{x:Static locales:Locale.Settings_Appearance_Presets_Windows_Title}" 
-                          Subtitle="{x:Static locales:Locale.Settings_Appearance_Presets_Windows_Subtitle}">
-            <Button MinWidth="130" HorizontalContentAlignment="Center" Click="ApplyWindowsStyle"
-                    Content="{x:Static locales:Locale.Settings_Appearance_Presets_Apply}" />
-        </controls:Setting>
-        <controls:Setting Icon="{DynamicResource Apple}" 
-                          Title="{x:Static locales:Locale.Settings_Appearance_Presets_Apple_Title}" 
-                          Subtitle="{x:Static locales:Locale.Settings_Appearance_Presets_Apple_Subtitle}">
-            <Button MinWidth="130" HorizontalContentAlignment="Center" Click="ApplyAppleStyle"
-                    Content="{x:Static locales:Locale.Settings_Appearance_Presets_Apply}" />
-        </controls:Setting>
+                   Text="{x:Static locales:Locale.Settings_Appearance_ApplyTheme}"/>
+        <ItemsControl ItemsSource="{Binding Themes}">
+            <ItemsControl.ItemTemplate>
+                <DataTemplate DataType="viewModels:ThemeViewModel">
+                    <controls:ThemeButton DataContext="{Binding}" />
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <StackPanel Orientation="Horizontal" Spacing="4" />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+        </ItemsControl>
         <TextBlock FontSize="14" FontWeight="SemiBold" Margin="0 20 0 10" 
-                   Text="{x:Static locales:Locale.Settings_Appearance_Theme}"/>
+                   Text="{x:Static locales:Locale.Settings_Appearance_Colors}"/>
         <controls:Setting Icon="{DynamicResource Brush}" 
             Title="{x:Static locales:Locale.Settings_Appearance_DarkMode_Title}" 
             Subtitle="{x:Static locales:Locale.Settings_Appearance_DarkMode_Subtitle}">
-            <ComboBox ItemsSource="{Binding Themes}" MinWidth="130" 
+            <ComboBox ItemsSource="{Binding DarkModes}" MinWidth="130" 
                       SelectedItem="{Binding DarkMode}">
                 <ComboBox.ItemTemplate>
-                    <DataTemplate DataType="viewModels:ThemeViewModel">
+                    <DataTemplate DataType="viewModels:DarkModeViewModel">
                         <TextBlock Text="{Binding Name}" Margin="0 4" />
                     </DataTemplate>
                 </ComboBox.ItemTemplate>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		namespace uWidgets.ViewModels;

		public record DarkModeViewModel(string Name, bool? Value);