Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Improved the background color preview #11020

Merged
merged 2 commits into from
Jan 16, 2023
Merged

Feature: Improved the background color preview #11020

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b2ee27
Update MainPage.xaml.cs
yaira2 Jan 16, 2023
13daf73
Update Appearance.xaml
yaira2 Jan 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/Files.App/ServicesImplementation/Settings/AppearanceSettingsService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,21 @@ public String AppThemeBackgroundColor
/// <inheritdoc/>
public String AppThemeAddressBarBackgroundColor
{
get => Get("#00000000");
get => Get("");
set => Set(value);
}

/// <inheritdoc/>
public String AppThemeSidebarBackgroundColor
{
get => Get("#00000000");
get => Get("");
set => Set(value);
}

/// <inheritdoc/>
public String AppThemeFileAreaBackgroundColor
{
get => Get("#00000000");
get => Get("");
set => Set(value);
}

Expand Down
30 changes: 30 additions & 0 deletions src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media;
using System;
using Windows.UI;

namespace Files.App.ValueConverters
{
public class ColorToSolidColorBrushValueConverter : IValueConverter
{
public object? Convert(object value, Type targetType, object parameter, string language)
{
if (null == value)
return null;

if (value is Color)
{
Color color = (Color)value;
return new SolidColorBrush(color);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'd probably want to convert the alpha channel to 255 to preserve behavior?
or is it intentional that we want it to look opaque?

return new SolidColorBrush(Color.FromArgb(255, color.R, color.G, color.B));

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intentional, it's designed this way so that the app still shows the mica background.

}

Type type = value.GetType();
throw new InvalidOperationException("Unsupported type [" + type.Name + "]");
}

public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}
21 changes: 10 additions & 11 deletions src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,29 +49,28 @@ private void UpdateSelectedBackground()
var appThemeBackgroundColor = new AppThemeResource
{
BackgroundColor = backgroundColor,
PreviewColor = new SolidColorBrush(Color.FromArgb(255, backgroundColor.R, backgroundColor.G, backgroundColor.B)),
Name = "Custom"
};

AppThemeResources.Insert(1, appThemeBackgroundColor);
AppThemeResources.Add(appThemeBackgroundColor);
}

SelectedAppBackgroundColor = AppThemeResources
.Where(p => p.BackgroundColor == AppThemeBackgroundColor)
.FirstOrDefault() ?? AppThemeResources[0];
SelectedAppThemeResources = AppThemeResources
.Where(p => p.BackgroundColor == AppThemeBackgroundColor)
.FirstOrDefault() ?? AppThemeResources[0];
}


private AppThemeResource selectedAppBackgroundColor;
public AppThemeResource SelectedAppBackgroundColor
private AppThemeResource selectedAppThemeResources;
public AppThemeResource SelectedAppThemeResources
{
get => selectedAppBackgroundColor;
get => selectedAppThemeResources;
set
{
if (SetProperty(ref selectedAppBackgroundColor, value))
if (SetProperty(ref selectedAppThemeResources, value))
{
AppThemeBackgroundColor = SelectedAppBackgroundColor.BackgroundColor;
OnPropertyChanged(nameof(selectedAppBackgroundColor));
AppThemeBackgroundColor = SelectedAppThemeResources.BackgroundColor;
OnPropertyChanged(nameof(selectedAppThemeResources));
}
}
}
Expand Down
30 changes: 18 additions & 12 deletions src/Files.App/Views/MainPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
using Windows.Graphics;
using Windows.Services.Store;
using Windows.Storage;
using Windows.UI;
using ColorHelper = CommunityToolkit.WinUI.Helpers.ColorHelper;

namespace Files.App.Views
Expand Down Expand Up @@ -62,7 +61,6 @@ public MainPage()
{
InitializeComponent();

// TODO LayoutDirection is empty, might be an issue with WinAppSdk
var flowDirectionSetting = new Microsoft.Windows.ApplicationModel.Resources.ResourceManager().CreateResourceContext().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "RTL")
FlowDirection = FlowDirection.RightToLeft;
Expand All @@ -79,26 +77,34 @@ public MainPage()
LoadAppResources();
}



private void LoadAppResources()
{
var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles;
var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor);
var appThemeAddressBarBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor);
var appThemeSidebarBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor);
var appThemeFileAreaBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor);
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 (appThemeAddressBarBackgroundColor != Color.FromArgb(0,0,0,0))
App.AppThemeResourcesHelper.SetAppThemeAddressBarBackgroundColor(appThemeAddressBarBackgroundColor);

if (appThemeSidebarBackgroundColor != Color.FromArgb(0,0,0,0))
App.AppThemeResourcesHelper.SetAppThemeSidebarBackgroundColor(appThemeSidebarBackgroundColor);
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 (appThemeFileAreaBackgroundColor != Color.FromArgb(0,0,0,0))
App.AppThemeResourcesHelper.SetAppThemeFileAreaBackgroundColor(appThemeFileAreaBackgroundColor);
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);
Expand Down
88 changes: 64 additions & 24 deletions src/Files.App/Views/SettingsPages/Appearance.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
xmlns:appearance="using:Files.App.Views.SettingsPages.Appearance"
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:converters1="using:Files.App.ValueConverters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:helpers="using:Files.App.Helpers"
xmlns:local="using:Files.App.UserControls.Settings"
Expand All @@ -18,27 +19,66 @@
</ResourceDictionary.MergedDictionaries>

