From a0002ff97b8354104b4bf20bfe734021de697c6d Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Sun, 5 May 2024 02:15:29 +0200
Subject: [PATCH] fixed attachments layout and size and added progressbar

---
 Wino.Mail/Views/ComposePage.xaml       |  40 +++---
 Wino.Mail/Views/MailRenderingPage.xaml | 172 ++++++++++++++-----------
 2 files changed, 118 insertions(+), 94 deletions(-)

diff --git a/Wino.Mail/Views/ComposePage.xaml b/Wino.Mail/Views/ComposePage.xaml
index 9573fb21..ad5406e3 100644
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -54,11 +54,14 @@
         </DataTemplate>
 
         <!--  Attachment Template  -->
+        <!--  Margin -8 0 is used to remove the padding from the ListViewItem-->
         <DataTemplate x:Key="ComposerFileAttachmentTemplate" x:DataType="data:MailAttachmentViewModel">
             <Grid
-                Height="75"
+                Height="50"
                 Background="Transparent"
-                ColumnSpacing="3">
+                ColumnSpacing="3"
+                Margin="-8 0"
+                Padding="0,0,5,0">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="36" />
                     <ColumnDefinition Width="*" />
@@ -74,7 +77,7 @@
                 <!--  Name && Size  -->
                 <Grid
                     Grid.Column="1"
-                    MaxWidth="250"
+                    MaxWidth="200"
                     VerticalAlignment="Center">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
@@ -85,7 +88,7 @@
                         FontSize="13"
                         Text="{x:Bind FileName}"
                         MaxLines="2"
-                        TextTrimming="None" />
+                        TextTrimming="CharacterEllipsis" />
 
                     <TextBlock
                         Grid.Row="1"
@@ -98,7 +101,7 @@
 
                 <SymbolIcon
                     Grid.Column="2"
-                    Margin="6,0"
+                    Margin="0,0,0,0"
                     VerticalAlignment="Center"
                     Symbol="Cancel"
                     Foreground="{StaticResource DeleteBrush}" />
@@ -602,24 +605,25 @@
                 Text="{x:Bind ViewModel.Subject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
             <!--  Attachments  -->
-            <ListView
-                x:Name="AttachmentsListView"
-                Grid.Row="6"
-                Grid.ColumnSpan="2"
-                x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.IncludedAttachments.Count), Mode=OneWay}"
-                IsItemClickEnabled="True"
-                ItemTemplate="{StaticResource ComposerFileAttachmentTemplate}"
-                ItemsSource="{x:Bind ViewModel.IncludedAttachments, Mode=OneWay}"
-                ScrollViewer.VerticalScrollBarVisibility="Visible"
-                ScrollViewer.VerticalScrollMode="Enabled"
-                ItemClick="AttachmentClicked"
-                SelectionMode="None">
+            <ListView x:Name="AttachmentsListView"
+                  Grid.Row="6"
+                  Padding="5"
+                  Grid.ColumnSpan="2"
+                  x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.IncludedAttachments.Count), Mode=OneWay}"
+                  IsItemClickEnabled="True"
+                  ItemTemplate="{StaticResource ComposerFileAttachmentTemplate}"
+                  ItemsSource="{x:Bind ViewModel.IncludedAttachments, Mode=OneWay}"
+                  ItemClick="AttachmentClicked"
+                  SelectionMode="None">
                 <ListView.ItemsPanel>
                     <ItemsPanelTemplate>
-                        <ItemsStackPanel Orientation="Horizontal" />
+                        <controls1:WrapPanel Orientation="Horizontal" />
                     </ItemsPanelTemplate>
                 </ListView.ItemsPanel>
             </ListView>
+
+            <!--Attachments-->
+            
         </Grid>
 
         <Grid
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index 8cc57f92..0448d9c9 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -6,6 +6,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
+    xmlns:controls2="using:CommunityToolkit.WinUI.Controls"
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
     xmlns:selectors="using:Wino.Selectors"
     IsDarkEditor="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=TwoWay}"
@@ -59,75 +60,92 @@
             ReplyAll="{StaticResource CommandBarItemReplyAllTemplate}" />
 
         <!--  Attachment Template  -->
+        <!--  Margin -8 0 is used to remove the padding from the ListViewItem-->
         <DataTemplate x:Key="FileAttachmentTemplate" x:DataType="viewModelData:MailAttachmentViewModel">
