Skip to content

Commit 59066a8

Browse files
0x5bfa0x5bfa
authored
Feature: Updated the design for Dual Pane mode (#15469)
1 parent a7c57d1 commit 59066a8

14 files changed

+115
-142
lines changed

‎src/Files.App/App.xaml‎

Lines changed: 3 additions & 0 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.FileArea.SecondaryBackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
5354
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
5455

5556
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
@@ -66,6 +67,7 @@
6667
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
6768
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
6869
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
70+
<SolidColorBrush x:Key="App.Theme.FileArea.SecondaryBackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
6971
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
7072

7173
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
@@ -82,6 +84,7 @@
8284
<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="Transparent" />
8385
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="Transparent" />
8486
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="Transparent" />
87+
<SolidColorBrush x:Key="App.Theme.FileArea.SecondaryBackgroundBrush" Color="Transparent" />
8588
<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="Transparent" />
8689

8790
<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SystemColorWindowColor}" />

‎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.FileArea.SecondaryBackgroundBrush
50+
/// </summary>
51+
/// <param name="appThemeFileAreaSecondaryBackgroundColor"></param>
52+
void SetAppThemeFileAreaSecondaryBackgroundColor(Color appThemeFileAreaSecondaryBackgroundColor);
53+
4854
/// <summary>
4955
/// Overrides the XAML resource for App.Theme.InfoPane.BackgroundBrush
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 appThemeFileAreaSecondaryBackgroundColor = appearance.AppThemeFileAreaSecondaryBackgroundColor;
2324
var appThemeInfoPaneBackgroundColor = appearance.AppThemeInfoPaneBackgroundColor;
2425
var appThemeFontFamily = appearance.AppThemeFontFamily;
2526

@@ -81,6 +82,18 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
8182
}
8283
}
8384

85+
if (!string.IsNullOrWhiteSpace(appThemeFileAreaSecondaryBackgroundColor))
86+
{
87+
try
88+
{
89+
service.SetAppThemeFileAreaSecondaryBackgroundColor(ColorHelper.ToColor(appThemeFileAreaSecondaryBackgroundColor).FromWindowsColor());
90+
}
91+
catch
92+
{
93+
appearance.AppThemeFileAreaSecondaryBackgroundColor = ""; //reset to default
94+
}
95+
}
96+
8497
if (!string.IsNullOrWhiteSpace(appThemeInfoPaneBackgroundColor))
8598
{
8699
try

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ public void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundC
4343
{
4444
Application.Current.Resources["App.Theme.FileArea.BackgroundBrush"] = appThemeFileAreaBackgroundColor.ToWindowsColor();
4545
}
46+
47+
/// <inheritdoc/>
48+
public void SetAppThemeFileAreaSecondaryBackgroundColor(Color appThemeFileAreaSecondaryBackgroundColor)
49+
{
50+
Application.Current.Resources["App.Theme.FileArea.SecondaryBackgroundBrush"] = appThemeFileAreaSecondaryBackgroundColor.ToWindowsColor();
51+
}
4652

4753
/// <inheritdoc/>
4854
public void SetAppThemeInfoPaneBackgroundColor(Color appThemeInfoPaneBackgroundColor)

‎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 AppThemeFileAreaSecondaryBackgroundColor
74+
{
75+
get => Get("");
76+
set => Set(value);
77+
}
78+
7279
/// <inheritdoc/>
7380
public String AppThemeInfoPaneBackgroundColor
7481
{
@@ -134,6 +141,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
134141
case nameof(AppThemeToolbarBackgroundColor):
135142
case nameof(AppThemeSidebarBackgroundColor):
136143
case nameof(AppThemeFileAreaBackgroundColor):
144+
case nameof(AppThemeFileAreaSecondaryBackgroundColor):
137145
case nameof(AppThemeInfoPaneBackgroundColor):
138146
case nameof(AppThemeBackdropMaterial):
139147
case nameof(AppThemeBackgroundImageFit):

‎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 file area background color for the inactive pane.
57+
/// </summary>
58+
String AppThemeFileAreaSecondaryBackgroundColor { get; set; }
59+
5560
/// <summary>
5661
/// Gets or sets a value for the app theme info pane background color.
5762
/// </summary>

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

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,6 @@
219219
<sidebar:SidebarView.InnerContent>
220220
<Grid
221221
x:Name="RootGrid"
222-
Loaded="RootGrid_Loaded"
223222
PreviewKeyDown="RootGrid_PreviewKeyDown"
224223
SizeChanged="RootGrid_SizeChanged">
225224
<Grid.RowDefinitions>
@@ -236,7 +235,7 @@
236235
<ColumnDefinition
237236
x:Name="ContentColumn"
238237
Width="*"
239-
MinWidth="100" />
238+
MinWidth="208" />
240239
<ColumnDefinition Width="Auto" />
241240
<ColumnDefinition x:Name="PaneColumn" Width="Auto" />
242241
</Grid.ColumnDefinitions>
@@ -267,17 +266,7 @@
267266
Grid.Column="0"
268267
HorizontalAlignment="Stretch"
269268
HorizontalContentAlignment="Stretch"
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>
269+
Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.ContentFrame, Mode=OneWay}" />
281270

282271
<!-- Preview Pane Splitter -->
283272
<toolkit:GridSplitter

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -554,11 +554,5 @@ private void TogglePaneButton_Click(object sender, RoutedEventArgs e)
554554
SidebarControl.IsPaneOpen = !SidebarControl.IsPaneOpen;
555555
}
556556
}
557-
558-
private void RootGrid_Loaded(object sender, RoutedEventArgs e)
559-
{
560-
// Cast shadow on the status bar
561-
PageContentThemeShadow.Receivers.Add(StatusBar);
562-
}
563557
}
564558
}

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

