Work on flyout header/footer

kfrancis · May 25, 2023 · eebb524 · eebb524
1 parent b0d7520
commit eebb524
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 21 deletions.
diff --git a/src/NuSocial/AppShell.xaml b/src/NuSocial/AppShell.xaml
@@ -3,6 +3,7 @@
     x:Class="NuSocial.AppShell"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:controls="clr-namespace:NuSocial.Controls"
     xmlns:fa="clr-namespace:FontAwesome"
     xmlns:loc="clr-namespace:NuSocial.Helpers"
     xmlns:local="clr-namespace:NuSocial"
@@ -18,6 +19,10 @@
         <toolkit:StatusBarBehavior StatusBarColor="{OnPlatform iOS='#00FFFFFF', Default='#FF373063'}" StatusBarStyle="LightContent" />
     </Shell.Behaviors>
 
+    <Shell.FlyoutHeader>
+        <controls:FlyoutHeader />
+    </Shell.FlyoutHeader>
+
     <ShellContent
         ContentTemplate="{DataTemplate views:StartView}"
         FlyoutItemIsVisible="False"
@@ -149,29 +154,53 @@
 
     <Shell.FlyoutFooterTemplate>
         <DataTemplate>
-            <Grid
-                Padding="20"
-                RowDefinitions="Auto,50"
-                RowSpacing="10"
-                VerticalOptions="End">
-                <!--  Version  -->
-                <HorizontalStackLayout HorizontalOptions="Center" Spacing="10">
+            <VerticalStackLayout VerticalOptions="EndAndExpand">
+                <Grid Margin="10,10,10,20">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width=".5*" />
+                        <ColumnDefinition Width=".5*" />
+                    </Grid.ColumnDefinitions>
                     <Label
-                        FontSize="{OnIdiom Phone=14,
-                                           Tablet=16}"
+                        Grid.Row="0"
+                        Grid.Column="0"
+                        FontFamily="FontAwesomeSolid"
+                        FontSize="25"
                         HorizontalOptions="Center"
-                        Text="{Binding AppVersion}"
+                        Text="{x:Static fa:FontAwesomeIcons.Lightbulb}"
                         TextColor="{DynamicResource White}" />
-                </HorizontalStackLayout>
+                    <Label
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        FontFamily="FontAwesomeSolid"
+                        FontSize="25"
+                        HorizontalOptions="Center"
+                        Text="{x:Static fa:FontAwesomeIcons.Qrcode}"
+                        TextColor="{DynamicResource White}" />
+                </Grid>
+                <Grid
+                    Padding="20"
+                    RowDefinitions="Auto,50"
+                    RowSpacing="10"
+                    VerticalOptions="End">
+                    <!--  Version  -->
+                    <HorizontalStackLayout HorizontalOptions="Center" Spacing="10">
+                        <Label
+                            FontSize="{OnIdiom Phone=14,
+                                               Tablet=16}"
+                            HorizontalOptions="Center"
+                            Text="{Binding AppVersion}"
+                            TextColor="{DynamicResource White}" />
+                    </HorizontalStackLayout>
 
-                <!--  Logout  -->
-                <Button
-                    Grid.Row="1"
-                    Command="{Binding LogoutPressedCommand}"
-                    Style="{DynamicResource SecondaryActionButtonStyle}"
-                    Text="{loc:Translate Logout}"
-                    TextColor="{DynamicResource Black}" />
-            </Grid>
+                    <!--  Logout  -->
+                    <Button
+                        Grid.Row="1"
+                        Command="{Binding LogoutPressedCommand}"
+                        Style="{DynamicResource SecondaryActionButtonStyle}"
+                        Text="{loc:Translate Logout}"
+                        TextColor="{DynamicResource Black}" />
+                </Grid>
+            </VerticalStackLayout>
         </DataTemplate>
     </Shell.FlyoutFooterTemplate>
 </Shell>
