Skip to content

Commit 147082e

Browse files
yaira2yaira2
committed
Feature: Updated the design of the Tags section in the Details Pane
Update PreviewPane.xaml Suggested fix Update PreviewPane.xaml Update PreviewPane.xaml Update PreviewPane.xaml
1 parent 59be516 commit 147082e

File tree

5 files changed

+113
-49
lines changed

5 files changed

+113
-49
lines changed

‎src/Files.App/Data/Items/TagsListItem.cs

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,6 @@ public bool IsTag
1313

1414
public TagItem? AsTag
1515
=> this as TagItem;
16-
17-
public bool IsFlyout
18-
=> this is FlyoutItem;
19-
20-
public FlyoutItem? AsFlyout
21-
=> this as FlyoutItem;
2216
}
2317

2418
public class TagItem : TagsListItem
@@ -30,14 +24,4 @@ public TagItem(TagViewModel tag)
3024
Tag = tag;
3125
}
3226
}
33-
34-
public class FlyoutItem : TagsListItem
35-
{
36-
public MenuFlyout Flyout { get; set; }
37-
38-
public FlyoutItem(MenuFlyout flyout)
39-
{
40-
Flyout = flyout;
41-
}
42-
}
4327
}

‎src/Files.App/ResourceDictionaries/PathIcons.xaml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,42 @@
138138
</Setter.Value>
139139
</Setter>
140140
</Style>
141+
142+
<Style x:Key="ColorIconEditTag" TargetType="local:OpacityIcon">
143+
<Setter Property="Template">
144+
<Setter.Value>
145+
<ControlTemplate>
146+
<Viewbox Stretch="Fill">
147+
<Grid Width="16" Height="16">
148+
<Path
149+
x:Name="Path1"
150+
Data="M2.72037 6.7794L4.67008 8.72911C5.07982 9.13885 5.5932 9.42952 6.15535 9.57006L7.65326 9.94454C9.03705 10.2905 10.2905 9.03704 9.94454 7.65326L9.57006 6.15535C9.42952 5.5932 9.13885 5.07981 8.72911 4.67008L6.7794 2.72037L7.70688 1.79289C7.89442 1.60536 8.14877 1.5 8.41399 1.5H12.9998C13.8282 1.5 14.4998 2.17157 14.4998 3V7.58579C14.4998 7.851 14.3944 8.10536 14.2069 8.29289L8.31043 14.1893C7.72465 14.7751 6.7749 14.7751 6.18911 14.1893L1.81043 9.81066C1.22465 9.22487 1.22465 8.27513 1.81043 7.68934L2.72037 6.7794Z"
151+
Fill="{ThemeResource Local.IconAltBrush}" />
152+
<Path
153+
x:Name="Path2"
154+
Data="M3.19258 0.54776L8.02201 5.37719C8.30359 5.65876 8.50334 6.01157 8.59992 6.39789L8.9744 7.89579C9.13725 8.5472 8.5472 9.13725 7.89579 8.9744L6.39789 8.59992C6.01157 8.50334 5.65876 8.30358 5.37719 8.02201L0.54776 3.19258C-0.182587 2.46223 -0.182587 1.27811 0.54776 0.54776C1.27811 -0.182587 2.46223 -0.182587 3.19258 0.54776Z"
155+
Fill="{ThemeResource Local.IconAccentStrokeColor}" />
156+
<Path
157+
x:Name="Path3"
158+
Data="M7.13248 3.0744L7.91399 2.29289C8.10152 2.10536 8.35588 2 8.62109 2H13.073C13.6253 2 14.073 2.44772 14.073 3V7.37426C14.073 7.64122 13.9663 7.89709 13.7766 8.08491L7.95863 13.8446C7.56755 14.2318 6.93712 14.2302 6.54798 13.8411L2.16399 9.45711C1.77346 9.06658 1.77346 8.43342 2.16399 8.04289L3.07345 7.13343L2.36634 6.42632L1.45688 7.33579C0.675831 8.11684 0.675832 9.38317 1.45688 10.1642L5.84088 14.5482C6.61915 15.3265 7.88 15.3297 8.66218 14.5553L14.4801 8.79556C14.8595 8.41993 15.073 7.90818 15.073 7.37426V3C15.073 1.89543 14.1776 1 13.073 1H8.62109C8.09066 1 7.58195 1.21071 7.20688 1.58579L6.42538 2.36729L7.13248 3.0744Z"
159+
Fill="{ThemeResource Local.IconBaseBrush}" />
160+
<Path
161+
x:Name="Path4"
162+
Data="M12.4998 4.5C12.4998 5.05228 12.0521 5.5 11.4998 5.5C10.9475 5.5 10.4998 5.05228 10.4998 4.5C10.4998 3.94772 10.9475 3.5 11.4998 3.5C12.0521 3.5 12.4998 3.94772 12.4998 4.5Z"
163+
Fill="{ThemeResource Local.IconBaseBrush}" />
164+
</Grid>
165+
166+
<VisualStateManager.VisualStateGroups>
167+
<VisualStateGroup>
168+
<VisualState x:Name="Normal" />
169+
<VisualState x:Name="Disabled" />
170+
</VisualStateGroup>
171+
</VisualStateManager.VisualStateGroups>
172+
</Viewbox>
173+
</ControlTemplate>
174+
</Setter.Value>
175+
</Setter>
176+
</Style>
141177

