From 5bd4d688a720ac248f0545f39fcd29a8e2038d53 Mon Sep 17 00:00:00 2001
From: Alexandre Agostinho <alexandre.agostinho@epita.fr>
Date: Sat, 8 Apr 2023 16:37:20 +0200
Subject: [PATCH] :recycle: refactor custom flyout with content binding

---
 MCTG/Views/ContainerBase.xaml                 |  9 ++++--
 MCTG/Views/ContainerBase.xaml.cs              | 11 ++++++-
 ...CustomFlyout.xaml => ContainerFlyout.xaml} | 31 +++++++------------
 MCTG/Views/ContainerFlyout.xaml.cs            | 18 +++++++++++
 MCTG/Views/CustomFlyout.xaml.cs               |  9 ------
 MCTG/Views/CustomHeader.xaml                  |  2 +-
 MCTG/Views/Home.xaml                          | 28 ++++++++++++++---
 MCTG/Views/Resources/Styles/Colors.xaml       |  3 +-
 MCTG/Views/Resources/Styles/Styles.xaml       | 11 ++++++-
 MCTG/Views/Views.csproj                       | 10 +++++-
 10 files changed, 92 insertions(+), 40 deletions(-)
 rename MCTG/Views/{CustomFlyout.xaml => ContainerFlyout.xaml} (51%)
 create mode 100644 MCTG/Views/ContainerFlyout.xaml.cs
 delete mode 100644 MCTG/Views/CustomFlyout.xaml.cs

diff --git a/MCTG/Views/ContainerBase.xaml b/MCTG/Views/ContainerBase.xaml
index 0c862d7..651d6b1 100644
--- a/MCTG/Views/ContainerBase.xaml
+++ b/MCTG/Views/ContainerBase.xaml
@@ -13,10 +13,15 @@
             MinimumHeightRequest="80"
             VerticalOptions="StartAndExpand"/>
 
-        <local:CustomFlyout
+        <local:ContainerFlyout
             Grid.RowSpan="2"
             MinimumWidthRequest="300"
-            HorizontalOptions="StartAndExpand"/>
+            HorizontalOptions="StartAndExpand">
+            <local:ContainerFlyout.MyFlyoutContent>
+                <ContentView
+                    Content="{Binding MyFlyoutContent, Source={x:Reference root}}"/>
+            </local:ContainerFlyout.MyFlyoutContent>
+        </local:ContainerFlyout>
 
         <ContentView
             VerticalOptions="StartAndExpand"
diff --git a/MCTG/Views/ContainerBase.xaml.cs b/MCTG/Views/ContainerBase.xaml.cs
index 87041d6..8086e3d 100644
--- a/MCTG/Views/ContainerBase.xaml.cs
+++ b/MCTG/Views/ContainerBase.xaml.cs
@@ -7,7 +7,7 @@ public partial class ContainerBase : ContentView
 		InitializeComponent();
 	}
 
-	public static BindableProperty MyContentProperty =
+	public static readonly BindableProperty MyContentProperty =
 		BindableProperty.Create("MyContent", typeof(View), typeof(ContainerBase), new Grid());
 
 	public View MyContent
@@ -15,4 +15,13 @@ public partial class ContainerBase : ContentView
 		get => (View)GetValue(MyContentProperty);
 		set => SetValue(MyContentProperty, value);
 	}
+
+    public static readonly BindableProperty MyFlyoutContentProperty =
+        BindableProperty.Create("MyFlyoutContent", typeof(View), typeof(ContainerBase), new Grid());
+
+    public View MyFlyoutContent
+    {
+        get => (View)GetValue(MyFlyoutContentProperty);
+        set => SetValue(MyFlyoutContentProperty, value);
+    }
 }
diff --git a/MCTG/Views/CustomFlyout.xaml b/MCTG/Views/ContainerFlyout.xaml
similarity index 51%
rename from MCTG/Views/CustomFlyout.xaml
rename to MCTG/Views/ContainerFlyout.xaml
index 36b747d..2bfa4c0 100644
--- a/MCTG/Views/CustomFlyout.xaml
+++ b/MCTG/Views/ContainerFlyout.xaml
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="Views.CustomFlyout"
+             xmlns:local="clr-namespace:Views"
+             x:Class="Views.ContainerFlyout"
+             x:Name="fl"
              BackgroundColor="{StaticResource Secondary}">
 
     <Grid RowDefinitions="250, *, 100">
