Files
Wino-Mail/Wino.Mail.WinUI/Views/Calendar/CalendarEventComposePage.xaml
T
2026-03-09 00:28:10 +01:00

591 lines
33 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="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>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Top Bar -->
<Border
Background="{ThemeResource WinoContentZoneBackgroud}"
BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="7">
<Grid Padding="12,6" ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Left: Calendar, Show As, Reminder -->
<StackPanel 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
x:Name="CalendarSelectionFlyout"
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>
<StackPanel
Grid.Column="1"
Orientation="Horizontal"
Spacing="4">
<AppBarButton Command="{x:Bind ViewModel.CancelCommand}" Label="{x:Bind domain:Translator.Buttons_Discard}">
<AppBarButton.Icon>
<coreControls:WinoFontIcon Icon="Delete" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Command="{x:Bind ViewModel.CreateCommand}" Label="{x:Bind domain:Translator.Buttons_Save}">
<AppBarButton.Icon>
<coreControls:WinoFontIcon Icon="Save" />
</AppBarButton.Icon>
</AppBarButton>
</StackPanel>
</Grid>
</Border>
<!-- 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}"
Visibility="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}" />
<ItemsControl
Grid.Column="5"
IsEnabled="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}"
ItemsSource="{x:Bind ViewModel.WeekdayOptions}"
Visibility="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}">
<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 ContactSuggestionTemplate}"
TokenDelimiter=";"
TokenItemAdding="TokenItemAdding"
TokenItemTemplate="{StaticResource ContactTokenTemplate}" />
<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
x:Name="AttachmentsPane"
Margin="0,8,0,0"
Padding="16"
AllowDrop="True"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
CornerRadius="{StaticResource ControlCornerRadius}"
DragLeave="AttachmentsPane_DragLeave"
DragOver="AttachmentsPane_DragOver"
Drop="AttachmentsPane_Drop"
ToolTipService.ToolTip="{x:Bind ViewModel.AttachmentsDisabledTooltipText, Mode=OneWay}"
Visibility="{x:Bind AttachmentsToggle.IsChecked, Mode=OneWay}">
<StackPanel Spacing="8">
<Button
HorizontalAlignment="Left"
Command="{x:Bind ViewModel.AddAttachmentsCommand}"
IsEnabled="{x:Bind ViewModel.CanAddAttachments, Mode=OneWay}"
Style="{StaticResource TransparentActionButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="8">
<coreControls:WinoFontIcon FontSize="14" Icon="AttachmentNew" />
<TextBlock
FontSize="18"
FontWeight="SemiBold"
Text="+" />
</StackPanel>
</Button>
<GridView
Margin="-8,0,-8,-8"
ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
SelectionMode="None">
<!--<ListView.ItemContainerStyle>
<Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
<Setter Property="Padding" Value="8,4" />
<Setter Property="MinHeight" Value="0" />
</Style>
</ListView.ItemContainerStyle>-->
<GridView.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="20"
Foreground="{ThemeResource DeleteBrush}"
Icon="Delete" />
</Button>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</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:EditorTabbedCommandBarControl CommandTarget="{x:Bind NotesEditor}">
<mailControls:EditorTabbedCommandBarControl.PaneCustomContent>
<toolkit:TabbedCommandBarItem
CommandAlignment="Right"
IsDynamicOverflowEnabled="True"
OverflowButtonAlignment="Left">
<AppBarButton Click="ToggleNotesEditorThemeClicked" ToolTipService.ToolTip="{x:Bind GetEditorThemeToolTip(NotesEditor.IsEditorDarkMode), Mode=OneWay}">
<AppBarButton.Icon>
<coreControls:WinoFontIcon Icon="{x:Bind GetEditorThemeIcon(NotesEditor.IsEditorDarkMode), Mode=OneWay}" />
</AppBarButton.Icon>
</AppBarButton>
</toolkit:TabbedCommandBarItem>
</mailControls:EditorTabbedCommandBarControl.PaneCustomContent>
</mailControls:EditorTabbedCommandBarControl>
<mailControls:WebViewEditorControl
x:Name="NotesEditor"
MinHeight="500"
IsEditorDarkMode="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=OneWay}" />
</StackPanel>
</ScrollViewer>
</Grid>
</abstract:CalendarEventComposePageAbstract>