Mirrors/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2026-04-05 02:36:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

[CmdPal] UX tweaks (#40381)

Browse Source 
Based on guidance from the design team, this PR introduces a bunch of
small UX tweaks:

- Standardizing body text on 14px (e.g. for the Adaptive Cards related
code).
- Left align all content in the details pane
- Brush tweaks to the hotkey / tags for better visibility


![image](https://github.com/user-attachments/assets/4d9bf699-29bb-42e0-af96-b9b72c34f259)


![image](https://github.com/user-attachments/assets/905a268b-2e29-408c-a301-10a98b5885f1)


![image](https://github.com/user-attachments/assets/b9050693-f4bb-4d74-8701-fb30b46698e0)


![image](https://github.com/user-attachments/assets/5f6f93a0-1d6e-4476-bad5-dc7a9e179e92)

Closes #38858
This commit is contained in:
Niels Laute
2025-07-07 17:31:56 +02:00
committed by GitHub
parent 0323ebea58
commit c6cee94456
9 changed files with 59 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/AdaptiveCardsConfig.cs
View File

@@ -38,7 +38,7 @@ public sealed class AdaptiveCardsConfig
"fontFamily": "'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
"fontSizes": {
"small": 12,
"default": 12,
"default": 14,
"medium": 14,
"large": 20,
"extraLarge": 26
@@ -199,7 +199,7 @@ public sealed class AdaptiveCardsConfig
"fontFamily": "'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
"fontSizes": {
"small": 12,
"default": 12,
"default": 14,
"medium": 14,
"large": 20,
"extraLarge": 26

44
src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml
View File

@@ -100,6 +100,16 @@
</Grid>
</DataTemplate>
<Style x:Key="HotkeyStyle" TargetType="Border">
<Style.Setters>
<Setter Property="Padding" Value="4" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="{ThemeResource ControlFillColorSecondaryBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="6" />
</Style.Setters>
</Style>
</ResourceDictionary>
</UserControl.Resources>
@@ -193,17 +203,12 @@
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind ViewModel.PrimaryCommand.Name, Mode=OneWay}" />
<Border
Padding="4"
Background="{ThemeResource SubtleFillColorSecondaryBrush}"
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4">
<Border Style="{StaticResource HotkeyStyle}">
<FontIcon
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="10"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Foreground="{ThemeResource TextFillColorPrimaryBrush}"
Glyph="&#xE751;" />
</Border>
</StackPanel>
@@ -221,32 +226,20 @@
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind ViewModel.SecondaryCommand.Name, Mode=OneWay}" />
<StackPanel Orientation="Horizontal" Spacing="2">
<Border
Padding="4,2,4,2"
VerticalAlignment="Center"
Background="{ThemeResource SubtleFillColorSecondaryBrush}"
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4">
<StackPanel Orientation="Horizontal" Spacing="4">
<Border Padding="4,2,4,2" Style="{StaticResource HotkeyStyle}">
<TextBlock
CharacterSpacing="4"
FontSize="10"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Foreground="{ThemeResource TextFillColorPrimaryBrush}"
Text="Ctrl" />
</Border>
<Border
Padding="4"
VerticalAlignment="Center"
Background="{ThemeResource SubtleFillColorSecondaryBrush}"
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4">
<Border Style="{StaticResource HotkeyStyle}">
<FontIcon
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="10"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Foreground="{ThemeResource TextFillColorPrimaryBrush}"
Glyph="&#xE751;" />
</Border>
</StackPanel>
@@ -267,7 +260,6 @@
Opened="Flyout_Opened"
Placement="TopEdgeAlignedRight">
<StackPanel>
<ListView
x:Name="CommandsDropdown"
MinWidth="248"
@@ -288,7 +280,6 @@
<TransitionCollection />
</ListView.ItemContainerTransitions>
</ListView>
<TextBox
x:Name="ContextFilterBox"
x:Uid="ContextFilterBox"
@@ -296,7 +287,6 @@
KeyDown="ContextFilterBox_KeyDown"
PreviewKeyDown="ContextFilterBox_PreviewKeyDown"
TextChanged="ContextFilterBox_TextChanged" />
</StackPanel>
</Flyout>
</Button.Flyout>

1
src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ContentFormControl.xaml
View File

@@ -19,6 +19,5 @@
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="ContentGrid" />
</UserControl>

8
src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Tag.xaml
View File

@@ -6,14 +6,14 @@
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
<StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="TagBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="TagBorderBrush" ResourceKey="DividerStrokeColorDefaultBrush" />
<StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="TagBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
<StaticResource x:Key="TagBorderBrush" ResourceKey="ControlStrokeColorSecondaryBrush" />
<StaticResource x:Key="TagBackground" ResourceKey="ControlFillColorSecondaryBrush" />
<StaticResource x:Key="TagBorderBrush" ResourceKey="DividerStrokeColorDefaultBrush" />
<StaticResource x:Key="TagForeground" ResourceKey="TextFillColorTertiaryBrush" />
</ResourceDictionary>