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

534 lines
28 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: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="12,8" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
</Style>
<Style
x:Key="ComposeCreateButtonStyle"
BasedOn="{StaticResource DefaultButtonStyle}"
TargetType="Button">
<Setter Property="Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
<Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
<Setter Property="Padding" Value="16,8" />
</Style>
<Style x:Key="EventDetailsPanelGridStyle" TargetType="Grid">
<Setter Property="Padding" Value="12,6" />
<Setter Property="Margin" Value="0,12" />
<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
<Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
</Style>
<Style
x:Key="EventDetailsPanelTitleStyle"
BasedOn="{StaticResource SubtitleTextBlockStyle}"
TargetType="TextBlock">
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Margin" Value="0,0,0,20" />
</Style>
<DataTemplate x:Key="AttendeeSuggestionTemplate">
<StackPanel Padding="8,4" Orientation="Vertical">
<TextBlock FontWeight="SemiBold" Text="{Binding Name}" />
<TextBlock FontSize="12" Text="{Binding Address}" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="AttendeeTokenTemplate">
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</Page.Resources>
<Grid Padding="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border
VerticalAlignment="Top"
Background="{ThemeResource WinoContentZoneBackgroud}"
BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="7">
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
HorizontalScrollMode="Enabled"
VerticalScrollBarVisibility="Disabled"
VerticalScrollMode="Disabled">
<StackPanel
Padding="8"
Orientation="Horizontal"
Spacing="8">
<Button Command="{x:Bind ViewModel.CreateCommand}" Style="{StaticResource ComposeCreateButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="Save" />
<TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Buttons_Create}" />
</StackPanel>
</Button>
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="CalendarShowAs" />
<ComboBox
Width="190"
DisplayMemberPath="Name"
ItemsSource="{x:Bind ViewModel.AvailableCalendars}"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_SelectCalendar}"
SelectedItem="{x:Bind ViewModel.SelectedCalendar, Mode=TwoWay}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Spacing="2">
<TextBlock Text="{Binding Name}" />
<TextBlock
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{Binding Account.Address}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="CalendarShowAs" />
<ComboBox
Width="150"
DisplayMemberPath="DisplayText"
ItemsSource="{x:Bind ViewModel.ShowAsOptions}"
SelectedItem="{x:Bind ViewModel.SelectedShowAsOption, Mode=TwoWay}" />
</StackPanel>
<StackPanel
VerticalAlignment="Center"
Orientation="Horizontal"
Spacing="8">
<coreControls:WinoFontIcon FontSize="16" Icon="Reminder" />
<ComboBox
Width="150"
DisplayMemberPath="DisplayText"
ItemsSource="{x:Bind ViewModel.ReminderOptions}"
SelectedItem="{x:Bind ViewModel.SelectedReminderOption, Mode=TwoWay}" />
</StackPanel>
</StackPanel>
</ScrollViewer>
</Border>
<ScrollViewer Grid.Row="1">
<Grid ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="DetailsGrid" Style="{StaticResource EventDetailsPanelGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_Details}" />
<TextBox
Grid.Row="1"
Header="{x:Bind domain:Translator.CalendarEventCompose_Title}"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_TitlePlaceholder}"
Text="{x:Bind ViewModel.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<Grid
Grid.Row="2"
Margin="0,12,0,0"
ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<DatePicker
Grid.Column="0"
Date="{x:Bind ViewModel.StartDate, Mode=TwoWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_StartDate}" />
<ToggleButton
Grid.Column="1"
Margin="0,30,0,0"
IsChecked="{x:Bind ViewModel.IsAllDay, Mode=TwoWay}">
<TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_AllDay}" />
</ToggleButton>
<TimePicker
Grid.Column="2"
ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_StartTime}"
IsEnabled="{x:Bind ViewModel.IsAllDay, Mode=OneWay}"
SelectedTime="{x:Bind ViewModel.StartTime, Mode=TwoWay}" />
<TimePicker
Grid.Column="3"
ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_EndTime}"
IsEnabled="{x:Bind ViewModel.IsAllDay, Mode=OneWay}"
SelectedTime="{x:Bind ViewModel.EndTime, Mode=TwoWay}" />
</Grid>
<DatePicker
Grid.Row="3"
Margin="0,12,0,0"
Date="{x:Bind ViewModel.AllDayEndDate, Mode=TwoWay}"
Header="{x:Bind domain:Translator.CalendarEventCompose_EndDate}"
Visibility="{x:Bind ViewModel.IsAllDay, Mode=OneWay}" />
<Grid
Grid.Row="4"
Margin="0,12,0,0"
ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox
Grid.Column="0"
Header="{x:Bind domain:Translator.CalendarEventCompose_Location}"
PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_LocationPlaceholder}"
Text="{x:Bind ViewModel.Location, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<ToggleButton
Grid.Column="1"
Margin="0,30,0,0"
IsChecked="{x:Bind ViewModel.IsRecurring, Mode=TwoWay}">
<TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_Recurring}" />
</ToggleButton>
</Grid>
<Border
Grid.Row="5"
Margin="0,12,0,0"
Padding="12"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
CornerRadius="6"
Visibility="{x:Bind ViewModel.IsRecurring, Mode=OneWay}">
<StackPanel Spacing="12">
<Grid ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="140" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="170" />
<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"
DisplayMemberPath="DisplayText"
ItemsSource="{x:Bind ViewModel.RecurrenceFrequencyOptions}"
SelectedItem="{x:Bind ViewModel.SelectedRecurrenceFrequencyOption, Mode=TwoWay}" />
<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>
<ToggleButton
Width="32"
Height="32"
Padding="0"
IsChecked="{Binding IsSelected, Mode=TwoWay}">
<TextBlock HorizontalAlignment="Center" Text="{Binding 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>
<TextBlock
Grid.Row="6"
Margin="0,12,0,0"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind ViewModel.RecurrenceSummary, Mode=OneWay}"
TextWrapping="Wrap" />
<Grid Grid.Row="7" Margin="0,12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Margin="0,0,0,8"
FontWeight="SemiBold"
Text="{x:Bind domain:Translator.CalendarEventCompose_Notes}" />
<mailControls:WebViewEditorControl
x:Name="NotesEditor"
Grid.Row="1"
Height="340"
IsEditorDarkMode="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=OneWay}"
IsEditorWebViewEditor="True" />
</Grid>
</Grid>
<Grid
x:Name="PeopleGrid"
Grid.Column="1"
Style="{StaticResource EventDetailsPanelGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_People}" />
<toolkit:TokenizingTextBox
x:Name="AttendeeBox"
Grid.Row="1"
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
Grid.Row="2"
Margin="-12,12,0,0"
ItemsSource="{x:Bind ViewModel.Attendees, Mode=OneWay}"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,6" ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controls:ImagePreviewControl
Width="40"
Height="40"
Address="{Binding Email}"
DisplayNameOverride="{Binding DisplayName}"
PreviewContact="{Binding ResolvedContact}" />
<StackPanel Grid.Column="1" Spacing="4">
<TextBlock
FontWeight="SemiBold"
Text="{Binding DisplayName}"
TextWrapping="Wrap" />
<TextBlock
FontSize="13"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{Binding Email}"
Visibility="{Binding HasDistinctDisplayName}" />
</StackPanel>
<Button
Grid.Column="2"
Click="RemoveAttendeeClicked"
Style="{StaticResource TransparentActionButtonStyle}"
Tag="{Binding}">
<coreControls:WinoFontIcon FontSize="14" Icon="Delete" />
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<Grid
x:Name="AttachmentsGrid"
Grid.Column="2"
Style="{StaticResource EventDetailsPanelGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="{x:Bind domain:Translator.CalendarEventDetails_Attachments}" />
<Button
Grid.Row="1"
HorizontalAlignment="Left"
Command="{x:Bind ViewModel.AddAttachmentsCommand}"
Style="{StaticResource TransparentActionButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="EventAccept" />
<TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_AddAttachment}" />
</StackPanel>
</Button>
<ListView
Grid.Row="2"
Margin="-12,12,0,0"
ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="56" ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl
VerticalAlignment="Center"
Content="{Binding AttachmentType}"
ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />
<StackPanel
Grid.Column="1"
VerticalAlignment="Center"
Spacing="2">
<TextBlock Text="{Binding FileName}" TextTrimming="CharacterEllipsis" />
<TextBlock
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{Binding ReadableSize}" />
</StackPanel>
<Button
Grid.Column="2"
Click="RemoveAttachmentClicked"
Style="{StaticResource TransparentActionButtonStyle}"
Tag="{Binding}">
<coreControls:WinoFontIcon FontSize="14" Icon="Delete" />
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ScrollViewer>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowWidthStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1200" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="MediumState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailsGrid.(Grid.Row)" Value="0" />
<Setter Target="DetailsGrid.(Grid.Column)" Value="0" />
<Setter Target="DetailsGrid.(Grid.RowSpan)" Value="2" />
<Setter Target="PeopleGrid.(Grid.Row)" Value="0" />
<Setter Target="PeopleGrid.(Grid.Column)" Value="1" />
<Setter Target="PeopleGrid.(Grid.ColumnSpan)" Value="2" />
<Setter Target="PeopleGrid.(Grid.RowSpan)" Value="1" />
<Setter Target="AttachmentsGrid.(Grid.Row)" Value="1" />
<Setter Target="AttachmentsGrid.(Grid.Column)" Value="1" />
<Setter Target="AttachmentsGrid.(Grid.ColumnSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailsGrid.(Grid.Row)" Value="0" />
<Setter Target="DetailsGrid.(Grid.Column)" Value="0" />
<Setter Target="DetailsGrid.(Grid.ColumnSpan)" Value="3" />
<Setter Target="PeopleGrid.(Grid.Row)" Value="1" />
<Setter Target="PeopleGrid.(Grid.Column)" Value="0" />
<Setter Target="PeopleGrid.(Grid.ColumnSpan)" Value="3" />
<Setter Target="AttachmentsGrid.(Grid.Row)" Value="2" />
<Setter Target="AttachmentsGrid.(Grid.Column)" Value="0" />
<Setter Target="AttachmentsGrid.(Grid.ColumnSpan)" Value="3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</abstract:CalendarEventComposePageAbstract>