[Fluent UX] PowerRename

[crutkas]

PowerToys should do its best to look like a system level integration. PowerRename is great but has a UX that doesn't match the OS. This shift would also allow PowerRename to respect darkmode (#887)

@itsmichaelwest did a great mockup on the Twitters of what it could look like.

During this upgrade, i suggest we shift the UX to WinUI3 as well.

[crutkas]

getting there :) This is the UX done in real XAML. Datagrid for files needs to be added. Need to sync with WinUI on that.

[crutkas]

I think we should have the top be highest Z, middle with a middle Z and results be bottom Z

[crutkas]

Make enter rename

[mdtauk]

@crutkas you may want to consider using the compact density for the Xaml WinUI versions of these Power Toy apps

[mdtauk]

Will there be a need for Icons for each individual PowerToy?

Power Rename appears on the context menu, so will that need a modern Fluent style icon?

[crutkas]

That icon is incoming.

[niels9001]

I made a working XAML proto based on @zeealeid's awesome UX concept for Image Resizer.

Dark theme:

UX alignment with Image Resizer?
It would be nice to have a common UX for these configuration/action windows within PowerToys. Since we're also working on bringing Fluent to the Image Resizer powertoy (issue #1053), aligning the two might be useful?

XAML can be found in this repo. Happy to port the right stuff over once we have a working XAML Island project.

[mdtauk]

Is there a need to replicate the Icons from the original Icon Grid in the PowerRename Xaml View?

These mock ups replace it with a text only list/grid.

[enricogior]

I made a working XAML proto based on @zeealeid's awesome UX concept for Image Resizer.

@niels9001
what about switching the two pane, and have the Rename criteria on the left?

[niels9001]

I made a working XAML proto based on @zeealeid's awesome UX concept for Image Resizer.

@niels9001
what about switching the two pane, and have the Rename criteria on the left?

@enricogior Yeah I guess that makes sense, it needs some re-work overall. In smaller sizes it would be nice to have the list of items at the bottom - for that the TwoPaneView is perfect.

For it we'd need to move to Xaml Islands / WinUI anyways.. not something that is planned for 1.0, right?

[enricogior]

I think we should be good with the vertical placement of the Rename criteria an the left and the Preview results on the right. For portrait mode screens, it may be better to have them one on top of the other, but I don't think we need that in the first release of the new UI.
For sure I don't want this to be a huge project with too many dependency and slow to start, ideally it will remain C++ (haven't looked into WinUI 3.0 for C++ yet, but if it requires XAML Islands we might reconsider it).

[niels9001]

Made some improvements to the earlier concepts based on @crutkas earlier feedback.

• 'Advanced options' is now categorized in more logical groupings. Still needs some work to move away from CheckBox where not appropriate (e.g. for file exclusions) and title casing.

• Added tooltip/flyouts when typing to show e.g. RegEx commands or the File Date Creation options.

@enricogior @crutkas Looking forward to your feedback!

[crutkas]

Other than IMO true banding for the list, that is pretty fantastic.

[gczark]

Could the new UX support drag and drop feature? I was hoping that you can launch ImageResizer and Rename directly from task bar, than making a selection first then open from the context menu.

[niels9001]

@niels9001 looking good!
Does that mean we can expect it soon? 🤞🏻

Waiting for WinUI to be stable enough.. moving towards WinUI and aligning UXes is on the strategy/roadmap (see wiki). Not sure what the timeline would be.

[Jay-o-Way]

Could the new UX support drag and drop feature? I was hoping that you can launch ImageResizer and Rename directly from task bar, than making a selection first then open from the context menu.

