Files
Wino-Mail/Wino.Mail.WinUI/Views/Calendar/CalendarEventComposePage.xaml
T
2026-03-07 01:46:07 +01:00

586 lines
32 KiB
XML

<?xml version="1.0" encoding="utf-8" ?>
<abstract:CalendarEventComposePageAbstract
x:Class="Wino.Calendar.Views.CalendarEventComposePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:abstract="using:Wino.Mail.WinUI.Views.Abstract"
xmlns:calendarViewModels="using:Wino.Calendar.ViewModels"
xmlns:controls="using:Wino.Controls"
xmlns:coreControls="using:Wino.Mail.WinUI.Controls"
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:mailControls="using:Wino.Mail.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:shared="using:Wino.Core.Domain.Entities.Shared"
xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
Style="{StaticResource PageStyle}"
mc:Ignorable="d">
<Page.Resources>
<Style
x:Key="TransparentActionButtonStyle"
BasedOn="{StaticResource DefaultButtonStyle}"
TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="8" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
</Style>
<Style
x:Key="FieldToggleButtonStyle"
BasedOn="{StaticResource DefaultToggleButtonStyle}"
TargetType="ToggleButton">
<Setter Property="Padding" Value="12,6" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="CornerRadius" Value="4" />
</Style>
<DataTemplate x:Key="AttendeeSuggestionTemplate" x:DataType="shared:AccountContact">
<StackPanel Padding="8,4" Orientation="Vertical">
<TextBlock FontWeight="SemiBold" Text="{x:Bind Name}" />
<TextBlock FontSize="12" Text="{x:Bind Address}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AttendeeTokenTemplate" x:DataType="data:CalendarComposeAttendeeViewModel">
<TextBlock Text="{x:Bind DisplayName}" />
</DataTemplate>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Top Bar -->
<Grid
Padding="16,10"
Background="{ThemeResource WinoContentZoneBackgroud}"
CornerRadius="{StaticResource ControlCornerRadius}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Left: Save + Discard -->
<StackPanel Orientation="Horizontal" Spacing="8">
<Button Command="{x:Bind ViewModel.CreateCommand}">
<Button.Style>
<Style BasedOn="{StaticResource AccentButtonStyle}" TargetType="Button">
<Setter Property="Padding" Value="16,6" />
</Style>
</Button.Style>
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="Save" />
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Buttons_Save}" />
</StackPanel>
</Button>
<Button Command="{x:Bind ViewModel.CancelCommand}" Style="{StaticResource TransparentActionButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="Dismiss" />
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Buttons_Discard}" />
</StackPanel>
</Button>
</StackPanel>
<!-- Right: Calendar, Show As, Reminder -->
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
Spacing="12">
<!-- Calendar -->
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="Calendar" />
<Button
Padding="10,6"
HorizontalContentAlignment="Left"
Style="{StaticResource DefaultButtonStyle}">
<Button.Flyout>
<Flyout Placement="BottomEdgeAlignedLeft">
<ScrollViewer MaxHeight="360">
<ItemsControl ItemsSource="{x:Bind ViewModel.AvailableCalendarGroups, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="data:GroupedAccountCalendarViewModel">
<StackPanel
MinWidth="320"
Padding="0,0,0,12"
Spacing="6">
<TextBlock FontWeight="SemiBold">
<Run Text="{x:Bind Account.Name}" />
<Run Text=" (" />
<Run Text="{x:Bind Account.Address}" />
<Run Text=")" />
</TextBlock>
<ListView
IsItemClickEnabled="True"
ItemClick="ComposeCalendarClicked"
ItemsSource="{x:Bind AccountCalendars}"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:AccountCalendarViewModel">
<Grid ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Ellipse
Width="14"
Height="14"
VerticalAlignment="Center"
Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(BackgroundColorHex), Mode=OneWay}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Text="{x:Bind Name}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Flyout>
</Button.Flyout>
<StackPanel Orientation="Horizontal" Spacing="8">
<Ellipse
Width="10"
Height="10"
VerticalAlignment="Center"
Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(ViewModel.SelectedCalendar.BackgroundColorHex), Mode=OneWay}" />
<StackPanel Spacing="0">
<TextBlock Text="{x:Bind ViewModel.SelectedCalendarDisplayText, Mode=OneWay}" />
<TextBlock
FontSize="11"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind ViewModel.SelectedCalendarAccountText, Mode=OneWay}"
Visibility="{x:Bind helpers:XamlHelpers.StringToVisibilityConverter(ViewModel.SelectedCalendarAccountText), Mode=OneWay}" />
</StackPanel>
<FontIcon Glyph="&#xE70D;" />
</StackPanel>
</Button>
</StackPanel>
<!-- Show As -->
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="CalendarShowAs" />
<ComboBox
VerticalAlignment="Center"
ItemsSource="{x:Bind ViewModel.ShowAsOptions}"
SelectedItem="{x:Bind ViewModel.SelectedShowAsOption, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="calendarViewModels:ShowAsOption">
<TextBlock Text="{x:Bind DisplayText}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<!-- Reminder -->
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="Reminder" />
<ComboBox
VerticalAlignment="Center"
ItemsSource="{x:Bind ViewModel.ReminderOptions}"
SelectedItem="{x:Bind ViewModel.SelectedReminderOption, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="calendarViewModels:ReminderOption">
<TextBlock Text="{x:Bind DisplayText}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</StackPanel>
</Grid>
<!-- Scrollable Content -->
<ScrollViewer Grid.Row="1" MaxWidth="1200">
<StackPanel
Padding="40,24,40,40"
HorizontalAlignment="Stretch"
Spacing="0">
<!-- Title -->
<TextBox
FontSize="24"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_TitlePlaceholder}"
Text="{x:Bind ViewModel.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TextBox.Style>
<Style BasedOn="{StaticResource DefaultTextBoxStyle}" TargetType="TextBox">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<!--<Setter Property="Padding" Value="0,8" />-->
</Style>
</TextBox.Style>
</TextBox>
<!-- Divider -->
<Border
Height="1"
Margin="0,0,0,20"
Background="{ThemeResource DividerStrokeColorDefaultBrush}" />
<!-- Date Row -->
<StackPanel
Margin="0,0,0,12"
Orientation="Horizontal"
Spacing="12">
<DatePicker Date="{x:Bind ViewModel.StartDate, Mode=TwoWay}" Header="{x:Bind domain:Translator.CalendarEventCompose_StartDate}" />
<ToggleButton
VerticalAlignment="Bottom"
Content="{x:Bind domain:Translator.CalendarEventCompose_AllDay}"
IsChecked="{x:Bind ViewModel.IsAllDay, Mode=TwoWay}"
Style="{StaticResource FieldToggleButtonStyle}" />
</StackPanel>
<!-- Time Row -->
<StackPanel
Margin="0,0,0,8"
Orientation="Horizontal"
Spacing="12"
Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsAllDay), Mode=OneWay}">
<TimePicker
ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_StartTime}"
SelectedTime="{x:Bind ViewModel.StartTime, Mode=TwoWay}" />
<TextBlock
Margin="0,28,0,0"
VerticalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="—" />
<TimePicker
ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_EndTime}"
SelectedTime="{x:Bind ViewModel.EndTime, Mode=TwoWay}" />
</StackPanel>
<!-- All Day End Date -->
<DatePicker
Margin="0,0,0,8"
Date="{x:Bind ViewModel.AllDayEndDate, Mode=TwoWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_EndDate}"
Visibility="{x:Bind ViewModel.IsAllDay, Mode=OneWay}" />
<!-- Date/Time Summary -->
<TextBlock
Margin="0,0,0,16"
FontSize="13"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind ViewModel.RecurrenceSummary, Mode=OneWay}"
TextWrapping="Wrap" />
<!-- Location -->
<TextBox
Margin="0,0,0,12"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_LocationPlaceholder}"
Text="{x:Bind ViewModel.Location, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<!-- Recurring Toggle -->
<ToggleButton
Margin="0,0,0,4"
IsChecked="{x:Bind ViewModel.IsRecurring, Mode=TwoWay}"
Style="{StaticResource FieldToggleButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="CalendarEventRepeat" />
<TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_Recurring}" />
</StackPanel>
</ToggleButton>
<!-- Recurrence Panel -->
<Border
Margin="0,8,0,4"
Padding="16"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
CornerRadius="{StaticResource ControlCornerRadius}"
Visibility="{x:Bind ViewModel.IsRecurring, Mode=OneWay}">
<StackPanel Spacing="12">
<Grid ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventCompose_RepeatEvery}" />
<ComboBox
Grid.Column="1"
ItemsSource="{x:Bind ViewModel.RecurrenceIntervalOptions}"
SelectedItem="{x:Bind ViewModel.SelectedRecurrenceInterval, Mode=TwoWay}" />
<TextBlock
Grid.Column="2"
VerticalAlignment="Center"
Text="{x:Bind domain:Translator.CalendarEventCompose_Every}" />
<ComboBox
Grid.Column="3"
ItemsSource="{x:Bind ViewModel.RecurrenceFrequencyOptions}"
SelectedItem="{x:Bind ViewModel.SelectedRecurrenceFrequencyOption, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate x:DataType="calendarViewModels:CalendarComposeFrequencyOption">
<TextBlock Text="{x:Bind DisplayText}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBlock
Grid.Column="4"
VerticalAlignment="Center"
Text="{x:Bind domain:Translator.CalendarEventCompose_ForWeekdays}" />
<ItemsControl Grid.Column="5" ItemsSource="{x:Bind ViewModel.WeekdayOptions}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="calendarViewModels:CalendarComposeWeekdayOption">
<ToggleButton
Width="32"
Height="32"
Padding="0"
IsChecked="{x:Bind IsSelected, Mode=TwoWay}">
<TextBlock HorizontalAlignment="Center" Text="{x:Bind Label}" />
</ToggleButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock
Grid.Column="6"
VerticalAlignment="Center"
Text="{x:Bind domain:Translator.CalendarEventCompose_Until}" />
<CalendarDatePicker
Grid.Column="7"
Date="{x:Bind ViewModel.RecurrenceEndDate, Mode=TwoWay}"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_NoEndDate}" />
<Button
Grid.Column="8"
Command="{x:Bind ViewModel.ClearRecurrenceEndDateCommand}"
Style="{StaticResource TransparentActionButtonStyle}">
<coreControls:WinoFontIcon FontSize="14" Icon="Dismiss" />
</Button>
</Grid>
</StackPanel>
</Border>
<!-- People & Attachments Toggle Row -->
<StackPanel
Margin="0,12,0,4"
Orientation="Horizontal"
Spacing="8">
<ToggleButton x:Name="PeopleToggle" Style="{StaticResource FieldToggleButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="People" />
<TextBlock Text="{x:Bind domain:Translator.CalendarEventDetails_People}" />
</StackPanel>
</ToggleButton>
<ToggleButton x:Name="AttachmentsToggle" Style="{StaticResource FieldToggleButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="Attachment" />
<TextBlock Text="{x:Bind domain:Translator.CalendarEventDetails_Attachments}" />
</StackPanel>
</ToggleButton>
</StackPanel>
<!-- People Pane -->
<Border
Margin="0,8,0,0"
Padding="16"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
CornerRadius="{StaticResource ControlCornerRadius}"
Visibility="{x:Bind PeopleToggle.IsChecked, Mode=OneWay}">
<StackPanel Spacing="8">
<toolkit:TokenizingTextBox
x:Name="AttendeeBox"
BorderThickness="0"
ItemsSource="{x:Bind ViewModel.Attendees, Mode=OneWay}"
LostFocus="AddressBoxLostFocus"
PlaceholderText="{x:Bind domain:Translator.CalendarEventDetails_InviteSomeone}"
SuggestedItemTemplate="{StaticResource AttendeeSuggestionTemplate}"
TokenDelimiter=";"
TokenItemAdding="TokenItemAdding"
TokenItemTemplate="{StaticResource AttendeeTokenTemplate}" />
<ListView
Margin="-8,0,-8,-8"
ItemsSource="{x:Bind ViewModel.Attendees, Mode=OneWay}"
SelectionMode="None">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="8,4" />
<Setter Property="MinHeight" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:CalendarComposeAttendeeViewModel">
<Grid ColumnSpacing="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controls:ImagePreviewControl
Width="32"
Height="32"
Address="{x:Bind Email}"
DisplayNameOverride="{x:Bind DisplayName}"
PreviewContact="{x:Bind ResolvedContact}" />
<StackPanel
Grid.Column="1"
VerticalAlignment="Center"
Spacing="1">
<TextBlock
FontSize="13"
Text="{x:Bind DisplayName}"
TextTrimming="CharacterEllipsis" />
<TextBlock
FontSize="11"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind Email}"
TextTrimming="CharacterEllipsis"
Visibility="{x:Bind HasDistinctDisplayName, Mode=OneWay}" />
</StackPanel>
<Button
Grid.Column="2"
Padding="6,4"
VerticalAlignment="Center"
Click="RemoveAttendeeClicked"
Style="{StaticResource TransparentActionButtonStyle}"
Tag="{x:Bind}">
<coreControls:WinoFontIcon FontSize="12" Icon="Delete" />
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
<!-- Attachments Pane -->
<Border
Margin="0,8,0,0"
Padding="16"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
CornerRadius="{StaticResource ControlCornerRadius}"
Visibility="{x:Bind AttachmentsToggle.IsChecked, Mode=OneWay}">
<StackPanel Spacing="8">
<Button
HorizontalAlignment="Left"
Command="{x:Bind ViewModel.AddAttachmentsCommand}"
Style="{StaticResource TransparentActionButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="AttachmentNew" />
<TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_AddAttachment}" />
</StackPanel>
</Button>
<ListView
Margin="-8,0,-8,-8"
ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
SelectionMode="None">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="8,4" />
<Setter Property="MinHeight" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:DataType="data:CalendarComposeAttachmentViewModel">
<Grid Height="44" ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl
VerticalAlignment="Center"
Content="{x:Bind AttachmentType}"
ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />
<StackPanel
Grid.Column="1"
VerticalAlignment="Center"
Spacing="1">
<TextBlock
FontSize="13"
Text="{x:Bind FileName}"
TextTrimming="CharacterEllipsis" />
<TextBlock
FontSize="11"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind ReadableSize}" />
</StackPanel>
<Button
Grid.Column="2"
Padding="6,4"
VerticalAlignment="Center"
Click="RemoveAttachmentClicked"
Style="{StaticResource TransparentActionButtonStyle}"
Tag="{x:Bind}">
<coreControls:WinoFontIcon FontSize="12" Icon="Delete" />
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Border>
<!-- Notes Header -->
<StackPanel
Margin="0,20,0,8"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon
FontSize="14"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Icon="Draft" />
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.CalendarEventCompose_Notes}" />
</StackPanel>
<!-- Notes Editor -->
<mailControls:WebViewEditorControl
x:Name="NotesEditor"
MinHeight="600"
IsEditorDarkMode="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=OneWay}"
IsEditorWebViewEditor="True" />
</StackPanel>
</ScrollViewer>
</Grid>
</abstract:CalendarEventComposePageAbstract>