-            <Grid
-                Height="75"
-                Background="Transparent"
-                ColumnSpacing="3">
-                <ToolTipService.ToolTip>
-                    <ToolTip Content="{x:Bind FileName}" />
-                </ToolTipService.ToolTip>
-                <Grid.ContextFlyout>
-                    <MenuFlyout Placement="Right">
-                        <MenuFlyoutItem
-                            Text="{x:Bind domain:Translator.Buttons_Open}"
-                            Command="{Binding ElementName=root, Path=ViewModel.OpenAttachmentCommand}"
-                            CommandParameter="{x:Bind}">
-                            <MenuFlyoutItem.Icon>
-                                <PathIcon Data="{StaticResource OpenFilePathIcon}" />
-                            </MenuFlyoutItem.Icon>
-                        </MenuFlyoutItem>
-                        <MenuFlyoutItem
-                            Text="{x:Bind domain:Translator.Buttons_Save}"
-                            Command="{Binding ElementName=root, Path=ViewModel.SaveAttachmentCommand}"
-                            CommandParameter="{x:Bind}">
-                            <MenuFlyoutItem.Icon>
-                                <PathIcon Data="{StaticResource SaveAttachmentPathIcon}" />
-                            </MenuFlyoutItem.Icon>
-                        </MenuFlyoutItem>
-                    </MenuFlyout>
-                </Grid.ContextFlyout>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="36" />
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="Auto" />
-                </Grid.ColumnDefinitions>
+            <Grid Height="51" RowSpacing="0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="50" />
+                    <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+                <Grid
+                    Grid.Row="0"
+                    Height="50"
+                    Background="Transparent"
+                    ColumnSpacing="3"
+                    Padding="0,0,5,0"
+                    Margin="-8 0">
+                    <ToolTipService.ToolTip>
+                        <ToolTip Content="{x:Bind FileName}" />
+                    </ToolTipService.ToolTip>
+                    <Grid.ContextFlyout>
+                        <MenuFlyout Placement="Right">
+                            <MenuFlyoutItem
+                                Text="{x:Bind domain:Translator.Buttons_Open}"
+                                Command="{Binding ElementName=root, Path=ViewModel.OpenAttachmentCommand}"
+                                CommandParameter="{x:Bind}">
+                                <MenuFlyoutItem.Icon>
+                                    <PathIcon Data="{StaticResource OpenFilePathIcon}" />
+                                </MenuFlyoutItem.Icon>
+                            </MenuFlyoutItem>
+                            <MenuFlyoutItem
+                                Text="{x:Bind domain:Translator.Buttons_Save}"
+                                Command="{Binding ElementName=root, Path=ViewModel.SaveAttachmentCommand}"
+                                CommandParameter="{x:Bind}">
+                                <MenuFlyoutItem.Icon>
+                                    <PathIcon Data="{StaticResource SaveAttachmentPathIcon}" />
+                                </MenuFlyoutItem.Icon>
+                            </MenuFlyoutItem>
+                        </MenuFlyout>
+                    </Grid.ContextFlyout>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="36" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
 
-                <!--  Icon  -->
-                <ContentControl
-                    VerticalAlignment="Center"
-                    Content="{x:Bind AttachmentType}"
-                    ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />
+                    <!--  Icon  -->
+                    <ContentControl
+                        VerticalAlignment="Center"
+                        Content="{x:Bind AttachmentType}"
+                        ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />
 
-                <!--  Name && Size  -->
-                <Grid Grid.Column="1" VerticalAlignment="Center">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
-                    </Grid.RowDefinitions>
+                    <!--  Name && Size  -->
+                    <Grid Grid.Column="1"
+                          VerticalAlignment="Center"
+                          Padding="0,0,5,0"
+                          MaxWidth="250">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
 
-                    <TextBlock
-                        FontSize="13"
-                        Text="{x:Bind FileName}"
-                        MaxLines="2"
-                        TextWrapping="Wrap"
-                        TextTrimming="CharacterEllipsis" />
+                        <TextBlock
+                            FontSize="13"
+                            Text="{x:Bind FileName}"
+                            MaxLines="1"
+                            TextWrapping="Wrap"
+                            TextTrimming="CharacterEllipsis" />
 
-                    <TextBlock
-                        Grid.Row="1"
-                        Margin="0,2,0,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Bottom"
-                        FontSize="11"
-                        Foreground="Gray"
-                        Text="{x:Bind ReadableSize}" />
+                        <TextBlock
+                            Grid.Row="1"
+                            Margin="0,2,0,0"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Bottom"
+                            FontSize="11"
+                            Foreground="Gray"
+                            Text="{x:Bind ReadableSize}" />
+                    </Grid>
                 </Grid>
-
-                <ProgressRing
-                    Grid.Column="2"
-                    VerticalAlignment="Center"
-                    IsActive="{x:Bind IsBusy, Mode=OneWay}" />
+                <muxc:ProgressBar
+                    Grid.Row="1"
+                    VerticalAlignment="Top"
+                    HorizontalAlignment="Stretch"
+                    Visibility="{x:Bind IsBusy, Mode=OneWay}"
+                    IsIndeterminate="{x:Bind IsBusy, Mode=OneWay}"
+                    ShowPaused="False"
+                    Margin="0, -5, 0,0"
+                    ShowError="False"/>
             </Grid>
+
         </DataTemplate>
 
     </Page.Resources>
@@ -292,20 +310,22 @@
             </Grid>
         </Grid>
 
-        <GridView
-            Grid.Row="2"
-            ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
-            x:Name="AttachmentsListView"
-            x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.Attachments.Count), Mode=OneWay}"
-            IsItemClickEnabled="True"
-            MaxHeight="200"
-            Padding="8,0,0,0"
-            ItemTemplate="{StaticResource FileAttachmentTemplate}"
-            ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
-            ScrollViewer.VerticalScrollBarVisibility="Visible"
-            ScrollViewer.VerticalScrollMode="Enabled"
-            ItemClick="AttachmentClicked"
-            SelectionMode="None" />
+        <!--  Attachments  -->
+        <ListView x:Name="AttachmentsListView"
+                  Grid.Row="2"
+                  x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.Attachments.Count), Mode=OneWay}"
+                  IsItemClickEnabled="True"
+                  ItemTemplate="{StaticResource FileAttachmentTemplate}"
+                  ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
+                  ItemClick="AttachmentClicked"
+                  SelectionMode="None"
+                  Height="53">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <controls2:WrapPanel Orientation="Horizontal"/>
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+        </ListView>
 
         <muxc:ProgressBar
             x:Name="DownloadingProgressBar"