PowerToys icon indicating copy to clipboard operation
PowerToys copied to clipboard

[Fluent UX] Quick access flyout in system tray

Open niels9001 opened this issue 3 years ago • 36 comments

📝 Provide a description of the new feature

Problem The system tray provides a lot of quick access tools such as the notification center, network and sound settings. This is also where PowerToys lives, but it only provides two actions: opening settings and closing the application.

Additionally, the amount of PowerToys modules keep growing and most features are only accessible with keyboard shortcuts. To make these features more accessible, we also need to consider keyboard and mouse users. Providing additional functionality to quickly switch modes to keep in your workflow would be great, and can really showcase the various great tools.

Solution & features A flyout that opens whenever the user clicks on the systray app icon. It provides an interactive overlay that gives users quick access to the following features:

Feature Priority
Ability to open settings Should
Quick launch PT modules (e.g. Run / Color Picker / Shortcut Guide ) Should
Features that are disabled should not show up Should
Ability to set quick settings for e.g. Awake (mode) or Fancy Zones (layout switching) Could
The order (and options) should be customizable Could
Video Conference Mute buttons Could
Warning icon to indicate that PT is not running elevated Could
Banner/message whenever a new update is available Could

Mock-up Here's a WinUI UWP mock-up of how this flyout could work:

Light mode: Systray2

Dark mode: image

Source code can be found here: https://github.com/niels9001/SystrayUX/

Looking forward to more feedback to improve this concept!


If you'd like to see this feature implemented, add a 👍 reaction to this post.

niels9001 avatar Sep 21 '20 18:09 niels9001

Some basic thoughts from me (like in a standard menu) were:

  • Settings (bold if default action)
  • Open FancyZones Editor (and include the hotkey)
  • Open Keyboard Manager
  • Open PowerToys Run (and include the hotkey)
  • Open Color Picker (and include the hotkey)
  • Check for updates
  • Open Website
  • Exit

But is see your concept is even better 👍🏻

Jay-o-Way avatar Sep 21 '20 19:09 Jay-o-Way

@Jay-o-Way

