Skip to content

Commit 79bd825

Browse files
niels9001niels9001
authored
[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)
1 parent 69c2e9c commit 79bd825

File tree

5 files changed

+82
-30
lines changed

5 files changed

+82
-30
lines changed

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml

+38-17
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
x:Class="Microsoft.CmdPal.UI.Controls.CommandBar"
44
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6+
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
67
xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
78
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
89
xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
@@ -62,6 +63,27 @@
6263
Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
6364
</Grid>
6465
</DataTemplate>
66+
67+
<animations:ImplicitAnimationSet x:Name="ShowAnimations">
68+
<animations:OpacityAnimation
69+
From="0"
70+
To="1.0"
71+
Duration="0:0:0.340" />
72+
<animations:ScaleAnimation
73+
From="0.85"
74+
To="1"
75+
Duration="0:0:0.350" />
76+
</animations:ImplicitAnimationSet>
77+
<animations:ImplicitAnimationSet x:Name="HideAnimations">
78+
<animations:OpacityAnimation
79+
From="1.0"
80+
To="0"
81+
Duration="0:0:0.240" />
82+
<animations:ScaleAnimation
83+
From="1"
84+
To="0.85"
85+
Duration="0:0:0.350" />
86+
</animations:ImplicitAnimationSet>
6587
</ResourceDictionary>
6688
</UserControl.Resources>
6789

@@ -80,15 +102,6 @@
80102
Margin="8,0,0,0"
81103
Tapped="PageIcon_Tapped"
82104
Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}">
83-
84-
<cpcontrols:IconBox
85-
x:Name="IconBorder"
86-
Width="16"
87-
Height="16"
88-
x:Load="{x:Bind IsLoaded, Mode=OneWay}"
89-
CornerRadius="{StaticResource ControlCornerRadius}"
90-
SourceKey="{x:Bind CurrentPageViewModel.Icon, Mode=OneWay}"
91-
SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
92105
<InfoBadge Visibility="{x:Bind CurrentPageViewModel.HasStatusMessage, Mode=OneWay}" Value="{x:Bind CurrentPageViewModel.StatusMessages.Count, Mode=OneWay}" />
93106
<Grid.ContextFlyout>
94107
<Flyout x:Name="StatusMessagesFlyout" Placement="TopEdgeAlignedLeft">
@@ -121,14 +134,15 @@
121134
</Grid>
122135
<Button
123136
x:Name="SettingsIconButton"
124-
Margin="0,0,0,0"
137+
x:Uid="SettingsButton"
138+
animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
139+
animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
140+
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
125141
Style="{StaticResource SubtleButtonStyle}"
126142
Tapped="SettingsIcon_Tapped"
127143
Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
128-
129144
<StackPanel Orientation="Horizontal" Spacing="8">
130145
<FontIcon
131-
HorizontalAlignment="Left"
132146
VerticalAlignment="Center"
133147
FontSize="16"
134148
Glyph="&#xE713;" />
@@ -138,28 +152,29 @@
138152
Text="Settings" />
139153
</StackPanel>
140154
</Button>
141-
142155
<TextBlock
143156
Grid.Column="1"
144157
VerticalAlignment="Center"
145-
FontSize="12"
158+
Style="{StaticResource CaptionTextBlockStyle}"
146159
Text="{x:Bind CurrentPageViewModel.Title, Mode=OneWay}"
147160
Visibility="{x:Bind CurrentPageViewModel.IsNested, Mode=OneWay}" />
148-
149161
<StackPanel
150162
Grid.Column="2"
163+
Padding="0,0,4,0"
151164
HorizontalAlignment="Right"
152165
Orientation="Horizontal"
153166
Spacing="4">
154167
<Button
155168
x:Name="PrimaryButton"
156169
Padding="6,4,4,4"
170+
animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
171+
animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
172+
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
157173
x:Load="{x:Bind IsLoaded, Mode=OneWay}"
158174
Background="Transparent"
159175
Style="{StaticResource SubtleButtonStyle}"
160176
Tapped="PrimaryButton_Tapped"
161177
Visibility="{x:Bind ViewModel.HasPrimaryCommand, Mode=OneWay}">
162-
163178
<StackPanel Orientation="Horizontal" Spacing="8">
164179
<TextBlock
165180
VerticalAlignment="Center"
@@ -183,11 +198,13 @@
183198
<Button
184199
x:Name="SecondaryButton"
185200
Padding="6,4,4,4"
201+
animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
202+
animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
203+
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
186204
x:Load="{x:Bind IsLoaded, Mode=OneWay}"
187205
Style="{StaticResource SubtleButtonStyle}"
188206
Tapped="SecondaryButton_Tapped"
189207
Visibility="{x:Bind ViewModel.HasSecondaryCommand, Mode=OneWay}">
190-
191208
<StackPanel Orientation="Horizontal" Spacing="8">
192209
<TextBlock
193210
VerticalAlignment="Center"
@@ -226,7 +243,11 @@
226243
</Button>
227244
<Button
228245
x:Name="MoreCommandsButton"
246+
x:Uid="MoreCommandsButton"
229247
Padding="4"
248+
animations:Implicit.HideAnimations="{StaticResource HideAnimations}"
249+
animations:Implicit.ShowAnimations="{StaticResource ShowAnimations}"
250+
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
230251
Content="{ui:FontIcon Glyph=&#xE712;,
231252
FontSize=16}"
232253
Style="{StaticResource SubtleButtonStyle}"

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml

