Skip to content

Commit 290bb3d

Browse files
yaira2yaira2
authored
Feature: Updated the Toolbar design (#15442)
1 parent 4b77a5a commit 290bb3d

File tree

12 files changed

+104
-49
lines changed

12 files changed

+104
-49
lines changed

‎src/Files.App/App.xaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
<ResourceDictionary x:Key="Light">
4848
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
4949
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
50+
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
5051
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
5152
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#C0FCFCFC" />
5253

@@ -61,6 +62,7 @@
6162
<ResourceDictionary x:Key="Dark">
6263
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
6364
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
65+
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
6466
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
6567
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#10f9f9f9" />
6668

@@ -75,6 +77,7 @@
7577
<ResourceDictionary x:Key="HighContrast">
7678
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
7779
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="Transparent" />
80+
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="Transparent" />
7881
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="Transparent" />
7982
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="Transparent" />
8083

‎src/Files.App/Data/Contracts/IResourcesService.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ public interface IResourcesService
2626
/// </summary>
2727
/// <param name="appThemeAddressBarBackgroundColor"></param>
2828
void SetAppThemeAddressBarBackgroundColor(Color appThemeAddressBarBackgroundColor);
29+
30+
/// <summary>
31+
/// Overrides the XAML resource for App.Theme.Toolbar.BackgroundBrush
32+
/// </summary>
33+
/// <param name="appThemeToolbarBackgroundColor"></param>
34+
void SetAppThemeToolbarBackgroundColor(Color appThemeToolbarBackgroundColor);
2935

3036
/// <summary>
3137
/// Overrides the XAML resource for App.Theme.Sidebar.BackgroundBrush

‎src/Files.App/Helpers/UI/AppThemeResourcesHelper.cs‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
1717
{
1818
var appThemeBackgroundColor = appearance.AppThemeBackgroundColor;
1919
var appThemeAddressBarBackgroundColor = appearance.AppThemeAddressBarBackgroundColor;
20+
var appThemeToolbarBackgroundColor = appearance.AppThemeToolbarBackgroundColor;
2021
var appThemeSidebarBackgroundColor = appearance.AppThemeSidebarBackgroundColor;
2122
var appThemeFileAreaBackgroundColor = appearance.AppThemeFileAreaBackgroundColor;
2223
var appThemeFontFamily = appearance.AppThemeFontFamily;
@@ -27,51 +28,57 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
2728
}
2829
catch
2930
{
30-
appearance.AppThemeBackgroundColor = "#00000000"; //migrate to new default
31+
appearance.AppThemeBackgroundColor = "#00000000"; // reset to default
3132
service.SetAppThemeBackgroundColor(ColorHelper.ToColor("#00000000").FromWindowsColor());
3233
}
3334

34-
if (!string.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
35+
if (!string.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor))
3536
{
3637
try
3738
{
3839
service.SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor).FromWindowsColor());
3940
}
4041
catch
4142
{
42-
appearance.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
43+
appearance.AppThemeAddressBarBackgroundColor = ""; // reset to default
4344
}
4445
}
45-
else
46-
appearance.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
4746

48-
if (!string.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeSidebarBackgroundColor != "#00000000")
47+
if (!string.IsNullOrWhiteSpace(appThemeToolbarBackgroundColor))
48+
{
49+
try
50+
{
51+
service.SetAppThemeToolbarBackgroundColor(ColorHelper.ToColor(appThemeToolbarBackgroundColor).FromWindowsColor());
52+
}
53+
catch
54+
{
55+
appearance.AppThemeAddressBarBackgroundColor = ""; //reset to default
56+
}
57+
}
58+
59+
if (!string.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor))
4960
{
5061
try
5162
{
5263
service.SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor).FromWindowsColor());
5364
}
5465
catch
5566
{
56-
appearance.AppThemeSidebarBackgroundColor = ""; //migrate to new default
67+
appearance.AppThemeSidebarBackgroundColor = ""; //reset to default
5768
}
5869
}
59-
else
60-
appearance.AppThemeSidebarBackgroundColor = ""; //migrate to new default
6170

