From be3288b820f9082966061eca7d6bdd076815728e Mon Sep 17 00:00:00 2001 From: yaira2 <39923744+yaira2@users.noreply.github.com> Date: Tue, 17 Jan 2023 15:24:32 -0500 Subject: [PATCH] Codebase: Refactored themes (#11031) --- .../Helpers/AppThemeResourcesHelper.cs | 59 +++++++++++++++---- ... StringToSolidColorBrushValueConverter.cs} | 9 +-- src/Files.App/ViewModels/MainPageViewModel.cs | 9 ++- .../SettingsViewModels/AppearanceViewModel.cs | 35 ++++++----- src/Files.App/Views/MainPage.xaml | 7 ++- src/Files.App/Views/MainPage.xaml.cs | 41 ------------- .../Views/SettingsPages/Appearance.xaml | 6 +- .../Appearance/AppThemeResource.cs | 2 +- .../Appearance/AppThemeResourcesFactory.cs | 40 ++++++------- 9 files changed, 106 insertions(+), 102 deletions(-) rename src/Files.App/ValueConverters/{ColorToSolidColorBrushValueConverter.cs => StringToSolidColorBrushValueConverter.cs} (70%) diff --git a/src/Files.App/Helpers/AppThemeResourcesHelper.cs b/src/Files.App/Helpers/AppThemeResourcesHelper.cs index 50e2fc8c1556..c96a9dd2e9b9 100644 --- a/src/Files.App/Helpers/AppThemeResourcesHelper.cs +++ b/src/Files.App/Helpers/AppThemeResourcesHelper.cs @@ -1,19 +1,25 @@ +using CommunityToolkit.Mvvm.DependencyInjection; +using CommunityToolkit.WinUI.Helpers; +using Files.Backend.Services.Settings; using Microsoft.UI.Xaml; +using System; using Windows.UI; namespace Files.App.Helpers { public sealed class AppThemeResourcesHelper { + public IUserSettingsService UserSettingsService { get; } = Ioc.Default.GetRequiredService(); + /// - /// Forces the application to use the correct resource styles + /// Applies updated resource styles /// public void ApplyResources() { // Get the index of the current theme var selTheme = ThemeHelper.RootTheme; - // Toggle between the themes to force the controls to use the new resource styles + // Toggle between the themes to force reload the resource styles ThemeHelper.RootTheme = ElementTheme.Dark; ThemeHelper.RootTheme = ElementTheme.Light; @@ -75,16 +81,47 @@ public void SetAppThemeFontFamily(string contentControlThemeFontFamily) /// public void SetCompactSpacing(bool useCompactSpacing) { - if (useCompactSpacing) - { - Application.Current.Resources["ListItemHeight"] = 24; - Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = 20; - } + var listItemHeight = useCompactSpacing ? 24 : 36; + var navigationViewItemOnLeftMinHeight = useCompactSpacing ? 20 : 32; + + Application.Current.Resources["ListItemHeight"] = listItemHeight; + Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = navigationViewItemOnLeftMinHeight; + } + + /// + /// Loads the resource styles from settings + /// + public void LoadAppResources() + { + var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles; + var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor); + var appThemeAddressBarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor; + var appThemeSidebarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor; + var appThemeFileAreaBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor; + var appThemeFontFamily = UserSettingsService.AppearanceSettingsService.AppThemeFontFamily; + + SetCompactSpacing(useCompactStyles); + SetAppThemeBackgroundColor(appThemeBackgroundColor); + + if (!String.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") + SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor)); + else + UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor = ""; //migrate to new default + + if (!String.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") + SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor)); else - { - Application.Current.Resources["ListItemHeight"] = 36; - Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = 32; - } + UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor = ""; //migrate to new default + + if (!String.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") + SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor)); + else + UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor = ""; //migrate to new default + + if (appThemeFontFamily != "Segoe UI Variable") + SetAppThemeFontFamily(appThemeFontFamily); + + ApplyResources(); } } } diff --git a/src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs b/src/Files.App/ValueConverters/StringToSolidColorBrushValueConverter.cs similarity index 70% rename from src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs rename to src/Files.App/ValueConverters/StringToSolidColorBrushValueConverter.cs index 305a21f0ee13..116b284ca7eb 100644 --- a/src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs +++ b/src/Files.App/ValueConverters/StringToSolidColorBrushValueConverter.cs @@ -1,20 +1,21 @@ -using Microsoft.UI.Xaml.Data; +using CommunityToolkit.WinUI.Helpers; +using Microsoft.UI.Xaml.Data; using Microsoft.UI.Xaml.Media; using System; using Windows.UI; namespace Files.App.ValueConverters { - public class ColorToSolidColorBrushValueConverter : IValueConverter + public class StringToSolidColorBrushValueConverter : IValueConverter { public object? Convert(object value, Type targetType, object parameter, string language) { if (null == value) return null; - if (value is Color) + if (value is string colorString) { - Color color = (Color)value; + Color color = ColorHelper.ToColor(colorString); return new SolidColorBrush(color); } diff --git a/src/Files.App/ViewModels/MainPageViewModel.cs b/src/Files.App/ViewModels/MainPageViewModel.cs index 225b5cb2ff2f..441c46e56316 100644 --- a/src/Files.App/ViewModels/MainPageViewModel.cs +++ b/src/Files.App/ViewModels/MainPageViewModel.cs @@ -50,15 +50,10 @@ public bool IsWindowCompactOverlay } public ICommand NavigateToNumberedTabKeyboardAcceleratorCommand { get; private set; } - public IAsyncRelayCommand OpenNewWindowAcceleratorCommand { get; private set; } - public ICommand CloseSelectedTabKeyboardAcceleratorCommand { get; private set; } - public IAsyncRelayCommand AddNewInstanceAcceleratorCommand { get; private set; } - public ICommand ReopenClosedTabAcceleratorCommand { get; private set; } - public ICommand OpenSettingsCommand { get; private set; } public MainPageViewModel() @@ -408,6 +403,10 @@ public async void OnNavigatedTo(NavigationEventArgs e) else if (e.Parameter is TabItemArguments tabArgs) await AddNewTabByParam(tabArgs.InitialPageType, tabArgs.NavigationArg); } + + + // Load the app theme resources + App.AppThemeResourcesHelper.LoadAppResources(); } public static Task AddNewTabAsync() diff --git a/src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs b/src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs index f123d634bba1..1ae5edbadd75 100644 --- a/src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs +++ b/src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs @@ -6,12 +6,10 @@ using Files.App.Views.SettingsPages.Appearance; using Files.Backend.Services.Settings; using Microsoft.UI.Xaml; -using Microsoft.UI.Xaml.Media; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; -using Windows.UI; namespace Files.App.ViewModels.SettingsViewModels { @@ -33,30 +31,33 @@ public AppearanceViewModel() }; AppThemeResources = AppThemeResourceFactory.AppThemeResources; - UpdateSelectedBackground(); + UpdateSelectedResource(); } /// - /// Selects the AppThemeResource corresponding to the AppThemeBackgroundColor setting + /// Selects the AppThemeResource corresponding to the current settings /// - private void UpdateSelectedBackground() + private void UpdateSelectedResource() { - var backgroundColor = AppThemeBackgroundColor; + var themeBackgroundColor = AppThemeBackgroundColor; // Add color to the collection if it's not already there - if (!AppThemeResources.Any(p => p.BackgroundColor == backgroundColor)) + if (!AppThemeResources.Any(p => p.BackgroundColor == themeBackgroundColor)) { + // Remove current value before adding a new one + if (AppThemeResources.Last().Name == "Custom") + AppThemeResources.Remove(AppThemeResources.Last()); + var appThemeBackgroundColor = new AppThemeResource { - BackgroundColor = backgroundColor, + BackgroundColor = themeBackgroundColor, Name = "Custom" }; - AppThemeResources.Add(appThemeBackgroundColor); } SelectedAppThemeResources = AppThemeResources - .Where(p => p.BackgroundColor == AppThemeBackgroundColor) + .Where(p => p.BackgroundColor == themeBackgroundColor) .FirstOrDefault() ?? AppThemeResources[0]; } @@ -116,6 +117,7 @@ public bool UseCompactStyles { UserSettingsService.AppearanceSettingsService.UseCompactStyles = value; + // Apply the updated compact spacing resource App.AppThemeResourcesHelper.SetCompactSpacing(UseCompactStyles); App.AppThemeResourcesHelper.ApplyResources(); @@ -124,17 +126,20 @@ public bool UseCompactStyles } } - public Color AppThemeBackgroundColor + public string AppThemeBackgroundColor { - get => ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor); + get => UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor; set { - if (value != ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor)) + if (value != UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor) { - UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor = value.ToString(); + UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor = value; - App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(AppThemeBackgroundColor); + // Apply the updated background resource + App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(ColorHelper.ToColor(value)); App.AppThemeResourcesHelper.ApplyResources(); + + OnPropertyChanged(); } } } diff --git a/src/Files.App/Views/MainPage.xaml b/src/Files.App/Views/MainPage.xaml index 5fd7ba6563b8..0b82292b3563 100644 --- a/src/Files.App/Views/MainPage.xaml +++ b/src/Files.App/Views/MainPage.xaml @@ -12,6 +12,7 @@ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:usercontrols="using:Files.App.UserControls.MultitaskingControl" xmlns:viewmodels="using:Files.App.ViewModels" + AllowDrop="True" Background="{ThemeResource App.Theme.BackgroundBrush}" KeyboardAcceleratorPlacementMode="Hidden" Loaded="Page_Loaded" @@ -331,14 +332,14 @@ ResizeBehavior="BasedOnAlignment" Style="{StaticResource DefaultGridSplitterStyle}" /> - - - (ToggleFullScreenAccelerator); ToggleCompactOverlayCommand = new RelayCommand(ToggleCompactOverlay); SetCompactOverlayCommand = new RelayCommand(SetCompactOverlay); UserSettingsService.OnSettingChangedEvent += UserSettingsService_OnSettingChangedEvent; - - // Load the app theme resources - LoadAppResources(); - } - - - - private void LoadAppResources() - { - var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles; - var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor); - var appThemeAddressBarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor; - var appThemeSidebarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor; - var appThemeFileAreaBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor; - var appThemeFontFamily = UserSettingsService.AppearanceSettingsService.AppThemeFontFamily; - - App.AppThemeResourcesHelper.SetCompactSpacing(useCompactStyles); - App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(appThemeBackgroundColor); - - if (!String.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") - App.AppThemeResourcesHelper.SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor)); - else - UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor = ""; //migrate to new default - - if (!String.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") - App.AppThemeResourcesHelper.SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor)); - else - UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor = ""; //migrate to new default - - if (!String.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000") - App.AppThemeResourcesHelper.SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor)); - else - UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor = ""; //migrate to new default - - if (appThemeFontFamily != "Segoe UI Variable") - App.AppThemeResourcesHelper.SetAppThemeFontFamily(appThemeFontFamily); - - App.AppThemeResourcesHelper.ApplyResources(); } private async Task PromptForReview() diff --git a/src/Files.App/Views/SettingsPages/Appearance.xaml b/src/Files.App/Views/SettingsPages/Appearance.xaml index 321b39cf9ccc..3683264f4646 100644 --- a/src/Files.App/Views/SettingsPages/Appearance.xaml +++ b/src/Files.App/Views/SettingsPages/Appearance.xaml @@ -8,6 +8,8 @@ xmlns:converters1="using:Files.App.ValueConverters" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:helpers="using:Files.App.Helpers" + xmlns:i="using:Microsoft.Xaml.Interactivity" + xmlns:icore="using:Microsoft.Xaml.Interactions.Core" xmlns:local="using:Files.App.UserControls.Settings" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:settingsviewmodels="using:Files.App.ViewModels.SettingsViewModels" @@ -19,7 +21,7 @@ - + diff --git a/src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs b/src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs index 66edd7035fb2..ba452d9dc58a 100644 --- a/src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs +++ b/src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs @@ -6,6 +6,6 @@ namespace Files.App.Views.SettingsPages.Appearance public class AppThemeResource { public string? Name { get; set; } - public Color BackgroundColor { get; set; } + public string? BackgroundColor { get; set; } } } diff --git a/src/Files.App/Views/SettingsPages/Appearance/AppThemeResourcesFactory.cs b/src/Files.App/Views/SettingsPages/Appearance/AppThemeResourcesFactory.cs index 119eade42489..87da06c05ddc 100644 --- a/src/Files.App/Views/SettingsPages/Appearance/AppThemeResourcesFactory.cs +++ b/src/Files.App/Views/SettingsPages/Appearance/AppThemeResourcesFactory.cs @@ -10,102 +10,102 @@ public static class AppThemeResourceFactory { new AppThemeResource { - BackgroundColor = Color.FromArgb(0, 0, 0, 0), /* Transparent */ + BackgroundColor = "#00000000", /* Transparent */ Name = "Default" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 255, 185, 0), /* #FFB900 */ + BackgroundColor = "#32FFB900", /* #FFB900 */ Name = "Yellow Gold" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 247, 99, 12), /* #F7630C */ + BackgroundColor = "#32F7630C", /* #F7630C */ Name = "Orange Bright" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 209, 52, 56), /* #D13438 */ + BackgroundColor = "#32D13438", /* #D13438 */ Name = "Brick Red" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 255, 67, 67), /* #FF4343 */ + BackgroundColor = "#32FF4343", /* #FF4343 */ Name = "Mod Red" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 232, 17, 35), /* #E81123 */ + BackgroundColor = "#32EA005E", /* #EA005E */ Name = "Red" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 234, 0, 94), /* #EA005E */ + BackgroundColor = "#32EA005E", /* #EA005E */ Name = "Rose Bright" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 0, 120, 215), /* #0078D7 */ + BackgroundColor = "#320078D7", /* #0078D7 */ Name = "Blue" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 135, 100, 184), /* #8764B8 */ + BackgroundColor = "#328764B8", /* #8764B8 */ Name = "Iris Pastel" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 177, 70, 194), /* #B146C2 */ + BackgroundColor = "#32B146C2", /* #B146C2 */ Name = "Violet Red Light" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 0, 153, 188), /* #0099BC */ + BackgroundColor = "#320099BC", /* #0099BC */ Name = "Cool Blue Bright" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 0, 183, 195), /* #00B7C3 */ + BackgroundColor = "#3200B7C3", /* #00B7C3 */ Name = "Seafoam" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 0, 178, 148), /* #00B294 */ + BackgroundColor = "#3200B294", /* #00B294 */ Name = "Mint Light" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 122, 117, 116), /* #7A7574 */ + BackgroundColor = "#327A7574", /* #7A7574 */ Name = "Gray" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 16, 124, 16), /* #107C10 */ + BackgroundColor = "#32107C10", /* #107C10 */ Name = "Green" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 118, 118, 118), /* #767676 */ + BackgroundColor = "#32767676", /* #767676 */ Name = "Overcast" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 76, 74, 72), /* #4C4A48 */ + BackgroundColor = "#324C4A48", /* #4C4A48 */ Name = "Storm" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 105, 121, 126), /* #69797E */ + BackgroundColor = "#3269797E", /* #69797E */ Name = "Blue Gray" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 74, 84, 89), /* #4A5459 */ + BackgroundColor = "#324A5459", /* #4A5459 */ Name = "Gray Dark" }, new AppThemeResource { - BackgroundColor = Color.FromArgb(50, 126, 115, 95), /* #7E735F */ + BackgroundColor = "#327E735F", /* #7E735F */ Name = "Camouflage" } };