Feature: Add edit tags button to the preview pane

[ferrariofilippo]

Resolved / Related Issues

• Were these changes approved in an issue or discussion with the project maintainers? In order to prevent extra work, feature requests and changes to the codebase must be approved before the pull request will be reviewed. This prevents extra work for the contributors and maintainers.
  Closes Feature: Tag section on Detials Pane, should include "Add Tags" button #12821
  Closes Bug: Tags are not displayed in the Preview Pane if no item is selected #12947

Validation
How did you test these changes?

• Did you build the app and test your changes?
• Did you check for accessibility? You can use Accessibility Insights for this.
• Did you remove any strings from the en-us resource file?
  • Did you search the solution to see if the string is still being used?
• Did you implement any design changes to an existing feature?
  • Was this change approved?
• Are there any other steps that were used to validate these changes?
  1. Open app and select a folder
  2. Open the preview pane
  3. Play with tags

Screenshots (optional)

[yaira2]

We may want to consider hiding this on items without tags, this will be consistent with other properties that are hidden when empty.

[mdtauk]

I am assuming this is using the same flyout as is used elsewhere in the app - so there is no code duplication...

[ferrariofilippo]

I am assuming this is using the same flyout as is used elsewhere in the app - so there is no code duplication...

Yes

[ferrariofilippo]

We may want to consider hiding this on items without tags, this will be consistent with other properties that are hidden when empty.

I made it always visible since that was the required behaviour in the issue

Rather than hiding this when no tags have been attached to the item, we could put an "Add Tag" or "Add Tags" button.

Anyway, I think we should keep it even if there are no tags, it's quicker to edit tags using that button than using the context menu.
Still we could hide it if the user has turned off Show tags in context menu

[ferrariofilippo]

[yaira2]

@ferrariofilippo Can you display the tags horizontally (and wrap onto the next line if there isn't enough room)?

[mdtauk]

@ferrariofilippo Can you display the tags horizontally (and wrap onto the next line if there isn't enough room)?

Two per row I think will be enough, if they take up 50% of the space each, This way the tag icons below will align to the ones above, and it wont look staggered.

[yaira2]

Still we could hide it if the user has turned off

It's okay, we can always show it.

[ferrariofilippo]

@yaira2 do you know any control better than ItemsWrapGrid? Using that you have to set manually items width
(I need that to display two tags/row using ItemsControl)

[yaira2]

@ferrariofilippo We can use a GridView with a custom template, the Community Toolkit has a couple of templates with the desired behavior.

[ferrariofilippo]

@ferrariofilippo We can use a GridView with a custom template, the Community Toolkit has a couple of templates with the desired behavior.

Did you mean this?
https://learn.microsoft.com/en-us/windows/apps/design/controls/item-templates-gridview#icon-and-text

[yaira2]

@ferrariofilippo https://learn.microsoft.com/en-us/dotnet/api/microsoft.toolkit.uwp.ui.controls.wraplayout?view=win-comm-toolkit-dotnet-7.0

[ferrariofilippo]

@ferrariofilippo https://learn.microsoft.com/en-us/dotnet/api/microsoft.toolkit.uwp.ui.controls.wraplayout?view=win-comm-toolkit-dotnet-7.0

Using that you can't display two tags/line, is that fine?

[yaira2]

Using that you can't display two tags/line, is that fine?

What do you mean? The screenshot looks like the desired behavior...

[ferrariofilippo]

Two per row I think will be enough, if they take up 50% of the space each, This way the tag icons below will align to the ones above, and it wont look staggered.

I thought we were going for this
I'll push the commit then

[yaira2]

LGTM

[yaira2]

LGTM

[yaira2]

I think we can improve the design by removing the "edit tag" button and instead, adding a "plus" icon to the GridView.

[ferrariofilippo]

I think we can improve the design by removing the "edit tag" button and instead, adding a "plus" icon to the GridView.

Where should it be? Before/after the tags? Next to the header?

[yaira2]

Ideally it'll be in the list of tags, is this possible?

[ferrariofilippo]

I'm not sure we can do that but I'll try

[ferrariofilippo]

@yaira2 I think we can do that using something like this, is it fine?

public class TagsListItem
{
	public object Item { get; set; }

	public bool IsButton => object is Button;

	public bool IsTag => object is Tag;
}

<DataTemplate>
	<StackPanel>
		<TagLayout x:Load="{x:Bind obj.IsTag, Mode=OneWay}" other_props />
		<Button x:Load="{x:Bind obj.IsButton, Mode=OneWay}" />
	</StackPanel>
</DataTemplate>

[yaira2]

Seems like a bit of a hack but it's simple enough so we might as well.

[yaira2]

@ferrariofilippo even better, what if we added a "plus" icon next to the "Tags" header?

[ferrariofilippo]

Does it look better using OpacityIcon or using the Glyph?

[Lukiluc29]

Hello, sorry to embed myself in your discussion but it would not be better to put the button after the tags instead of putting it next to "tags"

[ferrariofilippo]

Hello, sorry to embed myself in your discussion but it would not be better to put the button after the tags instead of putting it next to "tags"

This was the original idea but it's quite a mess to implement, we would need some hacky stuff

[Lukiluc29]

It's a shame because the original idea/my idea is much more beautiful than the one you have just proposed, as, for me, it would look out of place next to the 'tags'.

[ferrariofilippo]

@yaira2 what do you think? Both the solutions work properly. I can push the one you prefer

[yaira2]

@mdtauk what's your ideal design here?

[mdtauk]

If it's going to be changed to a small button, it should use the Status Bar Button control we made, and should be right aligned by the Tags header. Buttons should typically be in a fixed location, adding it to the end of the tags list means it is always moving.

Is it going to be an edit button however, or an add tag button.

If it's editing, it should use the edit tag icon.

@yaira2 I did send you a design for the Tags themselves if you wanted to add the remove button to them.

If the button is an Add Tags button, then it should only add. Then you can have the remove icon appear on hover.

If it's an Edit button, then it would need to bring up a menu of tags, which allows toggling them on and off with an add button in the flyout.

[yaira2]

Is it going to be an edit button however, or an add tag button.

For now it's going to be the edit tag button.

[mdtauk]

What about something like this. You can quick remove tags, or press the button to do more and add new ones.

[Lukiluc29]

What about something like this. You can quick remove tags, or press the button to do more and add new ones.

It's a great concept that will be beautiful once implemented.