javier/Wino-Mail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed visual bug with margin in narrow state (#383)

Browse Source 
* Reworked paddings/margins for mail list

* Fix composer page

* Moved layput changes from code behind to visual states
This commit is contained in:
Tiktack
2024-09-19 00:52:27 +02:00
committed by GitHub
parent a4f9284970
commit e628a98cb8
8 changed files with 65 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Wino.Mail/App.xaml
View File

@@ -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" />

7
Wino.Mail/AppShell.xaml
View File

@@ -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}" />

12
Wino.Mail/AppShell.xaml.cs
View File

@@ -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);
}
}
}
}

1
Wino.Mail/Views/ComposePage.xaml
View File

@@ -122,7 +122,6 @@
</Page.Resources>
<Grid
Padding="7,0"
AllowDrop="True"
DragLeave="OnComposeGridDragLeave"
DragOver="OnComposeGridDragOver"

42
Wino.Mail/Views/MailListPage.xaml
View File

@@ -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>

62
Wino.Mail/Views/MailListPage.xaml.cs
View File

@@ -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);
}
}
}
}

5
Wino.Mail/Views/MailRenderingPage.xaml
View File

@@ -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="*" />

3
Wino.Mail/Views/NewAccountManagementPage.xaml
View File

@@ -11,8 +11,7 @@
Style="{StaticResource PageStyle}"
mc:Ignorable="d">
<Border
Style="{StaticResource PageRootBorderStyle}">
<Border Style="{StaticResource PageRootBorderStyle}">
<Grid
MaxWidth="900"
Padding="20"