From 79bd825f9156c9b9a7c8e468198ecff9c76c2da7 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Mon, 24 Mar 2025 11:13:19 +0100
Subject: [PATCH] [cmdpal] UX tweaks (#38087)

- Removing the redundant icon + text in the bottom left corner
- Minor styling tweaks
- Adding subtle show/hide animations
- Improved narrator support for Settings button
- Minor design tweaks to the tags for better visibility (still needs more work in the future)

![SubtleAnimations](https://github.com/user-attachments/assets/d2f6bec3-f8d6-48a4-a533-c0f2e0c81f8c)
---
 .../Controls/CommandBar.xaml                  | 55 +++++++++++++------
 .../Microsoft.CmdPal.UI/Controls/Tag.xaml     | 14 ++---
 .../ExtViews/ListPage.xaml                    |  5 +-
 .../Microsoft.CmdPal.UI/Pages/ShellPage.xaml  | 32 +++++++++--
 .../Strings/en-us/Resources.resw              |  6 ++
 5 files changed, 82 insertions(+), 30 deletions(-)

diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
index 4bc9692b31..ac7c20aa92 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
@@ -3,6 +3,7 @@
     x:Class="Microsoft.CmdPal.UI.Controls.CommandBar"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
@@ -62,6 +63,27 @@
                         Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
                 </Grid>
             </DataTemplate>
+
+            <animations:ImplicitAnimationSet x:Name="ShowAnimations">
+                <animations:OpacityAnimation
+                    From="0"
+                    To="1.0"
+                    Duration="0:0:0.340" />
+                <animations:ScaleAnimation
+                    From="0.85"
+                    To="1"
+                    Duration="0:0:0.350" />
+            </animations:ImplicitAnimationSet>
+            <animations:ImplicitAnimationSet x:Name="HideAnimations">
+                <animations:OpacityAnimation
+                    From="1.0"
+                    To="0"
+                    Duration="0:0:0.240" />
+                <animations:ScaleAnimation
+                    From="1"
+                    To="0.85"
+                    Duration="0:0:0.350" />
+            </animations:ImplicitAnimationSet>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -80,15 +102,6 @@
             Margin="8,0,0,0"
             Tapped="PageIcon_Tapped"
             Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}">
-
-            <cpcontrols:IconBox
-                x:Name="IconBorder"
-                Width="16"
-                Height="16"
-                x:Load="{x:Bind IsLoaded, Mode=OneWay}"
-                CornerRadius="{StaticResource ControlCornerRadius}"
-                SourceKey="{x:Bind CurrentPageViewModel.Icon, Mode=OneWay}"
-                SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
             <InfoBadge Visibility="{x:Bind CurrentPageViewModel.HasStatusMessage, Mode=OneWay}" Value="{x:Bind CurrentPageViewModel.StatusMessages.Count, Mode=OneWay}" />
             <Grid.ContextFlyout>
                 <Flyout x:Name="StatusMessagesFlyout" Placement="TopEdgeAlignedLeft">
@@ -121,14 +134,15 @@
         </Grid>
         <Button
             x:Name="SettingsIconButton"
-            Margin="0,0,0,0"
+            x:Uid="SettingsButton"
+            animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+            animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+            ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
             Style="{StaticResource SubtleButtonStyle}"
             Tapped="SettingsIcon_Tapped"
             Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
-
             <StackPanel Orientation="Horizontal" Spacing="8">
                 <FontIcon
-                    HorizontalAlignment="Left"
                     VerticalAlignment="Center"
                     FontSize="16"
                     Glyph="&#xE713;" />
@@ -138,28 +152,29 @@
                     Text="Settings" />
             </StackPanel>
         </Button>
-
         <TextBlock
             Grid.Column="1"
             VerticalAlignment="Center"
-            FontSize="12"
+            Style="{StaticResource CaptionTextBlockStyle}"
             Text="{x:Bind CurrentPageViewModel.Title, Mode=OneWay}"
             Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}" />
-
         <StackPanel
             Grid.Column="2"
+            Padding="0,0,4,0"
             HorizontalAlignment="Right"
             Orientation="Horizontal"
             Spacing="4">
             <Button
                 x:Name="PrimaryButton"
                 Padding="6,4,4,4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 x:Load="{x:Bind IsLoaded, Mode=OneWay}"
                 Background="Transparent"
                 Style="{StaticResource SubtleButtonStyle}"
                 Tapped="PrimaryButton_Tapped"
                 Visibility="{x:Bind ViewModel.HasPrimaryCommand, Mode=OneWay}">
-
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <TextBlock
                         VerticalAlignment="Center"
@@ -183,11 +198,13 @@
             <Button
                 x:Name="SecondaryButton"
                 Padding="6,4,4,4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 x:Load="{x:Bind IsLoaded, Mode=OneWay}"
                 Style="{StaticResource SubtleButtonStyle}"
                 Tapped="SecondaryButton_Tapped"
                 Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
-
                 <StackPanel Orientation="Horizontal" Spacing="8">
                     <TextBlock
                         VerticalAlignment="Center"
@@ -226,7 +243,11 @@
             </Button>
             <Button
                 x:Name="MoreCommandsButton"
+                x:Uid="MoreCommandsButton"
                 Padding="4"
+                animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
+                animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
+                ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                 Content="{ui:FontIcon Glyph=&#xE712;,
                                       FontSize=16}"
                 Style="{StaticResource SubtleButtonStyle}"
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
index 7b783c024c..54f3c69b23 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
@@ -6,14 +6,14 @@
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
-            <StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+            <StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
             <StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Key="Light">
-            <StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
-            <StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
+            <StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
             <StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
         </ResourceDictionary>
 
@@ -32,7 +32,6 @@
     <Style x:Key="DefaultTagStyle" TargetType="local:Tag">
         <Style.Setters>
             <Setter Property="Background" Value="{ThemeResource TagBackground}" />
-            <Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
             <Setter Property="BorderBrush" Value="{ThemeResource TagBorderBrush}" />
             <Setter Property="BorderThickness" Value="{ThemeResource TagBorderThickness}" />
             <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
@@ -42,8 +41,8 @@
             <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
             <Setter Property="Padding" Value="{ThemeResource TagPadding}" />
             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+            <Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
             <Setter Property="FontWeight" Value="Normal" />
-            <Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}" />
             <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
             <Setter Property="FocusVisualMargin" Value="-3" />
             <Setter Property="Template">
@@ -74,10 +73,11 @@
                                 SourceKey="{TemplateBinding Icon}" />
                             <TextBlock
                                 Grid.Column="1"
+                                Margin="0,-1,0,0"
                                 CharacterSpacing="{TemplateBinding CharacterSpacing}"
                                 FontFamily="{TemplateBinding FontFamily}"
-                                FontSize="{TemplateBinding FontSize}"
                                 FontWeight="{TemplateBinding FontWeight}"
+                                Foreground="{TemplateBinding Foreground}"
                                 Text="{TemplateBinding Text}" />
                         </Grid>
                     </ControlTemplate>
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
index 28537c1b78..de229acde6 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml
@@ -30,7 +30,7 @@
         <StackLayout
             x:Name="HorizontalStackLayout"
             Orientation="Horizontal"
-            Spacing="8" />
+            Spacing="4" />
 
         <DataTemplate x:Key="TagTemplate" x:DataType="viewmodels:TagViewModel">
             <ItemContainer>
@@ -89,6 +89,7 @@
                 <ItemsView
                     Grid.RowSpan="2"
                     Grid.Column="2"
+                    Margin="0,0,8,0"
                     VerticalAlignment="Center"
                     IsHitTestVisible="False"
                     IsItemInvokedEnabled="False"
@@ -103,7 +104,6 @@
     </Page.Resources>
 
     <Grid>
-
         <controls:SwitchPresenter
             HorizontalAlignment="Stretch"
             TargetType="x:Boolean"
@@ -111,6 +111,7 @@
             <controls:Case Value="False">
                 <ListView
                     x:Name="ItemsList"
+                    Padding="0,2,0,0"
                     DoubleTapped="ItemsList_DoubleTapped"
                     IsDoubleTapEnabled="True"
                     IsItemClickEnabled="True"
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
index d5055074a0..f1996a11c0 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml
@@ -42,6 +42,7 @@
                 <cpcontrols:Tag
                     HorizontalAlignment="Left"
                     BackgroundColor="{x:Bind Background, Mode=OneWay}"
+                    FontSize="12"
                     ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
                     Icon="{x:Bind Icon, Mode=OneWay}"
                     Text="{x:Bind Text, Mode=OneWay}"
@@ -100,9 +101,9 @@
                                     x:Name="TagsWrapPanel"
                                     MinWidth="0"
                                     Padding="0"
-                                    HorizontalSpacing="8"
+                                    HorizontalSpacing="4"
                                     Orientation="Horizontal"
-                                    VerticalSpacing="8" />
+                                    VerticalSpacing="4" />
                             </ItemsPanelTemplate>
                         </ItemsControl.ItemsPanel>
                     </ItemsControl>
@@ -300,11 +301,34 @@
                 <ScrollViewer
                     x:Name="DetailsContent"
                     Grid.Column="1"
+                    Margin="4"
                     HorizontalAlignment="Stretch"
+                    ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
                     Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                     BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-                    BorderThickness="1,0,0,0"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
                     Visibility="Collapsed">
+                    <animations:Implicit.ShowAnimations>
+                        <animations:OpacityAnimation
+                            From="0"
+                            To="1.0"
+                            Duration="0:0:0.270" />
+                        <animations:TranslationAnimation
+                            From="24,0,0"
+                            To="0,0,0"
+                            Duration="0:0:0.280" />
+                    </animations:Implicit.ShowAnimations>
+                    <animations:Implicit.HideAnimations>
+                        <animations:OpacityAnimation
+                            From="1.0"
+                            To="0"
+                            Duration="0:0:0.180" />
+                        <animations:TranslationAnimation
+                            From="0,0,0"
+                            To="24,0,0"
+                            Duration="0:0:0.220" />
+                    </animations:Implicit.HideAnimations>
                     <Grid Margin="12">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
@@ -346,7 +370,7 @@
                             ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
                             ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
                             <ItemsRepeater.Layout>
-                                <StackLayout Spacing="8" />
+                                <StackLayout Spacing="12" />
                             </ItemsRepeater.Layout>
                         </ItemsRepeater>
                     </Grid>
diff --git a/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw b/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
index fd2b0a3699..1e80c38dd3 100644
--- a/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
+++ b/src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw
@@ -373,4 +373,10 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
   <data name="Settings_GeneralPage_NavigationViewItem_Extensions.Content" xml:space="preserve">
     <value>Extensions</value>
   </data>
+  <data name="MoreCommandsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>More commands</value>
+  </data>
+  <data name="SettingsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
+    <value>Open Command Palette settings</value>
+  </data>
 </root>
\ No newline at end of file