Added Spacing and Padding options for compact layouts

[Gabryxx7]

Resolved / Related Issues
Items resolved / related issues by this PR.

• Related Add option for compact layout #1940

Details of Changes
Add details of changes here.

• Added a list of ThemeResource settings to App.xaml to make it easily modifiable (instead of being StaticResources)
• Added two sliders Spacing and Padding to the Navbar setting dialog
• The sliders are linked to two settings SpacingSizePx and PaddingSizePx which I already reigstered to JSON and added them both to UserSettingsService.AppearanceSettingsService
  -- The changes are updated LIVE through ModernShellPage and ColumnShellPage by calling a new abstract method in BaseLayout called UpdateAppearanceSettings().
  -- UpdateAppearanceSettings() then calls the method ContainerFromItem() implemented by the children classes such as DetailsBrowserLayout
  -- The new method ContainerFromItem() is abstract and located in BaseLayout so the inheriting layouts can implement it however they want to return whatever item they want from a listedItem.
  -- All of this was needed to update Margin and Padding live since they are set in the item style template and wouldn't be updated otherwise
• Had to change some Grid elements' Height to Auto to automatically scale icons and avoid them getting clipped due to the Padding changes.

Validation
How did you test these changes?

• [ x] Built and ran the app
• [ x] Tested the changes for accessibility

Screenshots (optional)

[yaira2]

-- UpdateAppearanceSettings() then calls the method ContainerFromItem() implemented by the children classes such as DetailsBrowserLayout

Do we need any extra handling for the column layout?

[R3voA3]

Fabulous!

[Gabryxx7]

@yaichenbaum No, ColumnViewBase inherits from BaseLayout, it only needs to override ContainerFromItem() from BaseLayout which I have already done. Any future layout that inherits from BaseLayout will only need to implement ContainerFromItem() to return any SelectorItem (such as ListViewItem or GridViewItem) so that BaseLayout's UpdateAppearanceSettings() can update Padding and Margin for those items.

I thought about generalizing it so that ContainerFromItem() only needs to return a Control (since SelectorItem inherits from Control and we only change Margin and Padding which are Control's variables. But I thought it could have been too generic and potentially dangereous if the wrong object gets returned!

[yaira2]

I would change a couple things before merging this

• Move the resources to the specific layouts and controls where they will be needed so that we don't run into issues where the UI isn't supposed to have the compact mode.
• Move the options to the settings dialog
• Limit the options to spacious, medium, and compact, it might sound trivial, but we try to keep everything limited to 3 or less options because once you start adding more than that, users will constantly request "just one more option". We've found that enforcing limits like this is the best balance between customizability and keeping the options simple for users to play around with.

[Gabryxx7]

I would change a couple things before merging this

• Move the resources to the specific layouts and controls where they will be needed so that we don't run into issues where the UI isn't supposed to have the compact mode.
• Move the options to the settings dialog
• Limit the options to spacious, medium, and compact, it might sound trivial, but we try to keep everything limited to 3 or less options because once you start adding more than that, users will constantly request "just one more option". We've found that enforcing limits like this is the best balance between customizability and keeping the options simple for users to play around with.

Sounds good! And yeah I thought about just having three options rather than a slider, but I guess that's still useful to find the best balance for the three options.

As discussed in the issue's thread, I'll try to scale the context menu flyout and the sidebar as well and move the option into the settings page so it's more obvious it relates to the whole UI.

As for the font scaling, I am not sure that scaling it with padding and spacing helps. What happens if a user want more "breath" in the UI but then the font and icon scale up too, making the UI too cluttered? I think maybe a separate option for small, medium, large font might be a good alternative?

[yaira2]

As for the font scaling, I am not sure that scaling it with padding and spacing helps. What happens if a user want more "breath" in the UI but then the font and icon scale up too, making the UI too cluttered? I think maybe a separate option for small, medium, large font might be a good alternative?

I think we should hold off on it and wait for some feedback on the compact layout before discussing the font and icon scaling.

[Gabryxx7]

As for the font scaling, I am not sure that scaling it with padding and spacing helps. What happens if a user want more "breath" in the UI but then the font and icon scale up too, making the UI too cluttered? I think maybe a separate option for small, medium, large font might be a good alternative?

I think we should hold off on it and wait for some feedback on the compact layout before discussing the font and icon scaling.

Sounds good! BTW should I add a shortcut to the navbar flyout from the settings, similar to "Show Hidden Items" being both in the Settings page and in the navbar flyout?

[yaira2]

BTW should I add a shortcut to the navbar flyout from the settings, similar to "Show Hidden Items" being both in the Settings page and in the navbar flyout?

Probably better not to since it affects (or at least it will) other areas of the app beyond the file area.

[yaira2]

@Gabryxx7 before we merge this, can you add your agreement to #7625?

[Gabryxx7]

Hey! Unfortunately I'll be a bit busy for another week or two with my PhD thesis. I'll try to finish it up on the weekend. Sorry about that!

[DOWIT-JoelFrojmowicz]

+1
Can't wait for this feature to be available!

[yaira2]

Hey! Unfortunately I'll be a bit busy for another week or two with my PhD thesis. I'll try to finish it up on the weekend. Sorry about that!

@Gabryxx7 thank you!

[Gabryxx7]

At the moment I'm adding the spacing settings to the Appearance tab with a dropdown and a few options such as Tighter/Tight/Default/Spacious/MoreSpacious
I'm just wondering where it's best to add these options? Spacing is made up of margins, padding and sometimes height, so I added a few classes:

• Helpers.SpacingHelper with a subclass Helpers.SpacingHelper.Spacing with padding and margin
• Enums.SpacingOptions with the options enum as per my previous message
  Now the question is: Shall I make a hard-coded list of Spacing objects with the padding and margin, or is it better to define them in a config file such as Files/App.xaml ?

[d2dyno1]

@Gabryxx7 Could you resolve conflicts? #8464 messed up a number of PRs, fortunately you can just copy-paste your changes to the files 🙂

[yaira2]

@Gabryxx7 thank you for working on this pull request, we ended up implementing this a little differently, but this PR was helpful and made it easier to implement the feature.