Feature: Add a UI to edit, delete and create tags

[ferrariofilippo]

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

• Closes Feature: Add a UI to edit, delete and create tags #9588

Supported Features

• Add a new tag (name = "New Tag" and random color)
• Rename an existing tag
• Delete an existing tag
• Change color of an existing tag (Color Picker as for app bg)
• Sidebar section, Tags Widget and right click context menu are all synced

Notes

• CommandBar.MinWidth=250 is needed to avoid a UI bug involving localization
• ColorHelpers.FromHex() now works even when alpha is specified
• I created a method to remove a GoTo in AdvancedViewModel
• FileTagsSettingsService.GetTagAndIndex() is basically an IndexOf which does not work (always returns -1)
• I'm not sure why (I'll check this out), but to edit FileTagList you need to reassign it

Validation
How did you test these changes?

• Built and ran the app
• Tested the changes for accessibility

Screenshots (optional)

[yaira2]

This is amazing! Two suggestions for improving the UX,

• Instead of a circle, maybe we can use this same design we do in the in appearance settings. This designs makes it a little easier to tell that you can click to change the color.
  

• For renaming tags, perhaps there can be an edit button at the top of the list alongside add and remove.

[yaira2]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ferrariofilippo]

Actually, there seems to be a bug (Tags color in contextmenu are different from sidebar)
Done

[yaira2]

I'm planning to test this myself but can you also update the screenshot and supported features list in the description?

[yaira2]

Is the list in the sidebar updating for you?

[ferrariofilippo]

My bad I removed a needed line with one of the latest commit

[ferrariofilippo]

Wait there's still a bug

[ferrariofilippo]

Everything should be fine now

[yaira2]

@ferrariofilippo thank you for your patience as I figured out the UI, I wasn't really sure what I wanted it to look like going into this but I'm happy with how it turned out.

[yaira2]

LGTM

[ferrariofilippo]

@ferrariofilippo thank you for your patience as I figured out the UI, I wasn't really sure what I wanted it to look like going into this but I'm happy with how it turned out.

There's no problem, I love tags and I'd do anything to make them more powerful

[QuaintMako]

A few minor points. I haven't been able to test it yet. I'll add the approval once I can.

[QuaintMako]

A few ideas while testing the UI I can think of, to be validated by @yaira2 :

• Having a option when right clicking on the Tags item on the sidebar to open directly to the setting to edit the tags would be nice.
• When editing a tag, pressing Esc should stop the edition, not close the setting panel.
• Having to travel to and from the action buttons may be cumbersome if a lot of manipulation has do be done. Maybe getting them closer would be nicer?

• I can create two tags with the same name. Sure, the guid are differents, but is this a wanted behavior?
• Deleting a tag should display a dialog box to ensure it's not an error.
• Once it's no longer an experimental feature, maybe move it to an entirely new setting tab?
• Displaying some kind of warning when the name is not usable, a red box around the name perhaps ? Also, explain somehow why it's not valid (tooltip?). Otherwise, the user won't be able to know what's wrong.

Otherwise @ferrariofilippo very smooth code and nice UI! Thanks for taking care of this, it's gonna be a huge addition when it comes live!

[yaira2]

Having a option when right clicking on the Tags item on the sidebar to open directly to the setting to edit the tags would be nice.

We don't have any deep linking like this in the app right now so best to leave as is but can revisit later on.

When editing a tag, pressing Esc should stop the edition, not close the setting panel.

This can be added

Having to travel to and from the action buttons may be cumbersome if a lot of manipulation has do be done. Maybe getting them closer would be nicer?

Unlike editing files, I don't think tags are something that are going to be modified a lot, nevertheless, it wouldn't hurt to center the text and color dropdown.

[yaira2]

I can create two tags with the same name. Sure, the guid are differents, but is this a wanted behavior?

No, should probably be added to the validation. Can you open an issue?

Deleting a tag should display a dialog box to ensure it's not an error.

A flyout can do the trick, can you open an issue to track?

Once it's no longer an experimental feature, maybe move it to an entirely new setting tab?

That's the plan

Displaying some kind of warning when the name is not usable, a red box around the name perhaps ? Also, explain somehow why it's not valid (tooltip?). Otherwise, the user won't be able to know what's wrong.

Good idea, can you open an issue to track?

[yaira2]

@QuaintMako can you open some issues to track these? I'd like to merge this as is so that we can move forward. Most of those are quick changes and shouldn't take long to implement.

[QuaintMako]

Alright, I'll do so soon.

[yaira2]

Feel free to skip the description at the top of the issues since I already know what they are referring to. Just make sure to include the requirements.