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

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;"

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

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

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">