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

Fluent UX: Settings #889

Closed
8 tasks done
crutkas opened this issue Dec 6, 2019 · 22 comments · Fixed by #2324
Closed
8 tasks done

Fluent UX: Settings #889

crutkas opened this issue Dec 6, 2019 · 22 comments · Fixed by #2324
Labels
Area-User Interface things that regard UX for PowerToys External Dependency-WinUI 3 Dependency on WinUI Product-Settings The standalone PowerToys Settings application Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release.
Milestone

Comments

@crutkas
Copy link
Member

crutkas commented Dec 6, 2019

PowerToys should do its best to look like a system level integration. The current settings screen is a close but needs to be refine a bit more. It looks close but little differences in both look and animations make it clearly not native.

image

Status

  • - General Settings
  • - Power Rename
  • - Power Launcher
  • - File Explorer Preview
  • - Fancy Zones
  • - Image Resizer
  • - Shortcut Guide
  • - Keyboard Remapper 
@crutkas crutkas added Product-Settings The standalone PowerToys Settings application Area-User Interface things that regard UX for PowerToys labels Dec 6, 2019
@niels9001
Copy link
Contributor

Here's a mock-up using WinUI 3.0

Settings

Light theme:
image

It tries to mimic the default Windows OS settings as much as possible. Respects the selected theme (light/dark) and using the new WinUI 2.3 NumberBox.

Source code in this repo: https://github.com/niels9001/PowerToysUXWinUI3Alpha

@crutkas
Copy link
Member Author

crutkas commented Feb 10, 2020

Some items will have to be adjusted here but yes, that is awesome!

@crutkas
Copy link
Member Author

crutkas commented Feb 22, 2020

Here is my thought. We can do what a bunch of apps do. Have a “new look” toggle so we can start migrating new stuff over.

Use WinUI 3, wpf and a xaml island to just start working. @enricogior any reason why win32 would be a must or would wpf be good enough?

@crutkas
Copy link
Member Author

crutkas commented Feb 22, 2020

  • the new setting app would be a new app too so we don’t take a hit for the entire app to move to 19h1 min version.

@enricogior
Copy link
Contributor

Use WinUI 3, wpf and a xaml island to just start working. @enricogior any reason why win32 would be a must or would wpf be good enough?

Do we still want the settings to be a standalone app? If not Win32 is a must.
If we keep it standalone we may have to redesign the way the app exchange data with the runner.
Some investigation is needed before giving a cost estimate.

@crutkas
Copy link
Member Author

crutkas commented Feb 23, 2020

Why wouldn’t we want to keep it a stand-alone app? How would that work if it wasn’t?

@enricogior
Copy link
Contributor

enricogior commented Feb 23, 2020

Why wouldn’t we want to keep it a stand-alone app?

The only reason why it was a standalone app, was because we didn't know how to run the WebView control in an elevated process. There weren't other reasons.

We may decide to keep it standalone, if that is beneficial, but since we haven't had that discussion yet, I asked.

Currently the runner creates two named pipes that are passed to a class called TwoWayPipeMessageIPC and used to communicate between the runner and the settings app.
When the settings app starts, it calls the runner to get the general settings and each module settings.
When the settings are changed and sent back to the runner, the runner processes the general settings and dispatches the modules settings to each module.

EDIT: need to investigate if the WPF app can leverage TwoWayPipeMessageIPC or if we have to write a C# version.

How would that work if it wasn’t?

The runner would open directly the Settings window and not have to use the two-way pipe channel to exchange data and control commands.

@crutkas
Copy link
Member Author

crutkas commented Feb 24, 2020

  • Couldn't the WPF app just consume a Win32 dll that has that implemented? That way the logic for that stays in a single DLL for both runner and settings.
  • What would the settings app then be run out of? The Runner?

@crutkas crutkas modified the milestones: v1.0 Release, Build Feb 24, 2020
@enricogior
Copy link
Contributor

Couldn't the WPF app just consume a Win32 dll that has that implemented?

Yes, but there is work to be done to make it callable from C#. We should factor the cost of the code implementation and of the testing for this work. Also test the performance impact of opening the settings as a standalone WPF app.

