From e783321960f01dff6844c111fe593c4a80d36559 Mon Sep 17 00:00:00 2001
From: Louis DUFOUR <Louis.DUFOUR@etu.uca.fr>
Date: Wed, 13 Sep 2023 23:11:46 +0200
Subject: [PATCH] Update (Front-End): Star up with icon on page detail

---
 src/BookApp/Pages/DetailBook.xaml            | 89 ++++++++++++++------
 src/BookApp/Resources/Images/folder.svg      | 10 +++
 src/BookApp/Resources/Images/person.svg      | 10 +++
 src/BookApp/Resources/Images/plus_circle.svg |  4 +
 4 files changed, 89 insertions(+), 24 deletions(-)
 create mode 100644 src/BookApp/Resources/Images/folder.svg
 create mode 100644 src/BookApp/Resources/Images/person.svg
 create mode 100644 src/BookApp/Resources/Images/plus_circle.svg

diff --git a/src/BookApp/Pages/DetailBook.xaml b/src/BookApp/Pages/DetailBook.xaml
index 8bdc52f..1b3fd77 100644
--- a/src/BookApp/Pages/DetailBook.xaml
+++ b/src/BookApp/Pages/DetailBook.xaml
@@ -2,6 +2,7 @@
 <ContentPage
 	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
 	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+	xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
     x:Class="BookApp.Pages.DetailBook">
     <Shell.BackButtonBehavior>
         <BackButtonBehavior 
@@ -23,13 +24,22 @@
                 <BoxView HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
                 <Grid RowDefinitions="auto">
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="125"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
                     <Image Grid.Column="0" Source="dotnet_bot"/>
                     <StackLayout Grid.Column="1">
-                        <Label Text="La horde du coutrevant"/>
-                        <!-- Gestion Star TODO -->
+                        <Label FontAttributes="Bold" FontSize="20" Text="La horde du coutrevant"/>
+                        <Grid RowDefinitions="auto" VerticalOptions="EndAndExpand">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"/>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+                            <StackLayout x:Name="StarLayout" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
+                                <!-- Les étoiles seront ajoutées ici via le code-behind -->
+                            </StackLayout>
+                            <Label x:Name="RatingLabel" Grid.Column="1" FontSize="Medium" HorizontalOptions="CenterAndExpand"/>
+                        </Grid>
                     </StackLayout>
                 </Grid>
                 <BoxView Margin="25,10,0,0" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
@@ -91,32 +101,63 @@
                     <Label Grid.Column="1" HorizontalTextAlignment="End" Text="10 aout 2023"/>
                 </Grid>
                 <BoxView Margin="25,10,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
-                <Grid>
-                    <Image Grid.Column="0" Source="..."/>
-                    <Label Text="déplacer le livre"/>
+                <Grid RowDefinitions="auto" Margin="25,0,20,0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="25"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Image Grid.Column="0" HeightRequest="25"
+                        WidthRequest="25" Source="folder.svg">
+                        <Image.Behaviors>
+                            <toolkit:IconTintColorBehavior TintColor="Red" />
+                        </Image.Behaviors>
+                    </Image>
+                    <Label Margin="10,0,0,0" VerticalOptions="Center" Grid.Column="1" TextColor="Red" Text="Déplacer le livre"/>
                 </Grid>
-                <BoxView Margin="25,0,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
-                <Grid>
-                    <Image Grid.Column="0" Source="..."/>
-                    <Label Text="Ajouter à la liste A lire plus tard"/>
+                <BoxView Margin="25,10,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
+                <Grid RowDefinitions="auto" Margin="25,0,20,0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="25"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Image Grid.Column="0" HeightRequest="25"
+                        WidthRequest="25" Source="plus_circle.svg">
+                        <Image.Behaviors>
+                            <toolkit:IconTintColorBehavior TintColor="Red" />
+                        </Image.Behaviors>
+                    </Image>
+                    <Label Margin="10,0,0,0" VerticalOptions="Center" Grid.Column="1" TextColor="Red" Text="Ajouter à la liste à lire plus tard"/>
                 </Grid>
-                <BoxView Margin="25,0,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
-                <Grid>
-                    <Image Grid.Column="0" Source="..."/>
-                    <Label Text="changer le statu de lecture"/>
+                <BoxView Margin="25,10,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
+                <Grid RowDefinitions="auto" Margin="25,0,20,0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="25"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Image Grid.Column="0" HeightRequest="25"
+                        WidthRequest="25" Source="eyeglasses.svg">
+                        <Image.Behaviors>
+                            <toolkit:IconTintColorBehavior TintColor="Red" />
+                        </Image.Behaviors>
+                    </Image>
+                    <Label Margin="10,0,0,0" VerticalOptions="Center" Grid.Column="1" TextColor="Red" Text="Changer le statut de lecture"/>
                 </Grid>
-                <BoxView Margin="25,0,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
-                <Grid>
-                    <Image Grid.Column="0" Source="..."/>
-                    <Label Text="préter le livre"/>
+                <BoxView Margin="25,10,0,10" HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="End" />
+                <Grid RowDefinitions="auto" Margin="25,0,20,20">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="25"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+                    <Image Grid.Column="0" HeightRequest="25"
+                        WidthRequest="25" Source="person.svg">
+                        <Image.Behaviors>
+                            <toolkit:IconTintColorBehavior TintColor="Red" />
+                        </Image.Behaviors>
+                    </Image>
+                    <Label Margin="10,0,0,0" VerticalOptions="Center" Grid.Column="1" TextColor="Red" Text="Prêter le livre"/>
                 </Grid>
+                <BoxView HeightRequest="1" BackgroundColor="LightGray" VerticalOptions="EndAndExpand" />
                 <!-- Gestion Star TODO -->
