From 6c24aaddbd1b2bfea7cca137a79ea312f59e5c21 Mon Sep 17 00:00:00 2001
From: Alexandre Agostinho <alexandre.agostinho@epita.fr>
Date: Sat, 8 Apr 2023 15:17:36 +0200
Subject: [PATCH] add custom flyout + change some colors

---
 MCTG/Views/AppShell.xaml                      | 54 ++-----------------
 ...inerWithHeader.xaml => ContainerBase.xaml} |  9 +++-
 ...thHeader.xaml.cs => ContainerBase.xaml.cs} |  6 +--
 MCTG/Views/CustomFlyout.xaml                  | 44 +++++++++++++++
 MCTG/Views/CustomFlyout.xaml.cs               |  9 ++++
 MCTG/Views/CustomHeader.xaml                  |  7 +--
 MCTG/Views/Home.xaml                          | 12 ++---
 MCTG/Views/Resources/Images/search_icon.svg   |  1 +
 MCTG/Views/Resources/Styles/Colors.xaml       |  7 +--
 MCTG/Views/Resources/Styles/Styles.xaml       |  8 +--
 MCTG/Views/Views.csproj                       |  8 ++-
 11 files changed, 92 insertions(+), 73 deletions(-)
 rename MCTG/Views/{ContainerWithHeader.xaml => ContainerBase.xaml} (73%)
 rename MCTG/Views/{ContainerWithHeader.xaml.cs => ContainerBase.xaml.cs} (71%)
 create mode 100644 MCTG/Views/CustomFlyout.xaml
 create mode 100644 MCTG/Views/CustomFlyout.xaml.cs
 create mode 100644 MCTG/Views/Resources/Images/search_icon.svg

diff --git a/MCTG/Views/AppShell.xaml b/MCTG/Views/AppShell.xaml
index 38dd24a..f825052 100644
--- a/MCTG/Views/AppShell.xaml
+++ b/MCTG/Views/AppShell.xaml
@@ -8,57 +8,9 @@
     Shell.FlyoutBehavior="Disabled"
     Shell.NavBarIsVisible="False">
 
-    <Shell.ItemTemplate>
-        <DataTemplate>
-            <Grid ColumnDefinitions="20, *" Padding="10">
-                <Image Source="{Binding Icon}"/>
-                <Label Grid.Column="1" Text="{Binding Title}"
-                       TextColor="White" FontAttributes="Bold"
-                       Padding="20, 0"/>
-            </Grid>
-        </DataTemplate>
-    </Shell.ItemTemplate>
-
-    <Shell.FlyoutHeader>
-        <VerticalStackLayout>
-            <ImageButton Source="person_default.png"
-                         BackgroundColor="{StaticResource Secondary}"
-                         WidthRequest="100" HeightRequest="100"
-                         CornerRadius="50" Margin="0, 20, 0, 0"
-                         IsEnabled="False"/>
-            <Button Text="Connection" ImageSource="login_icon.png"
-                    MaximumHeightRequest="20" Margin="15, 15, 15, 60"/>
-        </VerticalStackLayout>
-    </Shell.FlyoutHeader>
-
-    <FlyoutItem Title="Suggestions" Icon="assistant_icon.png">
-        <ShellContent
-            ContentTemplate="{DataTemplate local:Home}"
-            Route="Home"/>
-    </FlyoutItem>
-    <FlyoutItem Title="Entrées" Icon="flatware_icon.png">
-        <ShellContent
-            ContentTemplate="{DataTemplate local:Home}"
-            Route="Home"/>
-    </FlyoutItem>
-    <FlyoutItem Title="Plats" Icon="room_service_icon.png">
-        <ShellContent
-            ContentTemplate="{DataTemplate local:Home}"
-            Route="Home"/>
-    </FlyoutItem>
-    <FlyoutItem Title="Desserts" Icon="coffee_icon.png">
-        <ShellContent
-            ContentTemplate="{DataTemplate local:Home}"
-            Route="Home"/>
-    </FlyoutItem>
-
-    <Shell.FlyoutFooter>
-        <VerticalStackLayout>
-            <Button Text="Déconnexion" ImageSource="logout_icon.png"
-                    MaximumHeightRequest="20" Margin="15"
-                    IsVisible="False"/>
-        </VerticalStackLayout>
-    </Shell.FlyoutFooter>
 
+    <ShellContent
+        ContentTemplate="{DataTemplate local:Home}"
+        Route="Home"/>
 
 </Shell>