Lines changed: 18 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,6 @@
2020
<ResourceDictionary Source="ms-appx:///ResourceDictionaries/DefaultGridSplitterStyle.xaml" />
2121
</ResourceDictionary.MergedDictionaries>
2222

23-
<ResourceDictionary.ThemeDictionaries>
24-
<ResourceDictionary x:Key="Light">
25-
<SolidColorBrush x:Key="PaneBorderBrush" Color="#FAF9F8" />
26-
</ResourceDictionary>
27-
<ResourceDictionary x:Key="Dark">
28-
<SolidColorBrush x:Key="PaneBorderBrush" Color="#323130" />
29-
</ResourceDictionary>
30-
<ResourceDictionary x:Key="HighContrast">
31-
<SolidColorBrush x:Key="PaneBorderBrush" Color="{ThemeResource SystemColorWindowColor}" />
32-
</ResourceDictionary>
33-
</ResourceDictionary.ThemeDictionaries>
34-
35-
<SolidColorBrush x:Key="PaneSelectedBorderBrush" Color="{ThemeResource SystemAccentColorLight1}" />
36-
3723
<wctconverters:BoolNegationConverter x:Key="BoolNegationConverter" />
3824

3925
</ResourceDictionary>
@@ -55,7 +41,8 @@
5541
<ColumnDefinition
5642
x:Name="LeftColumn"
5743
Width="*"
58-
MinWidth="300" />
44+
MinWidth="100" />
45+
<ColumnDefinition x:Name="SizerColumnDefinition" Width="Auto" />
5946
<ColumnDefinition
6047
x:Name="RightColumn"
6148
Width="0"
@@ -70,89 +57,39 @@
7057
NavParams="{x:Bind NavParamsLeft, Mode=OneWay}"
7158
PaneHolder="{x:Bind}" />
7259