@@ -14,30 +16,21 @@
                          BorderWidth="5" BorderColor="Black"
                          IsEnabled="False"/>
             <Button Text="Connection" ImageSource="login_icon.png"
-                    MaximumHeightRequest="20" Margin="15, 15, 15, 0"
-                    CornerRadius="5"/>
+                    Style="{StaticResource button2}"/>
         </VerticalStackLayout>
 
-        <VerticalStackLayout Grid.Row="1">
-            <!-- Research -->
-            <Button Text="Recherche" ImageSource="search_icon.png"
-                    MaximumHeightRequest="20"
-                    Style="{StaticResource button1}"/>
-            <Entry Text="Mots-clés" FontAttributes="Bold"
-                   BackgroundColor="White" Margin="15, 10, 15, 40"/>
-
-            <!-- Direct research -->
-            <Button Text="Entrées" Style="{StaticResource button1}"/>
-            <Button Text="Plats" Style="{StaticResource button1}"/>
-            <Button Text="Desserts" Style="{StaticResource button1}"/>
-        </VerticalStackLayout>
+        <!-- Content -->
+        <ContentView
+            VerticalOptions="Fill"
+            Grid.Row="1"
+            Content="{Binding MyFlyoutContent, Source={x:Reference fl}}"/>
 
+        
         <VerticalStackLayout Grid.Row="2">
             <!-- Footer -->
             <Button Text="Déconnection" ImageSource="logout_icon.png"
-                    MaximumHeightRequest="20" Margin="15, 15, 15, 0"
-                    IsVisible="True"
-                    CornerRadius="5"/>
+                    Style="{StaticResource button2}"
+                    IsVisible="False"/>
         </VerticalStackLayout>
     </Grid>
 
diff --git a/MCTG/Views/ContainerFlyout.xaml.cs b/MCTG/Views/ContainerFlyout.xaml.cs
new file mode 100644
index 0000000..19f60ff
--- /dev/null
+++ b/MCTG/Views/ContainerFlyout.xaml.cs
@@ -0,0 +1,18 @@
+namespace Views;
+
+public partial class ContainerFlyout : ContentView
+{
+	public ContainerFlyout()
+	{
+		InitializeComponent();
+	}
+
+    public static readonly BindableProperty MyFlyoutContentProperty =
+        BindableProperty.Create("MyFlyoutContent", typeof(View), typeof(ContainerFlyout), new Grid());
+
+    public View MyFlyoutContent
+    {
+        get => (View)GetValue(MyFlyoutContentProperty);
+        set => SetValue(MyFlyoutContentProperty, value);
+    }
+}
\ No newline at end of file
diff --git a/MCTG/Views/CustomFlyout.xaml.cs b/MCTG/Views/CustomFlyout.xaml.cs
deleted file mode 100644
index 5efde09..0000000
--- a/MCTG/Views/CustomFlyout.xaml.cs
+++ /dev/null
@@ -1,9 +0,0 @@
-namespace Views;
-
-public partial class CustomFlyout : ContentView
-{
-	public CustomFlyout()
-	{
-		InitializeComponent();
-	}
-}
\ No newline at end of file
diff --git a/MCTG/Views/CustomHeader.xaml b/MCTG/Views/CustomHeader.xaml
index 962178c..92a2af0 100644
--- a/MCTG/Views/CustomHeader.xaml
+++ b/MCTG/Views/CustomHeader.xaml
@@ -7,7 +7,7 @@
     <Grid ColumnDefinitions="*">
         
         <Label Text="Ma cuisine trop géniale"
-               FontAttributes="Bold" FontSize="30"
+               FontAttributes="Bold" FontSize="30" FontFamily="Forte"
                TextColor="Black" Margin="20, 10, 0, 0" 
                VerticalOptions="Start" HorizontalOptions="Start"/>
 
diff --git a/MCTG/Views/Home.xaml b/MCTG/Views/Home.xaml
index becfa2c..4bc96ed 100644
--- a/MCTG/Views/Home.xaml
+++ b/MCTG/Views/Home.xaml
@@ -6,14 +6,34 @@
              x:Class="Views.Home">
 
     <local:ContainerBase>
-        <local:ContainerBase.MyContent>
 
