Skip to content

Commit 008bdd2

Browse files
yaira2yaira2
authored
Feature: Updated the design of the Preview Pane (#15456)
1 parent bab19d7 commit 008bdd2

File tree

11 files changed

+112
-97
lines changed

11 files changed

+112
-97
lines changed

‎src/Files.App/App.xaml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
5151
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
5252
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#C0FCFCFC" />
53+
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
5354

5455
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
5556
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
@@ -62,9 +63,10 @@
6263
<ResourceDictionary x:Key="Dark">
6364
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
6465
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
65-
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
66+
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
6667
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
67-
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#10f9f9f9" />
68+
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
69+
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
6870

6971
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
7072
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
@@ -80,6 +82,7 @@
8082
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="Transparent" />
8183
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="Transparent" />
8284
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="Transparent" />
85+
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="Transparent" />
8386

8487
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SystemColorWindowColor}" />
8588
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource SystemColorHighlightColor}" />

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ public interface IResourcesService
4545
/// <param name="appThemeFileAreaBackgroundColor"></param>
4646
void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundColor);
4747

48+
/// <summary>
49+
/// Overrides the XAML resource for App.Theme.InfoPane.BackgroundBrush
50+
/// </summary>
51+
/// <param name="appThemeInfoPaneBackgroundColor"></param>
52+
void SetAppThemeInfoPaneBackgroundColor(Color appThemeInfoPaneBackgroundColor);
53+
4854
/// <summary>
4955
/// Overrides the XAML resource for ContentControlThemeFontFamily
5056
/// </summary>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
2020
var appThemeToolbarBackgroundColor = appearance.AppThemeToolbarBackgroundColor;
2121
var appThemeSidebarBackgroundColor = appearance.AppThemeSidebarBackgroundColor;
2222
var appThemeFileAreaBackgroundColor = appearance.AppThemeFileAreaBackgroundColor;
23+
var appThemeInfoPaneBackgroundColor = appearance.AppThemeInfoPaneBackgroundColor;
2324
var appThemeFontFamily = appearance.AppThemeFontFamily;
2425

2526
try
@@ -80,6 +81,18 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
8081
}
8182
}
8283

84+
if (!string.IsNullOrWhiteSpace(appThemeInfoPaneBackgroundColor))
85+
{
86+
try
87+
{
88+
service.SetAppThemeInfoPaneBackgroundColor(ColorHelper.ToColor(appThemeInfoPaneBackgroundColor).FromWindowsColor());
89+
}
90+
catch
91+
{
92+
appearance.AppThemeInfoPaneBackgroundColor = ""; //reset to default
93+
}
94+
}
95+
8396
if (appThemeFontFamily != Constants.Appearance.StandardFont)
8497
service.SetAppThemeFontFamily(appThemeFontFamily);
8598

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,12 @@ public void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundC
4444
Application.Current.Resources["App.Theme.FileArea.BackgroundBrush"] = appThemeFileAreaBackgroundColor.ToWindowsColor();
4545
}
4646

47+
/// <inheritdoc/>
48+
public void SetAppThemeInfoPaneBackgroundColor(Color appThemeInfoPaneBackgroundColor)
49+
{
50+
Application.Current.Resources["App.Theme.InfoPane.BackgroundBrush"] = appThemeInfoPaneBackgroundColor.ToWindowsColor();
51+
}
52+
4753
/// <inheritdoc/>
4854
public void SetAppThemeFontFamily(string contentControlThemeFontFamily)
4955
{

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,13 @@ public String AppThemeFileAreaBackgroundColor
6969
set => Set(value);
7070
}
7171