142178
<Style x:Key="ColorIconEnterCompactOverlay" TargetType="local:OpacityIcon">
143179
<Setter Property="Template">

‎src/Files.App/UserControls/Pane/PreviewPane.xaml

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -275,60 +275,92 @@
275275
<StackPanel
276276
x:Name="DetailsTagsList"
277277
Margin="12,8,12,0"
278-
Spacing="4"
279278
Visibility="Collapsed">
280-
<TextBlock
281-
HorizontalAlignment="Stretch"
282-
VerticalAlignment="Center"
283-
Style="{StaticResource Local.FileDetailsHeaderTextBlockStyle}"
284-
Text="{helpers:ResourceString Name=FileTags}" />
279+
280+
<StackPanel Orientation="Horizontal" Spacing="8">
281+
<TextBlock
282+
HorizontalAlignment="Stretch"
283+
VerticalAlignment="Center"
284+
Style="{StaticResource Local.FileDetailsHeaderTextBlockStyle}"
285+
Text="{helpers:ResourceString Name=FileTags}" />
286+
287+
<!-- Edit Tags Button -->
288+
<Button
289+
x:Name="DetailsEditTags"
290+
HorizontalAlignment="Right"
291+
AutomationProperties.Name="{helpers:ResourceString Name=EditTags}"
292+
Background="Transparent"
293+
BorderBrush="Transparent"
294+
Flyout="{x:Bind ViewModel.TagsFlyout, Mode=OneWay}"
295+
ToolTipService.ToolTip="{helpers:ResourceString Name=EditTags}">
296+
<Button.Content>
297+
<usercontrols:OpacityIcon
298+
Width="16"
299+
Height="16"
300+
Style="{StaticResource ColorIconEditTag}" />
301+
</Button.Content>
302+
</Button>
303+
</StackPanel>
285304

286305
<GridView
287306
HorizontalAlignment="Stretch"
288307
ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}"
289308
SelectionMode="None">
290309
<GridView.ItemsPanel>
291310
<ItemsPanelTemplate>
292-
<controls:WrapPanel HorizontalSpacing="12" Orientation="Horizontal" />
311+
<controls:WrapPanel Orientation="Horizontal" />
293312
</ItemsPanelTemplate>
294313
</GridView.ItemsPanel>
295314

296315
<GridView.ItemTemplate>
297316
<DataTemplate x:Name="TagTemplate" x:DataType="items:TagsListItem">
298-
<StackPanel>
317+
<UserControl PointerEntered="FileTag_PointerEntered" PointerExited="FileTag_PointerExited">
299318
<StackPanel
300-
x:Name="DetailsTagItem"
319+
x:Name="TagPill"
320+
Height="24"
321+
Padding="8,0,8,0"
322+
HorizontalAlignment="Left"
301323
x:Load="{x:Bind IsTag, Mode=OneWay}"
302324
AutomationProperties.Name="{x:Bind AsTag.Tag.Name, Mode=OneWay}"
325+
Background="{ThemeResource SubtleFillColorTransparent}"
326+
CornerRadius="12"
303327
Orientation="Horizontal"
304328
Spacing="8"
305329
ToolTipService.ToolTip="{x:Bind AsTag.Tag.Name, Mode=OneWay}">
306-
<PathIcon Data="{StaticResource ColorIconFilledTag}" Foreground="{x:Bind AsTag.Tag.Color, Mode=OneWay}" />
330+
<!-- Tag icon -->
331+
<PathIcon
332+
VerticalAlignment="Center"
333+
Data="{StaticResource ColorIconFilledTag}"
334+
Foreground="{x:Bind AsTag.Tag.Color, Mode=OneWay}" />
335+
<!-- Tag name -->
307336
<TextBlock
308337
HorizontalAlignment="Stretch"
338+
VerticalAlignment="Center"
309339
Style="{StaticResource Local.FileDetailsTextBlockStyle}"
310340
Text="{x:Bind AsTag.Tag.Name, Mode=OneWay}"
311341
TextTrimming="CharacterEllipsis" />
312-
</StackPanel>
342+
<!-- Remove tag icon -->
343+
<FontIcon
344+
x:Name="RemoveTagIcon"
345+
VerticalAlignment="Center"
346+
FontSize="12"
347+
Glyph="&#xE711;"
348+
ToolTipService.ToolTip="{helpers:ResourceString Name=Remove}"
349+
Visibility="Collapsed" />
350+
<VisualStateManager.VisualStateGroups>
351+
<VisualStateGroup x:Name="CommonStates">
352+
<VisualState x:Name="Normal" />
313353