73-
<!-- Pane Right -->
74-
<Border
75-
x:Name="PaneRightBorder"
76-
Grid.Column="1"
77-
x:Load="{x:Bind IsRightPaneVisible, Mode=OneWay}">
78-
<shellpages:ModernShellPage
79-
x:Name="PaneRight"
80-
ContentChanged="Pane_ContentChanged"
81-
Loaded="Pane_Loaded"
82-
NavParams="{x:Bind NavParamsRight, Mode=OneWay}"
83-
PaneHolder="{x:Bind}" />
84-
</Border>
85-
86-
<!-- Pane Resizing Splitter -->
60+
<!-- Sizer -->
8761
<toolkit:GridSplitter
8862
x:Name="PaneResizer"
8963
Grid.Column="1"
90-
Width="5"
91-
MinWidth="5"
92-
HorizontalAlignment="Left"
64+
Width="4"
65+
x:Load="{x:Bind IsRightPaneVisible, Mode=OneWay}"
9366
Background="Transparent"
9467
Canvas.ZIndex="150"
9568
DoubleTapped="PaneResizer_OnDoubleTapped"
96-
Foreground="Transparent"
97-
GripperForeground="Transparent"
9869
IsTabStop="False"
9970
Loaded="PaneResizer_Loaded"
10071
ManipulationCompleted="PaneResizer_ManipulationCompleted"
10172
ManipulationStarted="PaneResizer_ManipulationStarted"
73+
Opacity="0"
10274
ResizeBehavior="BasedOnAlignment"
103-
ResizeDirection="Auto"
104-
Style="{StaticResource DefaultGridSplitterStyle}">
105-
<toolkit:GridSplitter.RenderTransform>
106-
<TranslateTransform X="0" />
107-
</toolkit:GridSplitter.RenderTransform>
108-
</toolkit:GridSplitter>
75+
Style="{StaticResource DefaultGridSplitterStyle}" />
76+
77+
<!-- Pane Right -->
78+
<shellpages:ModernShellPage
79+
x:Name="PaneRight"
80+
Grid.Column="2"
81+
x:Load="{x:Bind IsRightPaneVisible, Mode=OneWay}"
82+
ContentChanged="Pane_ContentChanged"
83+
Loaded="Pane_Loaded"
84+
NavParams="{x:Bind NavParamsRight, Mode=OneWay}"
85+
PaneHolder="{x:Bind}" />
10986

11087
<i:Interaction.Behaviors>
111-
<icore:DataTriggerBehavior Binding="{x:Bind converters:MultiBooleanConverter.AndConvert(IsLeftPaneActive, IsRightPaneVisible), Mode=OneWay}" Value="True">
112-
<icore:ChangePropertyAction
113-
PropertyName="CurrentInstanceBorderBrush"
114-
TargetObject="{Binding ElementName=PaneLeft}"
115-
Value="{StaticResource PaneSelectedBorderBrush}" />
116-
<icore:ChangePropertyAction
117-
PropertyName="CurrentInstanceBorderThickness"
118-
TargetObject="{Binding ElementName=PaneLeft}"
119-
Value="0,0,0,2" />
120-
</icore:DataTriggerBehavior>
121-
<icore:DataTriggerBehavior Binding="{x:Bind converters:MultiBooleanConverter.AndConvert(IsLeftPaneActive, IsRightPaneVisible), Mode=OneWay}" Value="False">
122-
<icore:ChangePropertyAction
123-
PropertyName="CurrentInstanceBorderBrush"
124-
TargetObject="{Binding ElementName=PaneLeft}"
125-
Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
126-
<icore:ChangePropertyAction
127-
PropertyName="CurrentInstanceBorderThickness"
128-
TargetObject="{Binding ElementName=PaneLeft}"
129-
Value="0,0,0,0" />
130-
</icore:DataTriggerBehavior>
131-
<icore:DataTriggerBehavior Binding="{x:Bind converters:MultiBooleanConverter.AndConvert(IsRightPaneActive, IsRightPaneVisible), Mode=OneWay}" Value="True">
132-
<icore:ChangePropertyAction
133-
PropertyName="CurrentInstanceBorderBrush"
134-
TargetObject="{Binding ElementName=PaneRight}"
135-
Value="{StaticResource PaneSelectedBorderBrush}" />
136-
<icore:ChangePropertyAction
137-
PropertyName="CurrentInstanceBorderThickness"
138-
TargetObject="{Binding ElementName=PaneRight}"
139-
Value="0,0,0,2" />
140-
</icore:DataTriggerBehavior>
141-
<icore:DataTriggerBehavior Binding="{x:Bind converters:MultiBooleanConverter.AndConvert(IsRightPaneActive, IsRightPaneVisible), Mode=OneWay}" Value="False">
142-
<icore:ChangePropertyAction
143-
PropertyName="CurrentInstanceBorderBrush"
144-
TargetObject="{Binding ElementName=PaneRight}"
145-
Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
146-
<icore:ChangePropertyAction
147-
PropertyName="CurrentInstanceBorderThickness"
148-
TargetObject="{Binding ElementName=PaneRight}"
149-
Value="0,0,0,0" />
150-
</icore:DataTriggerBehavior>
15188
<icore:DataTriggerBehavior Binding="{x:Bind IsRightPaneVisible, Mode=OneWay}" Value="True">
15289
<icore:ChangePropertyAction
15390
PropertyName="MinWidth"
15491
TargetObject="{Binding ElementName=RightColumn}"
155-
Value="290" />
92+
Value="100" />
15693
<icore:ChangePropertyAction
15794
PropertyName="Width"
15895
TargetObject="{Binding ElementName=RightColumn}"

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright (c) 2024 Files Community
22
// Licensed under the MIT License. See the LICENSE.
33