diff --git a/MCTG/Views/ContainerWithHeader.xaml b/MCTG/Views/ContainerBase.xaml
similarity index 73%
rename from MCTG/Views/ContainerWithHeader.xaml
rename to MCTG/Views/ContainerBase.xaml
index 4fae655..0c862d7 100644
--- a/MCTG/Views/ContainerWithHeader.xaml
+++ b/MCTG/Views/ContainerBase.xaml
@@ -2,17 +2,22 @@
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:Views"
-             x:Class="Views.ContainerWithHeader"
+             x:Class="Views.ContainerBase"
              x:Name="root">
 
     <Grid RowDefinitions="80, *"
-          ColumnDefinitions="200, *">
+          ColumnDefinitions="300, *">
 
         <local:CustomHeader
             Grid.Column="1"
             MinimumHeightRequest="80"
             VerticalOptions="StartAndExpand"/>
 
+        <local:CustomFlyout
+            Grid.RowSpan="2"
+            MinimumWidthRequest="300"
+            HorizontalOptions="StartAndExpand"/>
+
         <ContentView
             VerticalOptions="StartAndExpand"
             Grid.Row="1" Grid.Column="1"
diff --git a/MCTG/Views/ContainerWithHeader.xaml.cs b/MCTG/Views/ContainerBase.xaml.cs
similarity index 71%
rename from MCTG/Views/ContainerWithHeader.xaml.cs
rename to MCTG/Views/ContainerBase.xaml.cs
index 2604ce3..87041d6 100644
--- a/MCTG/Views/ContainerWithHeader.xaml.cs
+++ b/MCTG/Views/ContainerBase.xaml.cs
@@ -1,14 +1,14 @@
 namespace Views;
 
