Skip to content

Commit

Permalink
🐛 Mobile | Scanner and QR code improvements (#912)
Browse files Browse the repository at this point in the history 
* Allow ScanPage to be disposed and disconnect scanner

* Allow tapping the QR code to bring up a larger version with the brightness increased

* Remove unneeded Grid

* Split out FlyoutFooter and add button and replace QR image with button

* Cleanup

* Fix icon alignment on Android

* Fix email alignment
  • Loading branch information
@zacharykeeping
zacharykeeping committed May 24, 2024
1 parent c4677c7 commit c0cf9e8
Show file tree
Hide file tree
Showing 14 changed files with 401 additions and 195 deletions.
138 changes: 1 addition & 137 deletions src/MobileUI/AppShell.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,143 +110,7 @@
</FlyoutItem>

<Shell.FlyoutFooter>
<Grid
Margin="0,0,0,5"
Padding="20,0"
RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto"
ColumnDefinitions="Auto,*,Auto"
VerticalOptions="End"
RowSpacing="10">

<VerticalStackLayout Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="3"
VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<!-- Settings button -->
<Grid
VerticalOptions="End"
Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="3"
ColumnDefinitions="Auto,*">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Tapped="Handle_SettingsClicked"/>
</Grid.GestureRecognizers>
<Label Grid.Column="0"
HeightRequest="30"
WidthRequest="30"
VerticalOptions="Center"
VerticalTextAlignment="Center"
FontSize="16"
FontFamily="FA6Solid"
TextColor="#DDDDDD"
Text="&#xf013;">
</Label>
<Label Grid.Column="1"
Style="{StaticResource LabelBold}"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="16"
Text="My Settings" />
</Grid>

<VerticalStackLayout Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3"
VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<!-- Logout Button -->
<Grid
VerticalOptions="End"
Grid.Column="0"
Grid.Row="3"
Grid.ColumnSpan="3"
ColumnDefinitions="Auto,*">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Tapped="Handle_LogOutClicked"/>
</Grid.GestureRecognizers>
<Label Grid.Column="0"
HeightRequest="30"
WidthRequest="30"
VerticalOptions="Center"
VerticalTextAlignment="Center"
FontSize="16"
FontFamily="FA6Solid"
TextColor="#DDDDDD"
Text="&#xf08b;">
</Label>

<Label Grid.Column="1"
Style="{StaticResource LabelBold}"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="16"
Text="Log Out" />
</Grid>

<VerticalStackLayout Grid.Column="0"
Grid.Row="4"
Grid.ColumnSpan="3"
VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<Label
Grid.Column="0"
Grid.Row="5"
Padding="0,10,0,0"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="12"
Text="Powered by .NET MAUI" />

<Label Grid.Column="2"
Grid.Row="5"
x:Name="VersionLabel"
HorizontalOptions="End"
VerticalTextAlignment="Center"
Padding="0,10,0,0"
FontSize="12"
TextColor="#DDDDDD"/>

<!-- workaround for iOS footer safe area -->
<Label
Grid.ColumnSpan="2"
Grid.Row="6"
Text=" "
IsVisible="{OnPlatform Android='False', iOS='True'}"/>
</Grid>
<controls:FlyoutFooter />
</Shell.FlyoutFooter>

</Shell>
33 changes: 4 additions & 29 deletions src/MobileUI/AppShell.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,19 @@
using System.Diagnostics;
using Mopups.Services;
using SSW.Rewards.PopupPages;

namespace SSW.Rewards.Mobile;


public partial class AppShell : Shell
public partial class AppShell
{
private readonly IUserService _userService;
private readonly IAuthenticationService _authService;

public AppShell(IUserService userService, IAuthenticationService authService, bool isStaff)
public AppShell(bool isStaff)
{
IsStaff = isStaff;

BindingContext = this;
InitializeComponent();
_userService = userService;
_authService = authService;
VersionLabel.Text = $"Version {AppInfo.VersionString}";
Routing.RegisterRoute("earn/details", typeof(EarnDetailsPage));
Routing.RegisterRoute("scan", typeof(ScanPage));
}

private bool _isStaff;
public bool IsStaff
{
Expand All @@ -34,25 +25,9 @@ public bool IsStaff
}
}

public async void Handle_SettingsClicked(object sender, EventArgs e)
{
await Current.Navigation.PushModalAsync<SettingsPage>();
}

public async void Handle_LogOutClicked(object sender, EventArgs e)
{
var sure = await App.Current.MainPage.DisplayAlert("Logout", "Are you sure you want to log out of SSW Rewards?", "Yes", "No");

if (sure)
{
await _authService.SignOut();
await Navigation.PushModalAsync<LoginPage>();
}
}

protected override bool OnBackButtonPressed()
{
if (Application.Current.MainPage.GetType() == typeof(AppShell) && Shell.Current.Navigation.NavigationStack.Where(x => x != null).Any())
if (Application.Current.MainPage.GetType() == typeof(AppShell) && Current.Navigation.NavigationStack.Where(x => x != null).Any())
{
return base.OnBackButtonPressed();
}
Expand Down
171 changes: 171 additions & 0 deletions src/MobileUI/Controls/FlyoutFooter.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<?xml version="1.0" encoding="UTF-8"?>
<VerticalStackLayout xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SSW.Rewards.Mobile.Controls.FlyoutFooter"
xmlns:resolver="clr-namespace:Maui.Plugins.PageResolver;assembly=Maui.Plugins.PageResolver"
xmlns:vm="clr-namespace:SSW.Rewards.Mobile.ViewModels"
x:DataType="vm:FlyoutFooterViewModel"
Margin="0,0,0,5"
Padding="20,0"
Spacing="10">
<VerticalStackLayout.BindingContext>
<resolver:ResolveViewModel x:TypeArguments="vm:FlyoutFooterViewModel"/>
</VerticalStackLayout.BindingContext>

<VerticalStackLayout Spacing="10">
<VerticalStackLayout.Triggers>
<!-- Setting Opacity to hide here as using IsVisible can mess up the layout -->
<DataTrigger TargetType="VerticalStackLayout" Binding="{Binding IsStaff}" Value="False">
<Setter Property="Opacity" Value="0" />
<Setter Property="InputTransparent" Value="True" />
</DataTrigger>
</VerticalStackLayout.Triggers>
<VerticalStackLayout VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<!-- QR Code button -->
<Grid
VerticalOptions="End"
ColumnDefinitions="Auto,*">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding MyQrCodeTappedCommand}"/>
</Grid.GestureRecognizers>
<Label Grid.Column="0"
HeightRequest="30"
WidthRequest="30"
VerticalOptions="Center"
VerticalTextAlignment="Center"
FontSize="16"
FontFamily="FluentIcons"
TextColor="#DDDDDD"
Text="&#xf636;">
</Label>
<Label Grid.Column="1"
Style="{StaticResource LabelBold}"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="16"
Text="My QR Code" />
</Grid>
</VerticalStackLayout>
<VerticalStackLayout VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<!-- Settings button -->
<Grid
VerticalOptions="End"
ColumnDefinitions="Auto,*">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding MySettingsTappedCommand}"/>
</Grid.GestureRecognizers>
<Label Grid.Column="0"
HeightRequest="30"
WidthRequest="30"
VerticalOptions="Center"
VerticalTextAlignment="Center"
FontSize="16"
FontFamily="FA6Solid"
TextColor="#DDDDDD"
Text="&#xf013;">
</Label>
<Label Grid.Column="1"
Style="{StaticResource LabelBold}"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="16"
Text="My Settings" />
</Grid>

