Skip to content

Commit 7423dd3

Browse files
carlos-zamoracarlos-zamora
authored
Fix missing icon and truncated text on NullableColorPicker (#18476)
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
1 parent a24fdaa commit 7423dd3

File tree

3 files changed

+59
-38
lines changed

3 files changed

+59
-38
lines changed

‎src/cascadia/TerminalSettingsEditor/CommonResources.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,7 @@
467467
<FontIcon Margin="0,0,-1,-1"
468468
HorizontalAlignment="Right"
469469
VerticalAlignment="Bottom"
470-
FontFamily="Segoe Fluent Icons"
470+
FontFamily="Segoe Fluent Icons, Segoe MDL2 Assets"
471471
FontSize="12"
472472
Foreground="{TemplateBinding BorderBrush}"
473473
Glyph="&#xE73D;"

‎src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

+54-33
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,9 @@
9494
</ResourceDictionary>
9595
</UserControl.Resources>
9696

97-
<Grid ColumnSpacing="5">
98-
<Grid.ColumnDefinitions>
99-
<ColumnDefinition Width="Auto" />
100-
<ColumnDefinition Width="Auto" />
101-
</Grid.ColumnDefinitions>
102-
97+
<StackPanel x:Name="ContentStackPanel"
98+
Orientation="Horizontal"
99+
Spacing="5">
103100
<ContentDialog x:Name="ColorPickerDialog"
104101
x:Uid="NullableColorPicker_ColorPickerContentDialog"
105102
DefaultButton="Primary"
@@ -119,37 +116,61 @@
119116
Orientation="Horizontal" />
120117
</ContentDialog>
121118

122-
<ContentPresenter Grid.Column="0"
123-
Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
119+
<ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
124120
ContentTemplate="{StaticResource ColorSchemeTemplate}" />
125121

126-
<StackPanel Grid.Column="1"
127-
Spacing="5">
128-
<ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
129-
Click="NullColorButton_Clicked"
130-
IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
131-
<Grid ColumnSpacing="5">
132-
<Grid.ColumnDefinitions>
133-
<ColumnDefinition Width="Auto" />
134-
<ColumnDefinition Width="*" />
135-
</Grid.ColumnDefinitions>
122+
<Grid>
123+
<Grid.ColumnDefinitions>
124+
<ColumnDefinition Width="Auto" />
125+
</Grid.ColumnDefinitions>
126+
<StackPanel Spacing="5">
127+
<ToggleButton AutomationProperties.Name="{x:Bind NullColorButtonLabel}"
128+
Click="NullColorButton_Clicked"
129+
IsChecked="{x:Bind IsNull(CurrentColor), Mode=OneWay}">
130+
<Grid ColumnSpacing="5">
131+
<Grid.ColumnDefinitions>
132+
<ColumnDefinition Width="Auto" />
133+
<ColumnDefinition Width="*" />
134+
</Grid.ColumnDefinitions>
135+
136+
<Border Grid.Column="0"
137+
Width="20"
138+
Height="20"
139+
Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
140+
BorderThickness="1"
141+
CornerRadius="{ThemeResource ControlCornerRadius}" />
136142

137-
<Border Grid.Column="0"
138-
Width="20"
139-
Height="20"
140-
Background="{x:Bind mtu:Converters.ColorToBrush(NullColorPreview), Mode=OneWay}"
141-
BorderThickness="1"
142-
CornerRadius="{ThemeResource ControlCornerRadius}" />
143+
<TextBlock Grid.Column="1"
144+
Text="{x:Bind NullColorButtonLabel}" />
145+
</Grid>
146+
</ToggleButton>
143147

144-
<TextBlock Grid.Column="1"
145-
Text="{x:Bind NullColorButtonLabel}" />
146-
</Grid>
147-
</ToggleButton>
148+
<Button x:Uid="NullableColorPicker_MoreColorsButton"
149+
HorizontalAlignment="Stretch"
150+
Click="MoreColors_Clicked" />
151+
</StackPanel>
152+
</Grid>
148153

149-
<Button x:Uid="NullableColorPicker_MoreColorsButton"
150-
HorizontalAlignment="Stretch"
151-
Click="MoreColors_Clicked" />
152-
</StackPanel>
153-
</Grid>
154+
<VisualStateManager.VisualStateGroups>
155+
<VisualStateGroup>
156+
<VisualState x:Name="Narrow">
157+
<VisualState.StateTriggers>
158+
<AdaptiveTrigger MinWindowWidth="0" />
159+
</VisualState.StateTriggers>
160+
<VisualState.Setters>
161+
<Setter Target="ContentStackPanel.Orientation" Value="Vertical" />
162+
</VisualState.Setters>
163+
</VisualState>
164+
<VisualState x:Name="Wide">
165+
<VisualState.StateTriggers>
166+
<AdaptiveTrigger MinWindowWidth="600" />
167+
</VisualState.StateTriggers>
168+
<VisualState.Setters>
169+
<Setter Target="ContentStackPanel.Orientation" Value="Horizontal" />
170+
</VisualState.Setters>
171+
</VisualState>
172+
</VisualStateGroup>
173+
</VisualStateManager.VisualStateGroups>
174+
</StackPanel>
154175

155176
</UserControl>

‎src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw

+4-4
Original file line numberDiff line numberDiff line change
@@ -2033,19 +2033,19 @@
20332033
<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>
20342034
</data>
20352035
<data name="Profile_CursorColor_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
2036-
<value>Use cursor color from color scheme</value>
2036+
<value>Use scheme color</value>
20372037
<comment>Label for a button directing the user to use the cursor color defined in the terminal's current color scheme.</comment>
20382038
</data>
20392039
<data name="Profile_Foreground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
2040-
<value>Use foreground color from color scheme</value>
2040+
<value>Use scheme color</value>
20412041
<comment>Label for a button directing the user to use the foreground color defined in the terminal's current color scheme.</comment>
20422042
</data>
20432043
<data name="Profile_Background_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
2044-
<value>Use background color from color scheme</value>
2044+
<value>Use scheme color</value>
20452045
<comment>Label for a button directing the user to use the background color defined in the terminal's current color scheme.</comment>
20462046
</data>
20472047
<data name="Profile_SelectionBackground_NullableColorPicker.NullColorButtonLabel" xml:space="preserve">
2048-
<value>Use selection background color from color scheme</value>
2048+
<value>Use scheme color</value>
20492049
<comment>Label for a button directing the user to use the selection background color defined in the terminal's current color scheme.</comment>
20502050
</data>
20512051
<data name="Profile_IconTypeNone" xml:space="preserve">

0 commit comments

Comments
 (0)