Feature: Moved sidebar toggle button to the address toolbar (#15876)

0x5bfa · yaira2 · web-flow · commit c39360fa92b0 · 2024-07-30T11:27:51.000-04:00
Co-authored-by: Yair &lt;39923744+yaira2@users.noreply.github.com&gt;
diff --git a/src/Files.App.Controls/ThemedIcon/ThemedIcon.xaml b/src/Files.App.Controls/ThemedIcon/ThemedIcon.xaml
@@ -62,7 +62,7 @@
 								x:Name="PART_OutlinePath"
 								Width="{TemplateBinding IconSize}"
 								Height="{TemplateBinding IconSize}"
-								Fill="{ThemeResource ThemedIconBaseBrush}"/>
+								Fill="{ThemeResource ThemedIconBaseBrush}" />
 						</Viewbox>
 
 						<!--  Layered (Rendered From Top to Bottom in The Visual Tree Order)  -->
diff --git a/src/Files.App/UserControls/AddressToolbar.xaml b/src/Files.App/UserControls/AddressToolbar.xaml
@@ -35,6 +35,7 @@
 				<ResourceDictionary>
 					<SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="Transparent" />
 					<SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
+					<SolidColorBrush x:Key="AppBarButtonBackgroundPointerOver" Color="{ThemeResource ButtonBackgroundPointerOver}" />
 
 					<Style
 						x:Key="AddressToolbarButtonStyle"
@@ -239,6 +240,28 @@
 				Grid.Row="1"
 				Orientation="Horizontal"
 				Spacing="4">
+
+				<ToggleButton
+					x:Name="SidebarPaneToggleButton"
+					Width="36"
+					Height="32"
+					Padding="0"
+					x:Load="{x:Bind IsSidebarPaneOpenToggleButtonVisible, Mode=OneWay}"
+					AutomationProperties.Name="ToggleSidebarPane"
+					Background="Transparent"
+					BorderBrush="Transparent"
+					IsChecked="{x:Bind MainPageViewModel.IsSidebarPaneOpen, Mode=TwoWay}"
+					ToolTipService.ToolTip="{helpers:ResourceString Name=ToggleSidebar}">
+					<AnimatedIcon Width="16">
+						<AnimatedIcon.Source>
+							<animatedvisuals:AnimatedGlobalNavigationButtonVisualSource />
+						</AnimatedIcon.Source>
+						<AnimatedIcon.FallbackIconSource>
+							<SymbolIconSource Symbol="GlobalNavigationButton" />
+						</AnimatedIcon.FallbackIconSource>
+					</AnimatedIcon>
+				</ToggleButton>
+
 				<Button
 					x:Name="Back"
 					x:FieldModifier="public"
diff --git a/src/Files.App/UserControls/AddressToolbar.xaml.cs b/src/Files.App/UserControls/AddressToolbar.xaml.cs
@@ -15,8 +15,17 @@ namespace Files.App.UserControls
 	public sealed partial class AddressToolbar : UserControl
 	{
 		private readonly IUserSettingsService userSettingsService = Ioc.Default.GetRequiredService<IUserSettingsService>();
+		private readonly MainPageViewModel MainPageViewModel = Ioc.Default.GetRequiredService<MainPageViewModel>();
 		public ICommandManager Commands { get; } = Ioc.Default.GetRequiredService<ICommandManager>();
 
+		public static readonly DependencyProperty IsSidebarPaneOpenToggleButtonVisibleProperty =
+			DependencyProperty.Register(nameof(IsSidebarPaneOpenToggleButtonVisible), typeof(bool), typeof(AddressToolbar), new(false));
+		public bool IsSidebarPaneOpenToggleButtonVisible
+		{
+			get => (bool)GetValue(IsSidebarPaneOpenToggleButtonVisibleProperty);
+			set => SetValue(IsSidebarPaneOpenToggleButtonVisibleProperty, value);
+		}
+
 		// Using a DependencyProperty as the backing store for ShowOngoingTasks.  This enables animation, styling, binding, etc...
 		public static readonly DependencyProperty ShowOngoingTasksProperty =
 			DependencyProperty.Register(nameof(ShowOngoingTasks), typeof(bool), typeof(AddressToolbar), new(null));
diff --git a/src/Files.App/UserControls/InnerNavigationToolbar.xaml b/src/Files.App/UserControls/InnerNavigationToolbar.xaml
@@ -540,21 +540,21 @@
 							Command="{x:Bind Commands.SelectAll}"
 							KeyboardAcceleratorTextOverride="{x:Bind Commands.SelectAll.HotKeyText, Mode=OneWay}"
 							Text="{x:Bind Commands.SelectAll.Label}"
-							ThemedIconStyle ="{x:Bind Commands.SelectAll.ThemedIconStyle}" />
+							ThemedIconStyle="{x:Bind Commands.SelectAll.ThemedIconStyle}" />
 						<local:MenuFlyoutItemWithThemedIcon
 							x:Name="InvertSelectionMFI"
 							AccessKey="I"
 							Command="{x:Bind Commands.InvertSelection}"
 							KeyboardAcceleratorTextOverride="{x:Bind Commands.InvertSelection.HotKeyText, Mode=OneWay}"
 							Text="{x:Bind Commands.InvertSelection.Label}"
-							ThemedIconStyle ="{x:Bind Commands.InvertSelection.ThemedIconStyle}" />
+							ThemedIconStyle="{x:Bind Commands.InvertSelection.ThemedIconStyle}" />
 						<local:MenuFlyoutItemWithThemedIcon
 							x:Name="ClearSelectionMFI"
 							AccessKey="C"
 							Command="{x:Bind Commands.ClearSelection}"
 							KeyboardAcceleratorTextOverride="{x:Bind Commands.ClearSelection.HotKeyText, Mode=OneWay}"
 							Text="{x:Bind Commands.ClearSelection.Label}"
-							ThemedIconStyle ="{x:Bind Commands.ClearSelection.ThemedIconStyle}" />
+							ThemedIconStyle="{x:Bind Commands.ClearSelection.ThemedIconStyle}" />
 					</MenuFlyout>
 				</AppBarButton.Flyout>
 
diff --git a/src/Files.App/UserControls/StatusBar.xaml b/src/Files.App/UserControls/StatusBar.xaml
@@ -228,7 +228,7 @@
 							Command="{x:Bind Commands.GitPull}"
 							IsEnabled="{x:Bind Commands.GitPull.IsExecutable, Mode=OneWay}"
 							Text="{x:Bind Commands.GitPull.Label}"
-							ThemedIconStyle ="{StaticResource App.ThemedIcons.Git.Pull}"
+							ThemedIconStyle="{StaticResource App.ThemedIcons.Git.Pull}"
 							ToolTipService.ToolTip="{x:Bind Commands.GitPull.LabelWithHotKey, Mode=OneWay}" />
 
 						<!--  Push Button  -->
@@ -237,7 +237,7 @@
 							Command="{x:Bind Commands.GitPush}"
 							IsEnabled="{x:Bind Commands.GitPush.IsExecutable, Mode=OneWay}"
 							Text="{x:Bind Commands.GitPush.Label}"
-							ThemedIconStyle ="{StaticResource App.ThemedIcons.Git.Push}"
+							ThemedIconStyle="{StaticResource App.ThemedIcons.Git.Push}"
 							ToolTipService.ToolTip="{x:Bind Commands.GitPush.LabelWithHotKey, Mode=OneWay}" />
 
 						<!--  Sync Button  -->
@@ -246,7 +246,7 @@
 							Command="{x:Bind Commands.GitSync}"
 							IsEnabled="{x:Bind Commands.GitSync.IsExecutable, Mode=OneWay}"
 							Text="{x:Bind Commands.GitSync.Label}"
-							ThemedIconStyle ="{StaticResource App.ThemedIcons.Git.Sync}"
+							ThemedIconStyle="{StaticResource App.ThemedIcons.Git.Sync}"
 							ToolTipService.ToolTip="{x:Bind Commands.GitSync.LabelWithHotKey, Mode=OneWay}" />
 					</MenuFlyout>
 				</Button.Flyout>
diff --git a/src/Files.App/UserControls/TabBar/TabBar.xaml b/src/Files.App/UserControls/TabBar/TabBar.xaml
@@ -122,23 +122,23 @@
 								Command="{x:Bind Commands.NewWindow}"
 								KeyboardAcceleratorTextOverride="{x:Bind Commands.NewWindow.HotKeyText, Mode=OneWay}"
 								Text="{x:Bind Commands.NewWindow.Label}"
-								ThemedIconStyle ="{x:Bind Commands.NewWindow.ThemedIconStyle}" />
+								ThemedIconStyle="{x:Bind Commands.NewWindow.ThemedIconStyle}" />
 
 							<!--  Enter Compact Overlay  -->
 							<uc:MenuFlyoutItemWithThemedIcon
 								x:Name="EnterCompactOverlayTabActionButton"
 								x:Load="{x:Bind Commands.EnterCompactOverlay.IsExecutable, Mode=OneWay}"
 								Command="{x:Bind Commands.EnterCompactOverlay}"
 								Text="{x:Bind Commands.EnterCompactOverlay.Label}"
-								ThemedIconStyle ="{x:Bind Commands.EnterCompactOverlay.ThemedIconStyle}" />
+								ThemedIconStyle="{x:Bind Commands.EnterCompactOverlay.ThemedIconStyle}" />
 
 							<!--  Exit Compact Overlay  -->
 							<uc:MenuFlyoutItemWithThemedIcon
 								x:Name="ExitCompactOverlayTabActionButton"
 								x:Load="{x:Bind Commands.ExitCompactOverlay.IsExecutable, Mode=OneWay}"
 								Command="{x:Bind Commands.ExitCompactOverlay}"
 								Text="{x:Bind Commands.ExitCompactOverlay.Label}"
-								ThemedIconStyle ="{x:Bind Commands.ExitCompactOverlay.ThemedIconStyle}" />
+								ThemedIconStyle="{x:Bind Commands.ExitCompactOverlay.ThemedIconStyle}" />
 
 							<!--  Add Pane  -->
 							<MenuFlyoutSubItem
@@ -152,15 +152,15 @@
 										Command="{x:Bind Commands.AddHorizontalPane, Mode=OneWay}"
 										KeyboardAcceleratorTextOverride="{x:Bind Commands.AddHorizontalPane.HotKeyText, Mode=OneWay}"
 										Text="{x:Bind Commands.AddHorizontalPane.Label}"
-										ThemedIconStyle ="{x:Bind Commands.AddHorizontalPane.ThemedIconStyle}" />
+										ThemedIconStyle="{x:Bind Commands.AddHorizontalPane.ThemedIconStyle}" />
 
 									<!--  Vertical  -->
 									<uc:MenuFlyoutItemWithThemedIcon
 										x:Name="AddVerticalPaneTabActionButton"
 										Command="{x:Bind Commands.AddVerticalPane, Mode=OneWay}"
 										KeyboardAcceleratorTextOverride="{x:Bind Commands.AddVerticalPane.HotKeyText, Mode=OneWay}"
 										Text="{x:Bind Commands.AddVerticalPane.Label}"
-										ThemedIconStyle ="{x:Bind Commands.AddVerticalPane.ThemedIconStyle}" />
+										ThemedIconStyle="{x:Bind Commands.AddVerticalPane.ThemedIconStyle}" />
 								</MenuFlyoutSubItem.Items>
 							</MenuFlyoutSubItem>
 
@@ -177,7 +177,7 @@
 										IsChecked="{x:Bind Commands.ArrangePanesHorizontally.IsOn, Mode=OneWay}"
 										KeyboardAcceleratorTextOverride="{x:Bind Commands.ArrangePanesHorizontally.HotKeyText, Mode=OneWay}"
 										Text="{x:Bind Commands.ArrangePanesHorizontally.Label}"
-										ThemedIconStyle ="{x:Bind Commands.ArrangePanesHorizontally.ThemedIconStyle}" />
+										ThemedIconStyle="{x:Bind Commands.ArrangePanesHorizontally.ThemedIconStyle}" />
 
 									<!--  Vertical  -->
 									<uc:ToggleMenuFlyoutItemWithThemedIcon
@@ -186,7 +186,7 @@
 										IsChecked="{x:Bind Commands.ArrangePanesVertically.IsOn, Mode=OneWay}"
 										KeyboardAcceleratorTextOverride="{x:Bind Commands.ArrangePanesVertically.HotKeyText, Mode=OneWay}"
 										Text="{x:Bind Commands.ArrangePanesVertically.Label}"
-										ThemedIconStyle ="{x:Bind Commands.ArrangePanesVertically.ThemedIconStyle}" />
+										ThemedIconStyle="{x:Bind Commands.ArrangePanesVertically.ThemedIconStyle}" />
 								</MenuFlyoutSubItem.Items>
 							</MenuFlyoutSubItem>
 
@@ -197,7 +197,7 @@
 								Command="{x:Bind Commands.CloseActivePane}"
 								KeyboardAcceleratorTextOverride="{x:Bind Commands.CloseActivePane.HotKeyText, Mode=OneWay}"
 								Text="{x:Bind Commands.CloseActivePane.Label}"
-								ThemedIconStyle ="{x:Bind Commands.CloseActivePane.ThemedIconStyle}" />
+								ThemedIconStyle="{x:Bind Commands.CloseActivePane.ThemedIconStyle}" />
 
 						</MenuFlyout>
 					</Button.Flyout>
diff --git a/src/Files.App/ViewModels/MainPageViewModel.cs b/src/Files.App/ViewModels/MainPageViewModel.cs
@@ -33,6 +33,20 @@ public sealed class MainPageViewModel : ObservableObject
 
 		public ITabBar? MultitaskingControl { get; set; }
 
+		private bool _IsSidebarPaneOpen;
+		public bool IsSidebarPaneOpen
+		{
+			get => _IsSidebarPaneOpen;
+			set => SetProperty(ref _IsSidebarPaneOpen, value);
+		}
+
+		private bool _IsSidebarPaneOpenToggleButtonVisible;
+		public bool IsSidebarPaneOpenToggleButtonVisible
+		{
+			get => _IsSidebarPaneOpenToggleButtonVisible;
+			set => SetProperty(ref _IsSidebarPaneOpenToggleButtonVisible, value);
+		}
+
 		private TabBarItem? selectedTabItem;
 		public TabBarItem? SelectedTabItem
 		{
diff --git a/src/Files.App/Views/MainPage.xaml b/src/Files.App/Views/MainPage.xaml
@@ -119,67 +119,50 @@
 
 	<Grid>
 		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="*" />
 		</Grid.RowDefinitions>
 
 		<!--  Background Image  -->
 		<Image
-			Grid.RowSpan="2"
+			Grid.RowSpan="3"
 			HorizontalAlignment="{x:Bind ViewModel.AppThemeBackgroundImageHorizontalAlignment, Mode=OneWay}"
 			VerticalAlignment="{x:Bind ViewModel.AppThemeBackgroundImageVerticalAlignment, Mode=OneWay}"
 			Opacity="{x:Bind ViewModel.AppThemeBackgroundImageOpacity, Mode=OneWay}"
 			Source="{x:Bind ViewModel.AppThemeBackgroundImageSource, Mode=OneWay}"
 			Stretch="{x:Bind ViewModel.AppThemeBackgroundImageFit, Mode=OneWay}" />
 
-		<!--  Header Area  -->
-		<Grid>
-			<Grid.RowDefinitions>
-				<RowDefinition Height="Auto" />
-				<RowDefinition Height="Auto" />
-			</Grid.RowDefinitions>
-
-			<!--  Tab Control  -->
-			<tabbar:TabBar
-				x:Name="TabControl"
-				HorizontalContentAlignment="Stretch"
-				x:Load="False"
-				Loaded="HorizontalMultitaskingControl_Loaded"
-				TabIndex="0" />
-
-			<!--  Address Bar  -->
-			<uc:AddressToolbar
-				x:Name="NavToolbar"
-				Grid.Row="1"
-				HorizontalAlignment="Stretch"
-				HorizontalContentAlignment="Stretch"
-				x:Load="False"
-				Loaded="NavToolbar_Loaded"
-				OngoingTasksViewModel="{x:Bind OngoingTasksViewModel}"
-				ShowOngoingTasks="True"
-				ShowSearchBox="True"
-				ShowSettingsButton="{x:Bind WindowContext.IsCompactOverlay, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
-				TabIndex="1" />
+		<!--  Tab Bar  -->
+		<tabbar:TabBar
+			x:Name="TabControl"
+			HorizontalContentAlignment="Stretch"
+			x:Load="False"
+			Loaded="HorizontalMultitaskingControl_Loaded"
+			TabIndex="0" />
 
-			<Button
-				x:Name="TogglePaneButton"
-				Margin="2,2,0,0"
-				HorizontalAlignment="Left"
-				VerticalAlignment="Top"
-				Background="Transparent"
-				BorderThickness="0"
-				Click="TogglePaneButton_Click"
-				Style="{StaticResource PaneToggleButtonStyle}"
-				Visibility="Collapsed" />
-		</Grid>
+		<!--  Address Bar  -->
+		<uc:AddressToolbar
+			x:Name="NavToolbar"
+			Grid.Row="1"
+			HorizontalAlignment="Stretch"
+			HorizontalContentAlignment="Stretch"
+			x:Load="False"
+			Loaded="NavToolbar_Loaded"
+			OngoingTasksViewModel="{x:Bind OngoingTasksViewModel}"
+			ShowOngoingTasks="True"
+			ShowSearchBox="True"
+			ShowSettingsButton="{x:Bind WindowContext.IsCompactOverlay, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
+			TabIndex="1" />
 
 		<!--  Content Area  -->
 		<sidebar:SidebarView
 			x:Name="SidebarControl"
-			Grid.Row="1"
+			Grid.Row="2"
 			HorizontalAlignment="Stretch"
 			HorizontalContentAlignment="Stretch"
 			DisplayMode="{x:Bind SidebarAdaptiveViewModel.SidebarDisplayMode, Mode=TwoWay}"
+			IsPaneOpen="{x:Bind ViewModel.IsSidebarPaneOpen, Mode=TwoWay}"
 			Loaded="SidebarControl_Loaded"
 			MenuItemsSource="{x:Bind SidebarAdaptiveViewModel.SidebarItems, Mode=OneWay}"
 			OpenPaneLength="{x:Bind UserSettingsService.AppearanceSettingsService.SidebarWidth, Mode=TwoWay}"
@@ -289,9 +272,8 @@
 						<AdaptiveTrigger MinWindowWidth="0" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="TabControl.Margin" Value="48,0,0,0" />
 						<Setter Target="SidebarControl.DisplayMode" Value="Minimal" />
-						<Setter Target="TogglePaneButton.Visibility" Value="Visible" />
+						<Setter Target="NavToolbar.IsSidebarPaneOpenToggleButtonVisible" Value="True" />
 					</VisualState.Setters>
 				</VisualState>
 				<VisualState x:Name="MinimalSidebarState">
diff --git a/src/Files.App/Views/MainPage.xaml.cs b/src/Files.App/Views/MainPage.xaml.cs
@@ -31,9 +31,6 @@ public sealed partial class MainPage : Page
 		public MainPageViewModel ViewModel { get; }
 		public StatusCenterViewModel OngoingTasksViewModel { get; }
 
-		public static AppModel AppModel
-			=> App.AppModel;
-
 		private bool keyReleased = true;
 
 		private DispatcherQueueTimer _updateDateDisplayTimer;
@@ -108,7 +105,7 @@ private async Task AppRunningAsAdminPromptAsync()
 				UserSettingsService.ApplicationSettingsService.ShowRunningAsAdminPrompt = false;
 		}
 
-		// WINUI3
+		// WINUI3	
 		private ContentDialog SetContentDialogRoot(ContentDialog contentDialog)
 		{
 			if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))
@@ -489,13 +486,5 @@ private void PaneSplitter_ManipulationStarted(object sender, ManipulationStarted
 			this.ChangeCursor(InputSystemCursor.Create(PaneSplitter.GripperCursor == GridSplitter.GripperCursorType.SizeWestEast ?
 				InputSystemCursorShape.SizeWestEast : InputSystemCursorShape.SizeNorthSouth));
 		}
-
-		private void TogglePaneButton_Click(object sender, RoutedEventArgs e)
-		{
-			if (SidebarControl.DisplayMode == SidebarDisplayMode.Minimal)
-			{
-				SidebarControl.IsPaneOpen = !SidebarControl.IsPaneOpen;
-			}
-		}
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -31,9 +31,6 @@ public sealed partial class MainPage : Page`
`31`	`31`	`public MainPageViewModel ViewModel { get; }`
`32`	`32`	`public StatusCenterViewModel OngoingTasksViewModel { get; }`
`33`	`33`
`34`		`- public static AppModel AppModel`
`35`		`- => App.AppModel;`
`36`		`-`
`37`	`34`	`private bool keyReleased = true;`
`38`	`35`
`39`	`36`	`private DispatcherQueueTimer _updateDateDisplayTimer;`
`@@ -108,7 +105,7 @@ private async Task AppRunningAsAdminPromptAsync()`
`108`	`105`	`UserSettingsService.ApplicationSettingsService.ShowRunningAsAdminPrompt = false;`
`109`	`106`	`}`
`110`	`107`
`111`		`- // WINUI3`
	`108`	`+ // WINUI3`
`112`	`109`	`private ContentDialog SetContentDialogRoot(ContentDialog contentDialog)`
`113`	`110`	`{`
`114`	`111`	`if (ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))`
`@@ -489,13 +486,5 @@ private void PaneSplitter_ManipulationStarted(object sender, ManipulationStarted`
`489`	`486`	`this.ChangeCursor(InputSystemCursor.Create(PaneSplitter.GripperCursor == GridSplitter.GripperCursorType.SizeWestEast ?`
`490`	`487`	`InputSystemCursorShape.SizeWestEast : InputSystemCursorShape.SizeNorthSouth));`
`491`	`488`	`}`
`492`		`-`
`493`		`- private void TogglePaneButton_Click(object sender, RoutedEventArgs e)`
`494`		`- {`
`495`		`- if (SidebarControl.DisplayMode == SidebarDisplayMode.Minimal)`
`496`		`- {`
`497`		`- SidebarControl.IsPaneOpen = !SidebarControl.IsPaneOpen;`
`498`		`- }`
`499`		`- }`
`500`	`489`	`}`
`501`	`490`	`}`