feat: Overlay (part)

Pip-Manager · Apr 12, 2024 · 94e86e0 · 94e86e0
1 parent c3892e5
commit 94e86e0
Show file tree

Hide file tree

Showing 13 changed files with 364 additions and 10 deletions.
diff --git a/src/PipManager/App.xaml b/src/PipManager/App.xaml
@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
     xmlns:valueConverters="clr-namespace:ValueConverters;assembly=ValueConverters"
+    xmlns:xamlFlair="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"
     DispatcherUnhandledException="OnDispatcherUnhandledException"
     Exit="OnExit"
     Startup="OnStartup">
@@ -13,7 +14,8 @@
             <ResourceDictionary.MergedDictionaries>
                 <ui:ThemesDictionary Theme="Dark" />
                 <ui:ControlsDictionary />
-
+
+                <ResourceDictionary Source="/Resources/Animations.xaml" />
                 <ResourceDictionary Source="/PipManager;component/Resources/Library/LibraryStyles.xaml" />
                 <ResourceDictionary Source="/PipManager;component/Resources/FluentDesignComplements.xaml" />
             </ResourceDictionary.MergedDictionaries>

diff --git a/src/PipManager/App.xaml.cs b/src/PipManager/App.xaml.cs
@@ -31,6 +31,9 @@
 using System.Net.Http;
 using System.Runtime.InteropServices;
 using System.Windows.Threading;
+using PipManager.Services.Overlay;
+using PipManager.ViewModels.Pages.Overlay;
+using PipManager.Views.Pages.Overlay;
 using Wpf.Ui;
 using AboutViewModel = PipManager.ViewModels.Pages.About.AboutViewModel;
 using ActionViewModel = PipManager.ViewModels.Pages.Action.ActionViewModel;
@@ -74,6 +77,7 @@ public partial class App
             services.AddSingleton<ISnackbarService, SnackbarService>();
             services.AddSingleton<IMaskService, MaskService>();
             services.AddSingleton<IToastService, ToastService>();
+            services.AddSingleton<IOverlayService, OverlayService>();
             services.AddSingleton<IConfigurationService, ConfigurationService>();
             services.AddSingleton<IEnvironmentService, EnvironmentService>();
             services.AddSingleton<IActionService, ActionService>();
@@ -90,6 +94,9 @@ public partial class App
             services.AddSingleton<LibraryInstallPage>();
             services.AddSingleton<LibraryInstallViewModel>();
 
+            services.AddSingleton<OverlayPage>();
+            services.AddSingleton<OverlayViewModel>();
+
             services.AddSingleton<ActionPage>();
             services.AddSingleton<ActionViewModel>();
             services.AddSingleton<ActionExceptionPage>();

diff --git a/src/PipManager/PipManager.csproj b/src/PipManager/PipManager.csproj
@@ -43,6 +43,7 @@
 		<PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
 		<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
 		<PackageReference Include="WPF-UI.Tray" Version="3.0.3" />
+		<PackageReference Include="XamlFlair.WPF" Version="1.2.13" />
 	</ItemGroup>
 
 	<ItemGroup>