<VerticalStackLayout VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<!-- Logout Button -->
<Grid
VerticalOptions="End"
ColumnDefinitions="Auto,*">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding LogOutTappedCommand}"/>
</Grid.GestureRecognizers>
<Label Grid.Column="0"
HeightRequest="30"
WidthRequest="30"
VerticalOptions="Center"
VerticalTextAlignment="Center"
FontSize="16"
FontFamily="FA6Solid"
TextColor="#DDDDDD"
Text="&#xf08b;">
</Label>

<Label Grid.Column="1"
Style="{StaticResource LabelBold}"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="16"
Text="Log Out" />
</Grid>

<VerticalStackLayout VerticalOptions="Start">
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#171717"
VerticalOptions="End"/>
<BoxView HorizontalOptions="FillAndExpand"
HeightRequest="1"
Color="#404040"
VerticalOptions="Start"/>
</VerticalStackLayout>

<FlexLayout JustifyContent="SpaceBetween">
<Label
Padding="0,10,0,0"
TextColor="#DDDDDD"
HorizontalOptions="Start"
VerticalOptions="Center"
FontSize="12"
Text="Powered by .NET MAUI" />

<Label HorizontalOptions="End"
VerticalTextAlignment="Center"
Padding="0,10,0,0"
FontSize="12"
TextColor="#DDDDDD"
Text="{Binding VersionNumber}"/>
</FlexLayout>

<!-- workaround for iOS footer safe area -->
<Label
Text=" "
IsVisible="{OnPlatform Android='False', iOS='True'}"/>

</VerticalStackLayout>
9 changes: 9 additions & 0 deletions src/MobileUI/Controls/FlyoutFooter.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace SSW.Rewards.Mobile.Controls;

public partial class FlyoutFooter
{
public FlyoutFooter()
{
InitializeComponent();
}
}
Loading

0 comments on commit c0cf9e8

Please sign in to comment.