+        <!-- Flyout -->
+        <local:ContainerBase.MyFlyoutContent>
+            <VerticalStackLayout Grid.Row="1">
+                <!-- Research -->
+                <Button Text="Recherche" ImageSource="search_icon.png"
+                    MaximumHeightRequest="20"
+                    Style="{StaticResource button1}"/>
+                <Entry Text="Mots-clés" FontAttributes="Italic"
+                   BackgroundColor="White" Margin="15, 10, 15, 40"/>
+
+                <!-- Direct research -->
+                <Button Text="Entrées" ImageSource="flatware_icon.png"
+                    Style="{StaticResource button1}"/>
+                <Button Text="Plats" ImageSource="room_service_icon.png"
+                    Style="{StaticResource button1}"/>
+                <Button Text="Desserts" ImageSource="coffee_icon.png"
+                    Style="{StaticResource button1}"/>
+            </VerticalStackLayout>
+        </local:ContainerBase.MyFlyoutContent>
+
+        <!-- Master -->
+        <local:ContainerBase.MyContent>
             <ScrollView>
                 <StackLayout>
                     <Label Text="Suggestions" TextColor="Black"
                            FontSize="24" Padding="15"/>
-                    
-                    <!-- Master recipes -->
+
                     <FlexLayout
                             Margin="0, 15"
                             Wrap="Wrap"
@@ -38,8 +58,8 @@
                     </FlexLayout>
                 </StackLayout>
             </ScrollView>
-
         </local:ContainerBase.MyContent>
+        
     </local:ContainerBase>
 
 </ContentPage>
diff --git a/MCTG/Views/Resources/Styles/Colors.xaml b/MCTG/Views/Resources/Styles/Colors.xaml
index 399fb52..0c04d0f 100644
--- a/MCTG/Views/Resources/Styles/Colors.xaml
+++ b/MCTG/Views/Resources/Styles/Colors.xaml
@@ -5,9 +5,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
     <Color x:Key="Primary">#7d9e9f</Color>
-    <Color x:Key="Secondary">#e7caaf</Color>
+    <Color x:Key="Secondary">#ffddbd</Color>
     <Color x:Key="Tertiary">#d9b08c</Color>
-    <Color x:Key="Secondary_var1">#d9b08c</Color>
     <Color x:Key="White">White</Color>
     <Color x:Key="Black">Black</Color>
     <Color x:Key="Gray100">#E1E1E1</Color>
diff --git a/MCTG/Views/Resources/Styles/Styles.xaml b/MCTG/Views/Resources/Styles/Styles.xaml
index 25327bc..fe5821b 100644
--- a/MCTG/Views/Resources/Styles/Styles.xaml
+++ b/MCTG/Views/Resources/Styles/Styles.xaml
@@ -15,9 +15,18 @@
     </Style>
 
     <Style x:Key="button1" TargetType="Button">
-        <Setter Property="TextColor" Value="{StaticResource White}"/>
+        <Setter Property="TextColor" Value="{StaticResource Black}"/>
         <Setter Property="BackgroundColor" Value="{StaticResource Tertiary}"/>
         <Setter Property="CornerRadius" Value="5"/>
+        <Setter Property="MaximumHeightRequest" Value="20"/>
+        <Setter Property="Margin" Value="15, 5"/>
+    </Style>
+
+    <Style x:Key="button2" TargetType="Button">
+        <Setter Property="TextColor" Value="{StaticResource White}"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
+        <Setter Property="CornerRadius" Value="5"/>
+        <Setter Property="MaximumHeightRequest" Value="20"/>
         <Setter Property="Margin" Value="15, 5"/>
     </Style>
 
diff --git a/MCTG/Views/Views.csproj b/MCTG/Views/Views.csproj
index 36cc77a..04b3231 100644
--- a/MCTG/Views/Views.csproj
+++ b/MCTG/Views/Views.csproj
@@ -48,6 +48,14 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Compile Remove="CustomFlyout.xaml.cs" />
+	</ItemGroup>
+
+	<ItemGroup>
+	  <MauiXaml Remove="CustomFlyout.xaml" />
+	</ItemGroup>
+
 	<ItemGroup>
 		<PackageReference Include="CommunityToolkit.Maui" Version="5.0.0" />
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="7.0.0" />
@@ -66,7 +74,7 @@
 	  <MauiXaml Update="ContainerBase.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
-	  <MauiXaml Update="CustomFlyout.xaml">
+	  <MauiXaml Update="ContainerFlyout.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
 	  <MauiXaml Update="CustomHeader.xaml">