72+
/// <inheritdoc/>
73+
public String AppThemeInfoPaneBackgroundColor
74+
{
75+
get => Get("");
76+
set => Set(value);
77+
}
78+
7279
/// <inheritdoc/>
7380
public String AppThemeFontFamily
7481
{
@@ -127,6 +134,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
127134
case nameof(AppThemeToolbarBackgroundColor):
128135
case nameof(AppThemeSidebarBackgroundColor):
129136
case nameof(AppThemeFileAreaBackgroundColor):
137+
case nameof(AppThemeInfoPaneBackgroundColor):
130138
case nameof(AppThemeBackdropMaterial):
131139
case nameof(AppThemeBackgroundImageFit):
132140
case nameof(AppThemeBackgroundImageOpacity):

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
5252
/// </summary>
5353
String AppThemeFileAreaBackgroundColor { get; set; }
5454

55+
/// <summary>
56+
/// Gets or sets a value for the app theme info pane background color.
57+
/// </summary>
58+
String AppThemeInfoPaneBackgroundColor { get; set; }
59+
5560
/// <summary>
5661
/// Gets or sets a value for the app theme font family.
5762
/// </summary>

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,13 @@ 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-
2618
public UIElement InnerContent
2719
{
2820
get { return (UIElement)GetValue(InnerContentProperty); }
2921
set { SetValue(InnerContentProperty, value); }
3022
}
3123
public static readonly DependencyProperty InnerContentProperty =
3224
DependencyProperty.Register(nameof(InnerContent), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
33-
34-
public UIElement ContentFooter
35-
{
36-
get { return (UIElement)GetValue(ContentFooterProperty); }
37-
set { SetValue(ContentFooterProperty, value); }
38-
}
39-
public static readonly DependencyProperty ContentFooterProperty =
40-
DependencyProperty.Register(nameof(ContentFooter), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
4125

4226
public UIElement Footer
4327
{

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

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -130,44 +130,12 @@
130130
Grid.Column="2"
131131
Margin="2,0,8,0"
132132
HorizontalAlignment="Stretch">
133-
<Grid.RowDefinitions>
134-
<RowDefinition Height="Auto" />
135-
<RowDefinition Height="*" />
136-
<RowDefinition Height="Auto" />
137-
</Grid.RowDefinitions>
138-
139-
<!-- Header -->
140-
<Border
141-
x:Name="ContentHeaderPresenter"
142-
Grid.Row="0"
143-
VerticalAlignment="Stretch"
144-
Child="{x:Bind ContentHeader, Mode=OneWay}"
145-
TabFocusNavigation="Local" />
146133

147134
<!-- Content -->
148135
<Border
149136
x:Name="Content"
150-
Grid.Row="1"
151137
VerticalAlignment="Stretch"
152-
Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
153-
BackgroundSizing="InnerBorderEdge"
154-
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
155-
BorderThickness="1"
156138
Child="{x:Bind InnerContent, Mode=OneWay}"
157-
CornerRadius="8"
158-
TabFocusNavigation="Local"
159-
Translation="0,0,8">
160-
<Border.Shadow>
161-
<ThemeShadow x:Name="ContentThemeShadow" />
162-
</Border.Shadow>
163-
</Border>
164-
165-
<!-- Footer -->
166-
<Border
167-
x:Name="ContentFooterPresenter"
168-
Grid.Row="2"
169-
VerticalAlignment="Stretch"
170-
Child="{x:Bind ContentFooter, Mode=OneWay}"
171139
TabFocusNavigation="Local" />
172140

173141
</Grid>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,6 @@ private void SidebarView_Loaded(object sender, RoutedEventArgs e)
119119
UpdateDisplayMode();
120120
UpdateOpenPaneLengthColumn();
121121
PaneColumnGrid.Translation = new System.Numerics.Vector3(0, 0, 32);
122-
123-
// Cast shadow on the footer
124-
ContentThemeShadow.Receivers.Add(ContentFooterPresenter);
125122
}
126123

127124
private void SidebarResizer_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)

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

Lines changed: 57 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -215,39 +215,22 @@
215215
SelectedItem="{x:Bind SidebarAdaptiveViewModel.SidebarSelectedItem, Mode=TwoWay}"
216216
ViewModel="{x:Bind SidebarAdaptiveViewModel}">
217217

218-
<!-- Content Header -->
219-
<sidebar:SidebarView.ContentHeader>
220-
<Border
221-
Margin="0,0,0,4"
222-
Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
223-
BackgroundSizing="InnerBorderEdge"
224-
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
225-
BorderThickness="1"
226-
CornerRadius="8">
227-
<!-- File Navigation Toolbar -->
228-
<uc:InnerNavigationToolbar
229-
x:Name="InnerNavigationToolbar"
230-
x:Load="False"
231-
Loaded="NavToolbar_Loaded"
232-
ShowPreviewPaneButton="{x:Bind ViewModel.ShouldPreviewPaneBeDisplayed, Mode=OneWay}"
233-
ShowViewControlButton="{x:Bind ViewModel.ShouldViewControlBeDisplayed, Mode=OneWay}"
234-
TabIndex="2" />
235-
</Border>
236-
</sidebar:SidebarView.ContentHeader>
237-
238218
<!-- Inner Content -->
239219
<sidebar:SidebarView.InnerContent>
240220
<Grid
241221
x:Name="RootGrid"
222+
Loaded="RootGrid_Loaded"
242223
PreviewKeyDown="RootGrid_PreviewKeyDown"
243224
SizeChanged="RootGrid_SizeChanged">
244225
<Grid.RowDefinitions>
226+
<RowDefinition Height="Auto" />
245227
<RowDefinition
246228
x:Name="ContentRow"
247229
Height="*"
248230
MinHeight="100" />
249231
<RowDefinition Height="Auto" />
250232
<RowDefinition x:Name="PaneRow" Height="Auto" />
233+
<RowDefinition Height="Auto" MinHeight="8" />
251234
</Grid.RowDefinitions>
252235
<Grid.ColumnDefinitions>
253236
<ColumnDefinition
@@ -258,48 +241,84 @@
258241
<ColumnDefinition x:Name="PaneColumn" Width="Auto" />
259242
</Grid.ColumnDefinitions>
260243

244+
<!-- File Navigation Toolbar -->
245+
<Border
246+
Grid.Row="0"
247+
Grid.ColumnSpan="3"
248+
Margin="0,0,0,4"
249+
Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
250+
BackgroundSizing="InnerBorderEdge"
251+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
252+
BorderThickness="1"
253+
CornerRadius="8">
254+
<uc:InnerNavigationToolbar
255+
x:Name="InnerNavigationToolbar"
256+
x:Load="False"
257+
Loaded="NavToolbar_Loaded"
258+
ShowPreviewPaneButton="{x:Bind ViewModel.ShouldPreviewPaneBeDisplayed, Mode=OneWay}"
259+
ShowViewControlButton="{x:Bind ViewModel.ShouldViewControlBeDisplayed, Mode=OneWay}"
260+
TabIndex="2" />
261+
</Border>
262+
261263
<!-- Page Content -->
262264
<ContentPresenter
263-
Grid.Row="0"
265+
x:Name="PageContent"
266+
Grid.Row="1"
264267
Grid.Column="0"
265268
HorizontalAlignment="Stretch"
266269
HorizontalContentAlignment="Stretch"
267-
Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.ContentFrame, Mode=OneWay}" />
270+
Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
271+
BackgroundSizing="InnerBorderEdge"
272+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
273+
BorderThickness="1"
274+
Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.ContentFrame, Mode=OneWay}"
275+
CornerRadius="8"
276+
Translation="0,0,8">
277+
<ContentPresenter.Shadow>
278+
<ThemeShadow x:Name="PageContentThemeShadow" />
279+
</ContentPresenter.Shadow>
280+
</ContentPresenter>
268281

