Skip to content

Commit 606d737

Browse files
StuartFergusonStuartFerguson
authored
Merge pull request #476 from TransactionProcessing/copilot/revamp-my-account-screens
My Account screens revamp: modern tile-based layout
2 parents 108f80c + 44d66a9 commit 606d737

5 files changed

Lines changed: 495 additions & 201 deletions

File tree

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountAddressesPage.xaml‎

Lines changed: 130 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,138 @@
22
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
44
x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountAddressesPage"
5-
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
6-
Shell.NavBarIsVisible="False">
5+
Shell.NavBarIsVisible="False"
6+
Padding="0">
77
<ScrollView>
8-
<VerticalStackLayout Style="{DynamicResource Layout}">
9-
<controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
10-
11-
<Frame Style="{DynamicResource MainFrame}">
12-
<VerticalStackLayout x:Name="SubLayout">
13-
<Label Text="Primary Address" HorizontalTextAlignment="Center"
14-
HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
15-
Margin="10,0,0,10" AutomationId="PrimaryAddressLabel"/>
16-
17-
<Label Text="{Binding Address.AddressLine1}"
18-
HorizontalTextAlignment="Start"
19-
HorizontalOptions="Fill" AutomationId="AddressLine1Label"/>
20-
<Label Text="{Binding Address.AddressLine2}" x:Name="AddressLine2"
21-
HorizontalTextAlignment="Start"
22-
HorizontalOptions="Fill" AutomationId="AddressLine2Label"/>
23-
<Label Text="{Binding Address.AddressLine3}" x:Name="AddressLine3"
24-
HorizontalTextAlignment="Start"
25-
HorizontalOptions="Fill" AutomationId="AddressLine3Label"/>
26-
<Label Text="{Binding Address.AddressLine4}" x:Name="AddressLine4"
27-
HorizontalTextAlignment="Start"
28-
HorizontalOptions="Fill" AutomationId="AddressLine4Label"/>
29-
<Label Text="{Binding Address.PostalCode}"
30-
HorizontalTextAlignment="Start"
31-
HorizontalOptions="Fill" AutomationId="AddressPostCodeLabel"/>
32-
<Label Text="{Binding Address.Region}"
33-
HorizontalTextAlignment="Start"
34-
HorizontalOptions="Fill" AutomationId="AddressRegionLabel"/>
35-
<Label Text="{Binding Address.Town}"
36-
HorizontalTextAlignment="Start"
37-
HorizontalOptions="Fill" AutomationId="AddressTownLabel"/>
8+
<VerticalStackLayout Spacing="0">
9+
10+
<!-- Header with gradient background -->
11+
<Grid HeightRequest="130">
12+
<Grid.Background>
13+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
14+
<GradientStop Color="{StaticResource profile}" Offset="0.0"/>
15+
<GradientStop Color="#2aab83" Offset="1.0"/>
16+
</LinearGradientBrush>
17+
</Grid.Background>
18+
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
19+
<Label Text="{Binding Title}"
20+
AutomationId="{Binding Title}"
21+
FontSize="20"
22+
FontAttributes="Bold"
23+
TextColor="White"
24+
HorizontalOptions="Center"/>
25+
<Label Text="Primary address details"
26+
FontSize="13"
27+
TextColor="White"
28+
Opacity="0.85"
29+
HorizontalOptions="Center"/>
3830
</VerticalStackLayout>
39-
</Frame>
40-
<Button Text="Edit Address" Style="{StaticResource MyAccountButtonStyle}"
41-
Margin="10,0,10,0" AutomationId="EditAddressButton"/>
42-
<Button Margin="10,0,10,0" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
31+
</Grid>
32+
33+
<!-- Address details card -->
34+
<VerticalStackLayout Padding="20,20,20,16" Spacing="16">
35+
36+
<Frame Style="{StaticResource HomeCardFrame}">
37+
<VerticalStackLayout Spacing="12">
38+
<Label Text="Primary Address"
39+
FontSize="16"
40+
FontAttributes="Bold"
41+
TextColor="{StaticResource labelTextColor}"
42+
AutomationId="PrimaryAddressLabel"/>
43+
44+
<BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
45+
46+
<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="8">
47+
48+
<Label Grid.Row="0" Grid.Column="0"
49+
Text="Line 1:"
50+
FontAttributes="Bold"
51+
FontSize="13"
52+
TextColor="{StaticResource labelTextColor}"/>
53+
<Label Grid.Row="0" Grid.Column="1"
54+
Text="{Binding Address.AddressLine1}"
55+
FontSize="13"
56+
TextColor="{StaticResource labelTextColor}"
57+
AutomationId="AddressLine1Label"/>
58+
59+
<Label Grid.Row="1" Grid.Column="0"
60+
Text="Line 2:"
61+
FontAttributes="Bold"
62+
FontSize="13"
63+
TextColor="{StaticResource labelTextColor}"/>
64+
<Label Grid.Row="1" Grid.Column="1"
65+
Text="{Binding Address.AddressLine2}"
66+
FontSize="13"
67+
TextColor="{StaticResource labelTextColor}"
68+
AutomationId="AddressLine2Label"/>
69+
70+
<Label Grid.Row="2" Grid.Column="0"
71+
Text="Line 3:"
72+
FontAttributes="Bold"
73+
FontSize="13"
74+
TextColor="{StaticResource labelTextColor}"/>
75+
<Label Grid.Row="2" Grid.Column="1"
76+
Text="{Binding Address.AddressLine3}"
77+
FontSize="13"
78+
TextColor="{StaticResource labelTextColor}"
79+
AutomationId="AddressLine3Label"/>
80+
81+
<Label Grid.Row="3" Grid.Column="0"
82+
Text="Line 4:"
83+
FontAttributes="Bold"
84+
FontSize="13"
85+
TextColor="{StaticResource labelTextColor}"/>
86+
<Label Grid.Row="3" Grid.Column="1"
87+
Text="{Binding Address.AddressLine4}"
88+
FontSize="13"
89+
TextColor="{StaticResource labelTextColor}"
90+
AutomationId="AddressLine4Label"/>
91+
92+
<Label Grid.Row="4" Grid.Column="0"
93+
Text="Post Code:"
94+
FontAttributes="Bold"
95+
FontSize="13"
96+
TextColor="{StaticResource labelTextColor}"/>
97+
<Label Grid.Row="4" Grid.Column="1"
98+
Text="{Binding Address.PostalCode}"
99+
FontSize="13"
100+
TextColor="{StaticResource labelTextColor}"
101+
AutomationId="AddressPostCodeLabel"/>
102+
103+
<Label Grid.Row="5" Grid.Column="0"
104+
Text="Region:"
105+
FontAttributes="Bold"
106+
FontSize="13"
107+
TextColor="{StaticResource labelTextColor}"/>
108+
<Label Grid.Row="5" Grid.Column="1"
109+
Text="{Binding Address.Region}"
110+
FontSize="13"
111+
TextColor="{StaticResource labelTextColor}"
112+
AutomationId="AddressRegionLabel"/>
113+
114+
<Label Grid.Row="6" Grid.Column="0"
115+
Text="Town:"
116+
FontAttributes="Bold"
117+
FontSize="13"
118+
TextColor="{StaticResource labelTextColor}"/>
119+
<Label Grid.Row="6" Grid.Column="1"
120+
Text="{Binding Address.Town}"
121+
FontSize="13"
122+
TextColor="{StaticResource labelTextColor}"
123+
AutomationId="AddressTownLabel"/>
124+
</Grid>
125+
</VerticalStackLayout>
126+
</Frame>
127+
128+
<Button Text="Edit Address"
129+
Style="{StaticResource StandardButton}"
130+
AutomationId="EditAddressButton"/>
131+
<Button Text="Back"
132+
AutomationId="BackButton"
133+
Style="{StaticResource StandardButton}"
134+
Command="{Binding BackButtonCommand}"/>
135+
</VerticalStackLayout>
136+
43137
</VerticalStackLayout>
44138
</ScrollView>
45139
</ContentPage>