Sounds like a good idea to me! That does mean they would have to be visible in the taskbar in the first place. I'm guessing that they currently do not show up here because they cannot be triggered as standalone apps right now. See also #6538.
Very handy if you want to rename multiple files from different folders. Also thinking about their location: If the directory would be included in the renaming (as in #1391), that means you can move lots of files at once.

[enricogior]

@Jay-o-Way
it is for the new UI.

[niels9001]

@Jay-o-Way the most recent UX concept for the WinUI version (posted a couple of comments up) tries to bring more grouping and logic in place.

Please review those to see if that matches your need. Post your feedback here so we can iterate on it and make it better!

[Jay-o-Way]

You'll have to forgive me if I start to repeat myself, but since my other issue got closed, I believe I am alright to add my idea here...

• Personally, I don't like things to be hidden when it's not necessary. So I want all of the options always visible.
• I would use "Apply to:" in stead of "Exclude" check boxes.

Apply to

• &folders
• file &names
• file e&xtensions
• include &subfolder items

I believe these four are logical and are the minimum of controls needed to achieve every option.
As shown, I think it would be good to add &access keys to the check box labels.

[niels9001]

I would very much appreciate your feedback! You can play around with the UWP UX mockup here: https://github.com/niels9001/powerrenameux

Sorry, did you mean there's mockup UI we can use to give feedback on - How do we do that? (I just see a github folder at the link and a list of files)

It's not clear to me how using the new design, a user could achieve the file rename operation in the example I gave earlier:
#888 (comment)

Perhaps you could illustrate as you have in the gif you posted?

You should be able to run the UWP demo by using Visual Studio, but it's non-functional in terms of renaming things.

Yes, the current implementation of PowerRename is very much RegEx focused - and it seems (?) that for most users that's sufficient. Would be a nice idea to have a tracking issue to explore if a simpler GUI to do those operations is useful for more users.

[ks2018ks]

You should be able to run the UWP demo by using Visual Studio, but it's non-functional in terms of renaming things.

Ah, that explains it then - I'm not a developer

Yes, the current implementation of PowerRename is very much RegEx focused - and it seems (?) that for most users that's sufficient.

Interested to know how you can be confident in that statement? Are most intended users of the powertoys developers? What proportion, like me, are not?

Would be a nice idea to have a tracking issue to explore if a simpler GUI to do those operations is useful for more users.

Easier to use does not necessarily mean simpler - it means giving your users appropriate help, using plain / unambiguous language, good ergonomics, etc.

[niels9001]

Interested to know how you can be confident in that statement? Are most intended users of the powertoys developers? What proportion, like me, are not?

Hence the ?.. With this I meant that there are not a lot of issues created in this repo that asked for providing more interface support to do (complex) RegEx operations. Doesn't mean it's not there, it's just not clearly visible to me.
I think the intended audience are "power users" (see repo description) - but yeah, that doesn't mean we could simplify things for all users.

Easier to use does not necessarily mean simpler - it means giving your users appropriate help, using plain / unambiguous language, good ergonomics, etc.

Let me rephrase it: what are key operations users often do and require RegEx or entering complex expressions? And can we provide an interface to make this simpler for users that are not super familiar with it (like myself)? Or at least, provide a UI to quickly insert RegEx/predefined commands from e.g. a list.

[ks2018ks]

I understand that perspective, but I don't think the absence of comments here is a reliable indication of the opportunity to meet power users needs for easy batch renaming, without having to learn a code/language/protocol. You could view RegEx as a back-end set of codes that most regular power users don't need to know about (analogous to VBA in Excel perhaps).

Then the challenge is designing a UI that can perform typical batch renaming without having to know RegEx. I don't know what knowledge this project has of what constitutes typical or is being designed with a series of use cases in mind. (I wasn't being sarcastic with the request for seeing how it would work in the example I posted earlier) If so, you could test it to see how efficiently developers vs non-developer power users could perform those use cases.

In answer to your specific call for feedback on the example you gave in the gif above. I would Instead of "Use RegEx" to something like "more options" or "advanced options..." and then simply allow them to be selected or entered. I would then as an option show the user what the RegEx equivalent would be. I think that is similar to what you have done, but not make RegEx the star

In any case would question a checkbox as being the right UI device, if in fact it is actually a series of further options (a button / label with ellipsis might be more appropriate).

[niels9001]

I understand that perspective, but I don't think the absence of comments here is a reliable indication of the opportunity to meet power users needs for easy batch renaming, without having to learn a code/language/protocol. You could view RegEx as a back-end set of codes that most regular power users don't need to know about (analogous to VBA in Excel perhaps).

