Skip to content

Feature: Updated the edit tags button in the Details Pane #12978

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Jul 19, 2023
Merged

Feature: Updated the edit tags button in the Details Pane #12978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
60f9774
Preview Pane: Move Edit Tags Button
ferrariofilippo Jul 19, 2023
91c630f
Update PathIcons.xaml
yaira2 Jul 19, 2023
e60ad59
Merge branch 'main' into Change_Edit_Tags_Button_Position
yaira2 Jul 19, 2023
6f8994e
Update PreviewPane.xaml
yaira2 Jul 19, 2023
a53ab7a
Update PathIcons.xaml
yaira2 Jul 19, 2023
4e3c923
Update PathIcons.xaml
yaira2 Jul 19, 2023
3173206
Update PathIcons.xaml
yaira2 Jul 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/Files.App/Data/Items/TagsListItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// Copyright (c) 2023 Files Community
// Licensed under the MIT License. See the LICENSE.

using Microsoft.UI.Xaml.Controls;

namespace Files.App.Data.Items
{

public class TagsListItem
{
public bool IsTag
=> this is TagItem;

public TagItem? AsTag
=> this as TagItem;

public bool IsFlyout
=> this is FlyoutItem;

public FlyoutItem? AsFlyout
=> this as FlyoutItem;
}

public class TagItem : TagsListItem
{
public TagViewModel Tag { get; set; }

public TagItem(TagViewModel tag)
{
Tag = tag;
}
}

public class FlyoutItem : TagsListItem
{
public MenuFlyout Flyout { get; set; }

public FlyoutItem(MenuFlyout flyout)
{
Flyout = flyout;
}
}
}
36 changes: 36 additions & 0 deletions src/Files.App/ResourceDictionaries/PathIcons.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,42 @@

<x:String x:Key="ColorIconFilledTag">M15.9918 3.0252C15.9902 1.9269 15.1032 1.03539 14.0049 1.02819L9.11457 0.996137C8.58049 0.992636 8.06719 1.2029 7.68905 1.58008L1.00751 8.24461C0.224764 9.02537 0.223956 10.2931 1.00571 11.0748L5.9541 16.0232C6.73515 16.8043 8.00148 16.8043 8.78253 16.0232L15.4133 9.39243C15.7891 9.01663 15.9999 8.50672 15.9991 7.97527L15.9918 3.0252ZM11.9853 5.99203C11.4331 5.99203 10.9853 5.54432 10.9853 4.99203C10.9853 4.43975 11.4331 3.99203 11.9853 3.99203C12.5376 3.99203 12.9853 4.43975 12.9853 4.99203C12.9853 5.54432 12.5376 5.99203 11.9853 5.99203Z</x:String>

<Style x:Key="ColorIconTags" TargetType="local:OpacityIcon">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Viewbox Stretch="Fill">
<Grid Width="16" Height="16">
<Path
x:Name="Path1"
Data="M8.41399 1.29289C8.60152 1.10536 8.85588 1 9.12109 1H12.9998C13.5521 1 13.9998 1.44772 13.9998 2V5.87868C13.9998 6.1439 13.8944 6.39825 13.7069 6.58579L8.20688 12.0858C7.81636 12.4763 7.18319 12.4763 6.79267 12.0858L2.91399 8.20711C2.52346 7.81658 2.52346 7.18342 2.91399 6.79289L8.41399 1.29289ZM11.5 4.5C12.0523 4.5 12.5 4.05228 12.5 3.5C12.5 2.94772 12.0523 2.5 11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5C10.5 4.05228 10.9477 4.5 11.5 4.5Z"
Fill="{ThemeResource IconAltBrush}" />
<Path
x:Name="Path2"
Data="M11.5 4.5C12.0523 4.5 12.5 4.05228 12.5 3.5C12.5 2.94772 12.0523 2.5 11.5 2.5C10.9477 2.5 10.5 2.94772 10.5 3.5C10.5 4.05228 10.9477 4.5 11.5 4.5Z"
Fill="{ThemeResource IconBaseBrush}" />
<Path
x:Name="Path3"
Data="M7.70688 0.585786C8.08195 0.210714 8.59066 0 9.12109 0H12.9998C14.1043 0 14.9998 0.895431 14.9998 2V5.87868C14.9998 6.40911 14.7891 6.91782 14.414 7.29289L8.91399 12.7929C8.13294 13.5739 6.86661 13.5739 6.08556 12.7929L2.20688 8.91421C1.42583 8.13317 1.42583 6.86684 2.20688 6.08579L7.70688 0.585786ZM9.12109 1C8.85588 1 8.60152 1.10536 8.41399 1.29289L2.91399 6.79289C2.52346 7.18342 2.52346 7.81658 2.91399 8.20711L6.79267 12.0858C7.18319 12.4763 7.81636 12.4763 8.20688 12.0858L13.7069 6.58579C13.8944 6.39825 13.9998 6.1439 13.9998 5.87868V2C13.9998 1.44772 13.5521 1 12.9998 1H9.12109Z"
Fill="{ThemeResource IconBaseBrush}" />
<Path
x:Name="Path4"
Data="M1.68825 9.8098C1.51125 10.4763 1.68413 11.2165 2.20688 11.7392L4.67135 14.2037C6.23344 15.7658 8.7661 15.7658 10.3282 14.2037L14.414 10.1179C14.7891 9.74283 14.9998 9.23412 14.9998 8.70369V8.12132L9.62109 13.5C8.44952 14.6716 6.55003 14.6716 5.37845 13.5L1.68825 9.8098Z"
Fill="{ThemeResource IconBaseBrush}" />
</Grid>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="ColorIconEnterCompactOverlay" TargetType="local:OpacityIcon">
<Setter Property="Template">
<Setter.Value>
Expand Down
73 changes: 37 additions & 36 deletions src/Files.App/UserControls/Pane/PreviewPane.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:helpers="using:Files.App.Helpers"
xmlns:items="using:Files.App.Data.Items"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:properties="using:Files.App.ViewModels.Properties"
xmlns:tags="using:Files.Core.ViewModels.FileTags"
xmlns:triggers="using:CommunityToolkit.WinUI.UI.Triggers"
xmlns:usercontrols="using:Files.App.UserControls"
x:Name="Root"
Expand Down Expand Up @@ -285,7 +285,7 @@

