Branches flyout

Author: yaira2

src/Files.App/Strings/en-US/Resources.resw

@@ -3278,9 +3278,12 @@
      <value>Switch Branch</value>
   </data>
   <data name="Branches" xml:space="preserve">
-    <value>Branches:</value>
+    <value>Branches</value>
   </data>
   <data name="Switch" xml:space="preserve">
     <value>Switch</value>
   </data>
+  <data name="NewBranch" xml:space="preserve">
+    <value>New branch</value>
+  </data>
 </root>

src/Files.App/UserControls/StatusBarControl.xaml

@@ -62,26 +62,51 @@
 				Content="{x:Bind DirectoryPropertiesViewModel.GitBranchDisplayName, Mode=OneWay}">
 				<Button.Flyout>
 					<Flyout Opening="Flyout_Opening">
-						<Flyout.FlyoutPresenterStyle>
-							<Style TargetType="FlyoutPresenter">
-								<Setter Property="Padding" Value="8" />
-								<Setter Property="CornerRadius" Value="{StaticResource OverlayCornerRadius}" />
-							</Style>
-						</Flyout.FlyoutPresenterStyle>
-						<StackPanel
-							Width="200"
-							Height="200"
-							LostFocus="StackPanel_LostFocus"
-							Spacing="8">
-							<TextBlock
-								Margin="16,0,0,0"
-								FontWeight="Bold"
-								Text="{helpers:ResourceString Name=Branches}" />
+						<Grid
+							x:Name="BranchesGrid"
+							Width="300"
+							Height="340"
+							Margin="-16"
+							LostFocus="BranchesGrid_LostFocus">
+							<Grid.RowDefinitions>
+								<RowDefinition Height="Auto" />
+								<RowDefinition Height="*" />
+							</Grid.RowDefinitions>
+
+							<!--  Header  -->
+							<Grid
+								Grid.Row="0"
+								Padding="12"
+								Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
+								BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+								BorderThickness="0,0,0,1">
+								<!--  Title  -->
+								<TextBlock
+									VerticalAlignment="Center"
+									FontSize="14"
+									Text="{helpers:ResourceString Name=Branches}" />
+
+								<!--  New Branch Button  -->
+								<Button
+									x:Name="NewBranchButton"
+									Height="24"
+									Padding="8,0"
+									HorizontalAlignment="Right"
+									x:Load="False"
+									Content="{helpers:ResourceString Name=NewBranch}"
+									FontSize="12"
+									ToolTipService.ToolTip="{helpers:ResourceString Name=NewBranch}" />
+							</Grid>
+
+							<!--  Branches List  -->
 							<ListView
+								Grid.Row="1"
+								Padding="4"
+								Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
 								ItemsSource="{x:Bind DirectoryPropertiesViewModel.BranchesNames, Mode=OneWay}"
 								SelectedIndex="{x:Bind DirectoryPropertiesViewModel.SelectedBranchIndex, Mode=TwoWay}"
 								SelectionMode="Single" />
-						</StackPanel>
+						</Grid>
 					</Flyout>
 				</Button.Flyout>
 			</Button>

src/Files.App/UserControls/StatusBarControl.xaml.cs

@@ -49,9 +49,9 @@ private void Flyout_Opening(object sender, object e)
 			DirectoryPropertiesViewModel.SelectedBranchIndex = DirectoryPropertiesViewModel.ActiveBranchIndex;
 		}
 
-		private void StackPanel_LostFocus(object sender, RoutedEventArgs e)
+		private void BranchesGrid_LostFocus(object sender, RoutedEventArgs e)
 		{
-			((Popup)((FlyoutPresenter)((StackPanel)sender).Parent).Parent).IsOpen = false;
+			((Popup)((FlyoutPresenter)((Grid)sender).Parent).Parent).IsOpen = false;
 		}
 	}
 }