Then the challenge is designing a UI that can perform typical batch renaming without having to know RegEx. I don't know what knowledge this project has of what constitutes typical or is being designed with a series of use cases in mind. (I wasn't being sarcastic with the request for seeing how it would work in the example I posted earlier) If so, you could test it to see how efficiently developers vs non-developer power users could perform those use cases.

Yes, that it would be great to have that input. Since this topic is modernizing the UI (both in look & feel and actual code, moving to XAML) I feel that that should be a separate work item to define specs on what that should look like. To collect feedback from the PT community, a low-effort start could be to create an issue where we can collect feedback.

In answer to your specific call for feedback on the example you gave in the gif above. I would Instead of "Use RegEx" to something like "more options" or "advanced options..." and then simply allow them to be selected or entered. I would then as an option show the user what the RegEx equivalent would be. I think that is similar to what you have done, but not make RegEx the star

In any case would question a checkbox as being the right UI device, if in fact it is actually a series of further options (a button / label with ellipsis might be more appropriate).

There needs to be a way to turn RegEx on or off. By default the Search for textbox is not parsed as such and just as a normal string. So we'd need to have a way to a) turn on/off RegEx, and then describe the mechanism you mentioned.

Would also be nice to have something similiar for the Replace with searchbox, as it accepts certain predefined attributes.

[dnknn]

Feature request for Visual editing ❣

I think we need to add a very useful feature ❕

• The renaming of Everything supports this function,

　imageScreenshot　　　

　　　　　　

• Obviously, this feature is more suitable for the following 3 scenarios:
  sometimes we want to edit directly/visually, or
  You can Ctrl+C these file name lists to Ctrl+V an external advanced text editor to operate (e.g. batch operations such as multi-point selection/vertical selection), and then Ctrl+C ⥅ Ctrl+V returns to PowerRename.
  or even, you don't want to rename, just use it as a simple copy of the file name list.

　　　　　　　

• If want to support, I hope can support the F2 shortcut-key to run this function.
  I think F2 is very suitable as a hotkey for this function.
  Visual-editor is a separate layer of interface.

• so, expected implementation behavior:
  1). First, run PowerRename.
  2). Then, press F2 (Of course can also click the icon button) to run Visual-editor.

[niels9001]

Latest tweaks:

WinUI 2.6 (UWP) source code: https://github.com/niels9001/powerrenameux

[thargol1]

Perhaps instead of the dropdown "Filename only" two checkboxes:
Apply to
[x] Filename [x] Extension
Saves one click. Of course if both are deselected you end up with no renames possible.

And would a tiled view be possible on the right side for working with really long filenames?

And UI guidelines say that alle icon-meaning should also conveyed as text (for vision impaired users).

And really fancy: hovering over an option with the mouse give a preview on the right side what the effect would be for toggling that option on or off.

[thargol1]

I had a look at the source code for the mockup UI. Consider using SVG-images in the final version using
SvgImageSource.
I am a web developer myself so I don't know much about all the resolution scaling issues voor windows app, but for web development SVG images are much easier than creating png images with multiple resolutions.

[kfernandes]

I don't know if this is the right place to post this, but it involves UI modifications too.

I have seen @dnknn and @niels9001 mentioning the ability to have bookmarks for search and replace, and having that would be awesome!
But I think a more advanced approach would be to implement some kind of rule flow.
The user would have the ability to create rules (similar to the before mentioned bookmarks), and apply them in some order.
The "Renamed" column on the "Preview" panel would display the final result (after all rules have been applied).

This is the first time I'm posting a comment/suggestion on a github repo.
Please forgive me if I'm doing it the wrong way.

[crutkas]

@kfernandes please do a new suggestion issue but a big note here is we're actively doing this right now and is near done for the new UX. #13678 has screenshots and, in theory, should be in the .49 release.

[kfernandes]

@crutkas , will do!
Thank you for the feedback!

[dedavis6797]

Resolved with v0.49.0.