From 6a0f105a5b9d120c00a09776beb2290826e1a042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Zitte?= <agnes.zitte@nventive.com>
Date: Mon, 29 Nov 2021 11:44:38 -0500
Subject: [PATCH] feat(Flyout): Add a FlyoutPresenterStyle that will help to
 have fullscreen, modal centered and bottom sheet Flyout BREAKING CHANGE:
 `MaterialFlyoutPresenterStyle ` was changed for
 `MaterialContentFlyoutPresenterStyle` and a new
 `MaterialFlyoutPresenterStyle` was added in order to have fullscreen, modal
 centered, and bottom sheet Flyout

---
 .../Uno.Material/Styles/Controls/Flyout.xaml  |  42 ++++-
 .../Uno.Themes.Samples.Shared/App.xaml        |   4 +
 .../Content/Controls/FlyoutSamplePage.xaml    | 155 +++++++++++++++++-
 .../Content/Controls/FlyoutSamplePage.xaml.cs |   7 +
 4 files changed, 205 insertions(+), 3 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/Flyout.xaml b/src/library/Uno.Material/Styles/Controls/Flyout.xaml
index 5e8a41fd6..4606c752e 100644
--- a/src/library/Uno.Material/Styles/Controls/Flyout.xaml
+++ b/src/library/Uno.Material/Styles/Controls/Flyout.xaml
@@ -11,7 +11,7 @@
 					mc:Ignorable="not_win ios android wasm">
 
 	<ResourceDictionary.MergedDictionaries>
-		<MaterialColors xmlns="using:Uno.Material"/>
+		<MaterialColors xmlns="using:Uno.Material" />
 	</ResourceDictionary.MergedDictionaries>
 
 	<x:String x:Key="CheckGlyphPathStyle">M30.561941,0L31.997,1.393004 10.467954,23.597999 0,15.350999 1.2379759,13.780992 10.287961,20.909952z</x:String>
@@ -28,6 +28,46 @@
 	<!-- Material FlyoutPresenter Style -->
 	<Style x:Key="MaterialFlyoutPresenterStyle"
 		   TargetType="FlyoutPresenter">
+		<Setter Property="HorizontalAlignment"
+				Value="Stretch" />
+		<Setter Property="VerticalAlignment"
+				Value="Stretch" />
+		<Setter Property="HorizontalContentAlignment"
+				Value="Stretch" />
+		<Setter Property="VerticalContentAlignment"
+				Value="Stretch" />
+		<Setter Property="MinWidth"
+				Value="NaN" />
+		<Setter Property="MinHeight"
+				Value="NaN" />
+		<Setter Property="MaxWidth"
+				Value="NaN" />
+		<Setter Property="MaxHeight"
+				Value="NaN" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="FlyoutPresenter">
+					<Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+							VerticalAlignment="{TemplateBinding VerticalAlignment}">
+						<Border.Transitions>
+							<TransitionCollection>
+								<PaneThemeTransition Edge="Bottom" />
+							</TransitionCollection>
+						</Border.Transitions>
+						<ContentPresenter Content="{TemplateBinding Content}"
+										  ContentTemplate="{TemplateBinding ContentTemplate}"
+										  ContentTransitions="{TemplateBinding ContentTransitions}"
+										  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+										  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
+					</Border>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<!-- Material Content FlyoutPresenter Style -->
+	<Style x:Key="MaterialContentFlyoutPresenterStyle"
+		   TargetType="FlyoutPresenter">
 
 		<Setter Property="Foreground"
 				Value="{StaticResource MaterialOnSurfaceBrush}" />
diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml
index 4b0a9fa97..9f0c77ee1 100644
--- a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml
+++ b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml
@@ -37,6 +37,10 @@
 					<x:Double x:Key="DesktopAdaptiveThresholdWidth">720</x:Double>
 				</ResourceDictionary>
 			</ResourceDictionary.MergedDictionaries>
+
+			<!-- To override the default FlyoutLightDismissOverlayBackground resource -->
+			<SolidColorBrush x:Key="FlyoutLightDismissOverlayBackground"
+							 Color="{StaticResource MaterialOverlayColor}" />
 		</ResourceDictionary>
 	</Application.Resources>
 
diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml
index 4cd244dbb..5889dd209 100644
--- a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml
+++ b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml
@@ -19,15 +19,166 @@
 			<sample:SamplePageLayout.MaterialTemplate>
 				<DataTemplate>
 					<StackPanel>
