Wino-Mail/Wino.Mail.WinUI/Views/Calendar/CalendarPage.xaml

<abstract:CalendarPageAbstract
    x:Class="Wino.Calendar.Views.CalendarPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Calendar.Views.Abstract"
    xmlns:calendarControls="using:Wino.Calendar.Controls"
    xmlns:collections="using:CommunityToolkit.Mvvm.Collections"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:Wino.Calendar.ViewModels.Data"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:winoControls="using:Wino.Mail.WinUI.Controls"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource
            x:Name="GroupedCalendarEnumerableViewSource"
            IsSourceGrouped="True"
            Source="{x:Bind ViewModel.AccountCalendarStateService.GroupedCalendars, Mode=OneWay}" />
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <winoControls:CalendarTitleBarContent
            x:Name="CalendarToolbar"
            Grid.Row="0"
            Margin="4,0,7,8" />

        <Border
            Grid.Row="1"
            Margin="4,0,7,7"
            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="7">
            <calendarControls:CalendarPeriodControl
                x:Name="CalendarSurface"
                CalendarItems="{x:Bind ViewModel.CalendarItems, Mode=OneWay}"
                CalendarSettings="{x:Bind ViewModel.CurrentSettings, Mode=OneWay}"
                DefaultHourBackground="{ThemeResource CalendarDefaultHourBackgroundBrush}"
                EmptySlotTapped="CalendarSurfaceEmptySlotTapped"
                IsEnabled="{x:Bind ViewModel.IsCalendarEnabled, Mode=OneWay}"
                SelectedDateTime="{x:Bind ViewModel.SelectedQuickEventDate, Mode=OneWay}"
                SelectedSlotBackground="{ThemeResource CalendarSelectedHourBackgroundBrush}"
                VisibleRange="{x:Bind ViewModel.CurrentVisibleRange, Mode=OneWay}"
                WorkHourBackground="{ThemeResource CalendarWorkHourBackgroundBrush}" />
        </Border>

        <Canvas
            x:Name="CalendarOverlayCanvas"
            Grid.RowSpan="2"
            IsHitTestVisible="False">
            <Grid
                x:Name="TeachingTipPositionerGrid"
                Background="Transparent"
                IsHitTestVisible="False"
                Visibility="Visible" />

            <Popup
                x:Name="QuickEventPopupDialog"
                ActualPlacementChanged="PopupPlacementChanged"
                Closed="QuickEventPopupClosed"
                DesiredPlacement="{x:Bind helpers:XamlHelpers.GetPlaccementModeForCalendarType(ViewModel.StatePersistanceService.CalendarDisplayType), Mode=OneWay}"
                IsLightDismissEnabled="True"
                PlacementTarget="{x:Bind TeachingTipPositionerGrid}">
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PopupThemeTransition />
                    </TransitionCollection>
                </Popup.ChildTransitions>

                <Grid
                    MinWidth="440"
                    MaxWidth="520"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    BorderBrush="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(ViewModel.SelectedQuickEventAccountCalendar.BackgroundColorHex), Mode=OneWay, TargetNullValue='LightGray'}"
                    BorderThickness="1"
                    CornerRadius="8"
                    RowSpacing="12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Button
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Stretch"
                        Background="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(ViewModel.SelectedQuickEventAccountCalendar.BackgroundColorHex), Mode=OneWay, TargetNullValue='LightGray'}"
                        CornerRadius="8,8,0,0">
                        <Button.Content>
                            <Grid
                                Height="36"
                                Padding="12,0"
                                ColumnSpacing="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <TextBlock
                                    VerticalAlignment="Center"
                                    Foreground="{x:Bind helpers:XamlHelpers.GetReadableTextColor(ViewModel.SelectedQuickEventAccountCalendar.BackgroundColorHex), Mode=OneWay}"
                                    Text="{x:Bind ViewModel.SelectedQuickEventAccountCalendar.Account.Name, Mode=OneWay}" />

                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    FontWeight="SemiBold"
                                    Foreground="{x:Bind helpers:XamlHelpers.GetReadableTextColor(ViewModel.SelectedQuickEventAccountCalendar.BackgroundColorHex), Mode=OneWay}"
                                    Text="{x:Bind ViewModel.SelectedQuickEventAccountCalendarName, Mode=OneWay}"
                                    TextTrimming="CharacterEllipsis" />

                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    Foreground="{x:Bind helpers:XamlHelpers.GetReadableTextColor(ViewModel.SelectedQuickEventAccountCalendar.BackgroundColorHex), Mode=OneWay}"
                                    Glyph="&#xE70D;" />
                            </Grid>
                        </Button.Content>
                        <Button.Flyout>
                            <Flyout x:Name="QuickEventAccountSelectorFlyout" Placement="Bottom">
                                <ListView
                                    MaxHeight="300"
                                    ItemsSource="{x:Bind GroupedCalendarEnumerableViewSource.View, Mode=OneWay}"
                                    SelectedItem="{x:Bind ViewModel.SelectedQuickEventAccountCalendar, Mode=TwoWay}"
                                    SelectionChanged="QuickEventAccountSelectorSelectionChanged">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="data:AccountCalendarViewModel">
                                            <StackPanel
                                                Margin="0,0,16,0"
                                                Orientation="Horizontal"
                                                Spacing="8">
                                                <Ellipse
                                                    Width="14"
                                                    Height="14"
                                                    Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(BackgroundColorHex), Mode=OneWay}" />
                                                <TextBlock VerticalAlignment="Center" Text="{x:Bind Name, Mode=OneWay}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                    <ListView.GroupStyle>
                                        <GroupStyle>
                                            <GroupStyle.HeaderTemplate>
                                                <DataTemplate x:DataType="collections:IReadOnlyObservableGroup">
                                                    <TextBlock FontWeight="SemiBold" Text="{x:Bind Key.ToString()}" />
                                                </DataTemplate>
                                            </GroupStyle.HeaderTemplate>
                                        </GroupStyle>
                                    </ListView.GroupStyle>
                                </ListView>
                            </Flyout>
                        </Button.Flyout>
                    </Button>

                    <Grid
                        Grid.Row="1"
                        Padding="12"
                        RowSpacing="16">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <TextBox
                                FontSize="16"
                                PlaceholderText="{x:Bind domain:Translator.QuickEventDialog_EventName}"
                                Text="{x:Bind ViewModel.EventName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                            <CheckBox
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Content="{x:Bind domain:Translator.QuickEventDialog_IsAllDay}"
                                IsChecked="{x:Bind ViewModel.IsAllDay, Mode=TwoWay}" />
                        </Grid>

                        <Grid Grid.Row="1" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <ComboBox
                                IsEditable="True"
                                IsEnabled="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(ViewModel.IsAllDay), Mode=OneWay}"
                                ItemsSource="{x:Bind ViewModel.HourSelectionStrings, Mode=OneWay}"
                                SelectedItem="{x:Bind ViewModel.SelectedStartTimeString, Mode=TwoWay}"
                                TextSubmitted="StartTimeDurationSubmitted" />

                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="-" />

                            <ComboBox
                                Grid.Column="2"
                                IsEditable="True"
                                IsEnabled="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(ViewModel.IsAllDay), Mode=OneWay}"
                                ItemsSource="{x:Bind ViewModel.HourSelectionStrings, Mode=OneWay}"
                                SelectedItem="{x:Bind ViewModel.SelectedEndTimeString, Mode=TwoWay}"
                                TextSubmitted="EndTimeDurationSubmitted" />
                        </Grid>

                        <TextBox
                            Grid.Row="2"
                            PlaceholderText="{x:Bind domain:Translator.QuickEventDialog_Location}"
                            Text="{x:Bind ViewModel.Location, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                        <Grid Grid.Row="3" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Button
                                HorizontalAlignment="Stretch"
                                Click="MoreDetailsClicked"
                                Content="{x:Bind domain:Translator.QuickEventDialogMoreDetailsButtonText}" />

                            <Button
                                Grid.Column="1"
                                HorizontalAlignment="Stretch"
                                Click="SaveQuickEventClicked"
                                Content="{x:Bind domain:Translator.Buttons_Save}"
                                IsEnabled="{x:Bind ViewModel.CanSaveQuickEvent, Mode=OneWay}"
                                Style="{ThemeResource AccentButtonStyle}" />
                        </Grid>
                    </Grid>
                </Grid>
            </Popup>
        </Canvas>
    </Grid>
</abstract:CalendarPageAbstract>