Skip to content

Commit

Permalink
💄 Mobile UI - V3 Profile - Partial Implementation (#661)
Browse files Browse the repository at this point in the history 
* New v3 Intial Layout

* Binding to IsStaff and Ranking

* Design cleanup

* Tweak profile stats control

---------

Co-authored-by: Zachary Keeping <[email protected]>
  • Loading branch information
@tkapa @zacharykeeping
tkapa and zacharykeeping authored Feb 12, 2024
1 parent 4ded1de commit 26000e0
Show file tree
Hide file tree
Showing 8 changed files with 274 additions and 103 deletions.
296 changes: 210 additions & 86 deletions src/MobileUI/Controls/ProfileStats.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,216 @@
<?xml version="1.0" encoding="utf-8" ?>
<Grid
<?xml version="1.0" encoding="utf-8"?>

<Border
HeightRequest="270"
Margin="0,10"
BackgroundColor="{StaticResource Background}"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SSW.Rewards.Mobile.Controls.ProfileStats"
xmlns:controls="clr-namespace:SSW.Rewards.Mobile.Controls">

<controls:RewardsProgress
Progress="{Binding Progress}"/>

<!--
RewardsPregress is not taken into account when the size of ProfileStats is calculates.
So we need this placeholder. The bottom padding is 80px where 60px is the width of the progress bar
and 20 is the actual padding-->
<Label Margin="0,0,0,280"/>

<HorizontalStackLayout
Spacing="6"
Padding="0,0,0,0"
Margin="0,0,0,200"
IsVisible="{Binding ShowBalance}"
VerticalOptions="Center"
HorizontalOptions="Center">
<Label
HorizontalOptions="End"
Text="⭐"
FontSize="Small"
TextColor="{StaticResource primary}" />
<Label
Text="{Binding Balance, StringFormat='{0:n0}'}"
FontSize="Small"
TextColor="{StaticResource primary}" />
<Label
HorizontalOptions="End"
Text="⭐"
FontSize="Small"
TextColor="{StaticResource primary}" />
</HorizontalStackLayout>

<Label
Margin="0,0,0,140"
TextColor="{StaticResource HeadingColor}"
FontSize="Large"
Text="{Binding Points, StringFormat='{0:n0}'}"
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"/>
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:converters="clr-namespace:SSW.Rewards.Mobile.Converters"
x:Class="SSW.Rewards.Mobile.Controls.ProfileStats">
<Border.Resources>
<toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter" />
<converters:StaffToTextConverter x:Key="StaffToText" />
</Border.Resources>
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<Grid
RowDefinitions="120, 50, *"
RowSpacing="10"
Padding="0,10">
<VerticalStackLayout Grid.Row="0">
<toolkit:AvatarView ImageSource="{Binding ProfilePic}"
WidthRequest="120"
HeightRequest="120"
CornerRadius="60"
BorderWidth="2" />

<Label
Margin="0,150,0,0"
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding Name}"
TextColor="White"/>
<Border
BackgroundColor="{StaticResource primary}"
HorizontalOptions="Center"
VerticalOptions="Center"
TranslationX="40"
TranslationY="-35"
StrokeShape="Ellipse"
StrokeThickness="0"
IsVisible="{Binding IsMe}">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CameraCommand}" />
</Border.GestureRecognizers>
<Label
FontFamily="FluentIcons"
FontSize="25"
Text="&#xe299;"
Margin="3"
TextColor="White" />
</Border>
</VerticalStackLayout>

<Image
Source="{Binding ProfilePic}"
WidthRequest="100"
HeightRequest="100"
VerticalOptions="Center"
HorizontalOptions="Center"
Aspect="AspectFill">
<Image.Clip>
<EllipseGeometry
Center="50,50"
RadiusX="50"
RadiusY="50"/>
</Image.Clip>
</Image>
<VerticalStackLayout Grid.Row="1" VerticalOptions="Center">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding Name}"
Style="{StaticResource LabelBold}"
FontSize="Large"
TextColor="White" />
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
Text="{Binding Path=IsStaff, Converter={StaticResource StaffToText}}"
Style="{StaticResource LabelBold}"
FontSize="Small"
TextColor="White" />
</VerticalStackLayout>

