Skip to content

Commit 3a9fc54

Browse files
yaira2yaira2
authored
Feature: Improved the background color preview (#11020)
1 parent 94c8e57 commit 3a9fc54

File tree

7 files changed

+126
-246
lines changed

7 files changed

+126
-246
lines changed

‎src/Files.App/ServicesImplementation/Settings/AppearanceSettingsService.cs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,21 @@ public String AppThemeBackgroundColor
4848
/// <inheritdoc/>
4949
public String AppThemeAddressBarBackgroundColor
5050
{
51-
get => Get("#00000000");
51+
get => Get("");
5252
set => Set(value);
5353
}
5454

5555
/// <inheritdoc/>
5656
public String AppThemeSidebarBackgroundColor
5757
{
58-
get => Get("#00000000");
58+
get => Get("");
5959
set => Set(value);
6060
}
6161

6262
/// <inheritdoc/>
6363
public String AppThemeFileAreaBackgroundColor
6464
{
65-
get => Get("#00000000");
65+
get => Get("");
6666
set => Set(value);
6767
}
6868

‎src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
using Microsoft.UI.Xaml.Data;
2+
using Microsoft.UI.Xaml.Media;
3+
using System;
4+
using Windows.UI;
5+
6+
namespace Files.App.ValueConverters
7+
{
8+
public class ColorToSolidColorBrushValueConverter : IValueConverter
9+
{
10+
public object? Convert(object value, Type targetType, object parameter, string language)
11+
{
12+
if (null == value)
13+
return null;
14+
15+
if (value is Color)
16+
{
17+
Color color = (Color)value;
18+
return new SolidColorBrush(color);
19+
}
20+
21+
Type type = value.GetType();
22+
throw new InvalidOperationException("Unsupported type [" + type.Name + "]");
23+
}
24+
25+
public object ConvertBack(object value, Type targetType, object parameter, string language)
26+
{
27+
throw new NotImplementedException();
28+
}
29+
}
30+
}

‎src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,28 @@ private void UpdateSelectedBackground()
4949
var appThemeBackgroundColor = new AppThemeResource
5050
{
5151
BackgroundColor = backgroundColor,
52-
PreviewColor = new SolidColorBrush(Color.FromArgb(255, backgroundColor.R, backgroundColor.G, backgroundColor.B)),
5352
Name = "Custom"
5453
};
5554

56-
AppThemeResources.Insert(1, appThemeBackgroundColor);
55+
AppThemeResources.Add(appThemeBackgroundColor);
5756
}
5857

59-
SelectedAppBackgroundColor = AppThemeResources
60-
.Where(p => p.BackgroundColor == AppThemeBackgroundColor)
61-
.FirstOrDefault() ?? AppThemeResources[0];
58+
SelectedAppThemeResources = AppThemeResources
59+
.Where(p => p.BackgroundColor == AppThemeBackgroundColor)
60+
.FirstOrDefault() ?? AppThemeResources[0];
6261
}
6362

6463

65-
private AppThemeResource selectedAppBackgroundColor;
66-
public AppThemeResource SelectedAppBackgroundColor
64+
private AppThemeResource selectedAppThemeResources;
65+
public AppThemeResource SelectedAppThemeResources
6766
{
68-
get => selectedAppBackgroundColor;
67+
get => selectedAppThemeResources;
6968
set
7069
{
71-
if (SetProperty(ref selectedAppBackgroundColor, value))
70+
if (SetProperty(ref selectedAppThemeResources, value))
7271
{
73-
AppThemeBackgroundColor = SelectedAppBackgroundColor.BackgroundColor;
74-
OnPropertyChanged(nameof(selectedAppBackgroundColor));
72+
AppThemeBackgroundColor = SelectedAppThemeResources.BackgroundColor;
73+
OnPropertyChanged(nameof(selectedAppThemeResources));
7574
}
7675
}
7776
}

‎src/Files.App/Views/MainPage.xaml.cs

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
using Windows.Graphics;
2828
using Windows.Services.Store;
2929
using Windows.Storage;
30-
using Windows.UI;
3130
using ColorHelper = CommunityToolkit.WinUI.Helpers.ColorHelper;
3231