Checking for updates actually triggered a thought: we could probably put an icon / banner in the top bar when:

  • New update is available
  • Button to show "What's new" (related to https://github.com/microsoft/PowerToys/issues/1285#issuecomment-679268558)
  • Icon to indicate that you are (not) running elevated.

niels9001 avatar Sep 21 '20 19:09 niels9001

To make these features more accessible, we also need to consider keyboard and mouse users.

And touch screen, of course.

Should we hide features that are disabled by the user?

Difficult choice, but I think I would say no, because I like to be able to reach as much as I can.

New update is available

Possible, but right now that is already done via notifications, which also feels fine to me.

Jay-o-Way avatar Sep 21 '20 19:09 Jay-o-Way

Looks like the community doesn't like it!

enricogior avatar Sep 21 '20 19:09 enricogior

Things we need to think about that impacts this + OOBE and who actually runs the UX and how we keep it in memory/instantly load.

OOBE could live in Settings easily but what about this dialog. Right now the systray UX is inside Runner.

crutkas avatar Sep 21 '20 22:09 crutkas

just mentioning Instant Eyedropper

Poopooracoocoo avatar Sep 22 '20 07:09 Poopooracoocoo

@Poopooracoocoo ???

crutkas avatar Sep 22 '20 15:09 crutkas

@Poopooracoocoo ???

I had mentioned it in #1244 and so I mentioned it again so that it's visible as not many people look at closed issues.

Poopooracoocoo avatar Sep 23 '20 00:09 Poopooracoocoo

Looks great! What about toys that does not have an activation key such as image resizer, power rename, file explorer ads-ons? Can we promote them somehow? I am afraid that if we show only the ones as in your mock-up users might think that these ones are all toys that we have. Or maybe it is OK and we should only have some OOB "slideshow" running when installed that will showcase all toys. In that case, this would be sufficient.

martinchrzan avatar Sep 28 '20 16:09 martinchrzan

not have an activation key such as image resizer, power rename, file explorer ads-ons? Can we promote them somehow? I am afraid that if we show only the ones as in your

Didn't think of that. I think the OOBE UX should provide an image / description of each module that explains what it does and how it works / where it's integrated.

This OOBE module we could make accessible in this flyout as well under quick launch (e.g. "Learn about other PT modules").

niels9001 avatar Sep 28 '20 18:09 niels9001

i like the idea for OOBE to have everything. @dedavis6797 fyi.

crutkas avatar Sep 30 '20 00:09 crutkas

What about toys that does not have an activation key such as image resizer, power rename, file explorer ads-ons?

@martinchrzan Resizer and Power Rename need files to work on, that's why the current method to start them is via the file context menu in File Explorer, so that they will have the files immediately when opened. If you can start up Resizer and Rename directly, without files, then you would have to manually select/add them later. That's not impossible to create, but it would be a new and different functionality.

For the File Explorer add-ons; do they really need to be turned on and off often/quickly?

Jay-o-Way avatar Sep 30 '20 17:09 Jay-o-Way

@Jay-o-Way not really, it would be still possible. If this flyout menu wasn't taking focus from your file explorer, or we had something like I proposed in #6836 - then you can trigger actions on actually selected file/files in your currently focused file explorer window (I do that in my project https://github.com/martinchrzan/FileExplorerGallery)

martinchrzan avatar Sep 30 '20 17:09 martinchrzan

Okay, you are right, it's not impossible, but as you said, the Explorer window needs to keep focus to determine the selected files. But what if I have more than one Explorer window open? Also, this means you start in the Explorer window and then move away from it to perform an action on selected files. That does not feel sensible to me. It would be more direct to just open the context menu. Or maybe, add the possibility to open Rename and Resize with a hotkey?

Jay-o-Way avatar Sep 30 '20 17:09 Jay-o-Way

I suggest that we should have a taskbar icon that would be consistent with these kinds of icons (White/Dark outline depending on your color theme and no fill):

ToShow

ghost avatar Oct 03 '20 03:10 ghost

I suggest that we should have a taskbar icon that would be consistent with these kinds of icons (White/Dark outline depending on your color theme and no fill):

ToShow

We're tracking this in: #3523

niels9001 avatar Oct 05 '20 09:10 niels9001

Is it an idea to add quick tasks to the icon in Start Menu for the PowerToys icon? Examples:

image Firefox image CCleaner

Or would it be better to create a new issue for this idea?

Jay-o-Way avatar Oct 20 '20 16:10 Jay-o-Way

I think we should have a different issue for that - tasks on a start menu item are "static", probably can be added into an installer?

Original feature request in this issue requires some process to create tray icon and run a "context menu" so it is more "dynamic"

martinchrzan avatar Oct 20 '20 16:10 martinchrzan

@niels9001 How about #831?

ghost avatar Nov 18 '20 06:11 ghost

I think @dedavis6797 will be looking at the spec for this. Good to take easy bug reporting along with that!

niels9001 avatar Nov 18 '20 06:11 niels9001

I think this is a great idea, but I do believe this is outside the stability release milestone

crutkas avatar Dec 08 '20 23:12 crutkas

Added in Enable / disable KBM if shortcuts are there

crutkas avatar Jan 21 '21 18:01 crutkas

I have written a written a Notification Flyout control which could be useful for this feature. This control uses XamlIslands to host a UWP app inside a WPF window to take advantage of the Flyout control's ability to pop outside of the window via setting ShouldConstrainToRootBounds to false, this gives us acrylic background and the flyout animation automatically out of the box which looks and feels exactly like the native battery, network and volume flyout.

546

Repro can be found at https://github.com/TheXamlGuy/NotificationFlyout

thexamlguy avatar Feb 06 '21 22:02 thexamlguy

@TheXamlGuy we can't look at it without a license on the repo

crutkas avatar Feb 09 '21 18:02 crutkas

@crutkas I have added one now.

thexamlguy avatar Feb 09 '21 18:02 thexamlguy

I have written a written a Notification Flyout control which could be useful for this feature. This control uses XamlIslands to host a UWP app inside a WPF window to take advantage of the Flyout control's ability to pop outside of the window via setting ShouldConstrainToRootBounds to false, this gives us acrylic background and the flyout animation automatically out of the box which looks and feels exactly like the native battery, network and volume flyout.

546

Repro can be found at https://github.com/TheXamlGuy/NotificationFlyout

This is great i use it for fluent flyouts

FireCubeStudios avatar Feb 25 '21 09:02 FireCubeStudios

I've actually been working on a "control center" flyout for fluent flyouts which is like the action center without notifications and it has quick actions maybe i can share soon

FireCubeStudios avatar Feb 25 '21 09:02 FireCubeStudios

It would be nice to be able to set global shortcuts to toggle for example keyboard manager.

quantum-booty avatar May 14 '21 10:05 quantum-booty

image System tray design needs to consider two user requirements

  1. The user uses the default layout
  2. User-defined layout

xiaolangGT avatar Jun 01 '21 15:06 xiaolangGT

I have an idea 💡 I see several requests for more and more modules to have their own hotkey (or even split Color picker & Editor, for example). The idea to include quick settings in here, already has been mentioned, but we could also give this very window a hotkey of its own. Then it'll be more like Visual Studio does: two consecutive hotkeys to achieve something.

Jay-o-Way avatar Sep 06 '21 10:09 Jay-o-Way