Wino-Mail/Wino.Mail/Controls/MailItemDisplayInformationControl.xaml

<UserControl
    x:Class="Wino.Controls.MailItemDisplayInformationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:controls="using:Wino.Controls"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:enums="using:Wino.Core.Domain.Enums"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    FocusVisualMargin="8"
    FocusVisualPrimaryBrush="{StaticResource SystemControlRevealFocusVisualBrush}"
    FocusVisualPrimaryThickness="2"
    FocusVisualSecondaryBrush="{StaticResource SystemControlFocusVisualSecondaryBrush}"
    FocusVisualSecondaryThickness="1"
    PointerEntered="ControlPointerEntered"
    PointerExited="ControlPointerExited">

    <UserControl.Resources>
        <Style
            x:Key="HoverActionButtonStyle"
            BasedOn="{StaticResource DefaultButtonStyle}"
            TargetType="Button">
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid
            x:Name="RootContainer"
            Padding="0,1"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            x:DefaultBindMode="OneWay">

            <!--  Custom Interaction Focus Indicator  -->
            <Ellipse
                Width="8"
                Height="8"
                Margin="0,12,8,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Canvas.ZIndex="9999"
                Fill="{ThemeResource SystemAccentColor}"
                Visibility="{x:Bind IsCustomFocused, Mode=OneWay}" />

            <Border
                x:Name="RootContainerVisualWrapper"
                Margin="0,4"
                Background="Transparent"
                BorderBrush="Transparent"
                BorderThickness="0.5"
                CornerRadius="4" />

            <Grid x:Name="MainContentContainer">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <controls:ImagePreviewControl
                    x:Name="ContactImage"
                    Width="35"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontSize="14"
                    FromAddress="{x:Bind MailItem.FromAddress, Mode=OneWay}"
                    FromName="{x:Bind MailItem.FromName, Mode=OneWay}"
                    SenderContactPicture="{x:Bind MailItem.SenderContact.Base64ContactPicture}"
                    Visibility="{x:Bind IsAvatarVisible, Mode=OneWay}" />

                <Grid
                    x:Name="ContentGrid"
                    Grid.Column="1"
                    Canvas.ZIndex="2">

                    <!--  Sender + Title  -->
                    <Grid x:Name="ContentStackpanel" VerticalAlignment="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <!--  Sender + IsDraft + Hover Buttons  -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <!--  IsDraft Tag  -->
                            <TextBlock
                                x:Name="DraftTitle"
                                Margin="0,0,4,0"
                                x:Load="{x:Bind MailItem.IsDraft, Mode=OneWay}"
                                Foreground="{StaticResource DeleteBrush}">

                                <Run Text="[" /><Run Text="{x:Bind domain:Translator.Draft}" /><Run Text="]" /> <Run Text=" " />
                            </TextBlock>

                            <!--  Sender  -->
                            <TextBlock
                                x:Name="SenderText"
                                Grid.Column="1"
                                Text="{x:Bind MailItem.FromName}"
                                TextTrimming="WordEllipsis" />

                            <!--  Hover button  -->
                            <StackPanel
                                x:Name="HoverActionButtons"
                                Grid.Column="2"
                                HorizontalAlignment="Right"
                                Background="Transparent"
                                Canvas.ZIndex="10"
                                Orientation="Horizontal"
                                Spacing="12"
                                Visibility="Collapsed">
                                <StackPanel.ChildrenTransitions>
                                    <TransitionCollection>
                                        <EdgeUIThemeTransition Edge="Right" />
                                    </TransitionCollection>
                                </StackPanel.ChildrenTransitions>
                                <Button Click="FirstActionClicked" Style="{StaticResource HoverActionButtonStyle}">
                                    <Button.Content>
                                        <controls:WinoFontIcon FontSize="16" Icon="{x:Bind helpers:XamlHelpers.GetWinoIconGlyph(LeftHoverAction), Mode=OneWay}" />
                                    </Button.Content>
                                </Button>

                                <Button Click="SecondActionClicked" Style="{StaticResource HoverActionButtonStyle}">
                                    <Button.Content>
                                        <controls:WinoFontIcon FontSize="16" Icon="{x:Bind helpers:XamlHelpers.GetWinoIconGlyph(CenterHoverAction), Mode=OneWay}" />
                                    </Button.Content>
                                </Button>

                                <Button Click="ThirdActionClicked" Style="{StaticResource HoverActionButtonStyle}">
                                    <Button.Content>
                                        <controls:WinoFontIcon FontSize="16" Icon="{x:Bind helpers:XamlHelpers.GetWinoIconGlyph(RightHoverAction), Mode=OneWay}" />
                                    </Button.Content>
                                </Button>
                            </StackPanel>
                        </Grid>

                        <!--  Subject + IsDraft  -->
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <local:AnimatedIcon
                                xmlns:local="using:Microsoft.UI.Xaml.Controls"
                                x:Name="ExpandCollapseChevron"
                                Width="14"
                                Height="14"
                                Margin="-4,0,2,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                local:AnimatedIcon.State="NormalOff"
                                AutomationProperties.AccessibilityView="Raw"
                                Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                                RenderTransformOrigin="0.5, 0.5"
                                Visibility="{x:Bind IsThreadExpanderVisible, Mode=OneWay}">
                                <animatedvisuals:AnimatedChevronRightDownSmallVisualSource />
                                <local:AnimatedIcon.FallbackIconSource>
                                    <local:FontIconSource
                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                                        FontSize="12"
                                        Glyph="&#xE76C;"
                                        IsTextScaleFactorEnabled="False" />
                                </local:AnimatedIcon.FallbackIconSource>
                                <local:AnimatedIcon.RenderTransform />
                            </local:AnimatedIcon>

                            <TextBlock
                                x:Name="TitleText"
                                Grid.Column="1"
                                MaxLines="1"
                                Text="{x:Bind MailItem.Subject}"
                                TextTrimming="CharacterEllipsis" />

                            <TextBlock
                                Grid.Column="2"
                                Margin="4,0,0,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                FontSize="11"
                                Opacity="0.7"
                                Text="{x:Bind helpers:XamlHelpers.GetMailItemDisplaySummaryForListing(MailItem.IsDraft, MailItem.CreationDate, Prefer24HourTimeFormat)}" />
                        </Grid>

                        <!--  Message  -->
                        <Grid
                            x:Name="PreviewTextContainerRoot"
                            Grid.Row="2"
                            VerticalAlignment="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Grid x:Name="PreviewTextContainer">
                                <TextBlock
                                    x:Name="PreviewTextblock"
                                    x:Load="{x:Bind helpers:XamlHelpers.ShouldDisplayPreview(MailItem.PreviewText), Mode=OneWay}"
                                    MaxLines="1"
                                    Opacity="0.7"
                                    Text="{x:Bind MailItem.PreviewText}"
                                    TextTrimming="CharacterEllipsis" />
                            </Grid>

                            <!--  Right Icons Container  -->
                            <StackPanel
                                x:Name="IconsContainer"
                                Grid.Column="1"
                                Margin="4,4,1,4"
                                Orientation="Horizontal"
                                Spacing="2">

                                <ContentPresenter
                                    x:Name="HasAttachmentContent"
                                    x:Load="{x:Bind MailItem.HasAttachments, Mode=OneWay}"
                                    ContentTemplate="{StaticResource AttachmentSymbolControlTemplate}" />

                                <ContentPresenter
                                    x:Name="IsFlaggedContent"
                                    x:Load="{x:Bind MailItem.IsFlagged, Mode=OneWay}"
                                    ContentTemplate="{StaticResource FlaggedSymbolControlTemplate}" />
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <!--  Read States  -->
            <VisualStateGroup x:Name="ReadStates">
                <VisualState x:Name="Unread">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind MailItem.IsRead, Converter={StaticResource ReverseBooleanConverter}, Mode=OneWay}" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="TitleText.Foreground" Value="{ThemeResource SystemAccentColor}" />
                        <Setter Target="TitleText.FontWeight" Value="Semibold" />
                        <Setter Target="SenderText.FontWeight" Value="Semibold" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Read" />
            </VisualStateGroup>

            <!--  Sizing States  -->
            <VisualStateGroup x:Name="SizingStates">
                <VisualState x:Name="Compact">
                    <VisualState.Setters>
                        <Setter Target="RootContainer.Height" Value="50" />
                        <Setter Target="ContentGrid.Padding" Value="8,0" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind helpers:XamlHelpers.ObjectEquals(DisplayMode, enums:MailListDisplayMode.Compact), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                </VisualState>

                <!--  Medium  -->
                <VisualState x:Name="Medium">
                    <VisualState.Setters>
                        <Setter Target="RootContainer.Height" Value="65" />
                        <Setter Target="ContentGrid.Padding" Value="6,0" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Visible" />
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind helpers:XamlHelpers.ObjectEquals(DisplayMode, enums:MailListDisplayMode.Medium), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                </VisualState>

                <!--  Spacious  -->
                <VisualState x:Name="Spacious">
                    <VisualState.Setters>
                        <Setter Target="RootContainer.Height" Value="Auto" />
                        <Setter Target="ContentGrid.Padding" Value="12,12,6,12" />
                        <Setter Target="PreviewTextContainer.Visibility" Value="Visible" />
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind helpers:XamlHelpers.ObjectEquals(DisplayMode, enums:MailListDisplayMode.Spacious), Mode=OneWay}" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>

            <!--  Preview Text States  -->
            <VisualStateGroup x:Name="PreviewTextStates">
                <VisualState x:Name="ShowText" />
                <VisualState x:Name="HideText">
                    <VisualState.Setters>
                        <Setter Target="PreviewTextContainerRoot.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind ShowPreviewText, Mode=OneWay, Converter={StaticResource ReverseBooleanConverter}}" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>

            <!--  Thread Expanding States  -->
            <VisualStateGroup x:Name="ExpanderStates">
                <VisualState x:Name="NotExpanded" />
                <VisualState x:Name="ExpandedState">
                    <VisualState.Setters>
                        <Setter Target="ExpandCollapseChevron.(controls:AnimatedIcon.State)" Value="NormalOn" />
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind IsThreadExpanded, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>