POC

Author: yaira2

src/Files.App/UserControls/NavigationToolbar.xaml

@@ -474,36 +474,33 @@
 				Visibility="{x:Bind ViewModel.ShowStatusCenterButton, Mode=OneWay}">
 
 				<Grid Margin="-16">
-
 					<controls:ThemedIcon
 						x:Name="StatusCenterIcon"
 						Width="16"
 						Height="16"
-						x:Load="{x:Bind OngoingTasksViewModel.HasAnyItem, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
 						Style="{StaticResource App.ThemedIcons.StatusCenter}" />
 
 					<ProgressRing
 						x:Name="MedianOperationProgressRing"
 						HorizontalAlignment="Center"
 						VerticalAlignment="Center"
-						x:Load="{x:Bind OngoingTasksViewModel.HasAnyItemInProgress, Mode=OneWay}"
-						Background="{ThemeResource SubtleFillColorSecondaryBrush}"
 						IsIndeterminate="False"
+						Visibility="{x:Bind OngoingTasksViewModel.ShowStatusCenterProgressRing, Mode=OneWay}"
 						Value="{x:Bind OngoingTasksViewModel.AverageOperationProgressValue, Mode=OneWay}" />
 
 					<InfoBadge
 						x:Name="StatusInfoBadge"
 						HorizontalAlignment="Center"
 						VerticalAlignment="Center"
-						Visibility="{x:Bind OngoingTasksViewModel.HasAnyItem, Mode=OneWay}"
+						Visibility="{x:Bind OngoingTasksViewModel.HasAnyItemInProgress, Mode=OneWay}"
 						Value="{x:Bind OngoingTasksViewModel.InfoBadgeValue, Mode=OneWay}" />
-
 				</Grid>
 
 				<Button.Flyout>
 					<Flyout
 						contract8Present:ShouldConstrainToRootBounds="False"
 						AutomationProperties.Name="{helpers:ResourceString Name=StatusCenter}"
+						Opened="{x:Bind OngoingTasksViewModel.OnStatusCenterFlyoutOpened, Mode=OneWay}"
 						Placement="BottomEdgeAlignedRight">
 						<Flyout.FlyoutPresenterStyle>
 							<Style TargetType="FlyoutPresenter">
@@ -627,7 +624,7 @@
 							To="0" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource SuccessIconInfoBadgeStyle}" />
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SystemFillColorSuccessBrush}" />
 					</VisualState.Setters>
 				</VisualState>
 				<VisualState x:Name="TasksOnging">
@@ -638,7 +635,9 @@
 							To="1" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource AttentionValueInfoBadgeStyle}" />
+						<Setter Target="MedianOperationProgressRing.Foreground" Value="{ThemeResource SystemFillColorAttentionBrush}" />
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
+						<Setter Target="StatusCenterIcon.Visibility" Value="Collapsed" />
 					</VisualState.Setters>
 				</VisualState>
 				<VisualState x:Name="TasksFailure">
@@ -649,7 +648,7 @@
 							To="2" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource CriticalValueInfoBadgeStyle}" />
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SystemFillColorCriticalBrush}" />
 					</VisualState.Setters>
 				</VisualState>
 				<VisualState x:Name="TasksCompletionWithFailure">
@@ -660,11 +659,11 @@
 							To="3" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource CriticalIconInfoBadgeStyle}" />
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SystemFillColorCriticalBrush}" />
 					</VisualState.Setters>
 				</VisualState>
 			</VisualStateGroup>
 		</VisualStateManager.VisualStateGroups>
 	</Grid>
 
-</UserControl>
+</UserControl>

src/Files.App/ViewModels/UserControls/StatusCenterViewModel.cs

@@ -31,11 +31,28 @@ public int InProgressItemCount
 		}
 
 		public bool HasAnyItemInProgress
-			=> InProgressItemCount > 0;
+		{
+			get
+			{
+				if (InProgressItemCount > 0)
+					ShowStatusCenterProgressRing = true;
+
+				return InProgressItemCount > 0;
+			}
+		}
 
 		public bool HasAnyItem
 			=> StatusCenterItems.Any();
 
+
+		private bool _ShowStatusCenterProgressRing = false;
+		public bool ShowStatusCenterProgressRing
+		{
+			get => _ShowStatusCenterProgressRing;
+			private set => SetProperty(ref _ShowStatusCenterProgressRing, value);
+
+		}
+
 		public int InfoBadgeState
 		{
 			get
@@ -64,6 +81,11 @@ public StatusCenterViewModel()
 			StatusCenterItems.CollectionChanged += (s, e) => OnPropertyChanged(nameof(HasAnyItem));
 		}
 
+		public void OnStatusCenterFlyoutOpened()
+		{
+			ShowStatusCenterProgressRing = HasAnyItemInProgress;
+		}
+
 		public StatusCenterItem AddItem(
 			string headerResource,
 			string subHeaderResource,