4+
using CommunityToolkit.WinUI.UI;
45
using Microsoft.UI.Input;
56
using Microsoft.UI.Xaml;
67
using Microsoft.UI.Xaml.Controls;
@@ -26,6 +27,9 @@ public sealed partial class PaneHolderPage : Page, IPanesPage, ITabBarItemConten
2627

2728
// Properties
2829

30+
private StatusBar StatusBar
31+
=> ((Frame)MainWindow.Instance.Content).FindDescendant<StatusBar>()!;
32+
2933
public bool IsLeftPaneActive
3034
=> ActivePane == PaneLeft;
3135

@@ -342,6 +346,8 @@ private void Pane_Loaded(object sender, RoutedEventArgs e)
342346
{
343347
((UIElement)sender).GotFocus += Pane_GotFocus;
344348
((UIElement)sender).RightTapped += Pane_RightTapped;
349+
350+
PaneLeft.RootGrid.Translation = new System.Numerics.Vector3(0, 0, 8);
345351
}
346352

347353
private void Pane_GotFocus(object sender, RoutedEventArgs e)
@@ -363,6 +369,22 @@ private void Pane_GotFocus(object sender, RoutedEventArgs e)
363369
var activePane = isLeftPane ? PaneLeft : PaneRight;
364370
if (ActivePane != activePane)
365371
ActivePane = activePane;
372+
373+
// Add theme shadow to the active pane
374+
if (isLeftPane)
375+
{
376+
if (PaneRight is not null)
377+
PaneRight.RootGrid.Translation = new System.Numerics.Vector3(0, 0, 0);
378+
if (PaneLeft is not null)
379+
PaneLeft.RootGrid.Translation = new System.Numerics.Vector3(0, 0, 8);
380+
}
381+
else
382+
{
383+
if (PaneRight is not null)
384+
PaneRight.RootGrid.Translation = new System.Numerics.Vector3(0, 0, 8);
385+
if (PaneLeft is not null)
386+
PaneLeft.RootGrid.Translation = new System.Numerics.Vector3(0, 0, 0);
387+
}
366388
}
367389

368390
private void Pane_RightTapped(object sender, RoutedEventArgs e)
@@ -389,7 +411,7 @@ private void PaneResizer_ManipulationStarted(object sender, ManipulationStartedR
389411

390412
private void PaneResizer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
391413
{
392-
if (PaneRight is not null && PaneRight.ActualWidth <= 300)
414+
if (PaneRight is not null && PaneRight.ActualWidth <= 100)
393415
IsRightPaneVisible = false;
394416

395417
this.ChangeCursor(InputSystemCursor.Create(InputSystemCursorShape.Arrow));

0 commit comments

Comments
 (0)