diff --git a/src/NuSocial/Controls/FlyoutHeader.xaml b/src/NuSocial/Controls/FlyoutHeader.xaml
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView
+    x:Class="NuSocial.Controls.FlyoutHeader"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:viewModels="clr-namespace:NuSocial.ViewModels;assembly=NuSocial.Core"
+    x:Name="root"
+    Padding="15,15,15,5"
+    BackgroundColor="Transparent">
+    <VerticalStackLayout>
+        <Grid Margin="0,0,0,15" RowSpacing="5">
+            <Grid.RowDefinitions>
+                <RowDefinition Height=".4*" />
+                <RowDefinition Height=".2*" />
+                <RowDefinition Height=".2*" />
+                <RowDefinition Height=".2*" />
+                <RowDefinition Height=".1*" />
+            </Grid.RowDefinitions>
+            <Image
+                Grid.Row="0"
+                Grid.Column="0"
+                HeightRequest="50"
+                HorizontalOptions="Start"
+                Source="https://pbs.twimg.com/profile_images/645601415973355521/No1ZTxyn_400x400.jpg"
+                WidthRequest="50">
+                <Image.Clip>
+                    <EllipseGeometry
+                        Center="25,25"
+                        RadiusX="25"
+                        RadiusY="25" />
+                </Image.Clip>
+            </Image>
+            <Label
+                Grid.Row="1"
+                Grid.Column="0"
+                FontFamily="Bold"
+                FontSize="{DynamicResource LargeFontSize}"
+                Text="Siddharth Singh"
+                TextColor="{DynamicResource White}" />
+            <Label
+                Grid.Row="2"
+                Grid.Column="0"
+                Text="@Sid_Singh89"
+                TextColor="{DynamicResource White}" />
+            <Grid Grid.Row="3" Grid.Column="0">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width=".5*" />
+                    <ColumnDefinition Width=".5*" />
+                </Grid.ColumnDefinitions>
+                <HorizontalStackLayout
+                    Grid.Row="0"
+                    Grid.Column="0"
+                    Spacing="5">
+                    <Label
+                        FontFamily="Bold"
+                        FontSize="{DynamicResource SmallFontSize}"
+                        Text="{Binding FollowingCount, Source={x:Reference root}}"
+                        TextColor="{DynamicResource White}" />
+                    <Label
+                        FontSize="{DynamicResource SmallFontSize}"
+                        Text="Following"
+                        TextColor="{DynamicResource White}" />
+                </HorizontalStackLayout>
+                <HorizontalStackLayout
+                    Grid.Row="0"
+                    Grid.Column="1"
+                    Spacing="5">
+                    <Label
+                        FontFamily="Bold"
+                        FontSize="{DynamicResource SmallFontSize}"
+                        Text="{Binding FollowerCount, Source={x:Reference root}}"
+                        TextColor="{DynamicResource White}" />
+                    <Label
+                        FontSize="{DynamicResource SmallFontSize}"
+                        Text="Followers"
+                        TextColor="{DynamicResource White}" />
+                </HorizontalStackLayout>
+            </Grid>
+        </Grid>
+        <BoxView
+            Margin="0"
+            Style="{DynamicResource Horizontal1ptLineStyle}"
+            VerticalOptions="End" />
+    </VerticalStackLayout>
+
+</ContentView>
diff --git a/src/NuSocial/Controls/FlyoutHeader.xaml.cs b/src/NuSocial/Controls/FlyoutHeader.xaml.cs
@@ -0,0 +1,24 @@
+using BindableProps;
+using CommunityToolkit.Mvvm.DependencyInjection;
+
+namespace NuSocial.Controls;
+
+/// <summary>
+/// Flyout header control
+/// </summary>
+public partial class FlyoutHeader : ContentView
+{
+	/// <summary>
+	/// Constructor
+	/// </summary>
+	public FlyoutHeader()
+	{
+		InitializeComponent();
+	}
+
+	[BindableProp]
+	private int _followerCount;
+
+	[BindableProp]
+	private int _followingCount;
+}
diff --git a/src/NuSocial/MauiProgram.cs b/src/NuSocial/MauiProgram.cs
@@ -145,8 +145,8 @@ private static ContainerBuilder GetAutofacContainerBuilder(IServiceCollection se
         var db = new LocalStorage();
         services.AddSingleton<IDatabase>(db);
         services.AddSingleton<ICustomDispatcher, MauiDispatcher>();
-        //services.AddSingleton<INostrService>(new TestNostrService());
-        services.AddSingleton<INostrService>(new NostrService(db));
+        services.AddSingleton<INostrService>(new TestNostrService());
+        //services.AddSingleton<INostrService>(new NostrService(db));
 
         services.AddLocalization();
         services.AddLogging(logging => logging.AddSerilog());

diff --git a/src/NuSocial/NuSocial.csproj b/src/NuSocial/NuSocial.csproj
@@ -154,6 +154,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<MauiXaml Update="Controls\FlyoutHeader.xaml">
+		  <Generator>MSBuild:Compile</Generator>
+		</MauiXaml>
 		<MauiXaml Update="Controls\MessagePreviewItem.xaml">
 		  <Generator>MSBuild:Compile</Generator>
 		</MauiXaml>