Add nullable colors and improve Profile.Icon in settings UI

[carlos-zamora]

Summary of the Pull Request

Adds some pre-existing settings ($profile.foreground, $profile.background, $profile.selectionBackground, $profile.cursorColor) to the settings UI. This was accomplished by introducing a new control: NullableColorPicker. This control allows the user to pick a color from the color scheme, set the color to null, and select a color from an advanced color picker.

Improves the UI for the Profile.Icon setting by adding an "Icon Type" combo box. This allows the user to pick from multiple options:

• None: sets the icon to "none" which is interpreted as no icon
• Built-in Icon: presents a combo box that enumerates the Segoe MDL 2 assets
• Emoji: presents a text box with a hint to open the emoji picker
• File: presents a text box to input the path of the image to use

Additionally, the rendered icon is displayed in the setting container. If "none", "none" is presented to the user (localized).

References and Relevant Issues

#10000

Detailed Description of the Pull Request / Additional comments

• NullableColorPicker control
  • includes a built-in NullColorButton to set the current value to null
  • includes a "More colors..." button to display an advanced color picker
  • uses data templates on data templates (data templates squared?) to convert the current color scheme into a grid of color chips
  • color chips display a checkmark (similar to Windows settings personalization). This automatically updates its color to stay compliant with color contrast.
  • color chips are added to a list so we can (un)check them when a new color is selected
• SettingsContainer changes
  • Forked ExpanderSettingContainerStyle to allow for a custom preview template. This way, we can display the current value in the expander and we're not just limited to text.
  • changed type of CurrentValue property from String to IInspectable
  • added CurrentValueTemplate property to control how to display the current value
• Miscellaneous:
  • Added a few converters (BooleanToVisibility, ColorToString, ColorToBrush)
  • Added NameWithHexCode to ColorTableEntry to expose a color as Red #RRGGBB (used for tooltips and a11y)
  • Added ForegroundPreview (and equivalent for other colors) to AppearanceViewModel to deduce the color that will be used

Validation Steps Performed

• a11y pass (NVDA, keyboard)
• set the color to one of the color chips
• set the color to null
• set the color to a value from the integrated color picker
• control updates properly when a new color scheme is selected
• control updates properly when a color scheme has multiple colors of the same value

Follow-ups

• [A11y] Screen readers don't read expander's preview text
• Add Tab Color to settings UI
• Update CursorColor preview to display #FFFFFF as "invert"
• Use Leonard's font picker UI, with the Segoe icon picker, so that you can filter the list

[DHowett]

fwiw if we're adding a static global converter function, we don't need a converter object!

[carlos-zamora]

Omg, yeah, I hate it. I'd rather directly use mtu:Converters.ColorToBrush(<param>) in the XML, but the problem is here:

<!--  CommonResources.xaml::ColorPreviewTemplate  -->
Fill="{Binding Converter={StaticResource ColorToBrushConverter}}"

We don't have a Path set because we want to convert the object itself. Since there isn't a path, there isn't a way to target the object itself (from what I know, at least). Fill="{Binding mtu:Converters.ColorToBrush}" silently fails (no rendered Rectangle)!

Also, if you're curious, we can't use x:Bind because XamlCompiler error WMC1119: This Xaml file must have a code-behind class to use {x:Bind}. See http://go.microsoft.com/fwlink/?LinkID=532920&clcid=0x409 for more information.

Also also, in case you're extra curious, I wasn't able to figure out how to define the DataType as IReference<Core::Color> because of the IReference part.

So that's why this part's implemented like this 🫤

[DHowett]

UGH. Thanks.

[DHowett]

18/26

[DHowett]

📝 ColorSchemeTemplate?

[carlos-zamora]

Alright! Made some minor changes to fix the focus issue, text box issue, theme issue (on Win10), and layout concerns. Here's a storyboard of the slightly new design:

Changes:

• Moved color scheme back to the top
• Removed text boxes from color picker. IMO this is fine as the hex value is presented in the Expander's header.
  • I do still miss having the text box though. What if I add a textbox inside the expander? That'll act as a live preview for the hex value too, and allow users to copy-paste the value directly? It may look a little weird though :/
• Combined override settings and color scheme setting into one expander
  • Weird idea? Maybe. But there are plenty of examples of expanders having full controls in the header. This groups the settings together, but keeps them all near the top (by the live preview too).

[carlos-zamora]

Feedback from Bug Bash (11/19)

• Nit: "Color" --> "Cursor Color"
• Foreground/Background/Selection background don't get updated when the selected scheme changes
• The Icon editor doesn't update when I click the revert button (!)
• Icon/ColorScheme SettingContainer has wrong indentation in header (No repro, probably a bad merge)
• Nit, probably a puntable thought: can we do Leonard's font picker thing, with the Segoe icon picker, so that you can filter the list? (i may be overindexed on filterable list UIs these days) (Moved as a follow-up)

[carlos-zamora]

Note to reviewer

The Profile.Icon changes all come from #17965 which merged into this PR. The PR title and description have been appropriately updated.

Some changes have been made to that area since it merged (just this one commit really): e46ed40