Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Shop UI #118

Merged
merged 4 commits into from
May 8, 2024
Merged

Refactor Shop UI #118

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4584358
Rework shop page to have grid layout vs. stack layout
iggy808 May 1, 2024
9af5bbf
Merge branch 'develop' into Refactor-Shop-UI
iggy808 May 5, 2024
f99c173
Merge branch 'develop' into Refactor-Shop-UI
iggy808 May 8, 2024
21e4e3e
Merge branch 'develop' into Refactor-Shop-UI
wesleypayton May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 97 additions & 54 deletions src/FocusApp.Client/Views/Shop/ShopPage.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
using CommunityToolkit.Maui.Converters;
using CommunityToolkit.Maui.Markup;
using CommunityToolkit.Maui.Markup.LeftToRight;
using FocusApp.Client.Helpers;
using FocusApp.Client.Methods.Shop;
using FocusApp.Client.Resources;
using FocusApp.Shared.Data;
using FocusCore.Models;
using MediatR;

Expand All @@ -22,6 +22,10 @@ internal class ShopPage : BasePage

#region Frontend

// Row / Column structure for entire page
enum PageRow { PageHeader, PetsLabel, PetsCarousel, IslandsLabel, IslandsCarousel, DecorLabel, DecorCarousel, TabBarSpace }
enum PageColumn { Left, Right }

public ShopPage(IAuthenticationService authenticationService, PopupService popupService, IMediator mediator)
{
_popupService = popupService;
Expand All @@ -40,85 +44,124 @@ public ShopPage(IAuthenticationService authenticationService, PopupService popup
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
}
.Margins(left: 10, right: 10);
.Row(PageRow.PageHeader)
.Column(PageColumn.Right)
.CenterVertical()
.Right()
.Margins(right: 50);

Content = new StackLayout
Content = new Grid
{
RowDefinitions = GridRowsColumns.Rows.Define(
(PageRow.PageHeader, GridRowsColumns.Stars(0.4)),
(PageRow.PetsLabel, GridRowsColumns.Stars(0.25)),
(PageRow.PetsCarousel, GridRowsColumns.Stars(1)),
(PageRow.IslandsLabel, GridRowsColumns.Stars(0.25)),
(PageRow.IslandsCarousel, GridRowsColumns.Stars(1)),
(PageRow.DecorLabel, GridRowsColumns.Stars(0.25)),
(PageRow.DecorCarousel, GridRowsColumns.Stars(1)),
(PageRow.TabBarSpace, Consts.TabBarHeight)
),
ColumnDefinitions = GridRowsColumns.Columns.Define(
(PageColumn.Left, GridRowsColumns.Stars(1)),
(PageColumn.Right, GridRowsColumns.Stars(1))
),
BackgroundColor = Colors.LightYellow,
Children =
Children =
{
new Grid
{
Children =
{
// Currency text
_balanceLabel,
// Currency icon
new Image
{
Source = new FileImageSource
{
File = "coin.png"
},
HeightRequest = 25,
WidthRequest = 25,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
}
.Margins(left:60, right:40),
// Header
new Label
{
Text = "Shop",
FontSize = 30,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontAttributes = FontAttributes.Bold
}
}
},
_balanceLabel,

// Currency icon
new Image
{
Source = new FileImageSource
{
File = "coin.png"
},
HeightRequest = 25,
WidthRequest = 25,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
}
.Row(PageRow.PageHeader)
.Column(PageColumn.Right)
.CenterVertical()
.Right()
.Margins(right: 10),


new Label
{
Text = "Shop",
FontSize = 30,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontAttributes = FontAttributes.Bold
}
.Row(PageRow.PageHeader)
.ColumnSpan(typeof(PageColumn).GetEnumNames().Length)
.Center(),

// Horizontal Divider
new BoxView
{
Color = Color.Parse("Black"),
WidthRequest = 400,
HeightRequest = 2,
Margin = 20
}
.Bottom()
.Row(0)
.Column(0)
.ColumnSpan(2),
// Pets Carousel Label
.Row(PageRow.PageHeader)
.ColumnSpan(typeof(PageColumn).GetEnumNames().Length)
.Bottom(),

new Label
{
Text = "Pets",
FontSize = 20,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Start,
},
// Pets Carousel
_petsCarouselView,
// Islands Carousel Label
}
.Row(PageRow.PetsLabel)
.Column(PageColumn.Left)
.CenterVertical()
.Left()
.Margins(left: 5),

_petsCarouselView
.Row(PageRow.PetsCarousel)
.ColumnSpan(typeof(PageColumn).GetEnumNames().Length),

new Label
{
Text = "Islands",
FontSize = 20,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Start,
},
// Islands Carousel
_islandsCarouselView,
// Decor Carousel Label
}
.Row(PageRow.IslandsLabel)
.Column(PageColumn.Left)
.CenterVertical()
.Left()
.Margins(left: 5),

_islandsCarouselView
.Row(PageRow.IslandsCarousel)
.ColumnSpan(typeof(PageColumn).GetEnumNames().Length),

new Label
{
{
Text = "Decor",
FontSize = 20,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Start,
},
// Decor Carousel
}
.Row(PageRow.DecorLabel)
.Column(PageColumn.Left)
.CenterVertical()
.Left()
.Margins(left: 5),

_decorCarouselView
.Row(PageRow.DecorCarousel)
.ColumnSpan(typeof(PageColumn).GetEnumNames().Length),
}
};
}
Expand Down Expand Up @@ -166,7 +209,7 @@ private CarouselView BuildBaseCarouselView()
VerticalStackLayout itemStack = new VerticalStackLayout
{
BackgroundColor = Color.FromRgba("#E0E4FF00"),
Padding = 10
//Padding = 10
};

itemStack.Add(itemName);
Expand All @@ -177,7 +220,7 @@ private CarouselView BuildBaseCarouselView()
});

// Add space between the carousels - allows room for carousel label
carouselView.Margins(0, 5, 0, 10);
//carouselView.Margins(0, 5, 0, 10);

carouselView.BackgroundColor = AppStyles.Palette.MintGreen;

Expand Down
Loading