Flex layout extension overload (#49)

* flex layout basis overload

* Tests added and passed

* flex layout basis overload

* Tests added and passed

* Summary updated for all flexlayout extension methods. testing isRelative

* Sample page added

* working on flexlayout sample page

* Fix Build Errors, Use `.Font()` and `.Text()` Extensions

* changing story model and add properties to display

* Update NewsDetailPage

Co-authored-by: Daniel <[email protected]>
Co-authored-by: Pedro Jesus <[email protected]>
Co-authored-by: Brandon Minnick <[email protected]>

samples/CommunityToolkit.Maui.Markup.Sample/Constants/ColorConstants.cs

@@ -9,8 +9,8 @@ static class ColorConstants
 	public static Color NavigationBarBackgroundColor { get; } = Color.FromArgb("FF6601");
 	public static Color NavigationBarTextColor { get; } = Colors.Black;
 
-	public static Color SecondaryColor { get; } = Color.FromArgb("828282");
 	public static Color PrimaryTextColor { get; } = Colors.Black;
+	public static Color SecondaryTextColor { get; } = Color.FromArgb("828282");
 
 	public static Color BrowserNavigationBarBackgroundColor { get; } = Color.FromArgb("FFE6D5");
 	public static Color BrowserNavigationBarTextColor { get; } = Color.FromArgb("3F3F3F");

samples/CommunityToolkit.Maui.Markup.Sample/MauiProgram.cs

@@ -17,7 +17,10 @@ public static MauiApp Create()
 		var builder = MauiApp.CreateBuilder()
 								.UseMauiApp<App>()
 								.UseMauiCommunityToolkit()
-								.UseMauiCommunityToolkitMarkup();
+								.UseMauiCommunityToolkitMarkup();
+
+		// Fonts
+		builder.ConfigureFonts(fonts => fonts.AddFont("FontAwesome.otf", "FontAwesome"));
 
 		// Maui.Essentials
 		builder.Services.AddSingleton(Browser.Default);
@@ -32,10 +35,12 @@ public static MauiApp Create()
 		// View Models
 		builder.Services.AddTransient<NewsViewModel>();
 		builder.Services.AddTransient<SettingsViewModel>();
+		builder.Services.AddTransient<NewsDetailViewModel>();
 
 		// Pages
 		builder.Services.AddTransient<NewsPage>();
-		builder.Services.AddTransient<SettingsPage>();
+		builder.Services.AddTransient<SettingsPage>();
+		builder.Services.AddTransient<NewsDetailPage>();
 
 		return builder.Build();
 	}

samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsDetailPage.cs

@@ -0,0 +1,41 @@
+using Microsoft.Maui.Layouts;
+using CommunityToolkit.Maui.Markup;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
+using CommunityToolkit.Maui.Markup.Sample.Pages.Base;
+using CommunityToolkit.Maui.Markup.Sample.ViewModels;
+using CommunityToolkit.Maui.Markup.Sample.Constants;
+
+namespace CommunityToolkit.Maui.Markup.Sample.Pages;
+
+class NewsDetailPage : BaseContentPage<NewsDetailViewModel>
+{
+	public NewsDetailPage(NewsDetailViewModel newsDetailViewModel) : base(newsDetailViewModel, newsDetailViewModel.Title)
+	{
+		Content = new FlexLayout
+		{
+			Direction = FlexDirection.Column,
+			AlignContent = FlexAlignContent.Center,
+
+			Children =
+			{
+				new WebView()
+					.Grow(1).AlignSelf(FlexAlignSelf.Stretch)
+					.Bind(WebView.SourceProperty, nameof(NewsDetailViewModel.Uri), BindingMode.OneTime),
+
+				new Button { BackgroundColor = ColorConstants.NavigationBarBackgroundColor }
+					.Text("Launch in Browser \uf35d", ColorConstants.PrimaryTextColor)
+					.Font(size: 20, family: "FontAwesome")
+					.Basis(50)
+					.Bind(Button.CommandProperty, nameof(NewsDetailViewModel.OpenBrowserCommand)),
+
+				new Label { BackgroundColor = ColorConstants.NavigationBarBackgroundColor }
+					.TextColor(ColorConstants.PrimaryTextColor).TextCenter()
+					.AlignSelf(FlexAlignSelf.Stretch)
+					.Paddings(bottom: 20)
+					.Bind(Label.TextProperty, nameof(NewsDetailViewModel.ScoreDescription), BindingMode.OneTime),
+			}
+		};
+	}
+}
+