269282
<!-- Preview Pane Splitter -->
270283
<toolkit:GridSplitter
271284
x:Name="PaneSplitter"
272-
Grid.Row="0"
285+
Grid.Row="1"
273286
Grid.Column="1"
274287
x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
275288
ManipulationCompleted="PaneSplitter_ManipulationCompleted"
276289
ManipulationStarted="PaneSplitter_ManipulationStarted"
290+
Opacity="0"
277291
ResizeBehavior="BasedOnAlignment"
278292
Style="{StaticResource DefaultGridSplitterStyle}" />
279293

280294
<!-- Preview Pane -->
281-
<uc:InfoPane
282-
x:Name="PreviewPane"
283-
Grid.Row="0"
295+
<Border
296+
x:Name="InfoPaneContainer"
297+
Grid.Row="1"
284298
Grid.Column="2"
285-
HorizontalContentAlignment="Stretch"
286299
x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
287-
Loaded="PreviewPane_Loaded"
288-
Unloaded="PreviewPane_Unloaded" />
289-
</Grid>
290-
</sidebar:SidebarView.InnerContent>
300+
Background="{ThemeResource App.Theme.InfoPane.BackgroundBrush}"
301+
BackgroundSizing="InnerBorderEdge"
302+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
303+
BorderThickness="1"
304+
CornerRadius="8">
305+
<uc:InfoPane
306+
x:Name="PreviewPane"
307+
HorizontalContentAlignment="Stretch"
308+
Loaded="PreviewPane_Loaded"
309+
Unloaded="PreviewPane_Unloaded" />
310+
</Border>
291311

292-
<!-- Content Footer -->
293-
<sidebar:SidebarView.ContentFooter>
294-
<Border>
295312
<!-- Status Bar -->
296313
<uc:StatusBar
297314
x:Name="StatusBar"
298-
Height="32"
315+
Grid.Row="4"
316+
Grid.ColumnSpan="3"
299317
x:Load="False"
300-
ShowInfoText="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}" />
301-
</Border>
302-
</sidebar:SidebarView.ContentFooter>
318+
ShowInfoText="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}"
319+
Visibility="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}" />
320+
</Grid>
321+
</sidebar:SidebarView.InnerContent>
303322
</sidebar:SidebarView>
304323

305324
<VisualStateManager.VisualStateGroups>

0 commit comments

Comments
 (0)