microsoft/terminal
1
0
Fork 0
mirror of https://github.com/microsoft/terminal.git synced 2025-12-10 00:48:23 -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
This commit is contained in:
Carlos Zamora 2025-02-04 11:07:58 -08:00 committed by GitHub
parent a24fdaa7b2
commit 7423dd3b2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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">