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
microsoft · Feb 4, 2025 · 7423dd3 · 7423dd3
1 parent a24fdaa
commit 7423dd3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 38 deletions.
diff --git a/src/cascadia/TerminalSettingsEditor/CommonResources.xaml b/src/cascadia/TerminalSettingsEditor/CommonResources.xaml
@@ -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;"

diff --git a/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml b/src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml
@@ -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>
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -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">