[Settings v2] Module settings should be hidden/disabled when module toggleswitch is off.

[niels9001]

Summary of the new feature/enhancement

The various module settings are still available when the main module toggeswitch is set to off. We should hide all settings if the toggeswitch is turned off. It helps the user to understand the feature is turned off entirely and follows other UX conventions (that are also used in the Settings app).
We don't need to touch the state of the various options, hiding them would suffice.

Proposed technical implementation details

Every page consists of a StackPanel with all controls. We can create a subpanel wrapping all options. Its visibility is bind to the ToggleSwitch state.

Happy to pick this one up.

[crutkas]

I think that is a good one to pick up. Lets get #2129 in then lets work on this.

[mdtauk]

Hidden or set to disabled. There may be some benefit to showing what can be set, when you choose to toggle the module on.

[enricogior]

In general I agree with @mdtauk , hiding the settings seems too much, just disabling them should be enough.
I'm also considering that with the number of modules increasing, if a user turns off several modules, it would be nice to have the active modules on top.

[niels9001]

That makes sense, let's go for disabled!

@enricogior If I recall correctly @mdtauk has some thoughts on this before. We could have a visual indicator in the NavigationViewItems to indicate that a feature is turned off?

[enricogior]

Any type of indication would be good, if the module name can be grayed out for example, but I leave it to UI experts to choose the best way to indicate it.

[niels9001]

This could be a way to indicate that there's e.g. a new feature or a feature is disabled.

EDIT:
Your Phone has a similiar notification badge for when there are unread messages:
We could use blue for 'new', red for 'error', grey for 'disabled'.

[enricogior]

I like the idea of a way to notify the user of a new feature (eventually we will have something similar to VS Code, one place with a list of all new features for all modules).
For the disabled items, the triangle with the exclamation seems to indicate a problem with the module, so I think is would be better to just gray out the module name (if possible).

[mdtauk]

This could be a way to indicate that there's e.g. a new feature or a feature is disabled.

EDIT:
Your Phone has a similiar notification badge for when there are unread messages:
We could use blue for 'new', red for 'error', grey for 'disabled'.

Another use case has emerged for this proposal in the WinUI repo it seems...
microsoft/microsoft-ui-xaml#2140

[niels9001]

I like the idea of a way to notify the user of a new feature (eventually we will have something similar to VS Code, one place with a list of all new features for all modules).
For the disabled items, the triangle with the exclamation seems to indicate a problem with the module, so I think is would be better to just gray out the module name (if possible).

Yeah, maybe a 'What's new' / release notes clickable link under the version number (or maybe we can make the version number clickable?) that will take you to the release notes page on GH for now?

We can later on have something more fancy that integrates into the app.

This could be a way to indicate that there's e.g. a new feature or a feature is disabled.
EDIT:
Your Phone has a similiar notification badge for when there are unread messages:
We could use blue for 'new', red for 'error', grey for 'disabled'.

Another use case has emerged for this proposal in the WinUI repo it seems...
microsoft/microsoft-ui-xaml#2140

Great, let's keep track of this. Hopefully we can leverage the badge improvements in the future to indicate that a feature is turned off.

[crutkas]

i love the badging idea. One idea is dynamically updating the image.

• One issue for the coloring the text is the nav item acutally isn't disabled. To reenable it, they have to click on it.
• I like the Warning idea / mock @niels9001 did as it visually shows state.
  • I think it may need to be a stop sign or something. Warning implies configuration issue of some sort.

[htcfreek]

• I think it may need to be a stop sign or something. Warning implies configuration issue of some sort.

Originally posted by @crutkas

An example for using warning symbol to warn users could be #1958#issuecomment-613334280 .

[ghost]

@niels9001
@crutkas
@mdtauk
@enricogior
This is how I am approaching it in the UI. Let me know if this solves the issue.

Disabled:

Enabled:

[niels9001]

I think that makes sense!

Related question.. do we need a 'save sizes' button? Adding a new one should auto save it with default values in place? (And updating a vlue as well?

[mdtauk]

This is how I am approaching it in the UI. Let me know if this solves the issue.

Disabled:

I know those subheading TextBoxes are not interactive, but is there any value in making the text faded along with the disabled controls?

The headings stand out a bit when the controls are disabled, to the point it feels a bit weird.

---

Also instead of Xs, you should be using the Multiply glyph as they are dimensions.

1920 × 1080

[ghost]

This is how I am approaching it in the UI. Let me know if this solves the issue.
Disabled:

I know those subheading TextBoxes are not interactive, but is there any value in making the text faded along with the disabled controls?

The headings stand out a bit when the controls are disabled, to the point it feels a bit weird.

Also instead of Xs, you should be using the Multiply glyph as they are dimensions.

1920 × 1080

• Sure I will fade out the headings when disabled and use the glyph icon for multiplication.

[ghost]

I think that makes sense!

Related question.. do we need a 'save sizes' button? Adding a new one should auto save it with default values in place? (And updating a vlue as well?

Hi Niels, I do not have a strong preference for the save button. I added it to allow users to make all the changes they want and save when done. I thought was efficient as opposed to tracking every field.

[htcfreek]

@laviusmotileng-ms

• For a better overview you could write a : between the name and the first size.
• Do we really need two dropdowns for the type (pixels, ...)? I think no one will have pixel in the first number and an other type in the second number. (I would removed the first type dropdown. See example below.)
• The dropdowns seems to be one pixel moved in compare to the number fields.

Example:
[Small] : [1024] x [1080] [pixel]   [Trash-Symbol]

[niels9001]

We're disabling interactive UI elements, which is best practice.