Add animation for generate button

cezarypiatek · Sep 1, 2024 · 775ffde · 775ffde
1 parent a9b7d8e
commit 775ffde
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/ScriptRunner/ScriptRunner.GUI/ParamsPanelFactory.cs b/src/ScriptRunner/ScriptRunner.GUI/ParamsPanelFactory.cs
@@ -82,13 +82,17 @@ public ParamsPanel Create(ScriptConfig action, Dictionary<string, string> values
                 };
                 generateButton.Click += async(sender, args) =>
                 {
+                    generateButton.IsEnabled = false;
+                    generateButton.Classes.Add("spinning");
                     var result = await commandExecutor($"Generate parameter for '{param.Name}'", param.ValueGeneratorCommand);
                     Dispatcher.UIThread.Post(() =>
                     {
                         //TODO: Handle other controls
                         if (controlRecord is { Control: TextBox tb })
                         {
                             tb.Text = result?.Trim() ?? string.Empty;
+                            generateButton.Classes.Remove("spinning");
+                            generateButton.IsEnabled = true;
                         }
                     });
                 };

diff --git a/src/ScriptRunner/ScriptRunner.GUI/Themes/StyleClasses.axaml b/src/ScriptRunner/ScriptRunner.GUI/Themes/StyleClasses.axaml
@@ -1,6 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:views="clr-namespace:ScriptRunner.GUI.Views">
+        xmlns:views="clr-namespace:ScriptRunner.GUI.Views"
+        xmlns:tanker="https://github.com/projektanker/icons.avalonia">
     <Design.PreviewWith>
         <StackPanel>
             <TextBlock Classes="h1" Text="Heading 1"></TextBlock>
@@ -120,5 +121,18 @@
         <Setter Property="Background" Value="Black"></Setter>
         <Setter Property="Padding" Value="10"></Setter>
 	</Style>
-
+    <Style Selector="Button.spinning tanker|Icon">
+        <Style.Animations>
+            <Animation Duration="0:0:2" IterationCount="INFINITE">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Opacity" Value="0.0"/>
+                    <Setter Property="RotateTransform.Angle" Value="0.0"/>
+                </KeyFrame>
+                <KeyFrame Cue="100%"> 
+                    <Setter Property="Opacity" Value="1.0"/>
+                    <Setter Property="RotateTransform.Angle" Value="360.0"/>
+                </KeyFrame>
+            </Animation> 
+        </Style.Animations>
+    </Style>
 </Styles>