314-
<!-- Edit Tags Button -->
315-
<Button
316-
x:Name="DetailsEditTags"
317-
HorizontalAlignment="Left"
318-
x:Load="{x:Bind IsFlyout, Mode=OneWay}"
319-
AutomationProperties.Name="{helpers:ResourceString Name=EditTags}"
320-
Background="Transparent"
321-
BorderBrush="Transparent"
322-
Flyout="{x:Bind AsFlyout.Flyout, Mode=OneWay}"
323-
ToolTipService.ToolTip="{helpers:ResourceString Name=EditTags}">
324-
<Button.Content>
325-
<usercontrols:OpacityIcon
326-
Width="16"
327-
Height="16"
328-
Style="{StaticResource ColorIconTags}" />
329-
</Button.Content>
330-
</Button>
331-
</StackPanel>
354+
<VisualState x:Name="PointerOver">
355+
<VisualState.Setters>
356+
<Setter Target="TagPill.Background" Value="{ThemeResource SubtleFillColorSecondary}" />
357+
<!--<Setter Target="RemoveTagIcon.Visibility" Value="Visible" />-->
358+
</VisualState.Setters>
359+
</VisualState>
360+
</VisualStateGroup>
361+
</VisualStateManager.VisualStateGroups>
362+
</StackPanel>
363+
</UserControl>
332364
</DataTemplate>
333365
</GridView.ItemTemplate>
334366
</GridView>
@@ -337,7 +369,7 @@
337369
<!-- Open Properties Button -->
338370
<Button
339371
x:Name="DetailsOpenProperties"
340-
Margin="8,8,8,8"
372+
Margin="12,0,8,8"
341373
HorizontalAlignment="Left"
342374
Command="{x:Bind Commands.OpenProperties}"
343375
IsEnabled="{x:Bind Commands.OpenProperties.IsExecutable, Mode=OneWay}"

‎src/Files.App/UserControls/Pane/PreviewPane.xaml.cs

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ public sealed partial class PreviewPane : UserControl
2626

2727
private ObservableContext Context { get; } = new();
2828

29-
public PreviewPane()
29+
public PreviewPane()
3030
{
3131
InitializeComponent();
3232
PaneSettingsService = Ioc.Default.GetRequiredService<IPreviewPaneSettingsService>();
@@ -67,6 +67,16 @@ private void Root_SizeChanged(object sender, SizeChangedEventArgs e)
6767
private void MenuFlyoutItem_Tapped(object sender, TappedRoutedEventArgs e)
6868
=> ViewModel?.UpdateSelectedItemPreview(true);
6969

70+
private void FileTag_PointerEntered(object sender, PointerRoutedEventArgs e)
71+
{
72+
VisualStateManager.GoToState((UserControl)sender, "PointerOver", true);
73+
}
74+
75+
private void FileTag_PointerExited(object sender, PointerRoutedEventArgs e)
76+
{
77+
VisualStateManager.GoToState((UserControl)sender, "Normal", true);
78+
}
79+
7080
private class ObservableContext : ObservableObject
7181
{
7282
private bool isHorizontal = false;

‎src/Files.App/ViewModels/UserControls/PreviewPaneViewModel.cs

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ public ListedItem SelectedItem
4949
if (SetProperty(ref selectedItem, value))
5050
{
5151
UpdateTagsItems();
52+
OnPropertyChanged(nameof(TagsFlyout));
5253
OnPropertyChanged(nameof(LoadTagsList));
5354

5455
if (value is not null)
@@ -87,6 +88,9 @@ public bool LoadTagsList
8788
PreviewPaneState is PreviewPaneStates.NoPreviewAvailable ||
8889
PreviewPaneState is PreviewPaneStates.PreviewAndDetailsAvailable;
8990

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

9296
public PreviewPaneViewModel(IPreviewPaneSettingsService previewSettings, IContentPageContext contentPageContextService = null)
@@ -389,8 +393,6 @@ private void UpdateTagsItems()
389393
Items.Clear();
390394

391395
SelectedItem?.FileTagsUI?.ForEach(tag => Items.Add(new TagItem(tag)));
392-
393-
Items.Add(new FlyoutItem(new Files.App.UserControls.Menus.FileTagsContextMenu(new List<ListedItem>() { SelectedItem })));
394396
}
395397

396398
public void Dispose()

0 commit comments

Comments
 (0)