Commit 5c65112e authored by Margaux Clerc's avatar Margaux Clerc
Browse files

Rework chat view

parent 0b136390
......@@ -4,14 +4,14 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:linphone="using:Linphone.Controls"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="420">
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="TextBlock" x:Key="TimestampStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Margin" Value="0,0,5,5"/>
</Style>
<Style TargetType="TextBlock" x:Key="MessageStyle">
......
......@@ -6,19 +6,19 @@
xmlns:linphone="using:Linphone.Controls"
xmlns:custom="using:Linphone.Controls"
xmlns:controls="Linphone.Controls"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="420">
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="TextBlock" x:Key="TimestampStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="Margin" Value="0,0,5,3"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Margin" Value="0,0,5,5"/>
</Style>
<Style TargetType="TextBlock" x:Key="MessageStyle">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="5,5,5,3"/>
<Setter Property="Margin" Value="7,5,2,2"/>
</Style>
</UserControl.Resources>
......@@ -38,6 +38,7 @@
Grid.Row="0"
x:Name="Message"
Style="{StaticResource MessageStyle}"
TextWrapping="Wrap"
TextAlignment="Left"/>
<Image
......@@ -53,7 +54,7 @@
<Image
x:Name="Status"
Source="/Assets/AppBar/next.png"
Height="25"
Height="15"
Stretch="Uniform"/>
<TextBlock
......
......@@ -7,93 +7,59 @@
xmlns:controls="Linphone.Controls"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="420">
<UserControl.Resources>
<Style x:Key="ChatTextBox" TargetType="TextBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
<Border x:Name="ReadonlyBorder" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Visibility="Collapsed"/>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" >
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Margin="60,5,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Fill="WhiteSmoke" Grid.RowSpan="2" Grid.Row="0"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
x:Name="Image"
Stretch="Uniform"
Margin="10"
Visibility="Collapsed">
Grid.Row="1"
x:Name="Image"
Stretch="Uniform"
Margin="10"
Visibility="Collapsed">
</Image>
<TextBox
Grid.Row="1"
x:Name="Message"
TextChanged="Message_TextChanged"
InputScope="Chat"
TextAlignment="Left"
TextWrapping="Wrap"
AcceptsReturn="True"
Style="{StaticResource ChatTextBox}"/>
<Path
Grid.Row="2"
Data="m 0,0 l 8,0 l 0,16 l -16,-16"
Fill="WhiteSmoke"
Margin="0,-1,10,0"
HorizontalAlignment="Right"/>
<Button
x:Name="SendFile"
BorderThickness="0"
Style="{StaticResource ButtonStyle}"
Click="SendFile_Click"
Background="Transparent">
<Button.ContentTemplate>
<DataTemplate>
<FontIcon x:Name="SendFile" FontFamily="Segoe MDL2 Assets" Glyph="&#xE723;" RenderTransformOrigin="0.5,0.5"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<TextBox
x:Name="Message"
TextChanged="Message_TextChanged"
InputScope="Chat"
x:Uid="ChatMessageHint"
TextAlignment="Left"
TextWrapping="Wrap"
AcceptsReturn="True"
BorderThickness="0"
Grid.Column="1"/>
<Button
x:Name="SendMessage"
BorderThickness="0"
Grid.Column="2"
Style="{StaticResource ButtonStyle}"
Click="SendMessage_Click"
Background="Transparent"
IsEnabled="False">
<Button.ContentTemplate>
<DataTemplate>
<FontIcon Grid.Column="2" FontFamily="Segoe MDL2 Assets" Glyph="&#xE724;" RenderTransformOrigin="0.5,0.5"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</Grid>
</UserControl>
\ No newline at end of file
......@@ -13,54 +13,39 @@ You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;
namespace Linphone.Controls
{
/// <summary>
/// Custom TextBox to look like a chat bubble.
/// </summary>
public partial class TextBoxChatBubble : UserControl
{
/// <summary>
/// Public accessor to this control text.
/// </summary>
public string Text { get; set; }
/// <summary>
/// Sets the filename associated with the image to send
/// </summary>
public string ImageName { get; set; }
/// <summary>
/// Sets the local path where the image is stored
/// </summary>
public string ImageLocalPath { get; set; }
/// <summary>
/// Public constructor.
/// </summary>
public delegate void SendFileClickEventHandler(object sender);
public event SendFileClickEventHandler SendFileClick;
public delegate void SendMessageClickEventHandler(object sender);
public event SendMessageClickEventHandler SendMessageClick;
public TextBoxChatBubble()
{
InitializeComponent();
}
/// <summary>
/// Empty the content of the textbox.
/// </summary>
public void Reset()
{
Message.Text = "";
Text = null;
ImageName = null;
ImageLocalPath = null;
SendMessage.IsEnabled = false;
Message.Visibility = Visibility.Visible;
Image.Visibility = Visibility.Collapsed;
}
......@@ -68,16 +53,13 @@ namespace Linphone.Controls
private void Message_TextChanged(object sender, TextChangedEventArgs e)
{
Text = Message.Text;
SendMessage.IsEnabled = Text.Length > 0 ? true : false;
if (TextChanged != null)
{
TextChanged(this, Message.Text);
{
TextChanged(this, Message.Text);
}
}
/// <summary>
/// Sets and displays the BitmapImage that will be sent we the user clicks on the send button
/// </summary>
/// <param name="image">the BitmapImage to display</param>
public void SetImage(BitmapImage image)
{
// Image.SourceProperty = image;
......@@ -91,17 +73,21 @@ namespace Linphone.Controls
string previousText = Text;
Reset();
Text = previousText;
Message.Text = Text;
Message.Text = Text;
}
/// <summary>
/// Delegate for text changed event.
/// </summary>
public delegate void TextChangedEventHandler(object sender, string text);
/// <summary>
/// Handler for text changed event.
/// </summary>
public event TextChangedEventHandler TextChanged;
private void SendFile_Click(object sender, RoutedEventArgs e)
{
}
private void SendMessage_Click(object sender, RoutedEventArgs e)
{
SendMessageClick(this);
}
}
}
......@@ -712,4 +712,10 @@ To enjoy the best experience with Linphone WP8, we recommend that you use the SI
<data name="AdvancedSettingsTitle.Title" xml:space="preserve">
<value>ADVENCED SETTINGS</value>
</data>
<data name="Call.Label" xml:space="preserve">
<value>Call</value>
</data>
<data name="ChatMessageHint.PlaceholderText" xml:space="preserve">
<value>Enter your message</value>
</data>
</root>
\ No newline at end of file
......@@ -177,6 +177,136 @@
<!--#endregion-->
<!--#region ToggleButton -->
<Style x:Key="ToggleButtonStyle"
TargetType="ToggleButton">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="Height" Value="72" />
<Setter Property="IsTextScaleFactorEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.7" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--#endregion-->
<!--#region Layout-->
<Style x:Key="DigitViewGridStyle" TargetType="Grid">
<Setter Property="Height" Value="78.33" />
......
......@@ -6,21 +6,10 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:Linphone"
xmlns:controls="using:Linphone.Controls"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="TextStyle"
TargetType="TextBlock">
<Setter Property="FontSize"
Value="16" />
<Setter Property="FontFamily"
Value="{ThemeResource PhoneFontFamilySemiLight}" />
<Setter Property="FontWeight"
Value="ExtraLight"/>
</Style>
</Page.Resources>
<Grid x:Name="LayoutRoot" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
......@@ -30,7 +19,7 @@
<StackPanel Grid.Row="0" Margin="12,17,0,10">
<TextBlock
x:Name="ContactName"
Style="{StaticResource HeaderTextStyle}"
Style="{StaticResource StatusBarTextStyle}"
Margin="9,0,0,0" />
<Border x:Name="NewChat" BorderThickness="0,0,0,0">
......@@ -71,18 +60,22 @@
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer x:Name="MessagesScroll" Grid.Row="0">
<StackPanel
<StackPanel
x:Name="MessagesList"
Orientation="Vertical"
VerticalAlignment="Bottom">
<controls:TextBoxChatBubble x:Name="MessageBox"/>
</StackPanel>
VerticalAlignment="Bottom"/>
</ScrollViewer>
<TextBlock x:Name="RemoteComposing" Grid.Row="1" Visibility="Collapsed"/>
<controls:TextBoxChatBubble x:Name="MessageBox" Grid.Row="2" Margin="10"/>
<Border
x:Name="ProgressPopup"
Grid.Row="1"
......@@ -99,15 +92,9 @@
Text="" />
</StackPanel>
</Border>
<TextBlock
x:Name="RemoteComposing"
Visibility="Collapsed"
Grid.Row="1"/>
</Grid>
<CommandBar Grid.Row="2" VerticalAlignment="Bottom">
<AppBarButton Icon="Send" Click="send_Click_1"/>
<AppBarButton Icon="Back" Click="back_click"/>
<AppBarButton Icon="Phone" Label="Call" x:Uid="Call" Click="Call_Click"/>
</CommandBar>
</Grid>
......
......@@ -17,18 +17,10 @@ Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using Linphone.Model;
using System.Diagnostics;
using Linphone.Controls;
using System.ComponentModel;
using System.IO;
using System.Net.Http;
using System.Threading.Tasks;
using System.IO.IsolatedStorage;
using System.Net.Http.Headers;
using Windows.Storage;
using BelledonneCommunications.Linphone.Native;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml;
......@@ -37,77 +29,43 @@ using Windows.UI.Core;
namespace Linphone.Views
{
/// <summary>
/// Listener to let this view to be notified by LinphoneManager when a new message arrives.
/// </summary>
public interface MessageReceivedListener
{
/// <summary>
/// Callback called when a message is received.
/// </summary>
void MessageReceived(ChatMessage message);
/// <summary>
/// Returns the sip address of the current displayed conversation if possible
/// </summary>
string GetSipAddressAssociatedWithDisplayConversation();
}
/// <summary>
/// Listener to let this view to be notified by LinphoneManager when a composing is received.
/// </summary>
public interface ComposingReceivedListener
{
/// <summary>
/// Callback called when a composing is received.
/// </summary>
void ComposeReceived();
/// <summary>
/// Returns the sip address of the current displayed conversation if possible
/// </summary>
string GetSipAddressAssociatedWithDisplayConversation();
}
/// <summary>
/// Displays chat messages between two users.
/// </summary>
public partial class Chat : Page, ChatMessageListener, MessageReceivedListener, ComposingReceivedListener
{
private const int SENT_IMAGES_QUALITY = 50;
private HttpClient _httpPostClient { get; set; }
/// <summary>
/// SIP address linked to the current displayed chat.
/// </summary>
public Address sipAddress;
/// <summary>
/// ChatRoom used to send and receive messages.
/// </summary>
public ChatRoom chatRoom;
/// <summary>
/// Public constructor.
/// </summary>
public Chat()
{
this.InitializeComponent();
// BuildLocalizedApplicationBar();
//MessageBox.SendFileClick += send_file;
MessageBox.SendMessageClick += send_message;
}
/// <summary>
/// Method called when the page is displayed.
/// Check if the uri contains a sip address, if yes, it displays the matching chat history.
/// </summary>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
LinphoneManager.Instance.MessageListener = this;