From 41ba027ab5afe98812beccb8b4ef1e624add9080 Mon Sep 17 00:00:00 2001
From: Corentin LEMAIRE <colemaire>
Date: Wed, 5 Apr 2023 15:27:07 +0200
Subject: [PATCH] End the Album Page

---
 Sources/Linaris/AlbumPage.xaml               | 128 +++++++++++++++----
 Sources/Linaris/AlbumPage.xaml.cs            |   9 ++
 Sources/Linaris/MainPage.xaml                |   3 +-
 Sources/Linaris/Resources/Styles/Styles.xaml |  42 +++++-
 4 files changed, 151 insertions(+), 31 deletions(-)

diff --git a/Sources/Linaris/AlbumPage.xaml b/Sources/Linaris/AlbumPage.xaml
index 6e6abf3..b82d7ad 100644
--- a/Sources/Linaris/AlbumPage.xaml
+++ b/Sources/Linaris/AlbumPage.xaml
@@ -12,36 +12,38 @@
             <ColumnDefinition Width="6*"/>
         </Grid.ColumnDefinitions>
         <VerticalStackLayout BackgroundColor="black" Spacing="20" Padding="0,20,0,0">
-            <Label Text="Home"
+            <Button Text="Home"
+                    x:Name="bouton"
                    FontSize="30"
                    TextColor="White"
                    HorizontalOptions="Center"
-                   VerticalOptions="Start">
-            </Label>
-            <Label Text="Playlist"
+                   VerticalOptions="Start"
+                   Clicked="Button_Clicked">
+            </Button>
+            <Button Text="Playlist"
                    FontSize="30"
                    TextColor="White"
                    HorizontalOptions="Center"
                    VerticalOptions="Start">
-            </Label>
-            <Label Text="Search"
+            </Button>
+            <Button Text="Search"
                    FontSize="30"
                    TextColor="White"
                    HorizontalOptions="Center"
                    VerticalOptions="Start">
-            </Label>
-            <Label Text="Favorites"
+            </Button>
+            <Button Text="Favorites"
                    FontSize="30"
                    TextColor="White"
                    HorizontalOptions="Center"
                    VerticalOptions="Start">
-            </Label>
-            <Label Text="Log out"
+            </Button>
+            <Button Text="Log out"
                    FontSize="30"
                    TextColor="White"
                    HorizontalOptions="Center"
                    VerticalOptions="End">
-            </Label>
+            </Button>
         </VerticalStackLayout>
 
         <ScrollView Grid.Column="1"
@@ -50,7 +52,6 @@
                 
                 <SearchBar Placeholder="Rechercher"
                    BackgroundColor="White"
-                   HorizontalOptions="FillAndExpand"
                    Margin="10"/>
 
                 <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
@@ -58,6 +59,9 @@
                         <ColumnDefinition Width="6*"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="1000*"/>
+                    </Grid.RowDefinitions>
                     <VerticalStackLayout Grid.Column="0">
                         <avatarview:SfAvatarView 
                             ContentType="Custom"
@@ -81,22 +85,96 @@
                                 FontSize="20"
                                 TextColor="White">
                         </Label>
-                        <FlexLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
-                            <Frame CornerRadius="10"
-                                   HasShadow="False"
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
                                    BorderColor="Transparent"
-                                   HorizontalOptions="Fill"
-                                   VerticalOptions="Fill"
-                                   BackgroundColor="blue"
-                                   HeightRequest="40">
-                                <HorizontalStackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
-                                    <Label Text="test"/>
-                                </HorizontalStackLayout>
-                            </Frame>
-                        </FlexLayout>
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 1"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 2"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 3"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 4"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 5"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 6"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+                        <Frame CornerRadius="10"
+                                   Padding="15"
+                                   Margin="10"
+                                   BorderColor="Transparent"
+                                   BackgroundColor="CornflowerBlue"
+                                   HorizontalOptions="Fill">
+                            <Label Text="Morceau 7"
+                                   FontSize="20"
+                                   TextColor="white"
+                                   HorizontalTextAlignment="Center"/>
+                        </Frame>
+
+
                     </VerticalStackLayout>
                     <ScrollView Grid.Column="1"
-                                VerticalOptions="Fill">
+                                VerticalOptions="Fill"
+                                BackgroundColor="gray">
                         <FlexLayout Direction="Row"
                             AlignItems="Start"
                             JustifyContent="SpaceAround"
diff --git a/Sources/Linaris/AlbumPage.xaml.cs b/Sources/Linaris/AlbumPage.xaml.cs
index adde9b9..a5f9fe4 100644
--- a/Sources/Linaris/AlbumPage.xaml.cs
+++ b/Sources/Linaris/AlbumPage.xaml.cs
@@ -6,4 +6,13 @@ public partial class AlbumPage : ContentPage
 	{
 		InitializeComponent();
 	}
+
+    async void Button_Clicked(object sender, EventArgs e)
+    {
+        var random = new Random();
+        var color = String.Format("#{0:X6}", random.Next(0x1000000));
+        bouton.BackgroundColor = Color.FromArgb(color);
+        await bouton.RelRotateTo(360, 1000);
+        bouton.Rotation = 0;
+    }
 }
\ No newline at end of file
diff --git a/Sources/Linaris/MainPage.xaml b/Sources/Linaris/MainPage.xaml
index 2122885..3c16c54 100644
--- a/Sources/Linaris/MainPage.xaml
+++ b/Sources/Linaris/MainPage.xaml
@@ -3,8 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Linaris.MainPage"
              Title="Home">
-
-
+    
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"/>
diff --git a/Sources/Linaris/Resources/Styles/Styles.xaml b/Sources/Linaris/Resources/Styles/Styles.xaml
index 050b36c..28e1697 100644
--- a/Sources/Linaris/Resources/Styles/Styles.xaml
+++ b/Sources/Linaris/Resources/Styles/Styles.xaml
@@ -4,10 +4,46 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
+    <DataTemplate x:Key="flyout">
+        <VerticalStackLayout BackgroundColor="black" Spacing="20" Padding="0,20,0,0">
+            <Button Text="Home"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Button>
+            <Button Text="Playlist"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Button>
+            <Button Text="Search"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Button>
+            <Button Text="Favorites"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Start">
+            </Button>
+            <Button Text="Log out"
+                   FontSize="30"
+                   TextColor="White"
+                   HorizontalOptions="Center"
+                   VerticalOptions="End">
+            </Button>
+        </VerticalStackLayout>
+    </DataTemplate>
+    
     <Style TargetType="ActivityIndicator">
         <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
     </Style>
 
+
     <Style TargetType="IndicatorView">
         <Setter Property="IndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}"/>
         <Setter Property="SelectedIndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}"/>
@@ -24,14 +60,12 @@
     </Style>
 
     <Style TargetType="Button">
-        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Primary}}" />
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Blue200Accent}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Blue200Accent}, Dark={StaticResource White}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="CornerRadius" Value="8"/>
         <Setter Property="Padding" Value="14,10"/>
-        <Setter Property="MinimumHeightRequest" Value="44"/>
-        <Setter Property="MinimumWidthRequest" Value="44"/>
         <Setter Property="VisualStateManager.VisualStateGroups">
             <VisualStateGroupList>
                 <VisualStateGroup x:Name="CommonStates">