Code Quality: Improved Shelf pane (#17069)

Author: yaira2

src/Files.App/UserControls/Pane/ShelfPane.xaml

@@ -103,8 +103,10 @@
 			Padding="8,4,8,4"
 			CanDragItems="True"
 			DragItemsStarting="ListView_DragItemsStarting"
+			GotFocus="ShelfItemsList_GotFocus"
 			ItemContainerTransitions="{x:Null}"
 			ItemsSource="{x:Bind ItemsSource, Mode=OneWay}"
+			RightTapped="ShelfItemsList_RightTapped"
 			ScrollViewer.VerticalScrollBarVisibility="Auto"
 			ScrollViewer.VerticalScrollMode="Auto"
 			SelectionMode="Extended">
@@ -126,16 +128,6 @@
 							TextTrimming="CharacterEllipsis"
 							TextWrapping="NoWrap"
 							ToolTipService.ToolTip="{x:Bind Path, Mode=OneWay}" />
-
-						<Grid.ContextFlyout>
-							<MenuFlyout>
-								<MenuFlyoutItem Command="{x:Bind RemoveCommand}" Text="{helpers:ResourceString Name=RemoveFromShelf}">
-									<MenuFlyoutItem.Icon>
-										<FontIcon Glyph="&#xE738;" />
-									</MenuFlyoutItem.Icon>
-								</MenuFlyoutItem>
-							</MenuFlyout>
-						</Grid.ContextFlyout>
 					</Grid>
 				</DataTemplate>
 			</ListView.ItemTemplate>

src/Files.App/UserControls/Pane/ShelfPane.xaml.cs

@@ -86,6 +86,32 @@ private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArg
 			dataObjectProvider.SetDataObject(ppDataObject);
 		}
 
+		private void ShelfItemsList_RightTapped(object sender, Microsoft.UI.Xaml.Input.RightTappedRoutedEventArgs e)
+		{
+			if (e.OriginalSource is not Microsoft.UI.Xaml.FrameworkElement widgetCardItem ||
+				widgetCardItem.DataContext is not ShelfItem item ||
+				item.Path is null)
+				return;
+
+			var menuFlyout = new MenuFlyout();
+
+			menuFlyout.Items.Add (new MenuFlyoutItem
+			{
+				Text = Strings.RemoveFromShelf.GetLocalizedResource(),
+				Icon = new FontIcon { Glyph = "\uE738" },
+				Command = new RelayCommand(item.Remove)
+			});
+
+			menuFlyout.ShowAt(widgetCardItem);
+			e.Handled = true;
+		}
+
+		private void ShelfItemsList_GotFocus(object sender, RoutedEventArgs e)
+		{
+			if (ItemFocusedCommand is not null)
+				ItemFocusedCommand.Execute(null);
+		}
+
 		public ObservableCollection<ShelfItem>? ItemsSource
 		{
 			get => (ObservableCollection<ShelfItem>?)GetValue(ItemsSourceProperty);
@@ -101,5 +127,14 @@ public ICommand? ClearCommand
 		}
 		public static readonly DependencyProperty ClearCommandProperty =
 			DependencyProperty.Register(nameof(ClearCommand), typeof(ICommand), typeof(ShelfPane), new PropertyMetadata(null));
+		
+		public ICommand? ItemFocusedCommand
+		{
+			get => (ICommand?)GetValue(ItemFocusedCommandProperty);
+			set => SetValue(ItemFocusedCommandProperty, value);
+		}
+		public static readonly DependencyProperty ItemFocusedCommandProperty =
+			DependencyProperty.Register(nameof(ItemFocusedCommand), typeof(ICommand), typeof(ShelfPane), new PropertyMetadata(null));
+
 	}
 }

src/Files.App/Views/MainPage.xaml

@@ -273,6 +273,7 @@
 						Margin="4,0,0,8"
 						x:Load="{x:Bind ViewModel.ShowShelfPane, Mode=OneWay}"
 						ClearCommand="{x:Bind ViewModel.ShelfViewModel.ClearItemsCommand}"
+						ItemFocusedCommand="{x:Bind Commands.ClearSelection, Mode=OneWay}"
 						ItemsSource="{x:Bind ViewModel.ShelfViewModel.Items}" />
 				</Grid>
 			</controls:SidebarView.InnerContent>