62-
if (!string.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeFileAreaBackgroundColor != "#00000000")
71+
if (!string.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor))
6372
{
6473
try
6574
{
6675
service.SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor).FromWindowsColor());
6776
}
6877
catch
6978
{
70-
appearance.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
79+
appearance.AppThemeFileAreaBackgroundColor = ""; //reset to default
7180
}
7281
}
73-
else
74-
appearance.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
7582

7683
if (appThemeFontFamily != Constants.Appearance.StandardFont)
7784
service.SetAppThemeFontFamily(appThemeFontFamily);

‎src/Files.App/Services/ResourcesService.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ public void SetAppThemeAddressBarBackgroundColor(Color appThemeAddressBarBackgro
2626
Application.Current.Resources["TabViewItemHeaderBackgroundSelected"] = appThemeAddressBarBackgroundColor.ToWindowsColor();
2727
}
2828

29+
/// <inheritdoc/>
30+
public void SetAppThemeToolbarBackgroundColor(Color appThemeToolbarBackgroundColor)
31+
{
32+
Application.Current.Resources["App.Theme.Toolbar.BackgroundBrush"] = appThemeToolbarBackgroundColor.ToWindowsColor();
33+
}
34+
2935
/// <inheritdoc/>
3036
public void SetAppThemeSidebarBackgroundColor(Color appThemeSidebarBackgroundColor)
3137
{

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ public String AppThemeAddressBarBackgroundColor
4848
set => Set(value);
4949
}
5050

