feat: Add entrance and exit animation of HR ui notif

jeromelaban · Jul 9, 2024 · ea10c3e · ea10c3e
1 parent 7ffa6e5
commit ea10c3e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 15 deletions.
diff --git a/src/Uno.UI.RemoteControl/HotReload/ClientHotReloadProcessor.Common.Status.cs b/src/Uno.UI.RemoteControl/HotReload/ClientHotReloadProcessor.Common.Status.cs
@@ -83,7 +83,10 @@ public void ReportServerState(HotReloadState state)
 #if HAS_UNO_WINUI
 		public void ReportServerStatus(HotReloadStatusMessage status)
 		{
-			_serverState ??= status.State; // Do not override the state if it has already been set (debugger attached with dev-server)
+			if (_serverState is not HotReloadState.Disabled)
+			{
+				_serverState = status.State; // Do not override the state if it has already been set (debugger attached with dev-server)
+			}
 			ImmutableInterlocked.Update(ref _serverOperations, UpdateOperations, status.Operations);
 			NotifyStatusChanged();
 

diff --git a/src/Uno.UI.RemoteControl/HotReload/HotReloadStatusView.Entries.cs b/src/Uno.UI.RemoteControl/HotReload/HotReloadStatusView.Entries.cs
@@ -67,11 +67,17 @@ public ServerEntry(HotReloadServerOperationData srvOp)
 		Update(srvOp);
 	}
 
+	/// <summary>
+	/// Indicates if this notification is the final one for the operation, INCLUDING application wide.
+	/// </summary>
+	public bool IsFinal { get; private set; }
+
 	public void Update(HotReloadServerOperationData srvOp)
 	{
+		IsFinal = srvOp.Result is not HotReloadServerResult.Success;
 		(IsSuccess, Icon) = srvOp.Result switch
 		{
-			null => (default(bool?), EntryIcon.HotReload | EntryIcon.Loading),
+			null => (default, EntryIcon.HotReload | EntryIcon.Loading),
 			HotReloadServerResult.Success or HotReloadServerResult.NoChanges => (true, EntryIcon.HotReload | EntryIcon.Success),
 			_ => (false, EntryIcon.HotReload | EntryIcon.Error)
 		};

diff --git a/src/Uno.UI.RemoteControl/HotReload/HotReloadStatusView.cs b/src/Uno.UI.RemoteControl/HotReload/HotReloadStatusView.cs
@@ -103,7 +103,7 @@ public DiagnosticViewNotification? FailureNotification
 	#endregion
 
 	private readonly IDiagnosticViewContext _ctx;
-	private string _resultState = ResultNoneVisualStateName;
+	private (string state, HotReloadLogEntry? entry) _result = (ResultNoneVisualStateName, null);
 
 	private Status? _hotReloadStatus;
 	private RemoteControlStatus? _devServerStatus;
@@ -242,19 +242,22 @@ EntryIcon.Warning when operationEntries.Any(op => op.IsSuccess ?? false) => Stat
 		}
 
 		// Then the "result" visual state (en send notifications).
-		var resultState = operationEntries switch
+		var result = operationEntries switch
 		{
-			{ Count: 0 } => ResultNoneVisualStateName,
-			_ when operationEntries.Any(op => op.IsSuccess is null) => ResultNoneVisualStateName, // Makes sure to restore to None while processing!
-			[{ IsSuccess: true }, ..] => ResultSuccessVisualStateName,
-			_ => ResultFailedVisualStateName
+			{ Count: 0 } => (ResultNoneVisualStateName, default),
+			_ when operationEntries.Any(op => op.IsSuccess is null) => (ResultNoneVisualStateName, default),
+			[ServerEntry { IsFinal: true, IsSuccess: true } e, ..] => (ResultSuccessVisualStateName, e),
+			[ServerEntry { IsFinal: true, IsSuccess: false } e, ..] => (ResultFailedVisualStateName, e),
+			[ApplicationEntry { IsSuccess: true } e, ..] => (ResultSuccessVisualStateName, e),
+			[ApplicationEntry { IsSuccess: false } e, ..] => (ResultFailedVisualStateName, e),
+			_ => (ResultNoneVisualStateName, default(HotReloadLogEntry))
 		};
-		if (resultState != _resultState)
+		if (result != _result)
 		{
-			_resultState = resultState;
-			VisualStateManager.GoToState(this, resultState, useTransitions);
+			_result = result;
+			VisualStateManager.GoToState(this, _result.state, useTransitions);
 
-			var notif = resultState switch
+			var notif = _result.state switch
 			{
 				ResultNoneVisualStateName when operationEntries is { Count: > 0 } => ProcessingNotification,
 				ResultSuccessVisualStateName => SuccessNotification,

diff --git a/src/Uno.UI.Toolkit/Diagnostics/DiagnosticsOverlay.xaml b/src/Uno.UI.Toolkit/Diagnostics/DiagnosticsOverlay.xaml
@@ -36,7 +36,8 @@
 						x:Name="Root"
 						CornerRadius="{TemplateBinding CornerRadius}"
 						Height="{TemplateBinding Height}"
-						Orientation="Horizontal">
+						Orientation="Horizontal"
+						Spacing="4">
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="DisplayMode">
 								<VisualState x:Name="Compact">
@@ -51,16 +52,36 @@
 								</VisualState>
 							</VisualStateGroup>
 							<VisualStateGroup x:Name="Notification">
+								<VisualStateGroup.Transitions>
+									<VisualTransition To="Collapsed">
+										<Storyboard>
+											<DoubleAnimation
+												Storyboard.TargetName="PART_Notification"
+												Storyboard.TargetProperty="Opacity"
+												To="0"
+												Duration="0:0:1" />
+										</Storyboard>
+									</VisualTransition>
+									<VisualTransition To="Visible">
+										<Storyboard>
+											<DoubleAnimation
+												Storyboard.TargetName="PART_Notification"
+												Storyboard.TargetProperty="Opacity"
+												From="0.5"
+												To="1"
+												Duration="0:0:0.2" />
+										</Storyboard>
+									</VisualTransition>
+								</VisualStateGroup.Transitions>
 								<VisualState x:Name="Collapsed">
 									<VisualState.Setters>
 										<Setter Target="PART_Notification.MaxWidth" Value="0" />
-										<Setter Target="PART_Notification.Margin" Value="0" />
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="Visible">
 									<VisualState.Setters>
 										<Setter Target="PART_Notification.MaxWidth" Value="512" />
-										<Setter Target="PART_Notification.Margin" Value="4,0" />
+										<Setter Target="PART_Notification.Opacity" Value="1" />
 									</VisualState.Setters>
 								</VisualState>
 							</VisualStateGroup>
@@ -100,6 +121,7 @@
 
 						<ContentPresenter
 							x:Name="PART_Notification"
+							Opacity="0.5"
 							VerticalAlignment="Center" />
 					</StackPanel>
 				</ControlTemplate>