<!-- ********************************************************************** | |
* Copyright (C) 2016 by Savoir-faire Linux * | |
* Author: Jäger Nicolas<nicolas.jager@savoirfairelinux.com> * | |
* Author: Traczyk Andreas<andreas.traczyk@savoirfairelinux.com> * | |
* * | |
* This program is free software; you can redistribute it and/or modify * | |
* it under the terms of the GNU General Public License as published by * | |
* the Free Software Foundation; either version 3 of the License, or * | |
* (at your option) any later version. * | |
* * | |
* This program is distributed in the hope that it will be useful, * | |
* but WITHOUT ANY WARRANTY; without even the implied warranty of * | |
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * | |
* GNU General Public License for more details. * | |
* * | |
* You should have received a copy of the GNU General Public License * | |
* along with this program. If not, see <http://www.gnu.org/licenses/> . * | |
***********************************************************************--> | |
<Page x:Class="RingClientUWP.Views.MessageTextPage" | |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | |
xmlns:core="System.Windows.Interactivity" | |
xmlns:ctl="using:RingClientUWP.Controls" | |
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | |
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" | |
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" | |
xmlns:local="using:RingClientUWP" | |
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | |
xmlns:uc="using:RingClientUWP.UserAndCustomControls" | |
xmlns:views="using:RingClientUWP.Views" | |
NavigationCacheMode="Enabled" | |
mc:Ignorable="d"> | |
<Page.Resources> | |
<Storyboard x:Name="_fadeInMessagesListStoryBoard_"> | |
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_messagesList_" | |
Storyboard.TargetProperty="Opacity" | |
Duration="0:0:0.40"> | |
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" /> | |
<LinearDoubleKeyFrame KeyTime="0:0:0.40" Value="1" /> | |
</DoubleAnimationUsingKeyFrames> | |
</Storyboard> | |
<Storyboard x:Name="_fadeInMessagesPageInfoStoryBoard_"> | |
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_contactInfoGrid_" | |
Storyboard.TargetProperty="Opacity" | |
Duration="0:0:0.40"> | |
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" /> | |
<LinearDoubleKeyFrame KeyTime="0:0:0.40" Value="1" /> | |
</DoubleAnimationUsingKeyFrames> | |
</Storyboard> | |
<Storyboard x:Name="_easeUpMessagesListStoryBoard_"> | |
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_messagesListTranslateTransform_" | |
Storyboard.TargetProperty="Y" | |
Duration="0:0:0.15"> | |
<EasingDoubleKeyFrame KeyTime="0" Value="-80" /> | |
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"> | |
<EasingDoubleKeyFrame.EasingFunction> | |
<CubicEase EasingMode="EaseOut" /> | |
</EasingDoubleKeyFrame.EasingFunction> | |
</EasingDoubleKeyFrame> | |
</DoubleAnimationUsingKeyFrames> | |
</Storyboard> | |
<DataTemplate x:Key="ConversationMessageTemplate" x:DataType="local:ConversationMessage"> | |
<Grid Margin="12,0,20,0" HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}"> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="*" /> | |
<RowDefinition Height="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToHeight_}, Mode=OneWay}" /> | |
</Grid.RowDefinitions> | |
<!-- avatar, message spikes, and message body --> | |
<Grid Grid.Row="0"> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="40" /> | |
<ColumnDefinition Width="10" /> | |
<ColumnDefinition Width="2*" /> | |
<ColumnDefinition Width="8*" /> | |
</Grid.ColumnDefinitions> | |
<!-- avatar --> | |
<Grid Grid.Column="0" | |
Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}"> | |
<Ellipse Width="36" | |
Height="36" | |
Canvas.ZIndex="1" | |
Margin="0,2,0,0" | |
HorizontalAlignment="Center" | |
VerticalAlignment="Top" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}"> | |
<Ellipse.Fill> | |
<ImageBrush x:Name="_contactAvatar_" ImageSource="{x:Bind MessageAvatar, Mode=OneWay}" /> | |
</Ellipse.Fill> | |
</Ellipse> | |
<Grid Width="36" | |
Height="36" | |
Canvas.ZIndex="0" | |
Margin="0,2,0,0" | |
HorizontalAlignment="Center" | |
VerticalAlignment="Top" | |
Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}"> | |
<Grid Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}"> | |
<Ellipse x:Name="_defaultAvatar_" Fill="{x:Bind MessageAvatarColorBrush, Mode=OneWay}" /> | |
<TextBlock HorizontalAlignment="Center" | |
VerticalAlignment="Center" | |
FontFamily="Arial" | |
FontSize="21" | |
Foreground="White" | |
Text="{x:Bind MessageAvatarInitial, Mode=OneWay}" | |
TextAlignment="Center" /> | |
</Grid> | |
</Grid> | |
</Grid> | |
<!-- left spike --> | |
<Grid Grid.Column="1" Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}"> | |
<Polygon Name="_chatLeftBubbleSpike_" | |
Fill="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}" | |
Points="10,0,0,5,10,10" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}"> | |
<Polygon.RenderTransform> | |
<TranslateTransform X="8" Y="15" /> | |
</Polygon.RenderTransform> | |
</Polygon> | |
</Grid> | |
<!-- message --> | |
<Border Grid.Column="3" | |
Width="auto" | |
Height="auto" | |
Margin="5" | |
Padding="10,6,10,6" | |
Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}" | |
CornerRadius="4"> | |
<ContentPresenter> | |
<RichTextBlock x:Name="_msgContent_" | |
uc:TextBlockExtension.FormattedText="{x:Bind Payload}" | |
Foreground="#ff303030" | |
IsTextSelectionEnabled="True" | |
TextWrapping="Wrap"> | |
<Paragraph /> | |
</RichTextBlock> | |
</ContentPresenter> | |
</Border> | |
<!-- right spike --> | |
<Grid Grid.Column="3" Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}"> | |
<Polygon Name="_chatRightBubbleSpike_" | |
HorizontalAlignment="Right" | |
Fill="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}" | |
Points="0,0,10,5,0,10" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}"> | |
<Polygon.RenderTransform> | |
<TranslateTransform X="3" Y="15" /> | |
</Polygon.RenderTransform> | |
</Polygon> | |
</Grid> | |
</Grid> | |
<!-- message info --> | |
<Grid Grid.Row="1"> | |
<StackPanel x:Name="_messageInfo_" | |
Margin="10,0,10,0" | |
HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}" | |
Orientation="Horizontal"> | |
<Grid Grid.Column="2" | |
x:Name="_confirmationCheckGrid_" | |
Margin="0,1,8,0" | |
Visibility="Collapsed"> | |
<Rectangle x:Name="_checkHider_" | |
Width="12" | |
HorizontalAlignment="Right" | |
Canvas.ZIndex="999" | |
Fill="{ThemeResource RingMessagePageBrush}" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}"> | |
<Rectangle.RenderTransform> | |
<TransformGroup> | |
<ScaleTransform ScaleX="1.0" /> | |
<TranslateTransform X="0" /> | |
</TransformGroup> | |
</Rectangle.RenderTransform> | |
<Rectangle.Triggers> | |
<EventTrigger> | |
<BeginStoryboard> | |
<Storyboard x:Name="_showCheck_"> | |
<DoubleAnimation Storyboard.TargetName="_checkHider_" | |
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" | |
From="1" | |
To="0" | |
Duration="0:0:0.5" /> | |
<DoubleAnimation Storyboard.TargetName="_checkHider_" | |
Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)" | |
From="0" | |
To="12" | |
Duration="0:0:0.5" /> | |
</Storyboard> | |
</BeginStoryboard> | |
</EventTrigger> | |
</Rectangle.Triggers> | |
</Rectangle> | |
<TextBlock Margin="6,0,0,0" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="12" | |
Foreground="Green" | |
Text="" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}" /> | |
</Grid> | |
<TextBlock x:Name="_messageTimeFrom_" | |
FontSize="10" | |
Foreground="Gray" | |
Text="{x:Bind MessageIndex, Converter={StaticResource _MessageDateTimeString_}}" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}"> | |
<TextBlock.RenderTransform> | |
<TranslateTransform X="50" /> | |
</TextBlock.RenderTransform> | |
</TextBlock> | |
<TextBlock x:Name="_messageTimeTo_" | |
FontSize="10" | |
Foreground="Gray" | |
Text="{x:Bind MessageIndex, Converter={StaticResource _MessageDateTimeString_}}" | |
Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}" /> | |
</StackPanel> | |
</Grid> | |
</Grid> | |
</DataTemplate> | |
<Style x:Key="MessageSendBox" TargetType="TextBox"> | |
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" /> | |
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" /> | |
<Setter Property="Foreground" Value="Black" /> | |
<Setter Property="Background" Value="White" /> | |
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> | |
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> | |
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" /> | |
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" /> | |
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" /> | |
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /> | |
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> | |
<Setter Property="Padding" Value="4,0,8,4" /> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="TextBox"> | |
<Grid> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="*" /> | |
<ColumnDefinition Width="Auto" /> | |
</Grid.ColumnDefinitions> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="Auto" /> | |
<RowDefinition Height="*" /> | |
</Grid.RowDefinitions> | |
<Border Grid.Row="1" | |
x:Name="BackgroundElement" | |
Grid.RowSpan="1" | |
Grid.ColumnSpan="2" | |
Margin="0" | |
Background="{TemplateBinding Background}" | |
BorderBrush="{StaticResource RingBlueMidBrush}" | |
BorderThickness="0" | |
Opacity="1" /> | |
<ContentPresenter Grid.Row="0" | |
x:Name="HeaderContentPresenter" | |
Grid.ColumnSpan="2" | |
Margin="0,0,0,0" | |
Padding="2,4,2,2" | |
x:DeferLoadStrategy="Lazy" | |
Content="{TemplateBinding Header}" | |
ContentTemplate="{TemplateBinding HeaderTemplate}" | |
FontWeight="Normal" | |
Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}" | |
Visibility="Collapsed" /> | |
<ScrollViewer Grid.Row="1" | |
x:Name="ContentElement" | |
Margin="{TemplateBinding BorderThickness}" | |
Padding="{TemplateBinding Padding}" | |
VerticalAlignment="Center" | |
AutomationProperties.AccessibilityView="Raw" | |
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" | |
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" | |
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" | |
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" | |
IsTabStop="False" | |
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" | |
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" | |
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" | |
ZoomMode="Disabled" /> | |
<Button Grid.Row="1" | |
Grid.Column="1" | |
x:Name="_sendBtn_" | |
MinWidth="34" | |
Margin="8,0,0,0" | |
VerticalAlignment="Stretch" | |
Background="Transparent" | |
BorderThickness="0" | |
Click="_sendBtn__Click" | |
Content="" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="20" | |
IsEnabled="False" | |
IsTabStop="False" | |
Style="{StaticResource FlatRoundSendButton}" | |
Visibility="Visible"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Uid="_tt_send_message_" /> | |
</ToolTipService.ToolTip> | |
</Button> | |
<ContentControl Grid.Row="1" | |
x:Name="PlaceholderTextContentPresenter" | |
Grid.ColumnSpan="2" | |
Margin="{TemplateBinding BorderThickness}" | |
Padding="{TemplateBinding Padding}" | |
VerticalAlignment="Center" | |
Content="{TemplateBinding PlaceholderText}" | |
Foreground="Gray" | |
IsHitTestVisible="False" | |
IsTabStop="False" /> | |
</Grid> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
</Page.Resources> | |
<Grid Background="{ThemeResource RingMessagePageBrush}"> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="auto" /> | |
<RowDefinition Height="auto" /> | |
<RowDefinition Height="*" /> | |
<RowDefinition Height="auto" /> | |
</Grid.RowDefinitions> | |
<Grid Grid.Row="0" | |
x:Name="_contactInfoGrid_" | |
Height="auto" | |
Background="White"> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="62" /> | |
<ColumnDefinition Width="*" /> | |
<ColumnDefinition Width="auto" /> | |
</Grid.ColumnDefinitions> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="auto" /> | |
<RowDefinition Height="auto" /> | |
</Grid.RowDefinitions> | |
<Grid Grid.Column="0" x:Name="_contactBarAvatarGrid_"> | |
<Ellipse Width="50" | |
Height="50" | |
Canvas.ZIndex="1"> | |
<Ellipse.Fill> | |
<ImageBrush x:Name="_contactBarAvatar_" /> | |
</Ellipse.Fill> | |
</Ellipse> | |
</Grid> | |
<Grid Grid.Column="0" | |
x:Name="_defaultContactBarAvatarGrid_" | |
Width="50" | |
Height="50" | |
Canvas.ZIndex="0"> | |
<Ellipse x:Name="_defaultAvatar_" Fill="#ff808080" /> | |
<TextBlock x:Name="_defaultAvatarInitial_" | |
HorizontalAlignment="Center" | |
VerticalAlignment="Center" | |
FontFamily="Arial" | |
FontSize="30" | |
Foreground="White" | |
Text="?" | |
TextAlignment="Center" /> | |
</Grid> | |
<Grid Grid.Column="1" x:Name="_contactInfoGridData_"> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="32" /> | |
<RowDefinition Height="30" /> | |
</Grid.RowDefinitions> | |
<TextBlock Grid.Row="0" | |
x:Name="_contactName_" | |
Margin="8,4,8,0" | |
HorizontalAlignment="Left" | |
VerticalAlignment="Center" | |
FontSize="18" | |
FontWeight="Normal" | |
Text="" | |
TextTrimming="CharacterEllipsis" | |
TextWrapping="NoWrap"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Name="_tt_contactName_" /> | |
</ToolTipService.ToolTip> | |
</TextBlock> | |
<TextBlock Grid.Row="2" | |
x:Name="_contactName2_" | |
Margin="8,-10,8,0" | |
HorizontalAlignment="Left" | |
VerticalAlignment="Center" | |
FontSize="15" | |
FontWeight="SemiLight" | |
Text="" | |
TextTrimming="CharacterEllipsis" | |
TextWrapping="NoWrap"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Name="_tt_contactName2_" /> | |
</ToolTipService.ToolTip> | |
</TextBlock> | |
</Grid> | |
<Grid Grid.Row="0" | |
Grid.Column="2" | |
x:Name="_contactButtonsGrid_" | |
Margin="0,0,14,0" | |
HorizontalAlignment="Right"> | |
<StackPanel Orientation="Horizontal"> | |
<Button x:Name="_sendContactRequestBtn_" | |
Click="_sendContactRequestBtn__Click" | |
Content="" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="18" | |
Style="{StaticResource FlatRoundButton}" | |
Visibility="Visible"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Uid="_tt_send_contactrequest_" /> | |
</ToolTipService.ToolTip> | |
</Button> | |
<Button x:Name="_videoCallBtn_" | |
Click="_videoCallBtn__Click" | |
Content="" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="18" | |
Style="{StaticResource FlatRoundButton}"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Uid="_tt_video_call_" /> | |
</ToolTipService.ToolTip> | |
</Button> | |
<Button x:Name="_audioCallBtn_" | |
Click="_audioCallBtn__Click" | |
Content="" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="18" | |
Style="{StaticResource FlatRoundButton}" | |
Visibility="Collapsed"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Uid="_tt_audio_call_" /> | |
</ToolTipService.ToolTip> | |
</Button> | |
<Button x:Name="_clearConversationBtn_" | |
Click="_clearConversationBtn__Click" | |
Content="" | |
FontFamily="Segoe MDL2 Assets" | |
FontSize="18" | |
Style="{StaticResource FlatRoundButton}"> | |
<ToolTipService.ToolTip> | |
<TextBlock x:Uid="_tt_clear_conversation_" /> | |
</ToolTipService.ToolTip> | |
</Button> | |
</StackPanel> | |
</Grid> | |
</Grid> | |
<Rectangle Grid.Row="1" | |
Height="1" | |
Margin="16,0,16,0" | |
Fill="LightGray" /> | |
<ScrollViewer Grid.Row="2" | |
x:Name="_scrollView_" | |
VerticalAlignment="Bottom" | |
BorderBrush="{StaticResource RingBlueMidBrush}" | |
BorderThickness="0,0,0,0" | |
ScrollViewer.VerticalScrollBarVisibility="Auto"> | |
<StackPanel> | |
<Rectangle Height="6" Fill="Transparent" /> | |
<ListBox x:Name="_messagesList_" | |
Margin="0" | |
Padding="0" | |
Background="{StaticResource RingMessagePageBrush}" | |
ItemContainerStyle="{StaticResource messageBubbleStyle}" | |
ItemTemplate="{StaticResource ConversationMessageTemplate}"> | |
<ListBox.RenderTransform> | |
<TranslateTransform x:Name="_messagesListTranslateTransform_" X="0" Y="0" /> | |
</ListBox.RenderTransform> | |
</ListBox> | |
<Rectangle Height="6" Fill="Transparent" /> | |
</StackPanel> | |
</ScrollViewer> | |
<StackPanel Grid.Row="3" Orientation="Vertical"> | |
<Rectangle Grid.Row="0" | |
Height="1" | |
Margin="16,0,16,0" | |
Fill="LightGray" /> | |
<Grid MinHeight="52" | |
MaxHeight="128" | |
Margin="0,0,0,0" | |
Background="{ThemeResource RingMessagePageBrush}"> | |
<TextBox x:Name="_messageTextBox_" | |
x:Uid="_messageTextBox_" | |
MinHeight="24" | |
Margin="16,0,16,0" | |
HorizontalAlignment="Stretch" | |
VerticalAlignment="Center" | |
AcceptsReturn="True" | |
Background="{ThemeResource RingMessagePageBrush}" | |
IsSpellCheckEnabled="False" | |
IsTabStop="True" | |
KeyDown="_messageTextBox__KeyDown" | |
ScrollViewer.VerticalScrollBarVisibility="Auto" | |
Style="{StaticResource MessageSendBox}" | |
TextChanged="_messageTextBox__TextChanged" | |
TextWrapping="Wrap" /> | |
</Grid> | |
</StackPanel> | |
</Grid> | |
</Page> |