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

Updating navigation tree for settings with groupings #35559

Merged
merged 16 commits into from
Oct 27, 2024
Merged

Conversation

crutkas
Copy link
Member

@crutkas crutkas commented Oct 24, 2024

Summary of the Pull Request

#23744

We've grown bigger over time, and with that, we need to make is easier to find stuff.

Next steps

  1. Top level icons <- needed in phase 1
  2. break out File explorer add ons <- phase 2
  3. Break out mouse utilities <- phase 2
  4. introduce top level - right pane navigation <- phase 2 or 3?
  5. Badging <- phase 2 or 3?
    1. introduce 'new' badging
    2. introduce 'deprecated' badging
    3. introduce Build into Windows now badging

Search, pinning will be next 'large' phase.

Here is current state with L1 icons
image

Fully expanded (but older screenshot
image

PR Checklist

  • Closes: #xxx
  • Communication: I've discussed this with core contributors already. If work hasn't been agreed, this work might be rejected
  • Tests: Added/updated and all pass
  • Localization: All end user facing strings can be localized
  • Dev docs: Added/updated
  • New binaries: Added on the required places
  • Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

xmlns=""
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
Copy link
Member Author

Choose a reason for hiding this comment

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

this was VS automatically adjusting this, fyi

@@ -111,7 +111,11 @@ private void OnItemInvoked(NavigationViewItemInvokedEventArgs args)
.OfType<NavigationViewItem>()
.First(menuItem => (string)menuItem.Content == (string)args.InvokedItem);
var pageType = item.GetValue(NavHelper.NavigateToProperty) as Type;
NavigationService.Navigate(pageType);

if (pageType != null)
Copy link
Member Author

Choose a reason for hiding this comment

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

without the L1 having a nav target, it would crash

This comment has been minimized.

Comment on lines +250 to +253
<NavigationViewItem
x:Uid="Shell_Hosts"
helpers:NavHelper.NavigateTo="views:HostsPage"
Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Hosts.png}" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Feels more like a (os) system tool. What makes the difference between advanced and system tools?

Comment on lines +246 to +249
<NavigationViewItem
x:Uid="Shell_EnvironmentVariables"
helpers:NavHelper.NavigateTo="views:EnvironmentVariablesPage"
Icon="{ui:BitmapIcon Source=/Assets/Settings/Icons/EnvironmentVariables.png}" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Feels more like a (os) system tool. What makes the difference between advanced and system tools?

x:Uid="Shell_TopLevelSystemTools"
Icon="Page2"
SelectsOnInvoked="False">
<NavigationViewItem.MenuItems>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Except of Awake and ShortcutGuide this tools feel more like advanced tools instead of (os) system tools.

@crutkas crutkas marked this pull request as ready for review October 25, 2024 21:48
Copy link
Collaborator

@davidegiacometti davidegiacometti left a comment

Choose a reason for hiding this comment

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

I tested it and it's not working on my machine.. Is this supposed to return level 1 and 2 items? 🤔

image

@crutkas
Copy link
Member Author

crutkas commented Oct 26, 2024

Maybe I screwed up mentally testing this. I know I validate l2 moved but maybe i saw it when I only had top level and bottoms and I mentally checked the bottom and then thought it worked

@Jay-o-Way
Copy link
Collaborator

Jay-o-Way commented Oct 26, 2024

@crutkas Would you like to link this PR to the correct ISSUE?
I believe it's not ready to merge yet, so this PR should be a concept.
Also, when this change comes live, this means a huge overhaul of the (MS Learn and internal) documentation too. Do you have PRs ready for those? If so, please link them. If not, please make them. BEFORE merging this (and possible follow-up) PRs.

@crutkas
Copy link
Member Author

crutkas commented Oct 26, 2024

@Jay-o-Way, why isn't this ready? #23744 is the issue (great call out). We've been discussing options for months. Everyone will have opinions on groupings and goal is "best of the options" due to it. @Aaron-Junker actually came up with more or less the current list and it mirrored a few of our internal ones too.

Updating docs here can be done pretty quick and benign to this change i believe.

