Powertoys: Settings V2 UI Task: General Settings Tab

[laviusmotileng-ms]

Settings V2 UI Task: General Settings Tab

Considered Done When The UI satisfies the following conditions:
• The top will be a header labelled "General Settings"
• Theme settings (System Default, Light, Dark)
• Attribution at the bottom will be provided #862 (see 4.1.6 for more)
• "About section" - See 4.1.3 for the bottom of this
• Disable telemetry #964- Toggle Switch
• This will be wired up but disabled with a note of "PowerToys currently respects the Windows data & feedback setting"
• This will be enabled when v1.0 is fully released.
• Run at startup - Toggle switch
• Default Terminal / Shell settings for PowerToys - see launcher spec
• Group Enable: Each Powertoy will have a toggle switch to enable them here. This is a difference from the old way.

Example: (Old PowerToys)

[mdtauk]

Does this go alongside moving to a XAML UI? #889

[crutkas]

Yes

[niels9001]

Couple of questions/comments:

• Shouldn't the name be 'General' and not 'General Settings'? It's a settings 'app' so all pages are related to settings :).
• Do we want to put the toggleswitch that enable the different toys in the general settings tab, or the respective tabs of each individual toy?

[mdtauk]

Couple of questions/comments:

• Shouldn't the name be 'General' and not 'General Settings'? It's a settings 'app' so all pages are related to settings :).

I would agree with this.

• Do we want to put the toggleswitch that enable the different toys in the general settings tab, or the respective tabs of each individual toy?

Each PowerToy's Settings page, could have a ToggleSwitch as the first option to enable and disable it. If the PowerToy is disabled, the other settings could also be disabled - acting as another visual cue that the control has been disabled.

[niels9001]

@mdtauk That's a great idea!

It will also make it future proof: the list of toggle switches will not grow on the general settings page.

@laviusmotileng-ms Should we keep the Default Shell / Default terminal dropdowns on the General tab, or on the Launcher tab (like defined in the Launcher spec)?

[enricogior]

We also need to give a visual clue that a module is turned off without having to go to its page to check the status.
I would like to see the visual effect of having the toggleswitch in the navigation panel.

[niels9001]

@enricogior I think adding ToggleSwitches into the NavigationViewItems will really clutter the UI and goes against the Fluent design guidelines. But it's a good point, ideally there would be something that indicates that the module is turned on or off. On the other hand, the Windows Settings app doesn't do this. Maybe a little glyph after the text (e.g. exclamation mark when the module is turned off?)

I have put in a first layout for the General tab with this PR: https://github.com/microsoft/PowerToys/pull/1546

Margins & paddings, font-sizes are in line with the W10 settings app.

[mdtauk]

@enricogior I think adding ToggleSwitches into the NavigationViewItems will really clutter the UI and goes against the Fluent design guidelines. But it's a good point, ideally there would be something that indicates that the module is turned on or off. On the other hand, the Windows Settings app doesn't do this. Maybe a little glyph after the text (e.g. exclamation mark when the module is turned off?)

I have put in a first layout for the General tab with this PR: #1546

Margins & paddings, font-sizes are in line with the W10 settings app.

A glyph may be too abstract to be useful - going into the page and seeing all the options disabled, except for the ToggleSwitch at the top makes sense.

[enricogior]

@niels9001

I think adding ToggleSwitches into the NavigationViewItems will really clutter the UI

I guess it would. My point of view is from a functional perspective. Consider that the navigation panel in PT has a different functionality compared to the Windows 10 settings. I agree that it should follow the same style but it may have its unique characteristic (I'm not saying we have to put the toggleswitches there, but we have to give a clue of the module status).

e.g. exclamation mark when the module is turned off?

Exclamation marks should be used to indicate something wrong or something the user should take care of.
In our case it should be something more subtle, like a lighter font color or a different font style (I guess it's also not in the Fluent guidelines) but there should be some indication of the module status, otherwise we end up losing functionality for the sake of appearance, and it's not what PT is all about. It's main goal is to provide more functionality to the current Windows experience. If we manage to find the right balance between UI and UX that would be ideal.

[mdtauk]

Is there something to be learned from the Windows 10X Quick Settings UI?

[crutkas]

Why not have the general icon here be the mono line PT icon :)

[crutkas]

For items, I think once stuff is added I , we will have to think long and hard on groupings.

[niels9001]

1574 adds new settings pages for Shortcut Guide and PowerRename.

• UX (e.g. page header) is now inline with W10X Settings app
• Added a sidepanel, similar to the W10 settings app that contain buttons for the module overview (learn more) and link to GitHub repo feature request / bugfix. Uses VisualStates to snap to the bottom of the page on smaller sizes.
• Moved the toy specific toggleswitch to the dedicated settings page. This should disable (or hide?) all other settings when IsOn = false.

@crutkas @laviusmotileng-ms How would we mention Contributors? GitHub username linking to their GH profile?

[crutkas]

Love it

Think the spec has name (linkable). I think what you have is great. I also think we should have an optional link that goes to “read more” that would be a deep link to a contributor.md for that. That part I guess could be hard coded. I know #862 does say do this from a file but I don’t know if that is totally needed now

[Poopooracoocoo]

I thought Microsoft wasn't going with large headers. We saw those large headers in the Microsoft Store and they were reverted after a while (this was before it moved to webviews fyi). Interesting 🤔

[mdtauk]

I think the heading should probably be 32epx as per the FluentUI Web type ramp.

This seems to be inline with Windows 10X UI.

EDIT: Its 34epx not 32...

[niels9001]

I think the heading should probably be 32epx as per the FluentUI Web type ramp.

This seems to be inline with Windows 10X UI.

I think the Your Phone app now moved to bolder typefaces for the title textblock styles. Not sure if the use the same height as the one you mentioned. Would be nice to have some clarity on this from the design team.

Looks way better imo, we should adopt it as well for Settings.

[mdtauk]

I think the Your Phone app now moved to bolder typefaces for the title textblock styles. Not sure if the use the same height as the one you mentioned. Would be nice to have some clarity on this from the design team.

Looks way better imo, we should adopt it as well for Settings.

Semibold weight, and not as big as it currently is in the Settings V2 screens

Your Phone uses 34epx / 40epx line height