3332
namespace Files.App.Views
@@ -62,7 +61,6 @@ public MainPage()
6261
{
6362
InitializeComponent();
6463

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

80+
81+
8282
private void LoadAppResources()
8383
{
8484
var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles;
8585
var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor);
86-
var appThemeAddressBarBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor);
87-
var appThemeSidebarBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor);
88-
var appThemeFileAreaBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor);
86+
var appThemeAddressBarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor;
87+
var appThemeSidebarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor;
88+
var appThemeFileAreaBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor;
8989
var appThemeFontFamily = UserSettingsService.AppearanceSettingsService.AppThemeFontFamily;
9090

9191
App.AppThemeResourcesHelper.SetCompactSpacing(useCompactStyles);
9292
App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(appThemeBackgroundColor);
9393

94-
if (appThemeAddressBarBackgroundColor != Color.FromArgb(0,0,0,0))
95-
App.AppThemeResourcesHelper.SetAppThemeAddressBarBackgroundColor(appThemeAddressBarBackgroundColor);
96-
97-
if (appThemeSidebarBackgroundColor != Color.FromArgb(0,0,0,0))
98-
App.AppThemeResourcesHelper.SetAppThemeSidebarBackgroundColor(appThemeSidebarBackgroundColor);
94+
if (!String.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
95+
App.AppThemeResourcesHelper.SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor));
96+
else
97+
UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
98+
99+
if (!String.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
100+
App.AppThemeResourcesHelper.SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor));
101+
else
102+
UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor = ""; //migrate to new default
99103

100-
if (appThemeFileAreaBackgroundColor != Color.FromArgb(0,0,0,0))
101-
App.AppThemeResourcesHelper.SetAppThemeFileAreaBackgroundColor(appThemeFileAreaBackgroundColor);
104+
if (!String.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
105+
App.AppThemeResourcesHelper.SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor));
106+
else
107+
UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
102108

103109
if (appThemeFontFamily != "Segoe UI Variable")
104110
App.AppThemeResourcesHelper.SetAppThemeFontFamily(appThemeFontFamily);

‎src/Files.App/Views/SettingsPages/Appearance.xaml

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
xmlns:appearance="using:Files.App.Views.SettingsPages.Appearance"
66
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
77
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
8+
xmlns:converters1="using:Files.App.ValueConverters"
89
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
910
xmlns:helpers="using:Files.App.Helpers"
1011
xmlns:local="using:Files.App.UserControls.Settings"
@@ -18,27 +19,66 @@
1819
</ResourceDictionary.MergedDictionaries>
1920

2021
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
22+
<converters1:ColorToSolidColorBrushValueConverter x:Key="ColorToSolidColorBrushConverter" />
2123

22-
<DataTemplate x:Key="AppThemeBackgroundColorsItemTemplate" x:DataType="appearance:AppThemeResource">
23-
<StackPanel
24+
<DataTemplate x:Key="AppThemeResourcesItemTemplate" x:DataType="appearance:AppThemeResource">
25+
<Grid
26+
Width="120"
2427
AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
2528
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
2629
BorderThickness="1"
2730
CornerRadius="6"
2831
ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
32+
<Grid.RowDefinitions>
33+
<RowDefinition Height="16" />
34+
<RowDefinition Height="50" />
35+
<RowDefinition Height="Auto" />
36+
</Grid.RowDefinitions>
37+
<!-- Background -->
2938
<Border
30-
Width="50"
31-
Height="12"
32-
Background="{x:Bind PreviewColor, Mode=OneWay}"
33-
CornerRadius="4,4,0,0"
34-
Opacity=".5" />
39+
Grid.RowSpan="2"
40+
Height="66"
41+
Background="{x:Bind BackgroundColor, Converter={StaticResource ColorToSolidColorBrushConverter}, Mode=OneWay}"
42+
CornerRadius="4,4,0,0" />
43+
44+
<!-- Tab Bar -->
45+
<StackPanel Orientation="Horizontal">
46+
<Border
47+
Width="4"
48+
Height="1"
49+
VerticalAlignment="Bottom"
50+
Background="{ThemeResource ControlElevationBorderBrush}" />
51+
<Border
52+
Width="32"
53+
Height="12"
54+
VerticalAlignment="Bottom"
55+
Background="{ThemeResource LayerOnMicaBaseAltFillColorDefault}"
56+
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
57+
BorderThickness="1,1,1,0"
58+
CornerRadius="4,4,0,0" />
59+
<Border
60+
Width="86"
61+
Height="1"
62+
VerticalAlignment="Bottom"
63+
Background="{ThemeResource ControlElevationBorderBrush}" />
64+
</StackPanel>
65+
66+
<!-- File area -->
3567
<Border
36-
Width="50"
37-
Height="38"
38-
Background="{x:Bind PreviewColor, Mode=OneWay}"
39-
CornerRadius="0,0,4,4"
40-
Opacity=".3" />
41-
</StackPanel>
68+
Grid.Row="1"
69+
Height="50"
70+
VerticalAlignment="Bottom"
71+
Background="{ThemeResource LayerOnMicaBaseAltFillColorDefault}"
72+
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
73+
BorderThickness="0,0,0,.5" />
74+
75+
<TextBlock
76+
Grid.Row="2"
77+
Padding="4"
78+
HorizontalAlignment="Center"
79+
Text="{x:Bind Name, Mode=OneWay}"
80+
TextTrimming="CharacterEllipsis" />
81+
</Grid>
4282
</DataTemplate>
4383
</ResourceDictionary>
4484
</Page.Resources>
@@ -57,14 +97,14 @@
5797
</TransitionCollection>
5898
</StackPanel.ChildrenTransitions>
5999