samples/CommunityToolkit.Maui.Markup.Sample/Pages/NewsPage.cs

@@ -32,7 +32,7 @@ public NewsPage(IBrowser browser,
 
 		BindingContext.PullToRefreshFailed += HandlePullToRefreshFailed;
 
-		ToolbarItems.Add(new ToolbarItem { Command = new AsyncRelayCommand(ShowSettings, true) }.Text("Settings"));
+		ToolbarItems.Add(new ToolbarItem { Command = new AsyncRelayCommand(NavigateToSettingsPage, true) }.Text("Settings"));
 
 		Content = new RefreshView
 		{
@@ -77,13 +77,7 @@ async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e)
 		{
 			if (!string.IsNullOrEmpty(storyModel.Url))
 			{
-				var browserOptions = new BrowserLaunchOptions
-				{
-					PreferredControlColor = ColorConstants.BrowserNavigationBarTextColor,
-					PreferredToolbarColor = ColorConstants.BrowserNavigationBarBackgroundColor
-				};
-
-				await browser.OpenAsync(storyModel.Url, browserOptions);
+				await NavigateToNewsDetailPage(storyModel);
 			}
 			else
 			{
@@ -95,5 +89,6 @@ async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e)
 	async void HandlePullToRefreshFailed(object? sender, string message) =>
 		await dispatcher.DispatchAsync(() => DisplayAlert("Refresh Failed", message, "OK"));
 
-	Task ShowSettings() => dispatcher.DispatchAsync(() => Navigation.PushAsync(settingsPage));
+	Task NavigateToSettingsPage() => dispatcher.DispatchAsync(() => Navigation.PushAsync(settingsPage));
+	Task NavigateToNewsDetailPage(StoryModel storyModel) => dispatcher.DispatchAsync(() => Navigation.PushAsync(new NewsDetailPage(new NewsDetailViewModel(storyModel, browser))));
 }

samples/CommunityToolkit.Maui.Markup.Sample/ViewModels/NewsDetailViewModel.cs

@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using CommunityToolkit.Maui.Markup.Sample.Constants;
+using CommunityToolkit.Maui.Markup.Sample.Models;
+using CommunityToolkit.Maui.Markup.Sample.ViewModels.Base;
+using CommunityToolkit.Mvvm.Input;
+using Microsoft.Maui.ApplicationModel;
+using Microsoft.Maui.Controls;
+
+namespace CommunityToolkit.Maui.Markup.Sample.ViewModels;
+
+class NewsDetailViewModel : BaseViewModel
+{
+	readonly IBrowser browser;
+
+	public NewsDetailViewModel(StoryModel storyModel, IBrowser browser)
+	{
+		this.browser = browser;
+
+		Uri = new Uri(storyModel.Url);
+		Title = storyModel.Title;
+		ScoreDescription = storyModel.ToString();
+
+		OpenBrowserCommand = new AsyncRelayCommand(ExecuteOpenBrowserCommand);
+	}
+
+	public Uri Uri { get; }
+	public string Title { get; }
+	public string ScoreDescription { get; }
+
+	public ICommand OpenBrowserCommand { get; }
+
+	Task ExecuteOpenBrowserCommand()
+	{
+		var browserOptions = new BrowserLaunchOptions
+		{
+			PreferredControlColor = ColorConstants.BrowserNavigationBarTextColor,
+			PreferredToolbarColor = ColorConstants.BrowserNavigationBarBackgroundColor
+		};
+
+		return browser.OpenAsync(Uri, browserOptions);
+	}
+}

samples/CommunityToolkit.Maui.Markup.Sample/Views/News/StoryDataTemplate.cs

@@ -30,7 +30,7 @@ public StoryDataTemplate() : base(CreateGrid)
 				.Bind(Label.TextProperty, nameof(StoryModel.Title)),
 
 			new Label().Row(Row.Description)
-				.Font(size: 13).TextColor(ColorConstants.SecondaryColor)
+				.Font(size: 13).TextColor(ColorConstants.SecondaryTextColor)
 				.Paddings(10, 0, 10, 5)
 				.Bind(Label.TextProperty, nameof(StoryModel.Description))
 		}

