♻️ Mobile | Settings improvements on tablets (#1060)

* Fix popup widths * Add max height * Add title * Add logo to settings on tablets
SSWConsulting · Sep 26, 2024 · e0a061e · e0a061e
1 parent 87ae1a8
commit e0a061e
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 29 deletions.
diff --git a/src/MobileUI/Common/Messages/TopBarTitleMessage.cs b/src/MobileUI/Common/Messages/TopBarTitleMessage.cs
@@ -0,0 +1,5 @@
+using CommunityToolkit.Mvvm.Messaging.Messages;
+
+namespace SSW.Rewards.Mobile.Messages;
+
+public class TopBarTitleMessage(string value) : ValueChangedMessage<string>(value);
diff --git a/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml b/src/MobileUI/Features/AboutSSW/AboutSswPage.xaml
@@ -20,7 +20,7 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70" VerticalOptions="Center">
+    <Grid Padding="30,70" VerticalOptions="Center" MaximumWidthRequest="500">
         <Border
             Padding="20"
             StrokeThickness="1"

diff --git a/src/MobileUI/Features/AppShell.xaml.cs b/src/MobileUI/Features/AppShell.xaml.cs
@@ -28,5 +28,6 @@ protected override bool OnBackButtonPressed()
     private void OnNavigating(object sender, ShellNavigatingEventArgs e)
     {
         WeakReferenceMessenger.Default.Send(new TopBarAvatarMessage(AvatarOptions.Original));
+        WeakReferenceMessenger.Default.Send(new TopBarTitleMessage(string.Empty));
     }
 }
diff --git a/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml b/src/MobileUI/Features/OnBoarding/OnBoardingPage.xaml
@@ -23,7 +23,9 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70">
+    <Grid Padding="30,70"
+          MaximumWidthRequest="500"
+          MaximumHeightRequest="800">
         <Border
             StrokeThickness="1"
             StrokeShape="RoundRectangle 10"

diff --git a/src/MobileUI/Features/Profile/ProfilePicturePage.xaml b/src/MobileUI/Features/Profile/ProfilePicturePage.xaml
@@ -23,15 +23,12 @@
             EasingOut="SinIn"
             HasBackgroundAnimation="True" />
     </pages:PopupPage.Animation>
-    <Grid Padding="30,70" VerticalOptions="Center">
+    <Grid Padding="30,70" VerticalOptions="Center" MaximumWidthRequest="500">
         <Border
             StrokeThickness="1"
             StrokeShape="RoundRectangle 10"
             Padding="20,10,20,20"
-            HorizontalOptions="Center"
-            VerticalOptions="Center"
             BackgroundColor="{StaticResource ProfileBackgroundColour}">
-
             <Grid
                 RowDefinitions="1*, 3*, 3*"
                 WidthRequest="300"

diff --git a/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml b/src/MobileUI/Features/Redeem/RedeemRewardPage.xaml
@@ -48,7 +48,7 @@
             </Setter>
         </Style>
     </pages:PopupPage.Resources>
-    <Grid>
+    <Grid MaximumWidthRequest="500">
         <Grid Padding="30,70" VerticalOptions="Center">
             <Border
                 VerticalOptions="Center"

diff --git a/src/MobileUI/Features/Scanner/ScanPage.xaml b/src/MobileUI/Features/Scanner/ScanPage.xaml
@@ -86,7 +86,8 @@
                              IsVisible="{Binding IsScanVisible, Converter={toolkit:InvertedBoolConverter}}"
                              VerticalOptions="Center"
                              Margin="30"
-                             Spacing="30">
+                             Spacing="30"
+                             MaximumWidthRequest="500">
             <Grid ColumnDefinitions="40, *"
                   ColumnSpacing="10"
                   HorizontalOptions="Center">

diff --git a/src/MobileUI/Features/Settings/SettingsPage.xaml b/src/MobileUI/Features/Settings/SettingsPage.xaml
@@ -7,19 +7,32 @@
     x:DataType="viewModels:SettingsViewModel"
     ControlTemplate="{DynamicResource PageTemplate}"
     BackgroundColor="{StaticResource Background}">
-    <TableView Intent="Menu" BackgroundColor="Transparent">
-        <TableRoot>
-            <TableSection x:Name="SocialMediaSection" Title="Add/Update Social Media Profiles" TextColor="{StaticResource Gray400}" />
+    <Grid ColumnDefinitions="50*, 50*">
+        <TableView Grid.Column="0"
+                   Grid.ColumnSpan="{OnIdiom Phone=2, Tablet=1}"
+                   Intent="Menu"
+                   BackgroundColor="Transparent">
+            <TableRoot>
+                <TableSection x:Name="SocialMediaSection" Title="Add/Update Social Media Profiles" TextColor="{StaticResource Gray400}" />
 
-            <TableSection Title="General" TextColor="{StaticResource Gray400}">
-                <TextCell Text="My Profile" TextColor="White" Command="{Binding ProfileClickedCommand}" />
-                <TextCell Text="Delete Profile" TextColor="{StaticResource SSWRed}" Command="{Binding DeleteClickedCommand}" />
-            </TableSection>
+                <TableSection Title="General" TextColor="{StaticResource Gray400}">
+                    <TextCell Text="My Profile" TextColor="White" Command="{Binding ProfileClickedCommand}" />
+                    <TextCell Text="Delete Profile" TextColor="{StaticResource SSWRed}" Command="{Binding DeleteClickedCommand}" />
+                </TableSection>
 
