Merge pull request #6 from RadekVyM/dev

2.0.0
RadekVyM · Nov 11, 2022 · 264afb1 · 264afb1
2 parents 469ec61 + 1b7c252
commit 264afb1
Show file tree

Hide file tree

Showing 26 changed files with 276 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,8 @@ Here are some of my samples that were built using this library:
     <a href="https://github.com/RadekVyM/Navbar-Animation-2"><em>Navbar Animation #2</em></a>
 </p>
 
+List of all samples can be seen [here](./docs/Samples.md).
+
 ## SimpleToolkit.Core
 
 [![SimpleToolkit.Core](https://img.shields.io/nuget/v/SimpleToolkit.Core.svg?label=SimpleToolkit.Core)](https://www.nuget.org/packages/SimpleToolkit.Core/)
@@ -95,16 +97,31 @@ See [documentation](./docs/SimpleToolkit.SimpleShell) for more information.
 
 *SimpleToolkit.SimpleShell.Controls* is a collection of ready-to-use, navigation-related controls (not only) for `SimpleShell`.
 
-### Getting Started
+The package currently supports only two controls:
 
-In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseSimpleToolkit()` extension method in your `MauiProgram.cs` file:
+- `ListPopover` - popover containing a list of selectable text items
+- `TabBar`
 
-```csharp
-builder.UseSimpleToolkit();
-```
+All controls can be styled using different design languages. These are currently supported:
+
+- Material 3
+- Cupertino
+- Fluent (WinUI 3)
+
+<p align="center">
+    <img width="350" src="./docs/images/listpopovers.png">
+</p>
+
+<p align="center">
+    <img width="350" src="./docs/images/tabbars.png">
+</p>
 
 <p align="center">
     <a href="https://giphy.com/gifs/wiesemann1893-transparent-logo-wiesemann-dWa2rUaiahx1FB3jor">
         <img width="250" src="https://media1.giphy.com/media/dWa2rUaiahx1FB3jor/giphy.gif?cid=790b7611041afeb62e8c51c2423440574e3473ff3a4cdd49&rid=giphy.gif&ct=g">
     </a>
-</p>
+</p>
+
+> I am still not decided if I want to continue and how to develop the `SimpleToolkit.SimpleShell.Controls` package. **The package API is likely to change in the future.** For this reason, this package is still in preview and has poor documentation.
+
+See [documentation](./docs/SimpleToolkit.SimpleShell.Controls) for more information.
diff --git a/docs/Samples.md b/docs/Samples.md
@@ -0,0 +1,39 @@
+# List of Samples Built Using SimpleToolkit
+
+## [Gadget Store App](https://github.com/RadekVyM/Gadgets-Store-App)
+
+**.NET MAUI** implementation of [Gadgets Store App](https://dribbble.com/shots/6983164-Gadgets-Store-App) design by [Sajon](https://dribbble.com/sajon007):
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/RadekVyM/Gadgets-Store-App/maui/samples/gadget_store_home.png" data-canonical-src="https://github.com/RadekVyM/Gadgets-Store-App" width="500" />
+</p>
+
+## [Navbar Animation #1](https://github.com/RadekVyM/Navbar-Animation-1)
+
+**.NET MAUI** implementation of [Navbar Animation #1](https://dribbble.com/shots/9852644-Navbar-Animation-1) design by [Marie Bernard](https://dribbble.com/marie_brn):
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/RadekVyM/Navbar-Animation-1/main/Images/navbaranimation%20gif%20720.gif" data-canonical-src="https://github.com/RadekVyM/Navbar-Animation-1" width="230" />
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <img src="https://raw.githubusercontent.com/RadekVyM/Navbar-Animation-1/main/Images/iphone_navbaranimation_1.png" data-canonical-src="https://github.com/RadekVyM/Navbar-Animation-1" width="245" />
+</p>
+
+## [Navbar Animation #2](https://github.com/RadekVyM/Navbar-Animation-2)
+
+**.NET MAUI** implementation of [Navbar Animation #2](https://dribbble.com/shots/14122275-Navbar-Animation-2) design by [Marie Bernard](https://dribbble.com/marie_brn):
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/RadekVyM/Navbar-Animation-2/main/images/android_navbaranimation_2.gif" data-canonical-src="https://github.com/RadekVyM/Navbar-Animation-2" width="230" />
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <img src="https://raw.githubusercontent.com/RadekVyM/Navbar-Animation-2/main/images/iphone_navbaranimation_2.png" data-canonical-src="https://github.com/RadekVyM/Navbar-Animation-2" width="245" />
+</p>
+
+## [Tab Bar Switches Interaction](https://github.com/RadekVyM/Tab-Bar-Switches-Interaction)
+
+**.NET MAUI** implementation of [Tab Bar Switches Interaction](https://dribbble.com/shots/14028381-Tab-Bar-Switches-Interaction) design by [Ronas IT | UI/UX Team](https://dribbble.com/ronasit):
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/RadekVyM/Tab-Bar-Switches-Interaction/main/images/android_tabbarswitches.gif" data-canonical-src="./images/android_tabbarswitches.gif" width="230" />
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <img src="https://raw.githubusercontent.com/RadekVyM/Tab-Bar-Switches-Interaction/main/images/ios_tabbarswitches.png" data-canonical-src="./images/android_tabbarswitches.gif" width="245" />
+</p>
diff --git a/docs/SimpleToolkit.Core/ContentButton.md b/docs/SimpleToolkit.Core/ContentButton.md
@@ -34,6 +34,59 @@ Output:
     <img src="../images/star_button.png" data-canonical-src="../images/star_button.png" />
 </p>
 
+## Visual states
+
+`ContentButton` provides the same visual states as .NET MAUI `Button` does:
+
+```xml
+<simpleCore:ContentButton Clicked="StarButtonClicked">
+    <VisualStateManager.VisualStateGroups>
+        <VisualStateGroupList>
+            <VisualStateGroup>
+                <VisualState x:Name="Normal"/>
+                <VisualState x:Name="Pressed">
+                    <VisualState.Setters>
+                        <Setter
+                            TargetName="border" 
+                            Property="Background" 
+                            Value="OrangeRed"/>
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="PointerOver">
+                    <VisualState.Setters>
+                        <Setter
+                            TargetName="border" 
+                            Property="Background" 
+                            Value="DarkOrange"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateGroupList>
+    </VisualStateManager.VisualStateGroups>
+    <Border x:Name="border" Background="Orange">
+        <Border.StrokeShape>
+            <RoundRectangle CornerRadius="6"/>
+        </Border.StrokeShape>
+        <HorizontalStackLayout Padding="12,10" Spacing="10">
+            <simpleCore:Icon
+                Source="star.png" TintColor="White"
+                VerticalOptions="Center"
+                HeightRequest="18" WidthRequest="18"/>
+            <Label
+                Text="Star this repo" TextColor="White"
+                FontAttributes="Bold"
+                VerticalOptions="Center"/>
+        </HorizontalStackLayout>
+    </Border>
+</simpleCore:ContentButton>
+```
+
+Output:
+
+<p align="center">
+    <img src="../images/star_button_visual_states.gif" data-canonical-src="../images/star_button_visual_states.gif" width="250"/>
+</p>
+
 ## Implementation details
 
 The `ContentButton` class is inherited from the .NET MAUI `ContentView` control. `ContentButton` has these events and properties in addition to `ContentView`s events and properties:

diff --git a/docs/SimpleToolkit.SimpleShell.Controls/README.md b/docs/SimpleToolkit.SimpleShell.Controls/README.md
@@ -4,6 +4,14 @@
 
 *SimpleToolkit.SimpleShell.Controls* is a collection of ready-to-use, navigation-related controls (not only) for `SimpleShell`.
 
+> I am still not decided if I want to continue and how to develop the `SimpleToolkit.SimpleShell.Controls` package. **The package API is likely to change in the future.** For this reason, this package is still in preview and has poor documentation.
+
+<p align="center">
+    <a href="https://giphy.com/gifs/wiesemann1893-transparent-logo-wiesemann-dWa2rUaiahx1FB3jor">
+        <img width="250" src="https://media1.giphy.com/media/dWa2rUaiahx1FB3jor/giphy.gif?cid=790b7611041afeb62e8c51c2423440574e3473ff3a4cdd49&rid=giphy.gif&ct=g">
+    </a>
+</p>
+
 ## Getting Started
 
 In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseSimpleToolkit()` extension method in your `MauiProgram.cs` file:
@@ -12,8 +20,23 @@ In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseS
 builder.UseSimpleToolkit();
 ```
 
+## Controls
+
+The package currently supports only two controls:
+
+- `ListPopover` - popover containing a list of selectable text items
+- `TabBar`
+
+All controls can be styled using different design languages. These are currently supported:
+
+- Material 3
+- Cupertino
+- Fluent (WinUI 3)
+
 <p align="center">
-    <a href="https://giphy.com/gifs/wiesemann1893-transparent-logo-wiesemann-dWa2rUaiahx1FB3jor">
-        <img width="250" src="https://media1.giphy.com/media/dWa2rUaiahx1FB3jor/giphy.gif?cid=790b7611041afeb62e8c51c2423440574e3473ff3a4cdd49&rid=giphy.gif&ct=g">
-    </a>
+    <img width="350" src="../images/listpopovers.png">
+</p>
+
+<p align="center">
+    <img width="350" src="../images/tabbars.png">
 </p>
diff --git a/docs/SimpleToolkit.SimpleShell/README.md b/docs/SimpleToolkit.SimpleShell/README.md
@@ -155,8 +155,6 @@ See [documentation](Transitions.md) for more information.
 
 The `SimpleShell` class is inherited from the .NET MAUI `Shell` class, but all the handlers are implemented from the ground up. These handlers are inspired by the WinUI version of `Shell` handlers.
 
-`SimpleShell` currently does not provide any page transitions. Pages are simply swapped in a container during navigation.
-
 ## Why not use `SimpleShell` and use .NET MAUI `Shell` instead
 
 - .NET MAUI `Shell` offers a platform-specific appearance.

diff --git a/docs/SimpleToolkit.SimpleShell/Transitions.md b/docs/SimpleToolkit.SimpleShell/Transitions.md
@@ -99,9 +99,9 @@ public AppShell()
         finished: args =>
         {
             args.OriginPage.Opacity = 1;
-            args.OriginPage.TranslationX = 1;
+            args.OriginPage.TranslationX = 0;
             args.DestinationPage.Opacity = 1;
-            args.DestinationPage.TranslationX = 1;
+            args.DestinationPage.TranslationX = 0;
         },
         destinationPageInFront: args => args.TransitionType switch {
             SimpleShellTransitionType.Popping => false,
@@ -130,14 +130,12 @@ public ImagePage()
     this.SetTransition(
         callback: args =>
         {
-            args.OriginPage.TranslationY = args.Progress * (-args.OriginPage.Height);
-            args.DestinationPage.TranslationY = (1 - args.Progress) * (args.DestinationPage.Height);
+            args.DestinationPage.Scale = args.Progress;
         },
         500,
         finished: args =>
         {
-            args.OriginPage.TranslationY = 0;
-            args.DestinationPage.TranslationY = 0;
+            args.DestinationPage.Scale = 1;
         });
 }
 ```

diff --git a/docs/images/listpopovers.png b/docs/images/listpopovers.png
diff --git a/docs/images/star_button_visual_states.gif b/docs/images/star_button_visual_states.gif
diff --git a/docs/images/tabbars.png b/docs/images/tabbars.png
diff --git a/images/logo_with_background.png b/images/logo_with_background.png
diff --git a/images/logo_with_background.svg b/images/logo_with_background.svg
diff --git a/src/SimpleToolkit.Core/SimpleToolkit.Core.csproj b/src/SimpleToolkit.Core/SimpleToolkit.Core.csproj
@@ -1,8 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-		<TargetFrameworks>net6.0;net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
-		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
+		<TargetFrameworks>net7.0;net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>
 		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
 		<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
 		<UseMaui>true</UseMaui>
@@ -22,15 +22,15 @@
 		<PackageTags>MAUI, Controls, Button, Popover, Icon</PackageTags>
 		<Authors>RadekVyM</Authors>
 		<PackageOutputPath>..\..\packages</PackageOutputPath>
-		<VersionPrefix>1.0.0</VersionPrefix>
+		<VersionPrefix>2.0.0</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<Version>$(VersionPrefix)$(VersionSuffix)</Version>
 		<Description>Collection of simple .NET MAUI controls and helpers that is part of SimpleToolkit library.</Description>
 		<PackageProjectUrl>https://github.com/RadekVyM/SimpleToolkit</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/RadekVyM/SimpleToolkit</RepositoryUrl>
 		<RepositoryType>git</RepositoryType>
 		<PackageIcon>logo_with_background.png</PackageIcon>
-		<Copyright>Copyright © RadekVyM and contributors</Copyright>
+		<Copyright>Copyright © Radek Vymětalík and contributors</Copyright>
 	</PropertyGroup>
 
 	<ItemGroup>

diff --git a/src/SimpleToolkit.Playground/App.xaml.cs b/src/SimpleToolkit.Playground/App.xaml.cs
@@ -15,7 +15,7 @@ public App()
             {
                 AppShellType.Normal => new NormalAppShell(),
                 AppShellType.Sample => new SampleAppShell(),
-                _ => new SimpleAppShell()
+                _ => new PlaygroundAppShell()
             };
         }
     }

diff --git a/src/SimpleToolkit.Playground/MauiProgram.cs b/src/SimpleToolkit.Playground/MauiProgram.cs
@@ -4,7 +4,7 @@ namespace SimpleToolkit.SimpleShell.Playground
 {
     public static class MauiProgram
     {
-        internal const AppShellType UsedAppShell = AppShellType.Sample;
+        internal const AppShellType UsedAppShell = AppShellType.Playground;
 
         public static MauiApp CreateMauiApp()
         {