<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
<converters1:ColorToSolidColorBrushValueConverter x:Key="ColorToSolidColorBrushConverter" />

<DataTemplate x:Key="AppThemeBackgroundColorsItemTemplate" x:DataType="appearance:AppThemeResource">
<StackPanel
<DataTemplate x:Key="AppThemeResourcesItemTemplate" x:DataType="appearance:AppThemeResource">
<Grid
Width="120"
AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
BorderThickness="1"
CornerRadius="6"
ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Background -->
<Border
Width="50"
Height="12"
Background="{x:Bind PreviewColor, Mode=OneWay}"
CornerRadius="4,4,0,0"
Opacity=".5" />
Grid.RowSpan="2"
Height="66"
Background="{x:Bind BackgroundColor, Converter={StaticResource ColorToSolidColorBrushConverter}, Mode=OneWay}"
CornerRadius="4,4,0,0" />

<!-- Tab Bar -->
<StackPanel Orientation="Horizontal">
<Border
Width="4"
Height="1"
VerticalAlignment="Bottom"
Background="{ThemeResource ControlElevationBorderBrush}" />
<Border
Width="32"
Height="12"
VerticalAlignment="Bottom"
Background="{ThemeResource LayerOnMicaBaseAltFillColorDefault}"
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
BorderThickness="1,1,1,0"
CornerRadius="4,4,0,0" />
<Border
Width="86"
Height="1"
VerticalAlignment="Bottom"
Background="{ThemeResource ControlElevationBorderBrush}" />
</StackPanel>

<!-- File area -->
<Border
Width="50"
Height="38"
Background="{x:Bind PreviewColor, Mode=OneWay}"
CornerRadius="0,0,4,4"
Opacity=".3" />
</StackPanel>
Grid.Row="1"
Height="50"
VerticalAlignment="Bottom"
Background="{ThemeResource LayerOnMicaBaseAltFillColorDefault}"
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
BorderThickness="0,0,0,.5" />

<TextBlock
Grid.Row="2"
Padding="4"
HorizontalAlignment="Center"
Text="{x:Bind Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis" />
</Grid>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
Expand All @@ -57,14 +97,14 @@
</TransitionCollection>
</StackPanel.ChildrenTransitions>

<!-- Personalization -->
<!-- Personalization -->
<TextBlock
Padding="0,12,0,4"
FontSize="14"
FontWeight="Medium"
Text="{helpers:ResourceString Name=Personalization}" />
<!-- Theme -->

<!-- Theme -->
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SettingsAppearanceTheme}" HorizontalAlignment="Stretch">
<local:SettingsBlockControl.Icon>
<FontIcon Glyph="&#xE790;" />
Expand All @@ -76,7 +116,7 @@
SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
</local:SettingsBlockControl>

<!-- App Background -->
<!-- App Background -->
<local:SettingsBlockControl
Title="{helpers:ResourceString Name=Background}"
HorizontalAlignment="Stretch"
Expand Down Expand Up @@ -110,13 +150,13 @@
<GridView
Padding="8"
HorizontalAlignment="Stretch"
ItemTemplate="{StaticResource AppThemeBackgroundColorsItemTemplate}"
ItemsSource="{x:Bind ViewModel.AppThemeResources}"
SelectedItem="{x:Bind ViewModel.SelectedAppBackgroundColor, Mode=TwoWay}" />
ItemTemplate="{StaticResource AppThemeResourcesItemTemplate}"
ItemsSource="{x:Bind ViewModel.AppThemeResources, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedAppThemeResources, Mode=TwoWay}" />
</local:SettingsBlockControl.ExpandableContent>
</local:SettingsBlockControl>

<!-- Compact Spacing -->
<!-- Compact Spacing -->
<local:SettingsBlockControl Title="{helpers:ResourceString Name=UseCompactSpacing}" HorizontalAlignment="Stretch">
<local:SettingsBlockControl.Icon>
<FontIcon Glyph="&#xE14C;" />
Expand All @@ -127,15 +167,15 @@
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
</local:SettingsBlockControl>

<!-- Right Click Menu -->

<!-- Right Click Menu -->
<TextBlock
Padding="0,12,0,4"
FontSize="14"
FontWeight="Medium"
Text="{helpers:ResourceString Name=SettingsContextMenu/Text}" />

<!-- Overflow Options -->
<!-- Overflow Options -->
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SettingsContextMenuOverflow}" HorizontalAlignment="Stretch">
<local:SettingsBlockControl.Icon>
<FontIcon Glyph="&#xE10C;" />
Expand Down
3 changes: 1 addition & 2 deletions src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ namespace Files.App.Views.SettingsPages.Appearance
{
public class AppThemeResource
{
public string Name { get; set; }
public Brush PreviewColor { get; set; }
public string? Name { get; set; }
public Color BackgroundColor { get; set; }
}
}
Loading