51+
/// <inheritdoc/>
52+
public String AppThemeToolbarBackgroundColor
53+
{
54+
get => Get("");
55+
set => Set(value);
56+
}
57+
5158
/// <inheritdoc/>
5259
public String AppThemeSidebarBackgroundColor
5360
{
@@ -117,6 +124,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
117124
{
118125
case nameof(AppThemeBackgroundColor):
119126
case nameof(AppThemeAddressBarBackgroundColor):
127+
case nameof(AppThemeToolbarBackgroundColor):
120128
case nameof(AppThemeSidebarBackgroundColor):
121129
case nameof(AppThemeFileAreaBackgroundColor):
122130
case nameof(AppThemeBackdropMaterial):

‎src/Files.App/Services/Settings/IAppearanceSettingsService.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
3737
/// </summary>
3838
String AppThemeAddressBarBackgroundColor { get; set; }
3939

40+
/// <summary>
41+
/// Gets or sets a value for the app theme toolbar background color.
42+
/// </summary>
43+
String AppThemeToolbarBackgroundColor { get; set; }
44+
4045
/// <summary>
4146
/// Gets or sets a value for the app theme sidebar background color.
4247
/// </summary>

‎src/Files.App/UserControls/InnerNavigationToolbar.xaml‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,7 @@
5454
</ResourceDictionary>
5555
</UserControl.Resources>
5656

57-
<Grid
58-
x:Name="RootGrid"
59-
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
60-
BorderThickness="0,0,0,1">
57+
<Grid x:Name="RootGrid">
6158
<Grid.ColumnDefinitions>
6259
<ColumnDefinition Width="*" />
6360
<ColumnDefinition Width="Auto" />

‎src/Files.App/UserControls/SideBar/SideBarView.properties.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ public SidebarDisplayMode DisplayMode
1515
public static readonly DependencyProperty DisplayModeProperty =
1616
DependencyProperty.Register(nameof(DisplayMode), typeof(SidebarDisplayMode), typeof(SidebarView), new PropertyMetadata(SidebarDisplayMode.Expanded, OnPropertyChanged));
1717

18+
public UIElement ContentHeader
19+
{
20+
get { return (UIElement)GetValue(ContentHeaderProperty); }
21+
set { SetValue(ContentHeaderProperty, value); }
22+
}
23+
public static readonly DependencyProperty ContentHeaderProperty =
24+
DependencyProperty.Register(nameof(ContentHeader), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
25+
1826
public UIElement InnerContent
1927
{
2028
get { return (UIElement)GetValue(InnerContentProperty); }

‎src/Files.App/UserControls/SideBar/SideBarView.xaml‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
Grid.RowSpan="2"
100100
Grid.Column="2"
101101
MinWidth="4"
102-
Margin="0,8,0,40"
102+
Margin="0,60,0,40"
103103
HorizontalAlignment="Left"
104104
AllowFocusOnInteraction="True"
105105
Background="Transparent"
@@ -128,24 +128,39 @@
128128
x:Name="ContentPresenter"
129129
Grid.Row="1"
130130
Grid.Column="2"
131-
Margin="2,0,0,0"
131+
Margin="2,0,8,0"
132132
HorizontalAlignment="Stretch">
133133
<Grid.RowDefinitions>
134+
<RowDefinition Height="Auto" />
134135
<RowDefinition Height="*" />
135136
<RowDefinition Height="Auto" />
136137
</Grid.RowDefinitions>
137138

139+
<!-- Header -->
140+
<Border
141+
x:Name="ContentHeaderPresenter"
142+
Grid.Row="0"
143+
Margin="0,0,0,4"
144+
VerticalAlignment="Stretch"
145+
Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
146+
BackgroundSizing="InnerBorderEdge"
147+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
148+
BorderThickness="1"
149+
Child="{x:Bind ContentHeader, Mode=OneWay}"
150+
CornerRadius="8"
151+
TabFocusNavigation="Local" />
152+
138153
<!-- Content -->
139154
<Border
140155
x:Name="Content"
141-
Grid.Row="0"
156+
Grid.Row="1"
142157
VerticalAlignment="Stretch"
143158
Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
144159
BackgroundSizing="InnerBorderEdge"
145160
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
146-
BorderThickness="1,1,0,1"
161+
BorderThickness="1"
147162
Child="{x:Bind InnerContent, Mode=OneWay}"
148-
CornerRadius="8,0,0,8"
163+
CornerRadius="8"
149164
TabFocusNavigation="Local"
150165
Translation="0,0,8">
151166
<Border.Shadow>
@@ -156,7 +171,7 @@
156171
<!-- Footer -->
157172
<Border
158173
x:Name="ContentFooterPresenter"
159-
Grid.Row="1"
174+
Grid.Row="2"
160175
VerticalAlignment="Stretch"
161176
Child="{x:Bind ContentFooter, Mode=OneWay}"
162177
TabFocusNavigation="Local" />
@@ -180,10 +195,8 @@
180195
<Setter Target="PaneColumnGrid.CornerRadius" Value="0,8,0,8" />
181196
<Setter Target="ContentPresenter.(Grid.Column)" Value="0" />
182197
<Setter Target="ContentPresenter.(Grid.ColumnSpan)" Value="3" />
183-
<Setter Target="Content.CornerRadius" Value="0" />
184-
<Setter Target="Content.BorderThickness" Value="0,1,0,1" />
185198
<Setter Target="SidebarResizer.Visibility" Value="Collapsed" />
186-
<Setter Target="ContentPresenter.Margin" Value="0,0,0,0" />
199+
<Setter Target="ContentPresenter.Margin" Value="8,0,8,0" />
187200
<!-- Specific to collapsed pane -->
188201
<Setter Target="PaneColumnGridTransform.TranslateX" Value="{StaticResource SidebarNegativeOpenPaneLength}" />
189202
<Setter Target="PaneColumnGrid.Visibility" Value="Collapsed" />
@@ -199,10 +212,8 @@
199212
<Setter Target="PaneColumnGrid.CornerRadius" Value="0,8,0,8" />
200213
<Setter Target="ContentPresenter.(Grid.Column)" Value="0" />
201214
<Setter Target="ContentPresenter.(Grid.ColumnSpan)" Value="3" />
202-
<Setter Target="Content.CornerRadius" Value="0" />
203-
<Setter Target="Content.BorderThickness" Value="0,1,0,1" />
204215
<Setter Target="SidebarResizer.Visibility" Value="Collapsed" />
205-
<Setter Target="ContentPresenter.Margin" Value="0,0,0,0" />
216+
<Setter Target="ContentPresenter.Margin" Value="8,0,8,0" />
206217
<!-- Specific to expanded pane -->
207218
<Setter Target="PaneLightDismissLayer.Visibility" Value="Visible" />
208219
<Setter Target="PaneColumnGrid.Shadow">

‎src/Files.App/UserControls/StatusBar.xaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
</Style>
102102
</UserControl.Resources>
103103

104-
<Grid Padding="8,0">
104+
<Grid Padding="8,0,0,0">
105105
<Grid.ColumnDefinitions>
106106
<ColumnDefinition />
107107
<ColumnDefinition Width="Auto" />

0 commit comments

Comments
 (0)