💾 Feat(Dashboard): Added canceled animation for ExchangeDeviceKey win…

…dow.
Crequency · Mar 5, 2024 · 57f3146 · 57f3146
1 parent 53f36c5
commit 57f3146
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 7 deletions.
diff --git a/KitX Dashboard/Models/DeviceCase.cs b/KitX Dashboard/Models/DeviceCase.cs
@@ -101,7 +101,7 @@ public override void InitCommands()
 
                 window.OnCancel(async () =>
                 {
-                    window.Close();
+                    window.Canceled();
 
                     ConstantTable.IsExchangingDeviceKey = false;
 
@@ -116,7 +116,7 @@ public override void InitCommands()
 
                 ViewInstances.ShowWindow(window);
 
-                EventService.OnReceiveCancelExchangingDeviceKey += () => Dispatcher.UIThread.Post(window.Close);
+                EventService.OnReceiveCancelExchangingDeviceKey += () => Dispatcher.UIThread.Post(() => window.Canceled());
 
                 using var http = new HttpClient();
 

diff --git a/KitX Dashboard/Network/DevicesNetwork/DevicesServerControllers/V1/DeviceController.cs b/KitX Dashboard/Network/DevicesNetwork/DevicesServerControllers/V1/DeviceController.cs
@@ -40,7 +40,7 @@ public IActionResult ExchangeKey([FromQuery] string verifyCodeSHA1, [FromQuery]
         {
             var window = new ExchangeDeviceKeyWindow();
 
-            EventService.OnReceiveCancelExchangingDeviceKey += () => Dispatcher.UIThread.Post(window.Close);
+            EventService.OnReceiveCancelExchangingDeviceKey += () => Dispatcher.UIThread.Post(() => window.Canceled());
 
             ViewInstances.ShowWindow(
                 window.OnVerificationCodeEntered(async code =>
@@ -119,7 +119,7 @@ public IActionResult ExchangeKey([FromQuery] string verifyCodeSHA1, [FromQuery]
                     }
                 }).OnCancel(async () =>
                 {
-                    window.Close();
+                    window.Canceled();
 
                     ConstantTable.IsExchangingDeviceKey = false;
 

diff --git a/KitX Dashboard/ViewModels/ExchangeDeviceKeyWindowViewModel.cs b/KitX Dashboard/ViewModels/ExchangeDeviceKeyWindowViewModel.cs
@@ -76,6 +76,14 @@ public double SuccessedPanelOpacity
         set => this.RaiseAndSetIfChanged(ref successedPanelOpacity, value);
     }
 
+    private double canceledPanelOpacity = 0.0;
+
+    public double CanceledPanelOpacity
+    {
+        get => canceledPanelOpacity;
+        set => this.RaiseAndSetIfChanged(ref canceledPanelOpacity, value);
+    }
+
     public string CurrentCodeIndex => updatingIndex.ToString();
 
     public ObservableCollection<string> Logs { get; } = [];

diff --git a/KitX Dashboard/Views/ExchangeDeviceKeyWindow.axaml b/KitX Dashboard/Views/ExchangeDeviceKeyWindow.axaml
@@ -143,8 +143,8 @@
                     </DoubleTransition>
                 </Transitions>
             </Grid.Transitions>
-            <icon:MaterialIcon Width="50"
-                               Height="50"
+            <icon:MaterialIcon Width="70"
+                               Height="70"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Kind="CheckCircle">
@@ -156,5 +156,30 @@
                 </icon:MaterialIcon.Foreground>
             </icon:MaterialIcon>
         </Grid>
+        <Grid Background="{DynamicResource ThemePrimaryAccent}"
+              IsHitTestVisible="False"
+              Opacity="{Binding CanceledPanelOpacity}">
+            <Grid.Transitions>
+                <Transitions>
+                    <DoubleTransition Property="Opacity" Duration="0:0:0.3">
+                        <DoubleTransition.Easing>
+                            <CubicEaseInOut/>
+                        </DoubleTransition.Easing>
+                    </DoubleTransition>
+                </Transitions>
+            </Grid.Transitions>
+            <icon:MaterialIcon Width="70"
+                               Height="70"
+                               HorizontalAlignment="Center"
+                               VerticalAlignment="Center"
+                               Kind="CloseCircle">
+                <icon:MaterialIcon.Foreground>
+                    <LinearGradientBrush>
+                        <GradientStop Offset="0" Color="#F05F57"/>
+                        <GradientStop Offset="1" Color="#360940"/>
+                    </LinearGradientBrush>
+                </icon:MaterialIcon.Foreground>
+            </icon:MaterialIcon>
+        </Grid>
     </Grid>
 </Window>
diff --git a/KitX Dashboard/Views/ExchangeDeviceKeyWindow.axaml.cs b/KitX Dashboard/Views/ExchangeDeviceKeyWindow.axaml.cs
@@ -115,11 +115,30 @@ public ExchangeDeviceKeyWindow ClearLogs()
         return this;
     }
 
+    public ExchangeDeviceKeyWindow Canceled()
+    {
+        viewModel.CanceledPanelOpacity = 1.0;
+
+        var timer = new Timer(2 * 1000);
+
+        timer.Elapsed += (_, _) =>
+        {
+            Dispatcher.UIThread.Post(Close);
+
+            timer.Stop();
+            timer.Dispose();
+        };
+
+        timer.Start();
+
+        return this;
+    }
+
     public ExchangeDeviceKeyWindow Success()
     {
         viewModel.SuccessedPanelOpacity = 1.0;
 
-        var timer = new Timer(3 * 1000);
+        var timer = new Timer(2 * 1000);
 
         timer.Elapsed += (_, _) =>
         {