Added a bounce animation to circular buttons

IsaacMorris1980 · Aug 21, 2022 · 9edbd74 · 9edbd74
1 parent 008ac35
commit 9edbd74
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 43 deletions.
diff --git a/ShoppingList/Controls/CircularButton.cs b/ShoppingList/Controls/CircularButton.cs
@@ -11,36 +11,36 @@ public class CircularButton : GraphicsView
 	/// </summary>
 	public Color ButtonColor
 	{
-        get => (Color)GetValue(ButtonColorProperty);
-        set => SetValue(ButtonColorProperty, value);
-    }
+		get => (Color)GetValue(ButtonColorProperty);
+		set => SetValue(ButtonColorProperty, value);
+	}
 
 	/// <summary>
 	/// A string containing the Image name (just the file name, not the directory)
 	/// <br/> Expects the file to be in Resources/Images/
 	/// </summary>
 	public string Image
-	{ 
-        get => (string)GetValue(ImageProperty);
-        set => SetValue(ImageProperty, value);
-    
-    }
+	{
+		get => (string)GetValue(ImageProperty);
+		set => SetValue(ImageProperty, value);
+
+	}
 
 	public new bool IsVisible
-	{ 
-        get => (bool)GetValue(IsVisibleProperty);
-        set => SetValue(IsVisibleProperty, value);
-    }
+	{
+		get => (bool)GetValue(IsVisibleProperty);
+		set => SetValue(IsVisibleProperty, value);
+	}
 
 	public static BindableProperty ButtonColorProperty = BindableProperty.Create(
 		nameof(ButtonColor), typeof(Color), typeof(CircularButton), propertyChanged: OnButtonColorChanged);
 
 	public BindableProperty ImageProperty = BindableProperty.Create(
-		nameof(Image), typeof(string), typeof(CircularButton), propertyChanged: OnImageChanged); 
+		nameof(Image), typeof(string), typeof(CircularButton), propertyChanged: OnImageChanged);
 
-	public new BindableProperty IsVisibleProperty = BindableProperty.Create(
+	public static new BindableProperty IsVisibleProperty = BindableProperty.Create(
 		nameof(IsVisible), typeof(bool), typeof(CircularButton),
-		propertyChanged: OnIsVisibleChanged); 
+		propertyChanged: OnIsVisibleChanged);
 
 	public CircularButton()
 	{
@@ -51,38 +51,49 @@ public CircularButton()
 
 	static void OnButtonColorChanged(BindableObject bindable, object oldValue, object newValue)
 	{
-        var control = (CircularButton)bindable;
-        var buttonColor = control.ButtonColor;
+		var control = (CircularButton)bindable;
+		var buttonColor = control.ButtonColor;
 		var thisDrawable = control.Drawable as ShoppingList.Drawable.CircularButtonDrawable;
 		thisDrawable.ButtonColor = buttonColor;
-        control.Invalidate();
-    }
+		control.Invalidate();
+	}
 
-	static void OnImageChanged(BindableObject bindable, object oldValue, object newValue) 
-    {
+	static void OnImageChanged(BindableObject bindable, object oldValue, object newValue)
+	{
 		var control = (CircularButton)bindable;
 		var image = control.Image;
 		var thisDrawable = control.Drawable as ShoppingList.Drawable.CircularButtonDrawable;
 		thisDrawable.Image = image;
-		control.Invalidate(); 
-    
-    }
+		control.Invalidate();
+
+	}
 
-	static void OnIsVisibleChanged(BindableObject bindable, object oldValue, object newValue) 
-    {
+	static void OnIsVisibleChanged(BindableObject bindable, object oldValue, object newValue)
+	{
 		var control = (CircularButton)bindable;
+		var thisDrawable = control.Drawable as CircularButtonDrawable;
 
 		//thisDrawable.SetInvisible = !(bool)newValue;
 		//control.Invalidate(); 
-		var newValueAsBool = (bool)newValue; 
+
+		var newValueAsBool = (bool)newValue;
 
 		if (newValueAsBool == true)
 		{
-			control.FadeTo(1, 2000); 
-		} else 
+			control.FadeTo(1, 500);
+		} else
 		{
-			control.FadeTo(0, 4000); 
+			control.FadeTo(0, 500);
 		}
 
-    }
+	}
+
+	public async Task<bool> BounceOnPressAsync()
+	{
+		await this.ScaleTo(1.2, 100, Easing.BounceIn);
+
+		return await this.ScaleTo(1.0, 100, Easing.BounceOut);
+	}
+
+
 }
diff --git a/ShoppingList/GlobalUsings.cs b/ShoppingList/GlobalUsings.cs
@@ -11,6 +11,7 @@
 global using ShoppingList.Services;
 global using ShoppingList.ViewModels;
 global using ShoppingList.Drawable;
+global using ShoppingList.Controls;
 global using SQLiteNetExtensions.Attributes;
 global using CommunityToolkit.Diagnostics; 
 

diff --git a/ShoppingList/View/MainPage.xaml b/ShoppingList/View/MainPage.xaml
@@ -91,7 +91,7 @@
                         HorizontalOptions="End"
 			            >
                 <GraphicsView.GestureRecognizers>
-                    <TapGestureRecognizer Command="{Binding CreateUserListCommand}"/>
+                    <TapGestureRecognizer Tapped="NewListButtonPressed"/>
 
                 </GraphicsView.GestureRecognizers>
             </controls:CircularButton>

