[Settings] Add "new" labels to navigation for new utilities (#36939)

* initial implementation

* move new label to zoomit

* cleanup

* more cleanup

* fix XAML formatting

* update padding to 4px

* add badge to dashboard item

* fix XAML formatting

* Tweaking UX

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>
Co-authored-by: Jaime Bernardo <jaime@janeasystems.com>

src/settings-ui/Settings.UI/SettingsXAML/App.xaml

@@ -11,6 +11,7 @@
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/Button.xaml" />
+                <ResourceDictionary Source="/SettingsXAML/Styles/InfoBadge.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Colors.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Themes/Generic.xaml" />
                 <!--  Other merged dictionaries here  -->

src/settings-ui/Settings.UI/SettingsXAML/Styles/InfoBadge.xaml

@@ -0,0 +1,23 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <Style x:Key="NewInfoBadge" TargetType="InfoBadge">
+        <Setter Property="Padding" Value="5,1,5,2" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="InfoBadge">
+                    <Border
+                        x:Name="RootGrid"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.InfoBadgeCornerRadius}">
+                        <TextBlock
+                            x:Uid="SettingsPage_NewInfoBadge"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            FontSize="10" />
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml

@@ -348,17 +348,28 @@
                                             <ColumnDefinition Width="Auto" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
-                                        <Image Width="20" Margin="0,0,0,0">
+                                        <Image
+                                            Grid.Column="0"
+                                            Width="20"
+                                            Margin="0,0,0,0">
                                             <Image.Source>
                                                 <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                             </Image.Source>
                                         </Image>
-                                        <TextBlock
+                                        <StackPanel
                                             Grid.Column="1"
                                             VerticalAlignment="Center"
-                                            FontWeight="SemiBold"
+                                            Orientation="Horizontal">
-                                            Text="{x:Bind Label, Mode=OneWay}"
+                                            <TextBlock
-                                            TextTrimming="CharacterEllipsis" />
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind Label, Mode=OneWay}"
+                                                TextTrimming="CharacterEllipsis" />
+                                            <InfoBadge
+                                                Margin="4,0,0,0"
+                                                Style="{StaticResource NewInfoBadge}"
+                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                        </StackPanel>
                                         <FontIcon
                                             Grid.Column="2"
                                             Width="20"
@@ -440,17 +451,25 @@
                                             <ColumnDefinition Width="Auto" />
                                             <ColumnDefinition Width="Auto" />
                                         </Grid.ColumnDefinitions>
-                                        <Image Width="20">
+                                        <Image Grid.Column="0" Width="20">
                                             <Image.Source>
                                                 <BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
                                             </Image.Source>
                                         </Image>
-                                        <TextBlock
+                                        <StackPanel
                                             Grid.Column="1"
                                             VerticalAlignment="Center"
-                                            FontWeight="SemiBold"
+                                            Orientation="Horizontal">
-                                            Text="{x:Bind Label, Mode=OneWay}"
+                                            <TextBlock
-                                            TextTrimming="CharacterEllipsis" />
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind Label, Mode=OneWay}"
+                                                TextTrimming="CharacterEllipsis" />
+                                            <InfoBadge
+                                                Margin="4,0,0,0"
+                                                Style="{StaticResource NewInfoBadge}"
+                                                Visibility="{x:Bind IsNew, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
+                                        </StackPanel>
                                         <FontIcon
                                             Grid.Column="2"
                                             Width="20"

src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml

@@ -110,6 +110,9 @@
                     x:Uid="Shell_TopLevelSystemTools"
                     Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/SystemTools.png}"
                     SelectsOnInvoked="False">
+                    <NavigationViewItem.InfoBadge>
+                        <InfoBadge Style="{StaticResource NewInfoBadge}" />
+                    </NavigationViewItem.InfoBadge>
                     <NavigationViewItem.MenuItems>
                         <NavigationViewItem
                             x:Uid="Shell_AdvancedPaste"
@@ -142,7 +145,11 @@
                         <NavigationViewItem
                             x:Uid="Shell_ZoomIt"
                             helpers:NavHelper.NavigateTo="views:ZoomItPage"
-                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ZoomIt.png}" />
+                            Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ZoomIt.png}">
+                            <NavigationViewItem.InfoBadge>
+                                <InfoBadge Style="{StaticResource NewInfoBadge}" />
+                            </NavigationViewItem.InfoBadge>
+                        </NavigationViewItem>
                     </NavigationViewItem.MenuItems>
                 </NavigationViewItem>
 

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -4880,4 +4880,8 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
   <data name="PowerLauncher_PluginWebsite.Text" xml:space="preserve">
     <value>Project website</value>
   </data>
+  <data name="SettingsPage_NewInfoBadge.Text" xml:space="preserve">
+    <value>NEW</value>
+	<comment>Must be all caps</comment>
+  </data>
 </root>

src/settings-ui/Settings.UI/ViewModels/DashboardListItem.cs

@@ -20,6 +20,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
 
         public string Label { get; set; }
 
+        public bool IsNew { get; set; }
+
         public string Icon { get; set; }
 
         public string ToolTip { get; set; }

src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs

@@ -74,6 +74,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
             {
                 Tag = moduleType,
                 Label = resourceLoader.GetString(ModuleHelper.GetModuleLabelResourceName(moduleType)),
+                IsNew = moduleType == ModuleType.ZoomIt,
                 IsEnabled = gpo == GpoRuleConfigured.Enabled || (gpo != GpoRuleConfigured.Disabled && ModuleHelper.GetIsModuleEnabled(generalSettingsConfig, moduleType)),
                 IsLocked = gpo == GpoRuleConfigured.Enabled || gpo == GpoRuleConfigured.Disabled,
                 Icon = ModuleHelper.GetModuleTypeFluentIconName(moduleType),