Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Profile.Icon UI in settings #17965

Merged
merged 6 commits into from
Oct 22, 2024

Conversation

carlos-zamora
Copy link
Member

@carlos-zamora carlos-zamora commented Sep 26, 2024

Summary of the Pull Request

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).
✅ Verified as accessible using Accessibility Insights
#10000

github-advanced-security[bot]

This comment was marked as resolved.

@carlos-zamora
Copy link
Member Author

carlos-zamora commented Sep 26, 2024

Demo

{0912FB46-81D8-4804-A76E-3BDBA111389A}

{B3BFF263-6C77-4555-89F6-305C2A764010}

{5A94FC34-28CF-4A02-A754-61C4937799C1}

{0DD7BEBE-03CB-4F18-88CC-7C4BBB210CD0}

This comment has been minimized.

This comment has been minimized.

@DHowett
Copy link
Member

DHowett commented Oct 1, 2024

FWIW should we rename "hidden" to the more obvious "no icon"? Hidden suggests that there is an icon, but that it is hidden.

@carlos-zamora carlos-zamora added the Needs-Discussion Something that requires a team discussion before we can proceed label Oct 3, 2024
@carlos-zamora
Copy link
Member Author

carlos-zamora commented Oct 10, 2024

Feedback from team sync (10/7):

  • text boxes: expand that width out further (test narrow window width)
    • controls: remove headers
    • stack panel orientation vertical --> horizontal
  • "hidden" --> "none"
    • display the translated version
  • "custom icon" --> "file'
  • a11y insights fastpass

@carlos-zamora
Copy link
Member Author

Demo

Built-In
Emoji
File
None

@carlos-zamora carlos-zamora removed the Needs-Discussion Something that requires a team discussion before we can proceed label Oct 10, 2024
@@ -98,6 +127,58 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
_defaultAppearanceViewModel.IsDefault(true);
}

void ProfileViewModel::_UpdateBuiltInIcons()
{
_BuiltInIcons = single_threaded_vector<IInspectable>();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fwiw right now we do this once per profile when we could do it once per settings UI

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, _BuiltInIcons is static so it's a shared instance across all ProfileVMs.

And we only call it twice:

if (!_BuiltInIcons)
{
_UpdateBuiltInIcons();
}

if (!_BuiltInIcons)
{
_UpdateBuiltInIcons();
}

Both of which are wrapped in a null-check.

Confirmed w/ breakpoint in _UpdateBuiltInIcons() and poking around SUI (and closing/reopening SUI).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh jeez you're a step ahead of me!

@carlos-zamora carlos-zamora added the Needs-Second It's a PR that needs another sign-off label Oct 10, 2024
@microsoft-github-policy-service microsoft-github-policy-service bot removed the Needs-Second It's a PR that needs another sign-off label Oct 10, 2024
Comment on lines +133 to +136
for (auto& [val, name] : s_SegoeFluentIcons)
{
_BuiltInIcons.Append(make<EnumEntry>(hstring{ name }, box_value(val)));
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend the "first construct a std::vector, then move it into an IVector" approach here given that you append a lot of items.

BTW it's a funny thought but technically it's completely 100% possible to create a custom HSTRING that does not the need a heap allocation. The HSTRING struct is part of the ABI.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Grid.Column="1"
MaxWidth="Infinity"
HorizontalAlignment="Stretch"
FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/nit

@DHowett DHowett merged commit 460b180 into dev/cazamor/SUI/nullable-color-picker Oct 22, 2024
12 checks passed
@DHowett DHowett deleted the dev/cazamor/sui/icon branch October 22, 2024 21:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants