From 604d997b3c47673bf0850e8761ad3d044a08b72f Mon Sep 17 00:00:00 2001
From: Corentin LEMAIRE <colemaire>
Date: Sat, 8 Apr 2023 09:45:10 +0200
Subject: [PATCH] Finished Styles and Album Page

---
 Sources/Linaris/AlbumPage.xaml               | 69 ++++---------------
 Sources/Linaris/AppShell.xaml                |  2 +-
 Sources/Linaris/MainPage.xaml                | 70 ++++----------------
 Sources/Linaris/Resources/Styles/Styles.xaml | 59 ++++++++++++-----
 4 files changed, 69 insertions(+), 131 deletions(-)

diff --git a/Sources/Linaris/AlbumPage.xaml b/Sources/Linaris/AlbumPage.xaml
index ca10611..74e2caa 100644
--- a/Sources/Linaris/AlbumPage.xaml
+++ b/Sources/Linaris/AlbumPage.xaml
@@ -17,9 +17,7 @@
                              BackgroundColor="#404040">
             <VerticalStackLayout>
                 
-                <SearchBar Placeholder="Rechercher"
-                   BackgroundColor="White"
-                   Margin="10"/>
+                <SearchBar Style="{StaticResource SearchBar}"/>
 
                 <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                     <Grid.ColumnDefinitions>
@@ -31,101 +29,58 @@
                     </Grid.RowDefinitions>
                     <VerticalStackLayout Grid.Column="0">
                         <avatarview:SfAvatarView 
-                            ContentType="Custom"
-                            ImageSource="album9.jpg"
-                            VerticalOptions="Start"
-                            HorizontalOptions="Center"   
-                            HeightRequest="150"
-                            WidthRequest="150"
-                            CornerRadius="75"
-                            BackgroundColor="Transparent"
-                            Stroke="Transparent"
-                            Margin="10"/>
+                            Style="{StaticResource pdp}"
+                            ImageSource="album9.jpg"/>
                         <Label Text="Night Visions"
-                                HorizontalOptions="Center"
-                                FontSize="35"
-                                TextColor="White"
-                                Margin="5">
+                                Style="{StaticResource Titre}">
                         </Label>
                         <Label Text="Description"
-                                HorizontalOptions="Center"
-                                FontSize="20"
-                                TextColor="White">
+                               Style="{StaticResource SousTitre}">
                         </Label>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 1"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 2"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 3"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 4"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 5"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame CornerRadius="10"
-                                   Padding="15"
-                                   Margin="10"
-                                   BorderColor="Transparent"
-                                   BackgroundColor="CornflowerBlue"
-                                   HorizontalOptions="Fill">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 6"
                                    FontSize="20"
                                    TextColor="white"
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-                        <Frame Style="Song">
+                        <Frame Style="{StaticResource Song}">
                             <Label Text="Morceau 7"
                                    FontSize="20"
                                    TextColor="white"
diff --git a/Sources/Linaris/AppShell.xaml b/Sources/Linaris/AppShell.xaml
index d7d78a5..902faa0 100644
--- a/Sources/Linaris/AppShell.xaml
+++ b/Sources/Linaris/AppShell.xaml
@@ -8,7 +8,7 @@
 
     <ShellContent
         Title="Linaris"
-        ContentTemplate="{DataTemplate local:AlbumPage}"
+        ContentTemplate="{DataTemplate local:MainPage}"
         Route="AlbumPage"
         Shell.NavBarIsVisible="False"/>
 
diff --git a/Sources/Linaris/MainPage.xaml b/Sources/Linaris/MainPage.xaml
index e004afa..78f4aea 100644
--- a/Sources/Linaris/MainPage.xaml
+++ b/Sources/Linaris/MainPage.xaml
@@ -16,10 +16,7 @@
             <VerticalStackLayout>
 
 
-                <SearchBar Placeholder="Rechercher"
-                   BackgroundColor="White"
-                   HorizontalOptions="Fill"
-                   Margin="10"/>
+                <SearchBar Style="{StaticResource SearchBar}"/>
 
                 <FlexLayout Direction="Row"
                 AlignItems="Start"
@@ -46,10 +43,7 @@
                             SemanticProperties.Description="Album 2"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -60,10 +54,7 @@
                             SemanticProperties.Description="Album 3"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -74,10 +65,7 @@
                             SemanticProperties.Description="Album 4"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -88,10 +76,7 @@
                             SemanticProperties.Description="Album 5"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -102,10 +87,7 @@
                             SemanticProperties.Description="Album 6"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -116,10 +98,7 @@
                             SemanticProperties.Description="Album 7"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -130,10 +109,7 @@
                             SemanticProperties.Description="Album 8"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Album"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Album" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -144,10 +120,7 @@
                             SemanticProperties.Description="Album 9"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Night Visions"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Night Visions" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -158,10 +131,7 @@
                             SemanticProperties.Description="Album 10"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Smoke &amp; Mirrors"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Smoke &amp; Mirrors" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -172,10 +142,7 @@
                             SemanticProperties.Description="Album 11"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Evolve"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Evolve" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -186,10 +153,7 @@
                             SemanticProperties.Description="Album 12"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Origins"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Origins" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