<GridView
HorizontalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SelectedItem.FileTagsUI, Mode=OneWay}"
ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}"
SelectionMode="None">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
Expand All @@ -294,45 +294,50 @@
</GridView.ItemsPanel>

<GridView.ItemTemplate>
<DataTemplate x:Name="TagTemplate" x:DataType="tags:TagViewModel">
<StackPanel
AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
Orientation="Horizontal"
Spacing="8"
ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
<PathIcon Data="{StaticResource ColorIconFilledTag}" Foreground="{x:Bind Color, Mode=OneWay}" />
<TextBlock
HorizontalAlignment="Stretch"
Style="{StaticResource Local.FileDetailsTextBlockStyle}"
Text="{x:Bind Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis" />
<DataTemplate x:Name="TagTemplate" x:DataType="items:TagsListItem">
<StackPanel>
<StackPanel
x:Name="DetailsTagItem"
x:Load="{x:Bind IsTag, Mode=OneWay}"
AutomationProperties.Name="{x:Bind AsTag.Tag.Name, Mode=OneWay}"
Orientation="Horizontal"
Spacing="8"
ToolTipService.ToolTip="{x:Bind AsTag.Tag.Name, Mode=OneWay}">
<PathIcon Data="{StaticResource ColorIconFilledTag}" Foreground="{x:Bind AsTag.Tag.Color, Mode=OneWay}" />
<TextBlock
HorizontalAlignment="Stretch"
Style="{StaticResource Local.FileDetailsTextBlockStyle}"
Text="{x:Bind AsTag.Tag.Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis" />
</StackPanel>

<!-- Edit Tags Button -->
<Button
x:Name="DetailsEditTags"
HorizontalAlignment="Left"
x:Load="{x:Bind IsFlyout, Mode=OneWay}"
AutomationProperties.Name="{helpers:ResourceString Name=EditTags}"
Background="Transparent"
BorderBrush="Transparent"
Flyout="{x:Bind AsFlyout.Flyout, Mode=OneWay}"
ToolTipService.ToolTip="{helpers:ResourceString Name=EditTags}">
<Button.Content>
<usercontrols:OpacityIcon
Width="16"
Height="16"
Style="{StaticResource ColorIconTags}" />
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>

<!-- Edit Tags Button -->
<Button
x:Name="DetailsEditTags"
Margin="8,0,8,8"
HorizontalAlignment="Left"
Flyout="{x:Bind ViewModel.TagsFlyout, Mode=OneWay}"
ToolTipService.ToolTip="{helpers:ResourceString Name=EditTags}"
Visibility="Collapsed">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="8">
<FontIcon FontSize="12" Glyph="&#xE8EC;" />
<TextBlock Text="{helpers:ResourceString Name=EditTags}" />
<FontIcon FontSize="12" Glyph="&#xE70D;" />
</StackPanel>
</Button.Content>
</Button>

