Merge pull request #191 from Tiktack/features/dropzone

Added attachments drag & drop support

Wino.Core.Domain/Translations/en_US/resources.json

@@ -46,6 +46,8 @@
     "ClipboardTextCopied_Title": "Copied",
     "ClipboardTextCopyFailed_Message": "Failed to copy {0} to clipboard.",
     "ComposerToPlaceholder": "click enter to input addresses",
+    "ComposerAttachmentsDropZone_Message": "Drop your files here",
+    "ComposerAttachmentsDragDropAttach_Message": "Attach",
     "CustomThemeBuilder_AccentColorDescription": "Set custom accent color if you wish. Not selecting a color will use your Windows accent color.",
     "CustomThemeBuilder_AccentColorTitle": "Accent color",
     "CustomThemeBuilder_PickColor": "Pick",

Wino.Core.Domain/Translator.Designer.cs

@@ -253,6 +253,16 @@ namespace Wino.Core.Domain
 		/// </summary>
 		public static string ComposerToPlaceholder => Resources.GetTranslatedString(@"ComposerToPlaceholder");	
 	
+        /// <summary>
+		/// Drop your files here
+		/// </summary>
+		public static string ComposerAttachmentsDropZone_Message => Resources.GetTranslatedString(@"ComposerAttachmentsDropZone_Message");	
+	
+        /// <summary>
+		/// Attach
+		/// </summary>
+		public static string ComposerAttachmentsDragDropAttach_Message => Resources.GetTranslatedString(@"ComposerAttachmentsDragDropAttach_Message");	
+	
         /// <summary>
 		/// Set custom accent color if you wish. Not selecting a color will use your Windows accent color.
 		/// </summary>

Wino.Mail.ViewModels/ComposePageViewModel.cs

@@ -64,6 +64,12 @@ namespace Wino.Mail.ViewModels
         [ObservableProperty]
         private MailAccount composingAccount;
 
+        [ObservableProperty]
+        private bool isDraggingOverComposerGrid;
+
+        [ObservableProperty]
+        private bool isDraggingOverDropZone;
+
         public ObservableCollection<MailAttachmentViewModel> IncludedAttachments { get; set; } = new ObservableCollection<MailAttachmentViewModel>();
 
         public ObservableCollection<MailAccount> Accounts { get; set; } = new ObservableCollection<MailAccount>();

Wino.Mail/Views/ComposePage.xaml

@@ -107,7 +107,10 @@
         </DataTemplate>
     </Page.Resources>
 
-    <Grid Background="{ThemeResource AppBarBackgroundColor}">
+    <Grid Background="{ThemeResource AppBarBackgroundColor}"
+          AllowDrop="True"
+          DragOver="OnComposeGridDragOver"
+          DragLeave="OnComposeGridDragLeave">
         <Grid.Resources>
             <SolidColorBrush x:Key="AutoSuggestBoxBorderThemeBrush">Transparent</SolidColorBrush>
         </Grid.Resources>
@@ -620,9 +623,36 @@
                     </ItemsPanelTemplate>
                 </ListView.ItemsPanel>
             </ListView>
+        </Grid>
 
-            <!--  Attachments  -->
+        <!--  Dropzone  -->
-
+        <Grid
+            Grid.Row="0"
+            Grid.RowSpan="3"
+            Visibility="{x:Bind ViewModel.IsDraggingOverComposerGrid, Mode=OneWay}"
+            Drop="OnFileDropGridFileDropped"
+            DragOver="OnFileDropGridDragOver"
+            DragLeave="OnFileDropGridDragLeave"
+            AllowDrop="True">
+            <Grid  Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}" CornerRadius="9" Margin="0,7,5,0">
+                <Rectangle
+                    x:Name="DropZoneBorder"
+                    RadiusX="9"
+                    RadiusY="9"
+                    Fill="Transparent"
+                    Stroke="{ThemeResource TextFillColorPrimaryBrush}"
+                    Opacity="0.5"
+                    StrokeDashArray="3,4"
+                    StrokeThickness="2"/>
+                <TextBlock
+                    x:Name="DropZoneText"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Opacity="0.5"
+                    FontSize="20"
+                    FontWeight="SemiBold"
+                    Text="{x:Bind domain:Translator.ComposerAttachmentsDropZone_Message}"/>
+            </Grid>
         </Grid>
 
         <Grid