60-
<!-- Personalization -->
100+
<!-- Personalization -->
61101
<TextBlock
62102
Padding="0,12,0,4"
63103
FontSize="14"
64104
FontWeight="Medium"
65105
Text="{helpers:ResourceString Name=Personalization}" />
66-
67-
<!-- Theme -->
106+
107+
<!-- Theme -->
68108
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SettingsAppearanceTheme}" HorizontalAlignment="Stretch">
69109
<local:SettingsBlockControl.Icon>
70110
<FontIcon Glyph="&#xE790;" />
@@ -76,7 +116,7 @@
76116
SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
77117
</local:SettingsBlockControl>
78118

79-
<!-- App Background -->
119+
<!-- App Background -->
80120
<local:SettingsBlockControl
81121
Title="{helpers:ResourceString Name=Background}"
82122
HorizontalAlignment="Stretch"
@@ -110,13 +150,13 @@
110150
<GridView
111151
Padding="8"
112152
HorizontalAlignment="Stretch"
113-
ItemTemplate="{StaticResource AppThemeBackgroundColorsItemTemplate}"
114-
ItemsSource="{x:Bind ViewModel.AppThemeResources}"
115-
SelectedItem="{x:Bind ViewModel.SelectedAppBackgroundColor, Mode=TwoWay}" />
153+
ItemTemplate="{StaticResource AppThemeResourcesItemTemplate}"
154+
ItemsSource="{x:Bind ViewModel.AppThemeResources, Mode=OneWay}"
155+
SelectedItem="{x:Bind ViewModel.SelectedAppThemeResources, Mode=TwoWay}" />
116156
</local:SettingsBlockControl.ExpandableContent>
117157
</local:SettingsBlockControl>
118158

119-
<!-- Compact Spacing -->
159+
<!-- Compact Spacing -->
120160
<local:SettingsBlockControl Title="{helpers:ResourceString Name=UseCompactSpacing}" HorizontalAlignment="Stretch">
121161
<local:SettingsBlockControl.Icon>
122162
<FontIcon Glyph="&#xE14C;" />
@@ -127,15 +167,15 @@
127167
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
128168
</local:SettingsBlockControl>
129169

130-
131-
<!-- Right Click Menu -->
170+
171+
<!-- Right Click Menu -->
132172
<TextBlock
133173
Padding="0,12,0,4"
134174
FontSize="14"
135175
FontWeight="Medium"
136176
Text="{helpers:ResourceString Name=SettingsContextMenu/Text}" />
137177

138-
<!-- Overflow Options -->
178+
<!-- Overflow Options -->
139179
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SettingsContextMenuOverflow}" HorizontalAlignment="Stretch">
140180
<local:SettingsBlockControl.Icon>
141181
<FontIcon Glyph="&#xE10C;" />

‎src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ namespace Files.App.Views.SettingsPages.Appearance
55
{
66
public class AppThemeResource
77
{
8-
public string Name { get; set; }
9-
public Brush PreviewColor { get; set; }
8+
public string? Name { get; set; }
109
public Color BackgroundColor { get; set; }
1110
}
1211
}

0 commit comments

Comments
 (0)