<!-- Open Properties Button -->
<Button
x:Name="DetailsOpenProperties"
Margin="8,0,8,8"
Margin="8,8,8,8"
HorizontalAlignment="Left"
Command="{x:Bind Commands.OpenProperties}"
IsEnabled="{x:Bind Commands.OpenProperties.IsExecutable, Mode=OneWay}"
Expand Down Expand Up @@ -364,7 +369,6 @@
<Setter Target="PreviewErrorText.Visibility" Value="Visible" />
<Setter Target="PreviewErrorText.Text" Value="{x:Bind GetLocalizedResource('DetailsPanePreviewNotAvaliableText')}" />
<Setter Target="FileDetailsRepeater.Visibility" Value="Visible" />
<Setter Target="DetailsEditTags.Visibility" Value="Visible" />
<Setter Target="DetailsOpenProperties.Visibility" Value="Visible" />
<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
Expand All @@ -378,7 +382,6 @@
<Setter Target="PreviewErrorText.Visibility" Value="Visible" />
<Setter Target="PreviewErrorText.Text" Value="{x:Bind GetLocalizedResource('DetailsPanePreviewNotAvaliableText')}" />
<Setter Target="FileDetailsRepeater.Visibility" Value="Collapsed" />
<Setter Target="DetailsEditTags.Visibility" Value="Collapsed" />
<Setter Target="DetailsOpenProperties.Visibility" Value="Collapsed" />
<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
</VisualState.Setters>
Expand All @@ -390,7 +393,6 @@
<VisualState.Setters>
<Setter Target="PreviewErrorText.Visibility" Value="Collapsed" />
<Setter Target="FileDetailsRepeater.Visibility" Value="Visible" />
<Setter Target="DetailsEditTags.Visibility" Value="Visible" />
<Setter Target="DetailsOpenProperties.Visibility" Value="Visible" />
<Setter Target="PreviewControlPresenter.Visibility" Value="Visible" />
<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
Expand All @@ -403,7 +405,6 @@
<VisualState.Setters>
<Setter Target="PreviewErrorText.Visibility" Value="Collapsed" />
<Setter Target="FileDetailsRepeater.Visibility" Value="Collapsed" />
<Setter Target="DetailsEditTags.Visibility" Value="Collapsed" />
<Setter Target="DetailsOpenProperties.Visibility" Value="Collapsed" />
<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
Expand Down
17 changes: 13 additions & 4 deletions src/Files.App/ViewModels/UserControls/PreviewPaneViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright (c) 2023 Files Community
// Licensed under the MIT License. See the LICENSE.

using Files.App.Data.Contexts;
using Files.App.UserControls.FilePreviews;
using Files.App.ViewModels.Previews;
using Microsoft.UI.Xaml;
Expand Down Expand Up @@ -49,7 +48,7 @@ public ListedItem SelectedItem

if (SetProperty(ref selectedItem, value))
{
OnPropertyChanged(nameof(TagsFlyout));
UpdateTagsItems();
OnPropertyChanged(nameof(LoadTagsList));

if (value is not null)
Expand Down Expand Up @@ -88,8 +87,7 @@ public bool LoadTagsList
PreviewPaneState is PreviewPaneStates.NoPreviewAvailable ||
PreviewPaneState is PreviewPaneStates.PreviewAndDetailsAvailable;

public MenuFlyout TagsFlyout
=> new Files.App.UserControls.Menus.FileTagsContextMenu(new List<ListedItem>() { SelectedItem });
public ObservableCollection<TagsListItem> Items { get; } = new();

public PreviewPaneViewModel(IPreviewPaneSettingsService previewSettings, IContentPageContext contentPageContextService = null)
{
Expand Down Expand Up @@ -374,6 +372,17 @@ private void SelectedItem_PropertyChanged(object? sender, PropertyChangedEventAr
{
if (e.PropertyName is nameof(ListedItem.HasTags))
OnPropertyChanged(nameof(LoadTagsList));
else if (e.PropertyName is nameof(ListedItem.FileTagsUI))
UpdateTagsItems();
}

private void UpdateTagsItems()
{
Items.Clear();

SelectedItem?.FileTagsUI?.ForEach(tag => Items.Add(new TagItem(tag)));

Items.Add(new FlyoutItem(new Files.App.UserControls.Menus.FileTagsContextMenu(new List<ListedItem>() { SelectedItem })));
}

public void Dispose()
Expand Down