<Border
BackgroundColor="{StaticResource primary}"
HorizontalOptions="Center"
VerticalOptions="Center"
TranslationX="40"
TranslationY="-35"
StrokeShape="Ellipse"
StrokeThickness="0"
IsVisible="{Binding IsMe}">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CameraCommand}"/>
</Border.GestureRecognizers>
<Label
FontFamily="FluentIcons"
FontSize="25"
Text="&#xe299;"
Margin="3"
TextColor="White"/>
</Border>
</Grid>
<!-- User's own stats -->
<Border Grid.Row="2"
IsVisible="{Binding Path=ShowBalance}"
Stroke="{StaticResource ProfileGridBorder}"
StrokeThickness="2"
Margin="20, 0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<Grid
HorizontalOptions="Center"
BackgroundColor="{StaticResource ProfileGridBorder}"
ColumnSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<VerticalStackLayout
Spacing="2"
HorizontalOptions="Fill"
VerticalOptions="Center"
Padding="0, 10"
HeightRequest="70"
BackgroundColor="{StaticResource Background}">
<HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
<Label VerticalOptions="Center"
FontFamily="FA6Solid"
TextColor="{StaticResource Coin}"
Text="&#xf091;" />
<Label FontSize="Large" Style="{StaticResource LabelBold}" Text="{Binding Rank}" />
</HorizontalStackLayout>
<Label
HorizontalOptions="Center"
Text="Ranking"
FontSize="Small"
TextColor="{StaticResource White}" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1"
Spacing="2"
HorizontalOptions="Fill"
VerticalOptions="Center"
Padding="0, 10"
HeightRequest="70"
BackgroundColor="{StaticResource Background}">
<HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
<Label VerticalOptions="Center"
FontFamily="FA6Solid"
TextColor="{StaticResource Coin}"
Text="&#x2b50;" />
<Label FontSize="Large" Style="{StaticResource LabelBold}"
Text="{Binding Points, StringFormat='{0:n0}'}" />
</HorizontalStackLayout>
<Label
HorizontalOptions="Center"
Text="Points"
FontSize="Small"
TextColor="{StaticResource White}" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="2"
Spacing="2"
HorizontalOptions="Fill"
VerticalOptions="Center"
Padding="0, 10"
HeightRequest="70"
BackgroundColor="{StaticResource Background}">
<HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
<Label VerticalOptions="Center"
VerticalTextAlignment="Center"
FontFamily="FA6Solid"
TextColor="{StaticResource Coin}"
Text="&#xf51e;" />
<Label FontSize="Large" Style="{StaticResource LabelBold}"
Text="{Binding Balance, StringFormat='{0:n0}'}" />
</HorizontalStackLayout>
<Label
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
Text="Credits"
FontSize="Small"
TextColor="{StaticResource White}" />
</VerticalStackLayout>
</Grid>
</Border>