‎TransactionProcessor.Mobile/Pages/MyAccount/MyAccountContactPage.xaml‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,94 @@
22
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
44
x:Class="TransactionProcessor.Mobile.Pages.MyAccount.MyAccountContactPage"
5-
xmlns:controls="clr-namespace:TransactionProcessor.Mobile.Controls"
6-
Shell.NavBarIsVisible="False">
5+
Shell.NavBarIsVisible="False"
6+
Padding="0">
77
<ScrollView>
8-
<VerticalStackLayout Style="{DynamicResource Layout}">
9-
<controls:TitleLabel Text="{Binding Title}" AutomationId="{Binding Title}" FontSize="20" HorizontalTextAlignment="Center" VerticalOptions="End" FontAttributes="Bold" Padding="20,0,0,20"/>
10-
11-
<Frame Style="{DynamicResource MainFrame}">
12-
<VerticalStackLayout x:Name="SubLayout">
13-
<Label Text="Primary Contact" HorizontalTextAlignment="Center"
14-
HorizontalOptions="Fill" FontAttributes="Bold" FontSize="20"
15-
Margin="10,0,0,10" AutomationId="PrimaryContactLabel"/>
16-
17-
<Label Text="Name:" FontAttributes="Bold"
18-
HorizontalTextAlignment="Start"
19-
HorizontalOptions="Fill"/>
20-
<Label Text="{Binding Contact.Name}"
21-
HorizontalTextAlignment="Start"
22-
HorizontalOptions="Fill" Margin="0,0,0,10"
23-
AutomationId="ContactNameLabel"/>
24-
25-
<Label Text="Email Address:" FontAttributes="Bold"
26-
HorizontalTextAlignment="Start"
27-
HorizontalOptions="Fill"/>
28-
<Label Text="{Binding Contact.EmailAddress}"
29-
HorizontalTextAlignment="Start"
30-
HorizontalOptions="Fill" Margin="0,0,0,10"
31-
AutomationId="ContactEmailAddressLabel"/>
32-
33-
<Label Text="Mobile Number:" FontAttributes="Bold"
34-
HorizontalTextAlignment="Start"
35-
HorizontalOptions="Fill"/>
36-
<Label Text="{Binding Contact.MobileNumber}"
37-
HorizontalTextAlignment="Start"
38-
HorizontalOptions="Fill" Margin="0,0,0,10"
39-
AutomationId="ContactMobileNumberLabel"/>
8+
<VerticalStackLayout Spacing="0">
9+
10+
<!-- Header with gradient background -->
11+
<Grid HeightRequest="130">
12+
<Grid.Background>
13+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
14+
<GradientStop Color="{StaticResource profile}" Offset="0.0"/>
15+
<GradientStop Color="#2aab83" Offset="1.0"/>
16+
</LinearGradientBrush>
17+
</Grid.Background>
18+
<VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="4" Padding="20">
19+
<Label Text="{Binding Title}"
20+
AutomationId="{Binding Title}"
21+
FontSize="20"
22+
FontAttributes="Bold"
23+
TextColor="White"
24+
HorizontalOptions="Center"/>
25+
<Label Text="Primary contact details"
26+
FontSize="13"
27+
TextColor="White"
28+
Opacity="0.85"
29+
HorizontalOptions="Center"/>
4030
</VerticalStackLayout>
41-
</Frame>
42-
<Button Text="Edit Contact" Style="{StaticResource MyAccountButtonStyle}"
43-
Margin="10,0,0,10" AutomationId="EditContactButton"/>
44-
<Button Margin="10,0,0,10" Text="Back" AutomationId="BackButton" Style="{StaticResource MyAccountButtonStyle}" Command="{Binding BackButtonCommand}"/>
31+
</Grid>
32+
33+
<!-- Contact details card -->
34+
<VerticalStackLayout Padding="20,20,20,16" Spacing="16">
35+
36+
<Frame Style="{StaticResource HomeCardFrame}">
37+
<VerticalStackLayout Spacing="12">
38+
<Label Text="Primary Contact"
39+
FontSize="16"
40+
FontAttributes="Bold"
41+
TextColor="{StaticResource labelTextColor}"
42+
AutomationId="PrimaryContactLabel"/>
43+
44+
<BoxView HeightRequest="1" Color="{StaticResource Gray100}" Margin="0,0,0,4"/>
45+
46+
<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto" ColumnSpacing="12" RowSpacing="12">
47+
48+
<Label Grid.Row="0" Grid.Column="0"
49+
Text="Name:"
50+
FontAttributes="Bold"
51+
FontSize="13"
52+
TextColor="{StaticResource labelTextColor}"/>
53+
<Label Grid.Row="0" Grid.Column="1"
54+
Text="{Binding Contact.Name}"
55+
FontSize="13"
56+
TextColor="{StaticResource labelTextColor}"
57+
AutomationId="ContactNameLabel"/>
58+
59+
<Label Grid.Row="1" Grid.Column="0"
60+
Text="Email:"
61+
FontAttributes="Bold"
62+
FontSize="13"
63+
TextColor="{StaticResource labelTextColor}"/>
64+
<Label Grid.Row="1" Grid.Column="1"
65+
Text="{Binding Contact.EmailAddress}"
66+
FontSize="13"
67+
TextColor="{StaticResource labelTextColor}"
68+
AutomationId="ContactEmailAddressLabel"/>
69+
70+
<Label Grid.Row="2" Grid.Column="0"
71+
Text="Mobile:"
72+
FontAttributes="Bold"
73+
FontSize="13"
74+
TextColor="{StaticResource labelTextColor}"/>
75+
<Label Grid.Row="2" Grid.Column="1"
76+
Text="{Binding Contact.MobileNumber}"
77+
FontSize="13"
78+
TextColor="{StaticResource labelTextColor}"
79+
AutomationId="ContactMobileNumberLabel"/>
80+
</Grid>
81+
</VerticalStackLayout>
82+
</Frame>
83+
84+
<Button Text="Edit Contact"
85+
Style="{StaticResource StandardButton}"
86+
AutomationId="EditContactButton"/>
87+
<Button Text="Back"
88+
AutomationId="BackButton"
89+
Style="{StaticResource StandardButton}"
90+
Command="{Binding BackButtonCommand}"/>
91+
</VerticalStackLayout>
92+
4593
</VerticalStackLayout>
4694
</ScrollView>
4795
</ContentPage>

0 commit comments

Comments
 (0)