+7-7
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66

77
<ResourceDictionary.ThemeDictionaries>
88
<ResourceDictionary x:Key="Default">
9-
<StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
10-
<StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
9+
<StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
10+
<StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
1111
<StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
1212
</ResourceDictionary>
1313

1414
<ResourceDictionary x:Key="Light">
15-
<StaticResource x:Key="TagBackground" ResourceKey="CardBackgroundFillColorDefaultBrush" />
16-
<StaticResource x:Key="TagBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
15+
<StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
16+
<StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
1717
<StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
1818
</ResourceDictionary>
1919

@@ -32,7 +32,6 @@
3232
<Style x:Key="DefaultTagStyle" TargetType="local:Tag">
3333
<Style.Setters>
3434
<Setter Property="Background" Value="{ThemeResource TagBackground}" />
35-
<Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
3635
<Setter Property="BorderBrush" Value="{ThemeResource TagBorderBrush}" />
3736
<Setter Property="BorderThickness" Value="{ThemeResource TagBorderThickness}" />
3837
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
@@ -42,8 +41,8 @@
4241
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
4342
<Setter Property="Padding" Value="{ThemeResource TagPadding}" />
4443
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
44+
<Setter Property="Foreground" Value="{ThemeResource TagForeground}" />
4545
<Setter Property="FontWeight" Value="Normal" />
46-
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}" />
4746
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
4847
<Setter Property="FocusVisualMargin" Value="-3" />
4948
<Setter Property="Template">
@@ -74,10 +73,11 @@
7473
SourceKey="{TemplateBinding Icon}" />
7574
<TextBlock
7675
Grid.Column="1"
76+
Margin="0,-1,0,0"
7777
CharacterSpacing="{TemplateBinding CharacterSpacing}"
7878
FontFamily="{TemplateBinding FontFamily}"
79-
FontSize="{TemplateBinding FontSize}"
8079
FontWeight="{TemplateBinding FontWeight}"
80+
Foreground="{TemplateBinding Foreground}"
8181
Text="{TemplateBinding Text}" />
8282
</Grid>
8383
</ControlTemplate>

‎src/modules/cmdpal/Microsoft.CmdPal.UI/ExtViews/ListPage.xaml

+3-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<StackLayout
3131
x:Name="HorizontalStackLayout"
3232
Orientation="Horizontal"
33-
Spacing="8" />
33+
Spacing="4" />
3434