diff --git a/src/PipManager/Resources/Animations.xaml b/src/PipManager/Resources/Animations.xaml
@@ -0,0 +1,259 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:cor="clr-namespace:System;assembly=mscorlib"
+					xmlns:xamlFlair="clr-namespace:XamlFlair;assembly=XamlFlair.WPF">
+
+	<cor:Double x:Key="BlurRadius">24</cor:Double>
+	<cor:Double x:Key="SmallScaleFactor">0.75</cor:Double>
+	<cor:Double x:Key="LargeScaleFactor">1.25</cor:Double>
+	<xamlFlair:Offset x:Key="PositiveOffset"
+			   OffsetValue="50" />
+	<xamlFlair:Offset x:Key="NegativeOffset"
+			   OffsetValue="-50" />
+
+	<!-- ========================================================== -->
+	<!-- ================== SIMPLE ANIMATIONS ===================== -->
+	<!-- ========================================================== -->
+
+	<xamlFlair:AnimationSettings x:Key="FadeIn"
+						  Kind="FadeFrom"
+						  Opacity="0" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOut"
+						  Kind="FadeTo"
+						  Opacity="0" />
+
+	<xamlFlair:AnimationSettings x:Key="Unblur"
+						  Kind="BlurFrom"
+						  BlurRadius="{StaticResource BlurRadius}" />
+
+	<xamlFlair:AnimationSettings x:Key="Blur"
+						  Kind="BlurTo"
+						  BlurRadius="{StaticResource BlurRadius}" />
+
+	<!-- Scale to a larger value -->
+	<xamlFlair:AnimationSettings x:Key="Expand"
+						  Kind="ScaleXTo,ScaleYTo"
+						  ScaleX="{StaticResource LargeScaleFactor}"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<!-- Scale from a larger value -->
+	<xamlFlair:AnimationSettings x:Key="Contract"
+						  Kind="ScaleXFrom,ScaleYFrom"
+						  ScaleX="{StaticResource LargeScaleFactor}"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<!-- Scale from a smaller value -->
+	<xamlFlair:AnimationSettings x:Key="Grow"
+						  Kind="ScaleXFrom,ScaleYFrom"
+						  ScaleX="{StaticResource SmallScaleFactor}"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<!-- Scale to a smaller value -->
+	<xamlFlair:AnimationSettings x:Key="Shrink"
+						  Kind="ScaleXTo,ScaleYTo"
+						  ScaleX="{StaticResource SmallScaleFactor}"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleToLeft"
+						  Kind="ScaleXTo"
+						  ScaleX="0"
+						  TransformCenterPoint="0,0.5" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleToTop"
+						  Kind="ScaleYTo"
+						  ScaleY="0"
+						  TransformCenterPoint="0.5,0" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleToRight"
+						  Kind="ScaleXTo"
+						  ScaleX="0"
+						  TransformCenterPoint="1,0.5" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleToBottom"
+						  Kind="ScaleYTo"
+						  ScaleY="0"
+						  TransformCenterPoint="0.5,1" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleFromLeft"
+						  Kind="ScaleXFrom"
+						  ScaleX="0"
+						  TransformCenterPoint="0,0.5" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleFromTop"
+						  Kind="ScaleYFrom"
+						  ScaleY="0"
+						  TransformCenterPoint="0.5,0" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleFromRight"
+						  Kind="ScaleXFrom"
+						  ScaleX="0"
+						  TransformCenterPoint="1,0.5" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleFromBottom"
+						  Kind="ScaleYFrom"
+						  ScaleY="0"
+						  TransformCenterPoint="0.5,1" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleHorizontally"
+						  Kind="ScaleXFrom"
+						  ScaleX="0" />
+
+	<xamlFlair:AnimationSettings x:Key="ScaleVertically"
+						  Kind="ScaleYFrom"
+						  ScaleY="0" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideFromLeft"
+						  Kind="TranslateXFrom"
+						  OffsetX="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideFromTop"
+						  Kind="TranslateYFrom"
+						  OffsetY="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideFromRight"
+						  Kind="TranslateXFrom"
+						  OffsetX="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideFromBottom"
+						  Kind="TranslateYFrom"
+						  OffsetY="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideToLeft"
+						  Kind="TranslateXTo"
+						  OffsetX="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideToTop"
+						  Kind="TranslateYTo"
+						  OffsetY="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideToRight"
+						  Kind="TranslateXTo"
+						  OffsetX="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="SlideToBottom"
+						  Kind="TranslateYTo"
+						  OffsetY="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="RotateClockwise"
+						  Kind="RotateTo"
+						  Rotation="360" />
+
+	<xamlFlair:AnimationSettings x:Key="RotateCounterClockwise"
+						  Kind="RotateTo"
+						  Rotation="-360" />
+
+	<!-- ========================================================== -->
+	<!-- ================= COMPOSITE ANIMATIONS =================== -->
+	<!-- ========================================================== -->
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndSlideFromLeft"
+						  Kind="FadeFrom,TranslateXFrom"
+						  Opacity="0"
+						  OffsetX="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndSlideFromTop"
+						  Kind="FadeFrom,TranslateYFrom"
+						  Opacity="0"
+						  OffsetY="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndSlideFromRight"
+						  Kind="FadeFrom,TranslateXFrom"
+						  Opacity="0"
+						  OffsetX="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndSlideFromBottom"
+						  Kind="FadeFrom,TranslateYFrom"
+						  Opacity="0"
+						  OffsetY="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndSlideToLeft"
+						  Kind="FadeTo,TranslateXTo"
+						  Opacity="0"
+						  OffsetX="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndSlideToTop"
+						  Kind="FadeTo,TranslateYTo"
+						  Opacity="0"
+						  OffsetY="{StaticResource NegativeOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndSlideToRight"
+						  Kind="FadeTo,TranslateXTo"
+						  Opacity="0"
+						  OffsetX="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndSlideToBottom"
+						  Kind="FadeTo,TranslateYTo"
+						  Opacity="0"
+						  OffsetY="{StaticResource PositiveOffset}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndGrow"
+						  Kind="FadeFrom,ScaleXFrom,ScaleYFrom"
+						  Opacity="0"
+						  ScaleX="{StaticResource SmallScaleFactor}"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndGrowHorizontally"
+						  Kind="FadeFrom,ScaleXFrom"
+						  Opacity="0"
+						  ScaleX="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndGrowVertically"
+						  Kind="FadeFrom,ScaleYFrom"
+						  Opacity="0"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndContract"
+						  Kind="FadeFrom,ScaleXFrom,ScaleYFrom"
+						  Opacity="0"
+						  ScaleX="{StaticResource LargeScaleFactor}"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndContractHorizontally"
+						  Kind="FadeFrom,ScaleXFrom"
+						  Opacity="0"
+						  ScaleX="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndContractVertically"
+						  Kind="FadeFrom,ScaleYFrom"
+						  Opacity="0"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndShrink"
+						  Kind="FadeTo,ScaleXTo,ScaleYTo"
+						  Opacity="0"
+						  ScaleX="{StaticResource SmallScaleFactor}"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndShrinkHorizontally"
+						  Kind="FadeTo,ScaleXTo"
+						  Opacity="0"
+						  ScaleX="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndShrinkVertically"
+						  Kind="FadeTo,ScaleYTo"
+						  Opacity="0"
+						  ScaleY="{StaticResource SmallScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndExpand"
+						  Kind="FadeTo,ScaleXTo,ScaleYTo"
+						  Opacity="0"
+						  ScaleX="{StaticResource LargeScaleFactor}"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndExpandHorizontally"
+						  Kind="FadeTo,ScaleXTo"
+						  Opacity="0"
+						  ScaleX="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeOutAndExpandVertically"
+						  Kind="FadeTo,ScaleYTo"
+						  Opacity="0"
+						  ScaleY="{StaticResource LargeScaleFactor}" />
+
+	<xamlFlair:AnimationSettings x:Key="FadeInAndRotate"
+						  Kind="FadeFrom,RotateTo"
+						  Opacity="0"
+						  Rotation="360" />
+
+</ResourceDictionary>
diff --git a/src/PipManager/Services/Overlay/IOverlayService.cs b/src/PipManager/Services/Overlay/IOverlayService.cs
@@ -0,0 +1,6 @@
+namespace PipManager.Services.Overlay;
+
+public interface IOverlayService
+{
+    public void ShowOverlay();
+}
diff --git a/src/PipManager/Services/Overlay/OverlayService.cs b/src/PipManager/Services/Overlay/OverlayService.cs
@@ -0,0 +1,16 @@
+using PipManager.ViewModels.Pages.Overlay;
+
+namespace PipManager.Services.Overlay;
+
+public class OverlayService: IOverlayService
+{
+    private OverlayViewModel _overlayViewModel;
+    public OverlayService(OverlayViewModel overlayViewModel)
+    {
+        _overlayViewModel = overlayViewModel;
+    }
+    public void ShowOverlay()
+    {
+        _overlayViewModel.IsOverlayVisible = true;
+    }
+}
diff --git a/src/PipManager/ViewModels/Pages/Lab/LabViewModel.cs b/src/PipManager/ViewModels/Pages/Lab/LabViewModel.cs
@@ -1,11 +1,12 @@
 using PipManager.Models.Action;
 using PipManager.Services.Action;