if there is something larger i'm missing, i'm all ears. i know how to do the larger iterative effort for improving left nav and @ethanfangg is on point for future improvements of oobe/scoobe + dashboard.

@Jay-o-Way
Copy link
Collaborator

Oh I saw some (open) comments, and words like "next steps", but I suppose those are for a later pr. I'll have to give it a better look again soon.

P.S. this change is going to make many people happy 😊

@davidegiacometti
Copy link
Collaborator

This is working and looks good after adding the null check that Jeremy suggested.
Anyway I found another minor issue: when an utility page is opened from Dashboard or from the utility (eg settings button on Hosts File Editor), I think the parent should be expanded.

@davidegiacometti
Copy link
Collaborator

Certainly not the optimal solution, but it's a working one.
This may be enough to ship v1 considering also that additional changes may be needed in next phases.

View code
diff --git a/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml.cs b/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml.cs
index 5e1a199044..3c9beed618 100644
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml.cs
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/ShellPage.xaml.cs
@@ -4,7 +4,7 @@

 using System;
 using System.Collections.Generic;
-
+using System.Linq;
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Services;
@@ -122,6 +122,8 @@ namespace Microsoft.PowerToys.Settings.UI.Views

         public static bool IsUserAnAdmin { get; set; }

+        private static Dictionary<Type, NavigationViewItem> _navViewParentLookup;
+
         /// <summary>
         /// Initializes a new instance of the <see cref="ShellPage"/> class.
         /// Shell page constructor.
@@ -138,6 +140,21 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             // shellFrame.Navigate(typeof(GeneralPage));
             IPCResponseHandleList.Add(ReceiveMessage);
             SetTitleBar();
+
+            if (_navViewParentLookup == null)
+            {
+                _navViewParentLookup = new Dictionary<Type, NavigationViewItem>();
+
+                var topLevelItems = navigationView.MenuItems.OfType<NavigationViewItem>().ToArray();
+
+                foreach (var parent in topLevelItems)
+                {
+                    foreach (var child in parent.MenuItems.OfType<NavigationViewItem>())
+                    {
+                        _navViewParentLookup.TryAdd(child.GetValue(NavHelper.NavigateToProperty) as Type, parent);
+                    }
+                }
+            }
         }

         public static int SendDefaultIPCMessage(string msg)
@@ -348,6 +365,12 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             if (selectedItem != null)
             {
                 Type pageType = selectedItem.GetValue(NavHelper.NavigateToProperty) as Type;
+
+                if (_navViewParentLookup.TryGetValue(pageType, out var parentItem) && !parentItem.IsExpanded)
+                {
+                    parentItem.IsExpanded = true;
+                }
+
                 NavigationService.Navigate(pageType);
             }
         }

@crutkas
Copy link
Member Author

crutkas commented Oct 27, 2024

Added @davidegiacometti suggested code, baller suggestion

Copy link
Collaborator

@davidegiacometti davidegiacometti left a comment

Choose a reason for hiding this comment

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

I have pushed a small change since the proposed code wasn't working for the second time after collapsing an expanded parent.
I have tested the navigation from the navigation view, dashboard, OOBE and utility like Hosts and ColorPicker.
Ship it! 🚀

@davidegiacometti
Copy link
Collaborator

davidegiacometti commented Oct 27, 2024

The last change I made was suspicious so I investigate on why it was needed.
ShellPage and NavigationView should be initialized once on settings app lifecycle but that's not true.
There are some edge cases where ShellPage and ShellViewModel are reinitialize (I have been able to repro this opening OOBE, flyout and closing settings window).
I made List and Dictionary used to lookup parents and child as non static and reinitialized them in case of reinitialization of the shell.
Should be fine since NavigationView enumeration is done on initialization and not during navigation.

CC @snickler for your suggestion

Copy link
Collaborator

@jaimecbernardo jaimecbernardo left a comment

Choose a reason for hiding this comment

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

LGTM! Withstood every scenario I've tested. Great work!

@crutkas crutkas merged commit 64845b7 into main Oct 27, 2024
15 checks passed
@crutkas
Copy link
Member Author

crutkas commented Oct 27, 2024

Next steps are #35621

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.

7 participants