-                <StackLayout>
-                    <StackLayout x:Name="StarLayout" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
-                        <!-- Les étoiles seront ajoutées ici via le code-behind -->
-                    </StackLayout>
-                    <Label x:Name="RatingLabel" Grid.Column="1" FontSize="Medium" HorizontalOptions="CenterAndExpand"/>
-                </StackLayout>
             </StackLayout>
         </ScrollView>
     </ContentPage.Content>
diff --git a/src/BookApp/Resources/Images/folder.svg b/src/BookApp/Resources/Images/folder.svg
new file mode 100644
index 0000000..57c3d84
--- /dev/null
+++ b/src/BookApp/Resources/Images/folder.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2124_88345)">
+<path d="M4.67969 24.4453H24.2852C26.3828 24.4453 27.6133 23.2266 27.6133 20.8125V8.77734C27.6133 6.36328 26.3711 5.14453 23.9336 5.14453H12.6836C11.8867 5.14453 11.4062 4.95703 10.8203 4.45312L10.1055 3.86719C9.33203 3.21094 8.73438 3 7.57422 3H4.23438C2.18359 3 1 4.17188 1 6.52734V20.8125C1 23.2383 2.23047 24.4453 4.67969 24.4453ZM4.70312 22.5586C3.53125 22.5586 2.88672 21.9375 2.88672 20.7188V6.63281C2.88672 5.47266 3.49609 4.875 4.62109 4.875H7.09375C7.86719 4.875 8.33594 5.07422 8.93359 5.57812L9.64844 6.17578C10.4102 6.80859 11.0312 7.03125 12.1914 7.03125H23.8984C25.0586 7.03125 25.7266 7.66406 25.7266 8.88281V20.7305C25.7266 21.9375 25.0586 22.5586 23.8984 22.5586H4.70312ZM2.14844 11.3203H26.4531V9.55078H2.14844V11.3203Z" fill="black" fill-opacity="0.85"/>
+</g>
+<defs>
+<clipPath id="clip0_2124_88345">
+<rect width="26.6133" height="21.5977" fill="white" transform="translate(1 3)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/BookApp/Resources/Images/person.svg b/src/BookApp/Resources/Images/person.svg
new file mode 100644
index 0000000..60288d8
--- /dev/null
+++ b/src/BookApp/Resources/Images/person.svg
@@ -0,0 +1,10 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2124_45739)">
+<path d="M6.88867 24.7282H21.6192C23.5645 24.7282 24.4903 24.1423 24.4903 22.8532C24.4903 19.7829 20.6114 15.3415 14.2598 15.3415C7.89649 15.3415 4.01758 19.7829 4.01758 22.8532C4.01758 24.1423 4.94336 24.7282 6.88867 24.7282ZM6.33789 22.9587C6.0332 22.9587 5.9043 22.8767 5.9043 22.6306C5.9043 20.697 8.88086 17.111 14.2598 17.111C19.627 17.111 22.6035 20.697 22.6035 22.6306C22.6035 22.8767 22.4864 22.9587 22.1817 22.9587H6.33789ZM14.2598 13.8767C17.0488 13.8767 19.3223 11.4041 19.3223 8.38062C19.3223 5.38062 17.0606 3.02515 14.2598 3.02515C11.4824 3.02515 9.19727 5.42749 9.19727 8.40406C9.19727 11.4158 11.4707 13.8767 14.2598 13.8767ZM14.2598 12.1072C12.5488 12.1072 11.084 10.4783 11.084 8.40406C11.084 6.36499 12.5254 4.79468 14.2598 4.79468C16.0059 4.79468 17.4356 6.32984 17.4356 8.38062C17.4356 10.4548 15.9824 12.1072 14.2598 12.1072Z" fill="black" fill-opacity="0.85"/>
+</g>
+<defs>
+<clipPath id="clip0_2124_45739">
+<rect width="20.4727" height="21.7148" fill="white" transform="translate(4.01758 3.02515)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/BookApp/Resources/Images/plus_circle.svg b/src/BookApp/Resources/Images/plus_circle.svg
new file mode 100644
index 0000000..0e04d4e
--- /dev/null
+++ b/src/BookApp/Resources/Images/plus_circle.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9531 25.9062C20.4922 25.9062 25.9062 20.4805 25.9062 13.9531C25.9062 7.41406 20.4805 2 13.9414 2C7.41406 2 2 7.41406 2 13.9531C2 20.4805 7.42578 25.9062 13.9531 25.9062ZM13.9531 23.9141C8.42188 23.9141 4.00391 19.4844 4.00391 13.9531C4.00391 8.42188 8.41016 3.99219 13.9414 3.99219C19.4727 3.99219 23.9141 8.42188 23.9141 13.9531C23.9141 19.4844 19.4844 23.9141 13.9531 23.9141Z" fill="black" fill-opacity="0.85"/>
+<path d="M8.51562 13.9531C8.51562 14.5273 8.91406 14.9141 9.51172 14.9141H12.957V18.3711C12.957 18.957 13.3555 19.3672 13.9297 19.3672C14.5156 19.3672 14.9258 18.9688 14.9258 18.3711V14.9141H18.3828C18.9688 14.9141 19.3789 14.5273 19.3789 13.9531C19.3789 13.3672 18.9688 12.957 18.3828 12.957H14.9258V9.51172C14.9258 8.91406 14.5156 8.50391 13.9297 8.50391C13.3555 8.50391 12.957 8.91406 12.957 9.51172V12.957H9.51172C8.91406 12.957 8.51562 13.3672 8.51562 13.9531Z" fill="black" fill-opacity="0.85"/>
+</svg>