Feature: Add menu flyout to widget header (#11186)

files-community · Feb 6, 2023 · 916eadf · 916eadf
1 parent b26417f
commit 916eadf
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 66 deletions.
diff --git a/src/Files.App/Strings/en-US/Resources.resw b/src/Files.App/Strings/en-US/Resources.resw
@@ -1464,7 +1464,7 @@
   <data name="DateCreated" xml:space="preserve">
     <value>Date created</value>
   </data>
-  <data name="DrivesWidgetMoreOptionsButton.ToolTipService.ToolTip" xml:space="preserve">
+  <data name="MoreOptions" xml:space="preserve">
     <value>More options...</value>
   </data>
   <data name="DrivesWidgetOptionsFlyoutMapNetDriveMenuItem.Text" xml:space="preserve">
@@ -1476,9 +1476,6 @@
   <data name="BundlesWidgetMoreOptionsButton.AutomationProperties.Name" xml:space="preserve">
     <value>More bundles options</value>
   </data>
-  <data name="DrivesWidgetMoreOptionsButton.AutomationProperties.Name" xml:space="preserve">
-    <value>More drives options</value>
-  </data>
   <data name="SidebarFavorites" xml:space="preserve">
     <value>Favorites</value>
   </data>

diff --git a/src/Files.App/UserControls/Widgets/BundlesWidget.xaml.cs b/src/Files.App/UserControls/Widgets/BundlesWidget.xaml.cs
@@ -28,6 +28,10 @@ public BundlesViewModel ViewModel
 		public string WidgetHeader => "Bundles".GetLocalizedResource();
 
 		public bool IsWidgetSettingEnabled => UserSettingsService.PreferencesSettingsService.ShowBundlesWidget;
+
+		public bool ShowMenuFlyout => false;
+
+		public MenuFlyoutItem? MenuFlyoutItem => null;
 
 		public BundlesWidget()
 		{

diff --git a/src/Files.App/UserControls/Widgets/DrivesWidget.xaml b/src/Files.App/UserControls/Widgets/DrivesWidget.xaml
@@ -9,45 +9,6 @@
 	Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
 	mc:Ignorable="d">
 	<Grid>
-		<Grid>
-			<Grid.ColumnDefinitions>
-				<ColumnDefinition />
-				<ColumnDefinition Width="Auto" />
-			</Grid.ColumnDefinitions>
-
-			<!--  Map Drive button  -->
-			<Button
-				Grid.Column="1"
-				Width="36"
-				Height="32"
-				Padding="0"
-				HorizontalAlignment="Right"
-				VerticalAlignment="Top"
-				HorizontalContentAlignment="Center"
-				VerticalContentAlignment="Center"
-				AutomationProperties.Name="{helpers:ResourceString Name=DrivesWidgetMoreOptionsButton/AutomationProperties/Name}"
-				Background="Transparent"
-				BorderBrush="Transparent"
-				ToolTipService.ToolTip="{helpers:ResourceString Name=DrivesWidgetMoreOptionsButton/ToolTipService/ToolTip}">
-
-				<FontIcon
-					HorizontalAlignment="Center"
-					VerticalAlignment="Center"
-					FontSize="14"
-					Glyph="&#xe712;" />
-
-				<Button.Flyout>
-					<MenuFlyout>
-						<MenuFlyoutItem Click="MapNetworkDrive_Click" Text="{helpers:ResourceString Name=DrivesWidgetOptionsFlyoutMapNetDriveMenuItem/Text}">
-							<MenuFlyoutItem.Icon>
-								<FontIcon Glyph="&#xE710;" />
-							</MenuFlyoutItem.Icon>
-						</MenuFlyoutItem>
-					</MenuFlyout>
-				</Button.Flyout>
-			</Button>
-		</Grid>
-
 		<ItemsRepeater
 			x:Name="CardsList"
 			HorizontalAlignment="Stretch"

diff --git a/src/Files.App/UserControls/Widgets/DrivesWidget.xaml.cs b/src/Files.App/UserControls/Widgets/DrivesWidget.xaml.cs
@@ -1,5 +1,6 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.DependencyInjection;
+using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.WinUI;
 using Files.App.DataModels.NavigationControlItems;
 using Files.App.Extensions;
@@ -102,15 +103,32 @@ public IShellPage AppInstance
 
 		public bool IsWidgetSettingEnabled => userSettingsService.PreferencesSettingsService.ShowDrivesWidget;
 
+		public bool ShowMenuFlyout => true;
+
+		public MenuFlyoutItem MenuFlyoutItem => new MenuFlyoutItem()
+		{
+			Icon = new FontIcon() { Glyph = "\uE710" },
+			Text = "DrivesWidgetOptionsFlyoutMapNetDriveMenuItem/Text".GetLocalizedResource(),
+			Command = MapNetworkDriveCommand
+		};
+
+		public AsyncRelayCommand MapNetworkDriveCommand { get; }
+
 		public DrivesWidget()
 		{
 			InitializeComponent();
 
 			Manager_DataChanged(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
 
 			App.DrivesManager.DataChanged += Manager_DataChanged;
+
+			MapNetworkDriveCommand = new AsyncRelayCommand(DoNetworkMapDrive);
 		}
 
+		private async Task DoNetworkMapDrive()
+		{
+			await NetworkDrivesManager.OpenMapNetworkDriveDialogAsync(NativeWinApiHelper.CoreWindowHandle.ToInt64());
+		}
 		private async void Manager_DataChanged(object? sender, NotifyCollectionChangedEventArgs e)
 		{
 			await DispatcherQueue.EnqueueAsync(async () =>
@@ -258,9 +276,6 @@ private void MenuFlyout_Opening(object sender, object e)
 			unpinFromFavoritesItem.Visibility = (unpinFromFavoritesItem.DataContext as DriveItem).IsPinned ? Visibility.Visible : Visibility.Collapsed;
 		}
 
-		private async void MapNetworkDrive_Click(object sender, RoutedEventArgs e)
-			=> await NetworkDrivesManager.OpenMapNetworkDriveDialogAsync(NativeWinApiHelper.CoreWindowHandle.ToInt64());
-
 		private void DisconnectNetworkDrive_Click(object sender, RoutedEventArgs e)
 		{
 			var item = ((MenuFlyoutItem)sender).DataContext as DriveItem;

diff --git a/src/Files.App/UserControls/Widgets/FileTagsWidget.xaml.cs b/src/Files.App/UserControls/Widgets/FileTagsWidget.xaml.cs
@@ -32,6 +32,10 @@ public FileTagsWidgetViewModel ViewModel
 
 		public bool IsWidgetSettingEnabled => UserSettingsService.PreferencesSettingsService.ShowFileTagsWidget;
 
+		public bool ShowMenuFlyout => false;
+
+		public MenuFlyoutItem? MenuFlyoutItem => null;
+
 		public FileTagsWidget()
 		{
 			InitializeComponent();

diff --git a/src/Files.App/UserControls/Widgets/QuickAccessWidget.xaml.cs b/src/Files.App/UserControls/Widgets/QuickAccessWidget.xaml.cs
@@ -136,6 +136,10 @@ public QuickAccessWidget()
 
 		public bool IsWidgetSettingEnabled => UserSettingsService.PreferencesSettingsService.ShowQuickAccessWidget;
 
+		public bool ShowMenuFlyout => false;
+
+		public MenuFlyoutItem? MenuFlyoutItem => null;
+
 		public ICommand QuickAccessCardCommand { get; }
 
 		public ICommand ShowCreateNewLibraryDialogCommand { get; } = new RelayCommand(LibraryManager.ShowCreateNewLibraryDialog);

diff --git a/src/Files.App/UserControls/Widgets/RecentFilesWidget.xaml.cs b/src/Files.App/UserControls/Widgets/RecentFilesWidget.xaml.cs
@@ -46,6 +46,10 @@ public sealed partial class RecentFilesWidget : UserControl, IWidgetItemModel, I
 
 		public bool IsWidgetSettingEnabled => UserSettingsService.PreferencesSettingsService.ShowRecentFilesWidget;
 
+		public bool ShowMenuFlyout => false;
+
+		public MenuFlyoutItem? MenuFlyoutItem => null;
+
 		private Visibility emptyRecentsTextVisibility = Visibility.Collapsed;
 		public Visibility EmptyRecentsTextVisibility
 		{

diff --git a/src/Files.App/UserControls/Widgets/WidgetsListControl.xaml b/src/Files.App/UserControls/Widgets/WidgetsListControl.xaml
@@ -4,7 +4,7 @@
 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 	xmlns:controls="using:Microsoft.UI.Xaml.Controls"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-	xmlns:local="using:Files.App.UserControls.Widgets"
+	xmlns:helpers="using:Files.App.Helpers"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	xmlns:vm="using:Files.App.ViewModels.Widgets"
 	d:DesignHeight="300"
@@ -182,27 +182,60 @@
 				</ListView.ItemContainerStyle>
 				<ListView.ItemTemplate>
 					<DataTemplate x:DataType="vm:WidgetsListControlItemViewModel">
-						<controls:Expander
-							Padding="16,0,16,0"
-							HorizontalAlignment="Stretch"
-							HorizontalContentAlignment="Stretch"
-							AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}"
-							Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
-							IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
-							Style="{StaticResource Local.WidgetExpanderStyle}">
-							<controls:Expander.Resources>
-								<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
-								<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
-								<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
-								<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
-								<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
-								<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
-							</controls:Expander.Resources>
-							<ContentControl
+						<Grid>
+							<controls:Expander
+								Padding="16,0,16,0"
 								HorizontalAlignment="Stretch"
 								HorizontalContentAlignment="Stretch"
-								Content="{x:Bind WidgetControl, Mode=OneWay}" />
-						</controls:Expander>
+								AutomationProperties.Name="{x:Bind WidgetAutomationProperties, Mode=OneWay}"
+								Header="{x:Bind WidgetItemModel.WidgetHeader, Mode=OneWay}"
+								IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
+								Style="{StaticResource Local.WidgetExpanderStyle}">
+								<controls:Expander.Resources>
+									<SolidColorBrush x:Key="ExpanderHeaderBackground" Color="Transparent" />
+									<SolidColorBrush x:Key="ExpanderHeaderBorderBrush" Color="Transparent" />
+									<SolidColorBrush x:Key="ExpanderHeaderBorderPointerOverBrush" Color="Transparent" />
+									<SolidColorBrush x:Key="ExpanderHeaderBorderPressedBrush" Color="Transparent" />
+									<SolidColorBrush x:Key="ExpanderContentBackground" Color="Transparent" />
+									<SolidColorBrush x:Key="ExpanderContentBorderBrush" Color="Transparent" />
+								</controls:Expander.Resources>
+								<ContentControl
+									HorizontalAlignment="Stretch"
+									HorizontalContentAlignment="Stretch"
+									Content="{x:Bind WidgetControl, Mode=OneWay}" />
+							</controls:Expander>
+
+							<!--  Menu Flyout  -->
+							<Button
+								x:Name="MenuFlyout"
+								Width="36"
+								Height="32"
+								Margin="0,8,50,0"
+								Padding="0"
+								HorizontalAlignment="Right"
+								VerticalAlignment="Top"
+								x:Load="{x:Bind ShowMenuFlyout, Mode=OneWay}"
+								AutomationProperties.Name="{helpers:ResourceString Name=MoreOptions}"
+								Background="Transparent"
+								BorderBrush="Transparent"
+								ToolTipService.ToolTip="{helpers:ResourceString Name=MoreOptions}">
+								<FontIcon
+									HorizontalAlignment="Center"
+									VerticalAlignment="Center"
+									FontSize="14"
+									Glyph="&#xe712;" />
+
+								<Button.Flyout>
+									<MenuFlyout>
+										<MenuFlyoutItem
+											x:Name="FlyoutItem"
+											Command="{x:Bind MenuFlyoutItem.Command}"
+											Icon="{x:Bind MenuFlyoutItem.Icon}"
+											Text="{x:Bind MenuFlyoutItem.Text}" />
+									</MenuFlyout>
+								</Button.Flyout>
+							</Button>
+						</Grid>
 					</DataTemplate>
 				</ListView.ItemTemplate>
 			</ListView>

diff --git a/src/Files.App/ViewModels/Widgets/IWidgetItemModel.cs b/src/Files.App/ViewModels/Widgets/IWidgetItemModel.cs
@@ -1,3 +1,4 @@
+using Microsoft.UI.Xaml.Controls;
 using System;
 using System.Threading.Tasks;
 
@@ -13,6 +14,10 @@ public interface IWidgetItemModel : IDisposable
 
 		bool IsWidgetSettingEnabled { get; }
 
+		bool ShowMenuFlyout { get; }
+
+		MenuFlyoutItem MenuFlyoutItem { get; }
+
 		Task RefreshWidget();
 	}
 }
diff --git a/src/Files.App/ViewModels/Widgets/WidgetsListControlItemViewModel.cs b/src/Files.App/ViewModels/Widgets/WidgetsListControlItemViewModel.cs
@@ -1,4 +1,5 @@
 using CommunityToolkit.Mvvm.ComponentModel;
+using Microsoft.UI.Xaml.Controls;
 using System;
 
 namespace Files.App.ViewModels.Widgets
@@ -43,6 +44,16 @@ public string WidgetAutomationProperties
 			get => WidgetItemModel.AutomationProperties;
 		}
 
+		public bool ShowMenuFlyout
+		{
+			get => WidgetItemModel.ShowMenuFlyout;
+		}
+
+		public MenuFlyoutItem MenuFlyoutItem
+		{
+			get => WidgetItemModel.MenuFlyoutItem;
+		}
+
 		public void Dispose()
 		{
 			(WidgetControl as IDisposable)?.Dispose();