+						<!-- FullScreen Flyout -->
+						<TextBlock Text="FullScreen Flyout"
+								   Margin="0,16,0,0" />
+
+						<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_FullScreenFlyout">
+
+							<Button x:Name="ShowFullScreenFlyoutButton"
+									Content="Flyout">
+								<Button.Flyout>
+									<Flyout Placement="Full"
+											FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
+										<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+											<Grid.RowDefinitions>
+												<RowDefinition Height="Auto" />
+												<RowDefinition Height="*" />
+											</Grid.RowDefinitions>
+											<CommandBar Content="FullScreen Flyout Example"
+														toolkit:VisibleBoundsPadding.PaddingMask="Top"
+														Style="{StaticResource MaterialCommandBarStyle}">
+												<toolkit:CommandBarExtensions.NavigationCommand>
+													<AppBarButton Click="CloseFlyout"
+																  Tag="{Binding ElementName=ShowFullScreenFlyoutButton}"
+																  Style="{StaticResource MaterialAppBarButton}">
+														<AppBarButton.Icon>
+															<PathIcon Data="{StaticResource CloseGlyphPathData}" />
+														</AppBarButton.Icon>
+													</AppBarButton>
+												</toolkit:CommandBarExtensions.NavigationCommand>
+											</CommandBar>
+
+											<TextBlock Grid.Row="1"
+													   Text="Example of a FullScreen Flyout"
+													   VerticalAlignment="Center"
+													   HorizontalAlignment="Center"
+													   Style="{StaticResource MaterialBody1}" />
+										</Grid>
+									</Flyout>
+								</Button.Flyout>
+							</Button>
+						</smtx:XamlDisplay>
+
+						<!-- Modal Centered Flyout -->
+						<TextBlock Text="Modal Centered Flyout"
+								   Margin="0,16,0,0" />
+
+						<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_ModalCenteredFlyout">
+
+							<Button x:Name="ShowModalCenteredFlyoutButton"
+									Content="Flyout">
+								<Button.Flyout>
+									<Flyout Placement="Full"
+											LightDismissOverlayMode="On"
+											FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
+										<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+											  MaxWidth="300"
+											  MaxHeight="370">
+											<Grid.RowDefinitions>
+												<RowDefinition Height="Auto" />
+												<RowDefinition Height="*" />
+											</Grid.RowDefinitions>
+											<CommandBar Content="Modal Centered Flyout Example"
+														toolkit:VisibleBoundsPadding.PaddingMask="Top"
+														Style="{StaticResource MaterialCommandBarStyle}">
+												<toolkit:CommandBarExtensions.NavigationCommand>
+													<AppBarButton Click="CloseFlyout"
+																  Tag="{Binding ElementName=ShowModalCenteredFlyoutButton}"
+																  Style="{StaticResource MaterialAppBarButton}">
+														<AppBarButton.Icon>
+															<PathIcon Data="{StaticResource CloseGlyphPathData}" />
+														</AppBarButton.Icon>
+													</AppBarButton>
+												</toolkit:CommandBarExtensions.NavigationCommand>
+											</CommandBar>
+
+											<TextBlock Grid.Row="1"
+													   Text="Example of a Modal Centered Flyout"
+													   VerticalAlignment="Center"
+													   HorizontalAlignment="Center"
+													   Style="{StaticResource MaterialBody1}" />
+										</Grid>
+									</Flyout>
+								</Button.Flyout>
+							</Button>
+						</smtx:XamlDisplay>
+
+						<!-- Bottom Flyout -->
+						<TextBlock Text="Modal Bottom Sheet Flyout"
+								   Margin="0,16,0,0" />
+
+						<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_ModalBottomSheetFlyout">
+
+							<Button x:Name="ShowModalBottomSheetFlyoutButton"
+									Content="Flyout">
+								<Button.Flyout>
+									<Flyout Placement="Full"
+											LightDismissOverlayMode="On"
+											FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
+										<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+											  VerticalAlignment="Bottom"
+											  MaxHeight="370">
+											<Grid.RowDefinitions>
+												<RowDefinition Height="Auto" />
+												<RowDefinition Height="Auto" />
+												<RowDefinition Height="Auto" />
+												<RowDefinition Height="Auto" />
+											</Grid.RowDefinitions>
+
+											<Button Content="Share"
+													HorizontalAlignment="Stretch"
+													HorizontalContentAlignment="Left"
+													Style="{StaticResource MaterialTextButtonStyle}">
+												<extensions:ControlExtensions.Icon>
+													<SymbolIcon Symbol="Share" />
+												</extensions:ControlExtensions.Icon>
+											</Button>
+
+											<Button Grid.Row="1"
+													Content="Get link"
+													HorizontalAlignment="Stretch"
+													HorizontalContentAlignment="Left"
+													Style="{StaticResource MaterialTextButtonStyle}">
+												<extensions:ControlExtensions.Icon>
+													<SymbolIcon Symbol="Link" />
+												</extensions:ControlExtensions.Icon>
+											</Button>
+
+											<Button Grid.Row="2"
+													Content="Edit"
+													HorizontalAlignment="Stretch"
+													HorizontalContentAlignment="Left"
+													Style="{StaticResource MaterialTextButtonStyle}">
+												<extensions:ControlExtensions.Icon>
+													<SymbolIcon Symbol="Edit" />
+												</extensions:ControlExtensions.Icon>
+											</Button>
+
+											<Button Grid.Row="3"
+													Content="Delete"
+													HorizontalAlignment="Stretch"
+													HorizontalContentAlignment="Left"
+													Style="{StaticResource MaterialTextButtonStyle}">
+												<extensions:ControlExtensions.Icon>
+													<SymbolIcon Symbol="Delete" />
+												</extensions:ControlExtensions.Icon>
+											</Button>
+										</Grid>
+									</Flyout>
+								</Button.Flyout>
+							</Button>
+						</smtx:XamlDisplay>
 
 						<!-- Flyout Text -->
-						<TextBlock Text="Flyout" />
+						<TextBlock Text="Flyout"
+								   Margin="0,16,0,0" />
 
 						<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_Flyout">
 
 							<Button Content="Flyout">
 								<Button.Flyout>
-									<Flyout FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
+									<Flyout FlyoutPresenterStyle="{StaticResource MaterialContentFlyoutPresenterStyle}">
 										<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
 												   Style="{StaticResource MaterialBody2}" />
 									</Flyout>
diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml.cs
index 1f08ca3f5..ce7ada3e3 100644
--- a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml.cs
+++ b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml.cs
@@ -23,6 +23,13 @@ public FlyoutSamplePage()
 		{
 			this.InitializeComponent();
 		}
+
+		private void CloseFlyout(object sender, RoutedEventArgs e)
+		{
+			var appBarButton = sender as AppBarButton;
+			var button = (Button)appBarButton.Tag;
+			button.Flyout?.Hide();
+		}
 	}
 }