What would the settings app then be run out of? The Runner?

Yes, similarly to how is done now, it's the runner that starts the Settings app.

@crutkas
Copy link
Member Author

crutkas commented Mar 5, 2020

Looking at @zeealeid's mock
ELNUIaHXsAAuEyu

This is functional XAML.
image

needs more padding on the left but i'm digging it.

@crutkas
Copy link
Member Author

crutkas commented Mar 5, 2020

Code is from a basic Windows Template Studio generated app but here is the current XAML so it isn't lost

<winui:NavigationView
    x:Name="navigationView"
    IsBackButtonVisible="Collapsed"
    IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
    SelectedItem="{x:Bind Selected, Mode=OneWay}"
    ItemInvoked="OnItemInvoked"
    IsSettingsVisible="True"
    IsPaneToggleButtonVisible="False" 
    Background="{ThemeResource SystemControlBackgroundAltHighBrush}">

    <winui:NavigationView.PaneHeader>
        <TextBlock Margin="12, 24, 0, 6" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold">PowerToys</TextBlock>
    </winui:NavigationView.PaneHeader>
    <winui:NavigationView.MenuItems>
        <!--
        TODO WTS: Change the symbols for each item as appropriate for your app
        More on Segoe UI Symbol icons: https://docs.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
        Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/master/docs/projectTypes/navigationpane.md
        Edit String/en-US/Resources.resw: Add a menu item title for each page
        -->
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
    </winui:NavigationView.MenuItems>
    <i:Interaction.Behaviors>
        <behaviors:NavigationViewHeaderBehavior
            DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
            <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                <DataTemplate>
                    <Grid Margin="0,24,0, 6">
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}"
                            FontWeight="Bold"
                            Margin="{StaticResource SmallLeftRightMargin}" />
                    </Grid>
                </DataTemplate>
            </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
        </behaviors:NavigationViewHeaderBehavior>
    </i:Interaction.Behaviors>
    <Grid>
        <Frame x:Name="shellFrame" />
    </Grid>
</winui:NavigationView>

@mdtauk
Copy link

mdtauk commented Mar 6, 2020

Windows 10 X is altering the font styles used in it's settings app - so hopefully those changes come to Windows 10 and can be coordinated with the Powertoys UI

image

@crutkas crutkas added the Status-In progress This issue or work-item is under development label Mar 12, 2020
@crutkas
Copy link
Member Author

crutkas commented Mar 12, 2020

Dependence: WinUI 3

@crutkas crutkas assigned ghost Apr 8, 2020
@crutkas
Copy link
Member Author

crutkas commented Apr 8, 2020

Moved status to the top

@niels9001
Copy link
Contributor

@crutkas Do we have a list of contributors per module somewhere? We could start adding those I guess.

@crutkas
Copy link
Member Author

crutkas commented Apr 12, 2020

I was planning to start adding those in Friday but the feature branch now is slightly busted after we merged KBM and setting v2.

@Poopooracoocoo
Copy link

@mdtauk hopefully they start using WinUI for the Windows shell. They've missed so many opportunities. Maybe they're waiting for WinUI 3.0.

@ghost
Copy link

ghost commented May 8, 2020

Mildly unrelated, but i don't see an issue for Launcher Fluent UX - is this not on the cards for this release, or are we just not there yet?

@crutkas
Copy link
Member Author

crutkas commented May 8, 2020

Mildly unrelated, but i don't see an issue for Launcher Fluent UX - is this not on the cards for this release, or are we just not there yet?

Being designed out of the box like that :)

@ghost
Copy link

ghost commented May 8, 2020 via email

@saahmedm saahmedm added Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release. and removed Status-In progress This issue or work-item is under development labels May 11, 2020
@enricogior
Copy link
Contributor

The new Settings are now available in 0.18 https://github.com/microsoft/PowerToys/releases on Windows 10 version 1903 and higher.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-User Interface things that regard UX for PowerToys External Dependency-WinUI 3 Dependency on WinUI Product-Settings The standalone PowerToys Settings application Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants