a8f3f584a0
Fixes the clear button to clear the typed command not clickable in the command palette. - From the primary investigation it looked like the `TextBlock` element introduced in #7935 was somehow blocking (appearing on top of) the clear button. - It was also blocking the command palette input field from being able to access which was preventing the text in the input field from being selected and the cursor would still show as `pointer` cursor instead of a `text selection` cursor - Adding `HorizontalAlignment="Left"` property to the above-mentioned `TextBlock` element fixed the issue. ## Validation Steps Performed - Created the Dev build for `x64` in Visual Studio and verified the functionality manually. Closes #8220
317 lines
16 KiB
XML
317 lines
16 KiB
XML
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
|
|
the MIT License. See LICENSE in the project root for license information. -->
|
|
<UserControl
|
|
x:Class="TerminalApp.CommandPalette"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:TerminalApp"
|
|
xmlns:mux="using:Microsoft.UI.Xaml.Controls"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:Windows10version1903="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
|
|
xmlns:SettingsModel="using:Microsoft.Terminal.Settings.Model"
|
|
TabNavigation="Cycle"
|
|
IsTabStop="True"
|
|
AllowFocusOnInteraction="True"
|
|
PointerPressed="_rootPointerPressed"
|
|
PreviewKeyDown="_previewKeyDownHandler"
|
|
KeyDown="_keyDownHandler"
|
|
PreviewKeyUp="_keyUpHandler"
|
|
mc:Ignorable="d"
|
|
AutomationProperties.Name="{x:Bind ControlName, Mode=OneWay}">
|
|
|
|
<UserControl.Resources>
|
|
<ResourceDictionary>
|
|
|
|
<!-- ThemeShadow is only on 18362. This "Windows10version1903" bit
|
|
adds it conditionally -->
|
|
<Windows10version1903:ThemeShadow x:Name="CommandPaletteShadow" />
|
|
|
|
<!-- This creates an instance of our CommandKeyChordVisibilityConverter we can reference below -->
|
|
<local:EmptyStringVisibilityConverter x:Key="CommandKeyChordVisibilityConverter"/>
|
|
<local:EmptyStringVisibilityConverter x:Key="ParentCommandVisibilityConverter"/>
|
|
<local:HasNestedCommandsVisibilityConverter x:Key="HasNestedCommandsVisibilityConverter"/>
|
|
<local:IconPathConverter x:Key="IconSourceConverter"/>
|
|
|
|
<ResourceDictionary.ThemeDictionaries>
|
|
<ResourceDictionary x:Key="Dark">
|
|
<Style x:Key="CommandPaletteBackground" TargetType="Grid">
|
|
<Setter Property="Background" Value="#333333" />
|
|
</Style>
|
|
<!-- TextBox colors !-->
|
|
<SolidColorBrush x:Key="TextControlBackground" Color="#333333"/>
|
|
<SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#B5B5B5"/>
|
|
<SolidColorBrush x:Key="TextControlForeground" Color="#B5B5B5"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrush" Color="#404040"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForeground" Color="#B5B5B5"/>
|
|
|
|
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#404040"/>
|
|
<SolidColorBrush x:Key="TextControlForegroundPointerOver" Color="#FFFFFF"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#404040"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
|
|
|
|
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#333333"/>
|
|
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="#FFFFFF"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#404040"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
|
|
<SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
|
|
|
|
<!-- KeyChordText styles -->
|
|
<Style x:Key="KeyChordBorderStyle" TargetType="Border">
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="1" />
|
|
<Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
|
|
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
|
|
</Style>
|
|
<Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
|
|
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
|
|
</Style>
|
|
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="Light">
|
|
<Style x:Key="CommandPaletteBackground" TargetType="Grid">
|
|
<Setter Property="Background" Value="#CCCCCC" />
|
|
</Style>
|
|
<!-- TextBox colors !-->
|
|
<SolidColorBrush x:Key="TextControlBackground" Color="#CCCCCC"/>
|
|
<SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#636363"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrush" Color="#636363"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForeground" Color="#636363"/>
|
|
|
|
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="#DADADA"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrushPointerOver" Color="#636363"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForegroundPointerOver" Color="#FF4343"/>
|
|
|
|
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#CCCCCC"/>
|
|
<SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="#636363"/>
|
|
<SolidColorBrush x:Key="TextControlButtonForegroundPressed" Color="#FFFFFF"/>
|
|
<SolidColorBrush x:Key="TextControlButtonBackgroundPressed" Color="#FF4343"/>
|
|
|
|
<!-- KeyChordText styles -->
|
|
<Style x:Key="KeyChordBorderStyle" TargetType="Border">
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="1" />
|
|
<Setter Property="Background" Value="{ThemeResource SystemAltMediumLowColor}" />
|
|
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
|
|
</Style>
|
|
<Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock">
|
|
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
|
|
</Style>
|
|
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="HighContrast">
|
|
<Style x:Key="CommandPaletteBackground" TargetType="Grid">
|
|
<Setter Property="Background" Value="{ThemeResource SystemColorWindowColor}" />
|
|
</Style>
|
|
|
|
<!-- KeyChordText styles (use XAML defaults for High Contrast theme) -->
|
|
<Style x:Key="KeyChordBorderStyle" TargetType="Border"/>
|
|
<Style x:Key="KeyChordTextBlockStyle" TargetType="TextBlock"/>
|
|
|
|
</ResourceDictionary>
|
|
</ResourceDictionary.ThemeDictionaries>
|
|
</ResourceDictionary>
|
|
</UserControl.Resources>
|
|
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="2*" />
|
|
<ColumnDefinition Width="6*" />
|
|
<ColumnDefinition Width="2*" />
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="8*"/>
|
|
<RowDefinition Height="2*"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Setting the row/col span of this shadow backdrop is a bit of a hack. In
|
|
order to receive pointer events, an element needs to be _not_ transparent.
|
|
However, we want to be able to eat all the clicks outside the immediate
|
|
bounds of the command palette, and we don't want a semi-transparent overlay
|
|
over all of the UI. Fortunately, if we make this _shadowBackdrop the size of
|
|
the entire page, then it can be mostly transparent, and cause the root grid
|
|
to receive clicks _anywhere_ in its bounds. -->
|
|
|
|
<Grid
|
|
x:Name="_shadowBackdrop"
|
|
Background="Transparent"
|
|
Grid.Column="0"
|
|
Grid.Row="0"
|
|
Grid.ColumnSpan="3"
|
|
Grid.RowSpan="2"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Stretch">
|
|
</Grid>
|
|
|
|
<Grid
|
|
x:Name="_backdrop"
|
|
Style="{ThemeResource CommandPaletteBackground}"
|
|
CornerRadius="{ThemeResource ControlCornerRadius}"
|
|
PointerPressed="_backdropPointerPressed"
|
|
Margin="8"
|
|
Grid.Column="1"
|
|
Grid.Row="0"
|
|
Windows10version1903:Shadow="{StaticResource CommandPaletteShadow}"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Top">
|
|
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="*"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<TextBox
|
|
Grid.Row="0"
|
|
x:Name="_searchBox"
|
|
Margin="8"
|
|
Padding="18,8,8,8"
|
|
IsSpellCheckEnabled="False"
|
|
TextChanged="_filterTextChanged"
|
|
PlaceholderText="{x:Bind SearchBoxPlaceholderText, Mode=OneWay}"
|
|
Text="">
|
|
</TextBox>
|
|
|
|
<TextBlock
|
|
Grid.Row="0"
|
|
x:Name="_prefixCharacter"
|
|
Margin="16,16,0,-8"
|
|
FontSize="14"
|
|
HorizontalAlignment="Left"
|
|
Visibility="{x:Bind PrefixCharacter,
|
|
Mode=OneWay,
|
|
Converter={StaticResource ParentCommandVisibilityConverter}}"
|
|
Text="{x:Bind PrefixCharacter, Mode=OneWay}"
|
|
>
|
|
</TextBlock>
|
|
|
|
<StackPanel Orientation="Horizontal"
|
|
Padding="16, 0, 16, 4"
|
|
Grid.Row="1"
|
|
Visibility="{x:Bind ParentCommandName,
|
|
Mode=OneWay,
|
|
Converter={StaticResource ParentCommandVisibilityConverter}}">
|
|
|
|
<Button
|
|
Background="Transparent"
|
|
x:Name="_parentCommandBackButton"
|
|
x:Uid="ParentCommandBackButton"
|
|
Click="_moveBackButtonClicked"
|
|
ClickMode="Press"
|
|
VerticalAlignment="Center">
|
|
<FontIcon
|
|
FontSize="12"
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Glyph="">
|
|
</FontIcon>
|
|
</Button>
|
|
|
|
<TextBlock
|
|
Padding="16, 0, 16, 4"
|
|
x:Name="_parentCommandText"
|
|
FontStyle="Italic"
|
|
Grid.Row="1"
|
|
Text="{x:Bind ParentCommandName, Mode=OneWay}"
|
|
VerticalAlignment="Center">
|
|
</TextBlock>
|
|
</StackPanel>
|
|
|
|
<TextBlock
|
|
Padding="16"
|
|
x:Name="_noMatchesText"
|
|
FontStyle="Italic"
|
|
Visibility="Collapsed"
|
|
Grid.Row="1"
|
|
Text="{x:Bind NoMatchesText, Mode=OneWay}">
|
|
</TextBlock>
|
|
|
|
<ListView
|
|
Grid.Row="2"
|
|
x:Name="_filteredActionsView"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Stretch"
|
|
SelectionMode="Single"
|
|
CanReorderItems="False"
|
|
AllowDrop="False"
|
|
IsItemClickEnabled="True"
|
|
ItemClick="_listItemClicked"
|
|
PreviewKeyDown="_keyDownHandler"
|
|
ItemsSource="{x:Bind FilteredActions}">
|
|
|
|
<ItemsControl.ItemTemplate >
|
|
<DataTemplate x:DataType="local:FilteredCommand">
|
|
|
|
<!-- This HorizontalContentAlignment="Stretch" is important
|
|
to make sure it takes the entire width of the line -->
|
|
<ListViewItem HorizontalContentAlignment="Stretch"
|
|
AutomationProperties.Name="{x:Bind Command.Name, Mode=OneWay}"
|
|
AutomationProperties.AcceleratorKey="{x:Bind Command.KeyChordText, Mode=OneWay}">
|
|
|
|
<Grid HorizontalAlignment="Stretch" ColumnSpacing="8" >
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="16"/> <!-- icon -->
|
|
<ColumnDefinition Width="Auto"/> <!-- command label -->
|
|
<ColumnDefinition Width="*"/> <!-- key chord -->
|
|
<ColumnDefinition Width="16"/> <!-- gutter for scrollbar -->
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<IconSourceElement
|
|
Grid.Column="0"
|
|
Width="16"
|
|
Height="16"
|
|
IconSource="{x:Bind Command.Icon,
|
|
Mode=OneWay,
|
|
Converter={StaticResource IconSourceConverter}}"/>
|
|
|
|
<local:HighlightedTextControl
|
|
Grid.Column="1"
|
|
HorizontalAlignment="Left"
|
|
Text="{x:Bind HighlightedName, Mode=OneWay}"/>
|
|
|
|
<!-- The block for the key chord is only visible
|
|
when there's actual text set as the label. See
|
|
CommandKeyChordVisibilityConverter for details. -->
|
|
<Border
|
|
Grid.Column="2"
|
|
Visibility="{x:Bind Command.KeyChordText,
|
|
Mode=OneWay,
|
|
Converter={StaticResource CommandKeyChordVisibilityConverter}}"
|
|
Style="{ThemeResource KeyChordBorderStyle}"
|
|
Padding="2,0,2,0"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center">
|
|
|
|
<TextBlock
|
|
Style="{ThemeResource KeyChordTextBlockStyle}"
|
|
FontSize="12"
|
|
Text="{x:Bind Command.KeyChordText, Mode=OneWay}" />
|
|
</Border>
|
|
|
|
<!-- xE70E is ChevronUp. Rotated 90 degrees, it's _ChevronRight_ -->
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Glyph=""
|
|
HorizontalAlignment="Right"
|
|
Visibility="{x:Bind Command.HasNestedCommands,
|
|
Mode=OneWay,
|
|
Converter={StaticResource HasNestedCommandsVisibilityConverter}}"
|
|
Grid.Column="2">
|
|
|
|
<FontIcon.RenderTransform>
|
|
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="90"/>
|
|
</FontIcon.RenderTransform>
|
|
</FontIcon>
|
|
|
|
</Grid>
|
|
</ListViewItem>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ListView>
|
|
|
|
</Grid>
|
|
|
|
|
|
</Grid>
|
|
</UserControl>
|