Add nullable colors to settings UI #17870

carlos-zamora · 2024-09-06T19:33:21Z

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.

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"
[Focus issue] Clicking on the appearance page yeets focus to FontFace control

carlos-zamora · 2024-09-06T19:36:16Z

Demo

src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp

src/cascadia/UIHelpers/Converters.h

src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp

DHowett · 2024-10-03T23:49:11Z

src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp

+    Windows::Foundation::IInspectable ColorToBrushConverter::Convert(Windows::Foundation::IInspectable const& value, Windows::UI::Xaml::Interop::TypeName const& /*targetType*/, Windows::Foundation::IInspectable const& /*parameter*/, hstring const& /*language*/)
+    {
+        const auto color = value.as<Windows::UI::Color>();
+        return Microsoft::Terminal::UI::Converters::ColorToBrush(color);


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

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

 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 🫤

UGH. Thanks.

src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp

DHowett · 2024-10-11T18:28:20Z

src/cascadia/UIHelpers/Converters.cpp

@@ -18,6 +18,11 @@ namespace winrt::Microsoft::Terminal::UI::implementation
        return value ? winrt::Windows::UI::Xaml::Visibility::Collapsed : winrt::Windows::UI::Xaml::Visibility::Visible;
    }

+    winrt::Windows::UI::Xaml::Visibility Converters::BooleanToVisibility(bool value)


It doesn't seem like anyone is using these now - can we just back out the UIHelpers changes?

DHowett

18/26

DHowett · 2024-10-11T20:02:43Z

src/cascadia/TerminalSettingsEditor/Appearances.cpp

@@ -915,6 +935,41 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
        LightColorSchemeName(val.Name());
    }

+#define GET_COLOR_PREVIEW(appearanceVal, deducedVal)     \


FWIW, this macro could just be a function! you can take all the arguments by & of course to ensure they don't get copied. It probably will get inlined into each function too. Benefits include proper type checking and syntax highlighting

DHowett · 2024-10-11T22:42:19Z

src/cascadia/TerminalSettingsEditor/Appearances.xaml

@@ -396,6 +264,188 @@
            </local:SettingContainer>
        </StackPanel>

+        <!--  Grouping: Color  -->


I'm minorly concerned concern about moving the whole color scheme part down to where Cursor is. I suspect that the thing people doing personalization want most is their color scheme.

DHowett · 2024-10-11T22:47:15Z

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <ContentDialog x:Name="ColorPickerDialog"


content dialogs can be spicy - test this on Win10!

specifically content dialogs inside grids even

DHowett · 2024-10-11T22:47:27Z

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

+                       Opened="ColorPickerDialog_Opened"
+                       PrimaryButtonClick="ColorPickerDialog_PrimaryButtonClick">
+            <muxc:ColorPicker x:Name="ColorPickerControl"
+                              Margin="0,0,0,-40"


DHowett · 2024-10-11T22:48:36Z

src/cascadia/TerminalSettingsEditor/NullableColorPicker.xaml

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


📝 ColorSchemeTemplate?

carlos-zamora added 9 commits August 26, 2024 16:15

Implement ColorRef and ColorPickerViewModel

4fe421c

[broken] Add nullable color expanders to SUI

15922b7

Add previews for nullable color expanders

153d97e

[WIP] Add NullableColorPicker (hook up chips)

e3e0b93

temp commit 1

c3d2e98

temp commit 2

629ed07

almost done!

1d87e46

polish!

6e41d9a

code format

fd01fa3

carlos-zamora mentioned this pull request Sep 18, 2024

Epic: Settings UI v2 #10000

Open

65 tasks

lhecker reviewed Sep 24, 2024

View reviewed changes

better color comparison

6dcc91a

lhecker approved these changes Sep 30, 2024

View reviewed changes

DHowett reviewed Oct 3, 2024

View reviewed changes

src/cascadia/UIHelpers/Converters.h Outdated Show resolved Hide resolved

DHowett reviewed Oct 3, 2024

View reviewed changes

src/cascadia/TerminalSettingsEditor/TerminalColorConverters.cpp Outdated Show resolved Hide resolved

DHowett requested changes Oct 3, 2024

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Oct 3, 2024

carlos-zamora commented Oct 4, 2024

View reviewed changes

src/cascadia/TerminalSettingsEditor/NullableColorPicker.cpp Outdated Show resolved Hide resolved

microsoft-github-policy-service bot removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Oct 4, 2024

apply feedback; ensure accessibility

15a460f

carlos-zamora assigned DHowett Oct 10, 2024

DHowett reviewed Oct 11, 2024

View reviewed changes

DHowett requested changes Oct 11, 2024

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Oct 11, 2024

carlos-zamora assigned carlos-zamora and unassigned DHowett Oct 14, 2024

microsoft-github-policy-service bot removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add nullable colors to settings UI #17870

Add nullable colors to settings UI #17870

carlos-zamora commented Sep 6, 2024

carlos-zamora commented Sep 6, 2024

DHowett Oct 3, 2024

carlos-zamora Oct 9, 2024

DHowett Oct 11, 2024

DHowett Oct 11, 2024

DHowett left a comment

DHowett Oct 11, 2024

DHowett Oct 11, 2024

DHowett Oct 11, 2024

DHowett Oct 11, 2024

DHowett Oct 11, 2024

DHowett Oct 11, 2024

Add nullable colors to settings UI #17870

Are you sure you want to change the base?

Add nullable colors to settings UI #17870

Conversation

carlos-zamora commented Sep 6, 2024

Summary of the Pull Request

References and Relevant Issues

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

Follow-ups

carlos-zamora commented Sep 6, 2024

Demo

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DHowett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment