From e628a98cb81e9504a19696613f5ed54214fe5262 Mon Sep 17 00:00:00 2001
From: Tiktack <aleh.khantsevich@gmail.com>
Date: Thu, 19 Sep 2024 00:52:27 +0200
Subject: [PATCH] Fixed visual bug with margin in narrow state (#383)

* Reworked paddings/margins for mail list

* Fix composer page

* Moved layput changes from code behind to visual states
---
 Wino.Mail/App.xaml                            |  1 -
 Wino.Mail/AppShell.xaml                       |  7 +--
 Wino.Mail/AppShell.xaml.cs                    | 12 ++++
 Wino.Mail/Views/ComposePage.xaml              |  1 -
 Wino.Mail/Views/MailListPage.xaml             | 42 ++++++++++++-
 Wino.Mail/Views/MailListPage.xaml.cs          | 62 +++----------------
 Wino.Mail/Views/MailRenderingPage.xaml        |  5 +-
 Wino.Mail/Views/NewAccountManagementPage.xaml |  3 +-
 8 files changed, 65 insertions(+), 68 deletions(-)

diff --git a/Wino.Mail/App.xaml b/Wino.Mail/App.xaml
index c448d889..fb7ec92c 100644
--- a/Wino.Mail/App.xaml
+++ b/Wino.Mail/App.xaml
@@ -47,7 +47,6 @@
 
                     <!--  Border style for each page's root border for separation of zones.  -->
                     <Style x:Key="PageRootBorderStyle" TargetType="Border">
-                        <Setter Property="Margin" Value="7,0,7,7" />
                         <Setter Property="Background" Value="{ThemeResource WinoContentZoneBackgroud}" />
                         <Setter Property="BorderBrush" Value="{StaticResource CardStrokeColorDefaultBrush}" />
                         <Setter Property="CornerRadius" Value="7" />
diff --git a/Wino.Mail/AppShell.xaml b/Wino.Mail/AppShell.xaml
index 896bc658..5bf79342 100644
--- a/Wino.Mail/AppShell.xaml
+++ b/Wino.Mail/AppShell.xaml
@@ -432,6 +432,7 @@
             HorizontalContentAlignment="Stretch"
             VerticalContentAlignment="Stretch"
             AlwaysShowHeader="True"
+            DisplayModeChanged="NavigationViewDisplayModeChanged"
             FooterMenuItemsSource="{x:Bind ViewModel.FooterItems, Mode=OneWay}"
             IsBackButtonVisible="Collapsed"
             IsPaneOpen="{x:Bind ViewModel.PreferencesService.IsNavigationPaneOpened, Mode=TwoWay}"
@@ -463,7 +464,6 @@
             </muxc:NavigationView.PaneFooter>-->
             <Grid ColumnSpacing="0">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
 
@@ -482,8 +482,7 @@
                 <!--  Main Content  -->
                 <Frame
                     x:Name="ShellFrame"
-                    Grid.Column="1"
-                    Margin="-8,0,0,0"
+                    Padding="0,0,7,7"
                     IsNavigationStackEnabled="False"
                     Navigated="ShellFrameContentNavigated">
                     <Frame.ContentTransitions>
@@ -496,7 +495,6 @@
                 <!--  InfoBar  -->
                 <controls:WinoInfoBar
                     x:Name="ShellInfoBar"
-                    Grid.Column="1"
                     MaxWidth="700"
                     Margin="0,60,25,0"
                     HorizontalAlignment="Right"
@@ -507,7 +505,6 @@
                 <!--  Teaching Tip  -->
                 <muxc:TeachingTip
                     x:Name="ShellTip"
-                    Grid.Column="1"
                     IsOpen="False"
                     PreferredPlacement="Bottom"
                     Target="{x:Bind ShellInfoBar}" />
diff --git a/Wino.Mail/AppShell.xaml.cs b/Wino.Mail/AppShell.xaml.cs
index 806d7d6c..6b1e6321 100644
--- a/Wino.Mail/AppShell.xaml.cs
+++ b/Wino.Mail/AppShell.xaml.cs
@@ -315,5 +315,17 @@ namespace Wino.Views
                 ShellInfoBar.IsOpen = true;
             });
         }
+
+        private void NavigationViewDisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
+        {
+            if (args.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
+            {
+                ShellFrame.Margin = new Thickness(7, 0, 0, 0);
+            }
+            else
+            {
+                ShellFrame.Margin = new Thickness(0);
+            }
+        }
     }
 }
diff --git a/Wino.Mail/Views/ComposePage.xaml b/Wino.Mail/Views/ComposePage.xaml
index 88c57b22..7e6bda7f 100644
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -122,7 +122,6 @@
     </Page.Resources>
 
     <Grid
-        Padding="7,0"
         AllowDrop="True"
         DragLeave="OnComposeGridDragLeave"
         DragOver="OnComposeGridDragOver"
diff --git a/Wino.Mail/Views/MailListPage.xaml b/Wino.Mail/Views/MailListPage.xaml
index f5c6df82..2b527a5d 100644
--- a/Wino.Mail/Views/MailListPage.xaml
+++ b/Wino.Mail/Views/MailListPage.xaml
@@ -227,7 +227,7 @@
         </Grid>
     </wino:BasePage.ShellContent>
 
-    <Grid x:Name="RootGrid" Padding="0,0,0,7">
+    <Grid x:Name="RootGrid">
         <Grid.ColumnDefinitions>
             <ColumnDefinition x:Name="MailListColumn" Width="{x:Bind ViewModel.MailListLength, Mode=OneWay, Converter={StaticResource GridLengthConverter}}" />
             <ColumnDefinition x:Name="RendererColumn" Width="*" />
@@ -291,7 +291,7 @@
                         Unchecked="SelectAllCheckboxUnchecked"
                         Visibility="{x:Bind helpers:XamlHelpers.IsSelectionModeMultiple(MailListView.SelectionMode), Mode=OneWay}" />
 
-                    
+
                     <!--  Folders  -->
                     <toolkit:Segmented
                         Grid.Row="1"
@@ -518,7 +518,10 @@
             Minimum="270"
             Opacity="0" />
 
-        <Grid x:Name="RenderingGrid" Grid.Column="1">
+        <Grid
+            x:Name="RenderingGrid"
+            Grid.Column="1"
+            Margin="7,0,0,0">
             <!--  Mail Rendering Frame  -->
             <Frame x:Name="RenderingFrame" IsNavigationStackEnabled="False" />
 
@@ -539,5 +542,38 @@
                     Text="{x:Bind ViewModel.SelectedMessageText, Mode=OneWay}" />
             </StackPanel>
         </Grid>
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutStates">
+                <VisualState x:Name="BothPanelsNoMailSelected">
+                    <VisualState.Setters>
+                        <Setter Target="RenderingFrame.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="BothPanelsMailSelected">
+                    <VisualState.Setters>
+                        <Setter Target="NoMailSelectedPanel.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="NarrowMailList">
+                    <VisualState.Setters>
+                        <Setter Target="MailListContainer.(Grid.ColumnSpan)" Value="2" />
+                        <Setter Target="MailListSizer.Visibility" Value="Collapsed" />
+                        <Setter Target="RenderingGrid.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="NarrowRenderer">
+                    <VisualState.Setters>
+                        <Setter Target="RenderingGrid.(Grid.Column)" Value="0" />
+                        <Setter Target="RenderingGrid.(Grid.ColumnSpan)" Value="2" />
+                        <Setter Target="RenderingGrid.Margin" Value="0" />
+                        <Setter Target="RenderingGrid.Visibility" Value="Visible" />
+                        <Setter Target="NoMailSelectedPanel.Visibility" Value="Collapsed" />
+                        <Setter Target="MailListSizer.Visibility" Value="Collapsed" />
+                        <Setter Target="MailListContainer.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </abstract:MailListPageAbstract>
diff --git a/Wino.Mail/Views/MailListPage.xaml.cs b/Wino.Mail/Views/MailListPage.xaml.cs
index 740d4d32..406c7ba4 100644
--- a/Wino.Mail/Views/MailListPage.xaml.cs
+++ b/Wino.Mail/Views/MailListPage.xaml.cs
@@ -493,71 +493,29 @@ namespace Wino.Views
 
         private void UpdateAdaptiveness()
         {
-            bool shouldDisplayNoMessagePanel, shouldDisplayMailingList, shouldDisplayRenderingFrame;
-
             bool isMultiSelectionEnabled = ViewModel.IsMultiSelectionModeEnabled || KeyPressService.IsCtrlKeyPressed();
 
-            // This is the smallest state UI can get.
-            // Either mailing list or rendering grid is visible.
             if (StatePersistenceService.IsReaderNarrowed)
-            {
-                // Start visibility checks by no message panel.
-                shouldDisplayMailingList = isMultiSelectionEnabled ? true : (!ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections);
-                shouldDisplayNoMessagePanel = shouldDisplayMailingList ? false : !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
-                shouldDisplayRenderingFrame = shouldDisplayMailingList ? false : !shouldDisplayNoMessagePanel;
-            }
-            else
-            {
-                shouldDisplayMailingList = true;
-                shouldDisplayNoMessagePanel = !ViewModel.HasSelectedItems || ViewModel.HasMultipleItemSelections;
-                shouldDisplayRenderingFrame = !shouldDisplayNoMessagePanel;
-            }
-
-            MailListContainer.Visibility = shouldDisplayMailingList ? Visibility.Visible : Visibility.Collapsed;
-            RenderingFrame.Visibility = shouldDisplayRenderingFrame ? Visibility.Visible : Visibility.Collapsed;
-            NoMailSelectedPanel.Visibility = shouldDisplayNoMessagePanel ? Visibility.Visible : Visibility.Collapsed;
-
-            if (StatePersistenceService.IsReaderNarrowed == true)
             {
                 if (ViewModel.HasSingleItemSelection && !isMultiSelectionEnabled)
                 {
-                    MailListColumn.Width = new GridLength(0);
-                    RendererColumn.Width = new GridLength(1, GridUnitType.Star);
-
-                    Grid.SetColumn(MailListContainer, 0);
-                    Grid.SetColumnSpan(RenderingGrid, 2);
-                    MailListContainer.Visibility = Visibility.Collapsed;
-                    RenderingGrid.Visibility = Visibility.Visible;
+                    VisualStateManager.GoToState(this, "NarrowRenderer", true);
                 }
                 else
                 {
-                    MailListColumn.Width = new GridLength(1, GridUnitType.Star);
-                    RendererColumn.Width = new GridLength(0);
-
-                    Grid.SetColumnSpan(MailListContainer, 2);
-                    MailListContainer.Margin = new Thickness(7, 0, 7, 0);
-                    MailListContainer.Visibility = Visibility.Visible;
-                    RenderingGrid.Visibility = Visibility.Collapsed;
-                    SearchBar.Margin = new Thickness(8, 0, -2, 0);
-                    MailListSizer.Visibility = Visibility.Collapsed;
+                    VisualStateManager.GoToState(this, "NarrowMailList", true);
                 }
             }
             else
             {
-                MailListColumn.Width = new GridLength(StatePersistenceService.MailListPaneLength);
-                RendererColumn.Width = new GridLength(1, GridUnitType.Star);
-
-                MailListContainer.Margin = new Thickness(0, 0, 0, 0);
-
-                Grid.SetColumn(MailListContainer, 0);
-                Grid.SetColumn(RenderingGrid, 1);
-                Grid.SetColumnSpan(MailListContainer, 1);
-                Grid.SetColumnSpan(RenderingGrid, 1);
-
-                MailListContainer.Visibility = Visibility.Visible;
-                RenderingGrid.Visibility = Visibility.Visible;
-                SearchBar.Margin = new Thickness(2, 0, -2, 0);
-                MailListSizer.Visibility = Visibility.Visible;
+                if (ViewModel.HasSingleItemSelection && !isMultiSelectionEnabled)
+                {
+                    VisualStateManager.GoToState(this, "BothPanelsMailSelected", true);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, "BothPanelsNoMailSelected", true);
+                }
             }
         }
     }
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index d7f06195..5d3002d4 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -117,10 +117,7 @@
     </Page.Resources>
 
     <!--  Attachments and WebView2  -->
-    <Grid
-        x:Name="RendererGridFrame"
-        Padding="7,0"
-        RowSpacing="7">
+    <Grid x:Name="RendererGridFrame" RowSpacing="7">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
diff --git a/Wino.Mail/Views/NewAccountManagementPage.xaml b/Wino.Mail/Views/NewAccountManagementPage.xaml
index 2b271a7b..0f1f2ac9 100644
--- a/Wino.Mail/Views/NewAccountManagementPage.xaml
+++ b/Wino.Mail/Views/NewAccountManagementPage.xaml
@@ -11,8 +11,7 @@
     Style="{StaticResource PageStyle}"
     mc:Ignorable="d">
 
-    <Border
-        Style="{StaticResource PageRootBorderStyle}">
+    <Border Style="{StaticResource PageRootBorderStyle}">
         <Grid
             MaxWidth="900"
             Padding="20"