<!-- Viewing other User's stats -->
<Border Grid.Row="2"
IsVisible="{Binding Path=ShowBalance, Converter={StaticResource InvertedBoolConverter}}"
Stroke="{StaticResource ProfileGridBorder}"
StrokeThickness="2"
Margin="20, 0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<Grid
HorizontalOptions="Center"
BackgroundColor="{StaticResource ProfileGridBorder}"
ColumnSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<VerticalStackLayout Grid.Column="0"
Spacing="2"
HorizontalOptions="Fill"
VerticalOptions="Center"
Padding="0, 10"
HeightRequest="70"
BackgroundColor="{StaticResource Background}">
<HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
<Label VerticalOptions="Center"
FontFamily="FA6Solid"
TextColor="{StaticResource Coin}"
Text="&#xf091;" />
<Label FontSize="Large" Style="{StaticResource LabelBold}" Text="{Binding Path=Rank}" />
</HorizontalStackLayout>
<Label
HorizontalOptions="Center"
Text="Ranking"
FontSize="Small"
TextColor="{StaticResource White}" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1"
Spacing="2"
HorizontalOptions="Fill"
VerticalOptions="Center"
Padding="0, 10"
HeightRequest="70"
BackgroundColor="{StaticResource Background}">
<HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
<Label VerticalOptions="Center"
FontFamily="FA6Solid"
TextColor="{StaticResource Coin}"
Text="&#x2b50;" />
<Label FontSize="Large" Style="{StaticResource LabelBold}"
Text="{Binding Points, StringFormat='{0:n0}'}" />
</HorizontalStackLayout>
<Label
HorizontalOptions="Center"
Text="Points"
FontSize="Small"
TextColor="{StaticResource White}" />
</VerticalStackLayout>
</Grid>
</Border>
</Grid>
</Border>
26 changes: 16 additions & 10 deletions src/MobileUI/Pages/ProfilePages/MyProfilePage.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="{StaticResource MainBackground}"
BackgroundColor="{StaticResource FlyoutBackgroundColour}"
xmlns:controls="clr-namespace:SSW.Rewards.Mobile.Controls"
xmlns:helpers="clr-namespace:SSW.Rewards.Mobile.Helpers"
xmlns:viewModels="clr-namespace:SSW.Rewards.Mobile.ViewModels.ProfileViewModels"
Expand Down Expand Up @@ -32,9 +32,8 @@

<Grid RowDefinitions="Auto,Auto,*,5"
RowSpacing="6"
Padding="20,20,20,5"
Padding="10, 5"
x:Name="MainPageRow">

<Border
Grid.Row="0"
HorizontalOptions="End"
Expand All @@ -55,12 +54,20 @@

<controls:ProfileStats Grid.Row="1"/>

<CarouselView Grid.Row="2"
Margin="0,20,0,0"
IndicatorView="ProfileIndicator"
ItemsSource="{Binding ProfileSections}"
ItemTemplate="{StaticResource ProfileViewSelector}"/>

<Border Grid.Row="2"
BackgroundColor="{StaticResource MainBackground}"
Stroke="{StaticResource MainBackground}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8"/>
</Border.StrokeShape>
<CarouselView
Margin="0,0,0,0"
IndicatorView="ProfileIndicator"
ItemsSource="{Binding ProfileSections}"
ItemTemplate="{StaticResource ProfileViewSelector}"
/>
</Border>

<IndicatorView Grid.Row="3"
SelectedIndicatorColor="{StaticResource primary}"
IndicatorColor="{StaticResource IndicatorColor}"
Expand All @@ -75,6 +82,5 @@
IsRunning="True"
Color="{StaticResource primary}"
IsVisible="{Binding IsLoading}"/>

</Grid>
</ContentPage>
5 changes: 3 additions & 2 deletions src/MobileUI/Pages/ProfilePages/MyProfilePage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using SSW.Rewards.Mobile.ViewModels.ProfileViewModels;
using CommunityToolkit.Mvvm.ComponentModel;
using SSW.Rewards.Mobile.ViewModels.ProfileViewModels;

namespace SSW.Rewards.Mobile.Pages;

Expand All @@ -10,7 +11,6 @@ public partial class MyProfilePage : ContentPage

private bool _bottomRowAdded = false;


public MyProfilePage(MyProfileViewModel vm)
{
InitializeComponent();
Expand Down Expand Up @@ -73,5 +73,6 @@ protected override void OnSizeAllocated(double width, double height)
AddBottomPadding();
}
}

#endregion
}
Loading

0 comments on commit 26000e0

Please sign in to comment.