3535
<DataTemplate x:Key="TagTemplate" x:DataType="viewmodels:TagViewModel">
3636
<ItemContainer>
@@ -89,6 +89,7 @@
8989
<ItemsView
9090
Grid.RowSpan="2"
9191
Grid.Column="2"
92+
Margin="0,0,8,0"
9293
VerticalAlignment="Center"
9394
IsHitTestVisible="False"
9495
IsItemInvokedEnabled="False"
@@ -103,14 +104,14 @@
103104
</Page.Resources>
104105

105106
<Grid>
106-
107107
<controls:SwitchPresenter
108108
HorizontalAlignment="Stretch"
109109
TargetType="x:Boolean"
110110
Value="{x:Bind ViewModel.ShowEmptyContent, Mode=OneWay}">
111111
<controls:Case Value="False">
112112
<ListView
113113
x:Name="ItemsList"
114+
Padding="0,2,0,0"
114115
DoubleTapped="ItemsList_DoubleTapped"
115116
IsDoubleTapEnabled="True"
116117
IsItemClickEnabled="True"

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Pages/ShellPage.xaml

+28-4
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
<cpcontrols:Tag
4343
HorizontalAlignment="Left"
4444
BackgroundColor="{x:Bind Background, Mode=OneWay}"
45+
FontSize="12"
4546
ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
4647
Icon="{x:Bind Icon, Mode=OneWay}"
4748
Text="{x:Bind Text, Mode=OneWay}"
@@ -100,9 +101,9 @@
100101
x:Name="TagsWrapPanel"
101102
MinWidth="0"
102103
Padding="0"
103-
HorizontalSpacing="8"
104+
HorizontalSpacing="4"
104105
Orientation="Horizontal"
105-
VerticalSpacing="8" />
106+
VerticalSpacing="4" />
106107
</ItemsPanelTemplate>
107108
</ItemsControl.ItemsPanel>
108109
</ItemsControl>
@@ -300,11 +301,34 @@
300301
<ScrollViewer
301302
x:Name="DetailsContent"
302303
Grid.Column="1"
304+
Margin="4"
303305
HorizontalAlignment="Stretch"
306+
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
304307
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
305308
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
306-
BorderThickness="1,0,0,0"
309+
BorderThickness="1"
310+
CornerRadius="{StaticResource ControlCornerRadius}"
307311
Visibility="Collapsed">
312+
<animations:Implicit.ShowAnimations>
313+
<animations:OpacityAnimation
314+
From="0"
315+
To="1.0"
316+
Duration="0:0:0.270" />
317+
<animations:TranslationAnimation
318+
From="24,0,0"
319+
To="0,0,0"
320+
Duration="0:0:0.280" />
321+
</animations:Implicit.ShowAnimations>
322+
<animations:Implicit.HideAnimations>
323+
<animations:OpacityAnimation
324+
From="1.0"
325+
To="0"
326+
Duration="0:0:0.180" />
327+
<animations:TranslationAnimation
328+
From="0,0,0"
329+
To="24,0,0"
330+
Duration="0:0:0.220" />
331+
</animations:Implicit.HideAnimations>
308332
<Grid Margin="12">
309333
<Grid.RowDefinitions>
310334
<RowDefinition Height="Auto" />
@@ -346,7 +370,7 @@
346370
ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
347371
ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
348372
<ItemsRepeater.Layout>
349-
<StackLayout Spacing="8" />
373+
<StackLayout Spacing="12" />
350374
</ItemsRepeater.Layout>
351375
</ItemsRepeater>
352376
</Grid>

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Strings/en-us/Resources.resw

+6
Original file line numberDiff line numberDiff line change
@@ -373,4 +373,10 @@ Right-click to remove the key combination, thereby deactivating the shortcut.</v
373373
<data name="Settings_GeneralPage_NavigationViewItem_Extensions.Content" xml:space="preserve">
374374
<value>Extensions</value>
375375
</data>
376+
<data name="MoreCommandsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
377+
<value>More commands</value>
378+
</data>
379+
<data name="SettingsButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
380+
<value>Open Command Palette settings</value>
381+
</data>
376382
</root>

0 commit comments

Comments
 (0)