@@ -200,10 +164,7 @@
                             SemanticProperties.Description="Album 13"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Mercury Act 1"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Mercury Act 1" Style="{StaticResource Titre}">
                         </Label>
                     </VerticalStackLayout>
 
@@ -213,10 +174,7 @@
                             SemanticProperties.Description="Album 14"
                             HeightRequest="175"
                             HorizontalOptions="Center"/>
-                        <Label Text="Mercury Act 2"
-                               FontSize="30"
-                               TextColor="White"
-                               HorizontalOptions="Center">
+                        <Label Text="Mercury Act 2" Style="{StaticResource Titre}">
 
                         </Label>
                     </VerticalStackLayout>
diff --git a/Sources/Linaris/Resources/Styles/Styles.xaml b/Sources/Linaris/Resources/Styles/Styles.xaml
index aaf4016..071f3f3 100644
--- a/Sources/Linaris/Resources/Styles/Styles.xaml
+++ b/Sources/Linaris/Resources/Styles/Styles.xaml
@@ -36,23 +36,54 @@
         </VerticalStackLayout>
     </ControlTemplate>
 
-    <ControlTemplate x:Key="songs">
-        <Frame CornerRadius="10"
-                Padding="15"
-                Margin="10"
-                BorderColor="Transparent"
-                BackgroundColor="CornflowerBlue"
-                HorizontalOptions="Fill">
-        </Frame>
-    </ControlTemplate>
-
     <Style x:Key="Song" TargetType="Frame">
-        <Setter Property="ControlTemplate" Value="{StaticResource songs}"></Setter>
+        <Setter Property="BackgroundColor" Value="CornflowerBlue"></Setter>
+        <Setter Property="CornerRadius" Value="10"></Setter>
+        <Setter Property="Padding" Value="15"></Setter>
+        <Setter Property="Margin" Value="10"></Setter>
+        <Setter Property="BorderColor" Value="Transparent"></Setter>
+        <Setter Property="HorizontalOptions" Value="Fill"></Setter>
+    </Style>
+
+    <Style x:Key="Titre" TargetType="Label">
+        <Setter Property="HorizontalOptions" Value="Center"></Setter>
+        <Setter Property="FontSize" Value="35"></Setter>
+        <Setter Property="TextColor" Value="White"></Setter>
+        <Setter Property="Margin" Value="5"></Setter>
+    </Style>
+
+    <Style x:Key="SousTitre" TargetType="Label">
+        <Setter Property="HorizontalOptions" Value="Center"></Setter>
+        <Setter Property="FontSize" Value="20"></Setter>
+        <Setter Property="TextColor" Value="White"></Setter>
+        <Setter Property="Margin" Value="5"></Setter>
+    </Style>
+
+    <Style x:Key="SearchBar" TargetType="SearchBar">
+        <Setter Property="Placeholder" Value="Rechercher"></Setter>
+        <Setter Property="BackgroundColor" Value="White"></Setter>
+        <Setter Property="Margin" Value="10"></Setter>
+        <Setter Property="Keyboard" Value="Text"></Setter>
+        <Setter Property="IsTextPredictionEnabled" Value="True"></Setter>
     </Style>
 
     <Style x:Key="FlyoutStyle" TargetType="ContentView">
         <Setter Property="ControlTemplate" Value="{StaticResource flyout}"></Setter>
     </Style>
+
+    <Style x:Key="pdp" TargetType="avatarview:SfAvatarView">
+        <Setter Property="ContentType" Value="Custom"></Setter>
+        <Setter Property="VerticalOptions" Value="Start"></Setter>
+        <Setter Property="HorizontalOptions" Value="Center"></Setter>
+        <Setter Property="ContentType" Value="Custom"></Setter>
+        <Setter Property="ContentType" Value="Custom"></Setter>
+        <Setter Property="HeightRequest" Value="150"></Setter>
+        <Setter Property="WidthRequest" Value="150"></Setter>
+        <Setter Property="CornerRadius" Value="75"></Setter>
+        <Setter Property="BackgroundColor" Value="Transparent"></Setter>
+        <Setter Property="Stroke" Value="Transparent"></Setter>
+        <Setter Property="Margin" Value="10"></Setter>
+    </Style>
     
     <Style TargetType="ActivityIndicator">
         <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
@@ -179,12 +210,6 @@
         </Setter>
     </Style>
 
-    <Style TargetType="Frame">
-        <Setter Property="HasShadow" Value="False" />
-        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
-        <Setter Property="CornerRadius" Value="8" />
-    </Style>
-
     <Style TargetType="ImageButton">
         <Setter Property="Opacity" Value="1" />
         <Setter Property="BorderColor" Value="Transparent"/>