+using PipManager.Services.Overlay;
 using Serilog;
 using Wpf.Ui.Controls;
 
 namespace PipManager.ViewModels.Pages.Lab;
 
-public partial class LabViewModel(IActionService actionService)
+public partial class LabViewModel(IActionService actionService, IOverlayService overlayService)
     : ObservableObject, INavigationAware
 {
     private bool _isInitialized;
@@ -21,6 +22,12 @@ private void ActionTest()
         ));
     }
 
+    [RelayCommand]
+    private void OverlayTest()
+    {
+        overlayService.ShowOverlay();
+    }
+
     public void OnNavigatedTo()
     {
         if (!_isInitialized)

diff --git a/src/PipManager/ViewModels/Pages/Overlay/OverlayViewModel.cs b/src/PipManager/ViewModels/Pages/Overlay/OverlayViewModel.cs
@@ -0,0 +1,18 @@
+using PipManager.Views.Pages.Overlay;
+
+namespace PipManager.ViewModels.Pages.Overlay;
+
+public partial class OverlayViewModel : ObservableObject
+{
+    [ObservableProperty]
+    private int _testValue;
+
+    [ObservableProperty]
+    private bool _isOverlayVisible;
+
+    [RelayCommand]
+    private void CloseOverlay()
+    {
+        IsOverlayVisible = false;
+    }
+}
diff --git a/src/PipManager/Views/Pages/Lab/LabPage.xaml b/src/PipManager/Views/Pages/Lab/LabPage.xaml
@@ -18,6 +18,6 @@
     mc:Ignorable="d">
 
     <Grid>
-        <ui:Button Command="{Binding ViewModel.ActionTestCommand}" Content="Action Test" />
+        <ui:Button Command="{Binding ViewModel.OverlayTestCommand}" Content="Overlay Test" />
     </Grid>
 </Page>