@@ -654,6 +684,18 @@
 
                 <VisualState x:Name="LightMode" />
             </VisualStateGroup>
+            <VisualStateGroup x:Name="DropZoneState">
+                <VisualState x:Name="Hovered">
+                    <VisualState.StateTriggers>
+                        <StateTrigger IsActive="{x:Bind ViewModel.IsDraggingOverDropZone, Mode=OneWay}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="DropZoneText.Opacity" Value="1" />
+                        <Setter Target="DropZoneBorder.Opacity" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="NotHovered" />
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </Grid>
 </abstract:ComposePageAbstract>

Wino.Mail/Views/ComposePage.xaml.cs

@@ -13,13 +13,16 @@ using Microsoft.UI.Xaml.Controls;
 using Microsoft.Web.WebView2.Core;
 using MimeKit;
 using Newtonsoft.Json;
+using Windows.ApplicationModel.DataTransfer;
 using Windows.Foundation;
+using Windows.Storage;
 using Windows.Storage.Pickers;
 using Windows.UI.ViewManagement.Core;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Media.Animation;
 using Windows.UI.Xaml.Navigation;
+using Wino.Core.Domain;
 using Wino.Core.Domain.Entities;
 using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Interfaces;
@@ -105,20 +108,61 @@ namespace Wino.Views
             picker.FileTypeFilter.Add("*");
             var files = await picker.PickMultipleFilesAsync();
 
-            if (files == null) return;
+            await AttachFiles(files);
+        }
+
+        private void OnComposeGridDragOver(object sender, DragEventArgs e)
+        {
+            ViewModel.IsDraggingOverComposerGrid = true;
+        }
+
+        private void OnComposeGridDragLeave(object sender, DragEventArgs e)
+        {
+            ViewModel.IsDraggingOverComposerGrid = false;
+        }
+
+        private void OnFileDropGridDragOver(object sender, DragEventArgs e)
+        {
+            ViewModel.IsDraggingOverDropZone = true;
+
+            e.AcceptedOperation = DataPackageOperation.Copy;
+            e.DragUIOverride.Caption = Translator.ComposerAttachmentsDragDropAttach_Message;
+            e.DragUIOverride.IsCaptionVisible = true;
+            e.DragUIOverride.IsGlyphVisible = true;
+            e.DragUIOverride.IsContentVisible = true;
+        }
+
+        private void OnFileDropGridDragLeave(object sender, DragEventArgs e)
+        {
+            ViewModel.IsDraggingOverDropZone = false;
+        }
+
+        private async void OnFileDropGridFileDropped(object sender, DragEventArgs e)
+        {
+            if (e.DataView.Contains(StandardDataFormats.StorageItems))
+            {
+                var storageItems = await e.DataView.GetStorageItemsAsync();
+                var files = storageItems.OfType<StorageFile>();
+
+                await AttachFiles(files);
+            }
+
+            ViewModel.IsDraggingOverComposerGrid = false;
+            ViewModel.IsDraggingOverDropZone = false;
+        }
+
+        private async Task AttachFiles(IEnumerable<StorageFile> files)
+        {
+            if (files?.Any() != true) return;
 
             // Convert files to MailAttachmentViewModel.
-
+            foreach (var file in files)
-            if (files.Any())
             {
-                foreach (var file in files)
+                if (!ViewModel.IncludedAttachments.Any(a => a.FileName == file.Path))
                 {
-                    if (!ViewModel.IncludedAttachments.Any(a => a.FileName == file.Path))
+                    var attachmentViewModel = await file.ToAttachmentViewModelAsync();
-                    {
-                        var attachmentViewModel = await file.ToAttachmentViewModelAsync();
 
-                        ViewModel.IncludedAttachments.Add(attachmentViewModel);
+                    ViewModel.IncludedAttachments.Add(attachmentViewModel);
-                    }
                 }
             }
         }