Replace NullableColorPicker ContentDialog with Flyout (#19572)

## Summary of the Pull Request
Updates the NullableColorPicker to use a flyout instead of a content
dialog. Frankly, it should've been this way from the start.

#19561 is an issue regarding the rectangle on the right side of the
picker. The complaint being that it should be something more useful than
a preview, an idea being that it could be a lightness gradient.
Unfortunately, the WinUI color picker doesn't let you do that. It's just
a plain preview.

That said, there's a lot of customizations that can be added still to
increase value here. To name a few:
- IsColorSliderVisible --> a color slider to adjust the lightness of the
color (as desired in #19561)
- IsHexInputVisible --> an input field to see and adjust the hex value
directly
- IsColorChannelTextInputVisible --> several input fields to adjust
individual RGB channels or switch over to HSV

However, the content dialog doesn't allow for text input due to a WinUI
bug and it's too small to display all of those controls.

Instead, I just discarded the content dialog altogether and opted into a
flyout. This makes it a more consistent experience with the other color
pickers (i.e. tab color, edit color scheme page). This also adds space
for all of the functionality mentioned above (those properties are
enabled by default).

## Validation Steps Performed
✅ selecting a color still works

Closes #19561

Author: carlos-zamora

src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp

@@ -159,12 +159,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         CurrentColor(nullptr);
     }
 
-    safe_void_coroutine NullableColorPicker::MoreColors_Clicked(const IInspectable& /*sender*/, const RoutedEventArgs& /*args*/)
-    {
-        co_await ColorPickerDialog().ShowAsync();
-    }
-
-    void NullableColorPicker::ColorPickerDialog_Opened(const IInspectable& /*sender*/, const ContentDialogOpenedEventArgs& /*args*/)
+    void NullableColorPicker::Flyout_Opening(const IInspectable& /*sender*/, const IInspectable& /*args*/)
     {
         // Initialize color picker with current color
         if (CurrentColor())
@@ -185,7 +180,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         }
     }
 
-    void NullableColorPicker::ColorPickerDialog_PrimaryButtonClick(const IInspectable& /*sender*/, const ContentDialogButtonClickEventArgs& /*args*/)
+    void NullableColorPicker::Flyout_Closing(const winrt::Windows::Foundation::IInspectable& /*sender*/, const winrt::Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs& /*args*/)
     {
         const auto& selectedColor = ColorPickerControl().Color();
         const Microsoft::Terminal::Core::Color terminalColor{ selectedColor.R, selectedColor.G, selectedColor.B, selectedColor.A };

src/cascadia/TerminalSettingsEditor/NullableColorPicker.h

@@ -22,10 +22,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void ColorChip_DataContextChanged(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::DataContextChangedEventArgs& args);
 
         void NullColorButton_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
-        safe_void_coroutine MoreColors_Clicked(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::RoutedEventArgs& args);
-
-        void ColorPickerDialog_Opened(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogOpenedEventArgs& args);
-        void ColorPickerDialog_PrimaryButtonClick(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::ContentDialogButtonClickEventArgs& args);
+        void Flyout_Opening(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::Foundation::IInspectable& args);
+        void Flyout_Closing(const winrt::Windows::Foundation::IInspectable& sender, const winrt::Windows::UI::Xaml::Controls::Primitives::FlyoutBaseClosingEventArgs& args);
 
         DEPENDENCY_PROPERTY(Editor::ColorSchemeViewModel, ColorSchemeVM);
         DEPENDENCY_PROPERTY(Windows::Foundation::IReference<Microsoft::Terminal::Core::Color>, CurrentColor);

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

@@ -97,25 +97,6 @@
     <StackPanel x:Name="ContentStackPanel"
                 Orientation="Horizontal"
                 Spacing="5">
-        <ContentDialog x:Name="ColorPickerDialog"
-                       x:Uid="NullableColorPicker_ColorPickerContentDialog"
-                       DefaultButton="Primary"
-                       Opened="ColorPickerDialog_Opened"
-                       PrimaryButtonClick="ColorPickerDialog_PrimaryButtonClick"
-                       TabFocusNavigation="Cycle">
-            <muxc:ColorPicker x:Name="ColorPickerControl"
-                              Margin="0,0,0,-40"
-                              ColorSpectrumShape="Box"
-                              IsAlphaEnabled="False"
-                              IsAlphaSliderVisible="True"
-                              IsAlphaTextInputVisible="True"
-                              IsColorChannelTextInputVisible="False"
-                              IsColorSliderVisible="False"
-                              IsHexInputVisible="False"
-                              IsMoreButtonVisible="False"
-                              Orientation="Horizontal" />
-        </ContentDialog>
-
         <ContentPresenter Content="{x:Bind ColorSchemeVM, Mode=OneWay}"
                           ContentTemplate="{StaticResource ColorSchemeTemplate}" />
 
@@ -146,8 +127,14 @@
                 </ToggleButton>
 
                 <Button x:Uid="NullableColorPicker_MoreColorsButton"
-                        HorizontalAlignment="Stretch"
-                        Click="MoreColors_Clicked" />
+                        HorizontalAlignment="Stretch">
+                    <Button.Flyout>
+                        <Flyout Closing="Flyout_Closing"
+                                Opening="Flyout_Opening">
+                            <muxc:ColorPicker x:Name="ColorPickerControl" />
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
             </StackPanel>
         </Grid>