microsoft/terminal
1
0
Fork 0
mirror of https://github.com/microsoft/terminal.git synced 2025-12-10 18:43:54 -06:00
Code Issues Packages Projects Releases 138 Wiki Activity

Fix missing icon and truncated text on NullableColorPicker (#18476)

Browse Source 
Fixes an issue on Windows 10 where icon on selected color chips would be
missing in the NullableColorPicker.

Fixes (or at least significantly improves the experience) text being
truncated for the special colors in the NullableColorPicker. This was
done by removing the word "Use" from the labels and adding a visual
state trigger to change the layout of the chips and buttons when the
window becomes narrow.

Related to #18318

(cherry picked from commit 7423dd3b2a8726631f1c4c0a0c7b5f9fcd7def08)
Service-Card-Id: PVTI_lADOAF3p4s4AxadtzgXARtg
Service-Version: 1.23
This commit is contained in:
Carlos Zamora 2025-02-04 11:07:58 -08:00 committed by Dustin L. Howett
parent c6e20e99d7
commit b43e7b93ec
3 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/cascadia/TerminalSettingsEditor/CommonResources.xaml
View File

@ -467,7 +467,7 @@
<FontIcon Margin="0,0,-1,-1"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Segoe Fluent Icons"
FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets"
FontSize="12"
Foreground="{TemplateBinding BorderBrush}"
Glyph="&#xE73D;"

87
src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
View File

@ -94,12 +94,9 @@
</ResourceDictionary>
</UserControl.Resources>
<Grid ColumnSpacing="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="ContentStackPanel"
Orientation="Horizontal"
Spacing="5">
<ContentDialog x:Name="ColorPickerDialog"
x:Uid="NullableColorPicker_ColorPickerContentDialog"
DefaultButton="Primary"
@ -119,37 +116,61 @@
Orientation="Horizontal" />
</ContentDialog>
<ContentPresenter Grid.Column="0"
Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
<ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
ContentTemplate="{StaticResource ColorSchemeTemplate}" />
<StackPanel Grid.Column="1"
Spacing="5">
<ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
Click="NullColorButton_Clicked"
IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
<Grid ColumnSpacing="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Spacing="5">
<ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
Click="NullColorButton_Clicked"
IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
<Grid ColumnSpacing="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Width="20"
Height="20"
Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
BorderThickness="1"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<Border Grid.Column="0"
Width="20"
Height="20"
Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
BorderThickness="1"
CornerRadius="{ThemeResource ControlCornerRadius}" />
<TextBlock Grid.Column="1"
Text="{x:Bind NullColorButtonLabel}" />
</Grid>
</ToggleButton>
<TextBlock Grid.Column="1"
Text="{x:Bind NullColorButtonLabel}" />
</Grid>
</ToggleButton>
<Button x:Uid="NullableColorPicker_MoreColorsButton"
HorizontalAlignment="Stretch"
Click="MoreColors_Clicked" />
</StackPanel>
</Grid>
<Button x:Uid="NullableColorPicker_MoreColorsButton"
HorizontalAlignment="Stretch"
Click="MoreColors_Clicked" />
</StackPanel>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ContentStackPanel.Orientation" Value="Vertical" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ContentStackPanel.Orientation" Value="Horizontal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
</UserControl>

8
src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
View File

@ -2033,19 +2033,19 @@
<comment>Text label for secondary button the color picker content dialog. When clicked, the operation of selecting a color is cancelled by the user.</comment>
</data>
<data name="Profile_CursorColor_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
<value>Use cursor color from color scheme</value>
<value>Use scheme color</value>
<comment>Label for a button directing the user to use the cursor color defined in the terminal's current color scheme.</comment>
</data>
<data name="Profile_Foreground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
<value>Use foreground color from color scheme</value>
<value>Use scheme color</value>
<comment>Label for a button directing the user to use the foreground color defined in the terminal's current color scheme.</comment>
</data>
<data name="Profile_Background_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
<value>Use background color from color scheme</value>
<value>Use scheme color</value>
<comment>Label for a button directing the user to use the background color defined in the terminal's current color scheme.</comment>
</data>
<data name="Profile_SelectionBackground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
<value>Use selection background color from color scheme</value>
<value>Use scheme color</value>
<comment>Label for a button directing the user to use the selection background color defined in the terminal's current color scheme.</comment>
</data>
<data name="Profile_IconTypeNone" xml:space="preserve">