diff --git a/ShoppingList/View/MainPage.xaml.cs b/ShoppingList/View/MainPage.xaml.cs
@@ -1,15 +1,28 @@
 using ShoppingList.ViewModels;
+using ShoppingList.Controls;
 
 namespace ShoppingList;
 
 public partial class MainPage : ContentPage
 {
+	UserListViewModel _ulvm;
 	public MainPage(UserListViewModel ulViewModel)
 	{
 		InitializeComponent();
 		BindingContext = ulViewModel;
-		ulViewModel.GetUserLists(); 
+		_ulvm = ulViewModel;
+		_ulvm.GetUserLists(); 
 
 	}
+
+	public async void NewListButtonPressed(object sender, EventArgs e)
+	{
+
+		var circularButton = sender as CircularButton;
+		await circularButton.BounceOnPressAsync();
+
+		_ulvm.CreateUserList(); 
+
+    }
 }
 
diff --git a/ShoppingList/View/UserListDataInput.xaml b/ShoppingList/View/UserListDataInput.xaml
@@ -79,7 +79,7 @@
                         HorizontalOptions="Start"
 			            >
                 <controls:CircularButton.GestureRecognizers>
-                    <TapGestureRecognizer Command="{Binding CancelCommand}"/>
+                    <TapGestureRecognizer Tapped="CancelButtonPressed"/>
                 </controls:CircularButton.GestureRecognizers>
             </controls:CircularButton>
 
@@ -98,7 +98,7 @@
                         HorizontalOptions="End"
 			            >
                 <controls:CircularButton.GestureRecognizers>
-                    <TapGestureRecognizer Command="{Binding UserListCompletedCommand}"/>
+                    <TapGestureRecognizer Tapped="NewItemButtonPressed"/>
                 </controls:CircularButton.GestureRecognizers>
             </controls:CircularButton>
     </Grid>

diff --git a/ShoppingList/View/UserListDataInput.xaml.cs b/ShoppingList/View/UserListDataInput.xaml.cs
@@ -31,5 +31,20 @@ private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
 		var checkbox = sender as CheckBox;
 		_uldiv.PrepopulateList = checkbox.IsChecked; 
 	}
+
+	private async void NewItemButtonPressed(object sender, EventArgs e)
+	{
+		var circularButton = sender as CircularButton;
+		await circularButton.BounceOnPressAsync();
+		_uldiv.OnUserListCompleted(); 
+
+    }
+	private async void CancelButtonPressed(object sender, EventArgs e)
+	{
+		var circularButton = sender as CircularButton;
+		await circularButton.BounceOnPressAsync();
+		_uldiv.OnCancel(); 
+
+    }
 }
 
diff --git a/ShoppingList/View/UserListDetails.xaml b/ShoppingList/View/UserListDetails.xaml
@@ -154,7 +154,7 @@
                         IsVisible="{Binding HasUndo}"
 			            >
                 <controls:CircularButton.GestureRecognizers>
-                    <TapGestureRecognizer Command="{Binding UndoButtonPressedCommand}"/>
+                    <TapGestureRecognizer Tapped="UndoButtonPressed"/>
                 </controls:CircularButton.GestureRecognizers>
             </controls:CircularButton>
         </Grid>

diff --git a/ShoppingList/View/UserListDetails.xaml.cs b/ShoppingList/View/UserListDetails.xaml.cs
@@ -12,13 +12,13 @@ public partial class UserListDetails : ContentPage
 {
 	UserListDetailViewModel _ulvm;
 
-	bool _firstTime = true; 
-
 	public UserListDetails(UserListDetailViewModel userListDetailViewModel)
 	{
 		InitializeComponent();
 		BindingContext = userListDetailViewModel;
+
 		_ulvm = userListDetailViewModel;
+		_ulvm.HasUndo = false; 
 
     }
 
@@ -42,15 +42,19 @@ public void OnCheckboxClicked(object sender, CheckedChangedEventArgs e)
 
 	}
 
-	public void NewItemButtonPressed(object sender, EventArgs e)
+	private async void NewItemButtonPressed(object sender, EventArgs e)
 	{
 
 		var circularButton = sender as CircularButton;
-		//need to grab the drawable, add a method in the drawable to animate a scale, and then call it here
-
+		await circularButton.BounceOnPressAsync();
 		_ulvm.NewItemDialog(); 
+	}
 
+	private async void UndoButtonPressed(object sender, EventArgs e)
+	{
 
+		var circularButton = sender as CircularButton;
+		await circularButton.BounceOnPressAsync();
+		_ulvm.UndoButtonPressed(); 
 	}
-
 }
diff --git a/ShoppingList/ViewModel/UserListDetailViewModel.cs b/ShoppingList/ViewModel/UserListDetailViewModel.cs
@@ -17,6 +17,9 @@ public UserListDetailViewModel(ItemService itemService, KrogerAPIService krogerA
         _krogerAPIService = krogerAPIService;
         undoItemBuffer = new Stack<Item>();
 
+        HasUndo = false;
+
+        OnPropertyChanged(nameof(HasUndo)); 
         undoTimer = new System.Timers.Timer(5000);
         undoTimer.Elapsed += new ElapsedEventHandler(UndoTimerTick); 
     }
@@ -51,7 +54,7 @@ public UserList UserList
     public bool isRefreshing;
 
     [ObservableProperty]
-    public bool hasUndo;
+    public bool hasUndo = false;
 
 
     [RelayCommand]