-            <TableSection Title="Help" TextColor="{StaticResource Gray400}">
-                <TextCell Text="Replay Intro" TextColor="White" Command="{Binding IntroClickedCommand}"/>
-                <TextCell Text="About" TextColor="White" Command="{Binding AboutClickedCommand}" />
-            </TableSection>
-        </TableRoot>
-    </TableView>
+                <TableSection Title="Help" TextColor="{StaticResource Gray400}">
+                    <TextCell Text="Getting Started 🎉" TextColor="White" Command="{Binding IntroClickedCommand}"/>
+                    <TextCell Text="About" TextColor="White" Command="{Binding AboutClickedCommand}" />
+                </TableSection>
+            </TableRoot>
+        </TableView>
+        <Image Grid.Column="1"
+               IsVisible="{OnIdiom Phone=False, Tablet=True}"
+               VerticalOptions="Start"
+               HorizontalOptions="Center"
+               Source="rewardslogo"
+               WidthRequest="200"
+               Margin="0,20,0,0"
+               x:Name="LogoImage"/>
+    </Grid>
 </ContentPage>
diff --git a/src/MobileUI/Features/Settings/SettingsPage.xaml.cs b/src/MobileUI/Features/Settings/SettingsPage.xaml.cs
@@ -18,6 +18,11 @@ protected override void OnAppearing()
     {
         base.OnAppearing();
         _firebaseAnalyticsService.Log("SettingsPage");
+    }
+
+    protected override void OnNavigatedTo(NavigatedToEventArgs args)
+    {
+        base.OnNavigatedTo(args);
         SettingsViewModel.Initialise();
     }
 

diff --git a/src/MobileUI/Features/Settings/SettingsViewModel.cs b/src/MobileUI/Features/Settings/SettingsViewModel.cs
@@ -33,6 +33,7 @@ public SettingsViewModel(IUserService userService, ISnackbarService snackbarServ
     public static void Initialise()
     {
         WeakReferenceMessenger.Default.Send(new TopBarAvatarMessage(AvatarOptions.Back));
+        WeakReferenceMessenger.Default.Send(new TopBarTitleMessage("SSW Rewards | My Settings"));
     }
 
     [RelayCommand]

diff --git a/src/MobileUI/Features/TopBar/TopBarViewModel.cs b/src/MobileUI/Features/TopBar/TopBarViewModel.cs
@@ -27,6 +27,9 @@ public partial class TopBarViewModel : ObservableObject
 
     [ObservableProperty]
     private bool _showScanner = true;
+
+    [ObservableProperty]
+    private string _title = string.Empty;
 
     public TopBarViewModel(IPermissionsService permissionsService, IUserService userService, IScannerService scannerService)
     {
@@ -49,6 +52,11 @@ public TopBarViewModel(IPermissionsService permissionsService, IUserService user
                     break;
             }
         });
+
+        WeakReferenceMessenger.Default.Register<TopBarTitleMessage>(this, (_, m) =>
+        {
+            Title = m.Value;
+        });
 
         userService.MyProfilePicObservable().Subscribe(myProfilePage => ProfilePic = myProfilePage);
     }

diff --git a/src/MobileUI/Resources/Styles/Templates.xaml b/src/MobileUI/Resources/Styles/Templates.xaml
@@ -12,14 +12,15 @@
             <Grid.BindingContext>
                 <resolver:ResolveViewModel x:TypeArguments="vm:TopBarViewModel" />
             </Grid.BindingContext>
-            <FlexLayout JustifyContent="SpaceBetween"
-                        Margin="0"
-                        BackgroundColor="{StaticResource Background}"
-                        x:DataType="vm:TopBarViewModel">
+            <Grid ColumnDefinitions="60,*,60"
+                  Margin="0"
+                  BackgroundColor="{StaticResource Background}"
+                  x:DataType="vm:TopBarViewModel">
                 <!-- Wrapping AvatarView in a Grid where IsVisible can be toggled to work around 
                      an odd animation that happens on iOS
                      See bug: https://github.com/SSWConsulting/SSW.Rewards.Mobile/issues/918 -->
-                <Grid IsVisible="{Binding ShowAvatar}"
+                <Grid Grid.Column="0"
+                      IsVisible="{Binding ShowAvatar}"
                       Margin="10,7,10,5"
                       HeightRequest="40"
                       WidthRequest="40">
@@ -37,6 +38,7 @@
 
 
                 <Button
+                    Grid.Column="0"
                     HeightRequest="40"
                     WidthRequest="40"
                     CornerRadius="20"
@@ -56,7 +58,8 @@
                     </Button.ImageSource>
                 </Button>
 
-                <Button HeightRequest="40"
+                <Button Grid.Column="0"
+                        HeightRequest="40"
                         CornerRadius="5"
                         BorderColor="White"
                         BackgroundColor="{StaticResource SSWRed}"
@@ -65,16 +68,25 @@
                         IsVisible="{Binding ShowDone}"
                         Text="Done"
                         Command="{Binding GoBackCommand}" />
+
+                <Label Grid.Column="1"
+                       Text="{Binding Title}"
+                       Style="{StaticResource LabelBold}"
+                       FontSize="18"
+                       VerticalOptions="Center"
+                       VerticalTextAlignment="Center"
+                       HorizontalOptions="Center" />
 
-                <ImageButton Command="{Binding OpenScannerCommand}"
+                <ImageButton Grid.Column="2"
+                             Command="{Binding OpenScannerCommand}"
                              Margin="10,5"
                              IsVisible="{Binding ShowScanner}">
                     <ImageButton.Source>
                         <FontImageSource FontFamily="FluentIcons"
                                          Glyph="&#xf636;"/>
                     </ImageButton.Source>
                 </ImageButton>
-            </FlexLayout>
+            </Grid>
             <ContentPresenter Grid.Row="1" />
         </Grid>
     </ControlTemplate>