-public partial class ContainerWithHeader : ContentView
+public partial class ContainerBase : ContentView
 {
-	public ContainerWithHeader()
+	public ContainerBase()
 	{
 		InitializeComponent();
 	}
 
 	public static BindableProperty MyContentProperty =
-		BindableProperty.Create("MyContent", typeof(View), typeof(ContainerWithHeader), new Grid());
+		BindableProperty.Create("MyContent", typeof(View), typeof(ContainerBase), new Grid());
 
 	public View MyContent
 	{
diff --git a/MCTG/Views/CustomFlyout.xaml b/MCTG/Views/CustomFlyout.xaml
new file mode 100644
index 0000000..36b747d
--- /dev/null
+++ b/MCTG/Views/CustomFlyout.xaml
@@ -0,0 +1,44 @@
+<?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"
+             BackgroundColor="{StaticResource Secondary}">
+
+    <Grid RowDefinitions="250, *, 100">
+        <VerticalStackLayout Grid.Row="0">
+            <!-- Header -->
+            <ImageButton Source="person_default.png"
+                         BackgroundColor="{StaticResource Secondary}"
+                         WidthRequest="100" HeightRequest="100"
+                         CornerRadius="50" Margin="0, 30, 0, 10"
+                         BorderWidth="5" BorderColor="Black"
+                         IsEnabled="False"/>
+            <Button Text="Connection" ImageSource="login_icon.png"
+                    MaximumHeightRequest="20" Margin="15, 15, 15, 0"
+                    CornerRadius="5"/>
+        </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>
+
+        <VerticalStackLayout Grid.Row="2">
+            <!-- Footer -->
+            <Button Text="Déconnection" ImageSource="logout_icon.png"
+                    MaximumHeightRequest="20" Margin="15, 15, 15, 0"
+                    IsVisible="True"
+                    CornerRadius="5"/>
+        </VerticalStackLayout>
+    </Grid>
+
+</ContentView>
diff --git a/MCTG/Views/CustomFlyout.xaml.cs b/MCTG/Views/CustomFlyout.xaml.cs
new file mode 100644
index 0000000..5efde09
--- /dev/null
+++ b/MCTG/Views/CustomFlyout.xaml.cs
@@ -0,0 +1,9 @@
+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 bea9dbc..962178c 100644
--- a/MCTG/Views/CustomHeader.xaml
+++ b/MCTG/Views/CustomHeader.xaml
@@ -6,9 +6,10 @@
 
     <Grid ColumnDefinitions="*">
         
-        <Label Text="Mon app trop géniale"
-               FontAttributes="Bold" FontSize="24" TextColor="White"
-               Margin="20, 0, 0, 0" VerticalOptions="Center" HorizontalOptions="Start"/>
+        <Label Text="Ma cuisine trop géniale"
+               FontAttributes="Bold" FontSize="30"
+               TextColor="Black" Margin="20, 10, 0, 0" 
+               VerticalOptions="Start" HorizontalOptions="Start"/>
 
     </Grid>
 
diff --git a/MCTG/Views/Home.xaml b/MCTG/Views/Home.xaml
index 5a8ac84..becfa2c 100644
--- a/MCTG/Views/Home.xaml
+++ b/MCTG/Views/Home.xaml
@@ -5,13 +5,13 @@
              xmlns:local="clr-namespace:Views"
              x:Class="Views.Home">
 
-    <local:ContainerWithHeader>
-        <local:ContainerWithHeader.MyContent>
+    <local:ContainerBase>
+        <local:ContainerBase.MyContent>
 
             <ScrollView>
                 <StackLayout>
-                    <Label Text="Suggestions" TextColor="{StaticResource Secondary}"
-                           FontSize="32" FontAttributes="Bold" Padding="15"/>
+                    <Label Text="Suggestions" TextColor="Black"
+                           FontSize="24" Padding="15"/>
                     
                     <!-- Master recipes -->
                     <FlexLayout
@@ -39,7 +39,7 @@
                 </StackLayout>
             </ScrollView>
 
-        </local:ContainerWithHeader.MyContent>
-    </local:ContainerWithHeader>
+        </local:ContainerBase.MyContent>
+    </local:ContainerBase>
 
 </ContentPage>
diff --git a/MCTG/Views/Resources/Images/search_icon.svg b/MCTG/Views/Resources/Images/search_icon.svg
new file mode 100644
index 0000000..21d329f
--- /dev/null
+++ b/MCTG/Views/Resources/Images/search_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M796 935 533 672q-30 26-69.959 40.5T378 727q-108.162 0-183.081-75Q120 577 120 471t75-181q75-75 181.5-75t181 75Q632 365 632 471.15 632 514 618 554q-14 40-42 75l264 262-44 44ZM377 667q81.25 0 138.125-57.5T572 471q0-81-56.875-138.5T377 275q-82.083 0-139.542 57.5Q180 390 180 471t57.458 138.5Q294.917 667 377 667Z"/></svg>
\ No newline at end of file
diff --git a/MCTG/Views/Resources/Styles/Colors.xaml b/MCTG/Views/Resources/Styles/Colors.xaml
index 4f0fe34..399fb52 100644
--- a/MCTG/Views/Resources/Styles/Colors.xaml
+++ b/MCTG/Views/Resources/Styles/Colors.xaml
@@ -4,9 +4,10 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
-    <Color x:Key="Primary">#512BD4</Color>
-    <Color x:Key="Secondary">#D9D9D9</Color>
-    <Color x:Key="Tertiary">#2B0B98</Color>
+    <Color x:Key="Primary">#7d9e9f</Color>
+    <Color x:Key="Secondary">#e7caaf</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 7e0b54c..25327bc 100644
--- a/MCTG/Views/Resources/Styles/Styles.xaml
+++ b/MCTG/Views/Resources/Styles/Styles.xaml
@@ -7,7 +7,7 @@
     <!-- Personal styles -->
 
     <Style x:Key="boxView1" TargetType="BoxView">
-        <Setter Property="Color" Value="{StaticResource Secondary}"/>
+        <Setter Property="Color" Value="LightGray"/>
         <Setter Property="WidthRequest" Value="300"/>
         <Setter Property="HeightRequest" Value="200"/>
         <Setter Property="CornerRadius" Value="10"/>
@@ -15,10 +15,10 @@
     </Style>
 
     <Style x:Key="button1" TargetType="Button">
-        <Setter Property="TextColor" Value="{StaticResource Black}"/>
-        <Setter Property="BackgroundColor" Value="{StaticResource Secondary}"/>
+        <Setter Property="TextColor" Value="{StaticResource White}"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Tertiary}"/>
         <Setter Property="CornerRadius" Value="5"/>
-        <Setter Property="Margin" Value="10, 15"/>
+        <Setter Property="Margin" Value="15, 5"/>
     </Style>
 
     <!-- Built-in styles -->
diff --git a/MCTG/Views/Views.csproj b/MCTG/Views/Views.csproj
index ae0790d..36cc77a 100644
--- a/MCTG/Views/Views.csproj
+++ b/MCTG/Views/Views.csproj
@@ -54,13 +54,19 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <Compile Update="ContainerBase.xaml.cs">
+	    <DependentUpon>ContainerBase.xaml</DependentUpon>
+	  </Compile>
 	  <Compile Update="CustomHeader.xaml.cs">
 	    <DependentUpon>CustomHeader.xaml</DependentUpon>
 	  </Compile>
 	</ItemGroup>
 
 	<ItemGroup>
-	  <MauiXaml Update="ContainerWithHeader.xaml">
+	  <MauiXaml Update="ContainerBase.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
+	  <MauiXaml Update="CustomFlyout.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
 	  <MauiXaml Update="CustomHeader.xaml">