Feature: Auto clear Status Center badge when opening flyout (#17153)

Author: yaira2

src/Files.App/Strings/en-US/Resources.resw

@@ -4232,4 +4232,8 @@
   <data name="ShowStatusCenterButton" xml:space="preserve">
     <value>Show status center button</value>
   </data>
+  <data name="StatusCenterProgressRing" xml:space="preserve">
+    <value>Status center progress ping</value>
+    <comment>Screen reader name for the status center progress ring</comment>
+  </data>
 </root>

src/Files.App/UserControls/NavigationToolbar.xaml

@@ -29,6 +29,7 @@
 			<converters:NullToTrueConverter x:Key="NullToFalseConverter" Inverse="True" />
 			<converters:NullToVisibilityCollapsedConverter x:Key="NullToVisibilityCollapsedConverter" />
 			<converters1:BoolNegationConverter x:Key="BoolNegationConverter" />
+			<converters:VisibilityInvertConverter x:Key="VisibilityInvertConverter" />
 
 			<ResourceDictionary.MergedDictionaries>
 				<ResourceDictionary Source="ms-appx:///UserControls/KeyboardShortcut/KeyboardShortcut.xaml" />
@@ -476,36 +477,35 @@
 				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}" />
+						Style="{StaticResource App.ThemedIcons.StatusCenter}"
+						Visibility="{x:Bind OngoingTasksViewModel.ShowProgressRing, Converter={StaticResource VisibilityInvertConverter}, Mode=OneWay}" />
 
 					<ProgressRing
 						x:Name="MedianOperationProgressRing"
 						HorizontalAlignment="Center"
 						VerticalAlignment="Center"
-						x:Load="{x:Bind OngoingTasksViewModel.HasAnyItemInProgress, Mode=OneWay}"
-						Background="{ThemeResource SubtleFillColorSecondaryBrush}"
+						AutomationProperties.Name="{helpers:ResourceString Name=StatusCenterProgressRing}"
 						IsIndeterminate="False"
+						Visibility="{x:Bind OngoingTasksViewModel.ShowProgressRing, 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.ShowProgressRing, 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">
@@ -517,7 +517,7 @@
 						<ucs:StatusCenter
 							x:Name="OngoingTasksControl"
 							Width="400"
-							MinHeight="300"
+							MinHeight="120"
 							MaxHeight="500"
 							x:FieldModifier="public"
 							IsTabStop="True" />
@@ -629,6 +629,7 @@
 							To="0" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SystemFillColorSuccessBrush}" />
 						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource SuccessIconInfoBadgeStyle}" />
 					</VisualState.Setters>
 				</VisualState>
@@ -640,7 +641,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">
@@ -651,7 +654,9 @@
 							To="2" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource CriticalValueInfoBadgeStyle}" />
+						<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="TasksCompletionWithFailure">
@@ -662,11 +667,13 @@
 							To="3" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
+						<Setter Target="MedianOperationProgressRing.Background" Value="{ThemeResource SystemFillColorCriticalBrush}" />
+						<Setter Target="StatusCenterIcon.Visibility" Value="Collapsed" />
 						<Setter Target="StatusInfoBadge.Style" Value="{StaticResource CriticalIconInfoBadgeStyle}" />
 					</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)
+					ShowProgressRing = true;
+
+				return InProgressItemCount > 0;
+			}
+		}
 
 		public bool HasAnyItem
 			=> StatusCenterItems.Any();
 
+
+		private bool _ShowProgressRing = false;
+		public bool ShowProgressRing
+		{
+			get => _ShowProgressRing;
+			private set => SetProperty(ref _ShowProgressRing, value);
+
+		}
+
 		public int InfoBadgeState
 		{
 			get
@@ -64,6 +81,11 @@ public StatusCenterViewModel()
 			StatusCenterItems.CollectionChanged += (s, e) => OnPropertyChanged(nameof(HasAnyItem));
 		}
 
+		public void OnStatusCenterFlyoutOpened()
+		{
+			ShowProgressRing = HasAnyItemInProgress || InfoBadgeState == 3;
+		}
+
 		public StatusCenterItem AddItem(
 			string headerResource,
 			string subHeaderResource,