src/CommunityToolkit.Maui.Markup.UnitTests/FlexLayoutExtensionsTests.cs

@@ -26,6 +26,18 @@ public void Basis()
 		Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(50)));
 	}
 
+	[Test]
+	public void BasisWithPrimitives()
+	{
+		FlexLayout.SetBasis(Bindable, FlexBasis.Auto);
+		Bindable.Basis(0.5f, true);
+
+		Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(0.5f, true)));
+
+		Bindable.Basis(55, false);
+		Assert.That(FlexLayout.GetBasis(Bindable), Is.EqualTo(new FlexBasis(55, false)));
+	}
+
 	[Test]
 	public void Grow()
 	{

src/CommunityToolkit.Maui.Markup/FlexLayoutExtensions.cs

@@ -9,7 +9,7 @@ namespace CommunityToolkit.Maui.Markup;
 public static class FlexLayoutExtensions
 {
 	/// <summary>
-	/// Set AlignSelf
+	/// Set the <see cref="FlexLayout.AlignSelfProperty"/> that indicates how the child is aligned on the cross axis. Setting this property overrides the <see cref="FlexLayout.AlignItems"/> property set on the <see cref="FlexLayout"/> itself
 	/// </summary>
 	/// <typeparam name="TBindable"></typeparam>
 	/// <param name="bindable"></param>
@@ -22,7 +22,7 @@ public static TBindable AlignSelf<TBindable>(this TBindable bindable, FlexAlignS
 	}
 
 	/// <summary>
-	/// Set Basis
+	/// Set the <see cref="FlexLayout.BasisProperty"/> that indicates the amount of space that is allocated to a child of the <see cref="FlexLayout"/> on the main axis. The size can be specified in device-independent units, as a percentage of the size of the <see cref="FlexLayout"/> or based on the child's requested width or height. 
 	/// </summary>
 	/// <typeparam name="TBindable"></typeparam>
 	/// <param name="bindable"></param>
@@ -35,7 +35,20 @@ public static TBindable Basis<TBindable>(this TBindable bindable, FlexBasis valu
 	}
 
 	/// <summary>
-	/// Set Grow
+	/// Set the <see cref="FlexLayout.BasisProperty"/> that indicates the amount of space that is allocated to a child of the <see cref="FlexLayout"/> on the main axis. The size can be specified in device-independent units when <paramref name="isRelative"/> is <see langword="false"/>, or as a percentage of the size of the <see cref="FlexLayout"/> when <paramref name="isRelative"/> is <see langword="true"/>. 
+	/// </summary>
+	/// <typeparam name="TBindable"></typeparam>
+	/// <param name="bindable"></param>
+	/// <param name="length"></param>
+	/// <param name="isRelative"></param>
+	/// <returns></returns>
+	public static TBindable Basis<TBindable>(this TBindable bindable, float length, bool isRelative) where TBindable : BindableObject
+	{
+		return bindable.Basis(new FlexBasis(length, isRelative));
+	}
+
+	/// <summary>
+	/// Set the <see cref="FlexLayout.GrowProperty"/> that indicates the amount of available space a child should use on the main axis of the <see cref="FlexLayout"/>
 	/// </summary>
 	/// <typeparam name="TBindable"></typeparam>
 	/// <param name="bindable"></param>
@@ -48,7 +61,7 @@ public static TBindable Grow<TBindable>(this TBindable bindable, float value) wh
 	}
 
 	/// <summary>
-	/// Set Order
+	/// Set the <see cref="FlexLayout.OrderProperty"/> that indicates the order a child laid out in a <see cref="FlexLayout"/>. Setting this property overrides the order that it appears in the <see cref="Layout.Children"/> collection
 	/// </summary>
 	/// <typeparam name="TBindable"></typeparam>
 	/// <param name="bindable"></param>
@@ -61,7 +74,7 @@ public static TBindable Order<TBindable>(this TBindable bindable, int value) whe
 	}
 
 	/// <summary>
-	/// Set Shrink 
+	/// Set the <see cref="FlexLayout.ShrinkProperty"/> that indicates the priority a child is given in being displayed at its full size, when the total sizes of <see cref="Layout.Children"/> is greater than the size of <see cref="FlexLayout"/> on its main axis.
 	/// </summary>
 	/// <typeparam name="TBindable"></typeparam>
 	/// <param name="bindable"></param>