UI: enable add contact button and add ellipsis for contacts overflow

- adds contact button functionality
- adds ellipsis for any overflow of the contact names
- removes extra columns on the message send textbox
  on the MessagePage

Change-Id: Ib20a20f52cfdfae933d67a6726ed525db8ec0604
diff --git a/MessageTextPage.xaml b/MessageTextPage.xaml
index 9d9db36..791850b 100644
--- a/MessageTextPage.xaml
+++ b/MessageTextPage.xaml
@@ -131,7 +131,7 @@
 

         </StackPanel>

         <ScrollViewer x:Name="_scrollView_"

-                       BorderThickness="0,1,0,1"

+                       BorderThickness="0,1,0,0"

                        BorderBrush="LightBlue"

                        Grid.Row="1">

             <StackPanel>

@@ -149,12 +149,9 @@
               Padding="0"

               Background="#FFF2F2F2">

             <Grid.ColumnDefinitions>

-                <ColumnDefinition Width="30" />

                 <ColumnDefinition Width="*" />

-                <ColumnDefinition Width="30" />

             </Grid.ColumnDefinitions>

             <TextBox x:Name="_messageTextBox_"

-                     Grid.Column="1"

                      HorizontalAlignment="Stretch"

                      TextWrapping="NoWrap"

                      VerticalAlignment="Center"

diff --git a/SmartPanel.xaml b/SmartPanel.xaml
index 2dcc436..4431fcc 100644
--- a/SmartPanel.xaml
+++ b/SmartPanel.xaml
@@ -1,6 +1,7 @@
 <!-- **********************************************************************

 * 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    *

@@ -25,10 +26,97 @@
       mc:Ignorable="d">

 

     <Page.Resources>

+        <Style x:Key="addContactTextBoxStyle"

+           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="BorderBrush" Value="Red"/>

+            <Setter Property="BorderThickness" Value="0"/>

+            <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,4"/>

+            <Setter Property="Template">

+                <Setter.Value>

+                    <ControlTemplate TargetType="TextBox">

+                        <Grid>

+                            <Grid.Resources>

+                                <Style x:Name="DeleteButtonStyle" TargetType="Button">

+                                    <Setter Property="Template">

+                                        <Setter.Value>

+                                            <ControlTemplate TargetType="Button">

+                                                <Grid x:Name="ButtonLayoutGrid"

+                                                  BorderThickness="5"

+                                                  Background="Yellow">

+                                                </Grid>

+                                            </ControlTemplate>

+                                        </Setter.Value>

+                                    </Setter>

+                                </Style>

+                            </Grid.Resources>

+                            <Grid.ColumnDefinitions>

+                                <ColumnDefinition Width="*"/>

+                                <ColumnDefinition Width="Auto"/>

+                            </Grid.ColumnDefinitions>

+                            <Grid.RowDefinitions>

+                                <RowDefinition Height="Auto"/>

+                                <RowDefinition Height="*"/>

+                            </Grid.RowDefinitions>

+                            <Border x:Name="BackgroundElement"

+                                    Grid.Row="1"

+                                    Background="{TemplateBinding Background}"

+                                    Margin="5"

+                                    Opacity="1"

+                                    Grid.ColumnSpan="2"

+                                    Grid.RowSpan="1"/>

+                            <ScrollViewer x:Name="ContentElement"

+                      Grid.Row="1"

+                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"

+                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"

+                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"

+                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"

+                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"

+                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"

+                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"

+                      Margin="5"

+                      Padding="{TemplateBinding Padding}"

+                      IsTabStop="False"

+                      AutomationProperties.AccessibilityView="Raw"

+                      ZoomMode="Disabled"/>

+

+                            <Button x:Name="DeleteButton"

+                                    Background="Transparent"

+                                    Grid.Row="1"

+                                    FontFamily="Segoe MDL2 Assets"

+                                    Foreground="LightBlue"

+                                    Content="&#xE1E2;"

+                                    Click="_ringTxtBx__Click"

+                                    BorderThickness="{TemplateBinding BorderThickness}"

+                                    Margin="{ThemeResource HelperButtonThemePadding}"

+                                    IsTabStop="False"

+                                    Grid.Column="1"

+                                    Visibility="Visible"

+                                    FontSize="20"

+                                    MinWidth="34"

+                                    VerticalAlignment="Stretch"/>

+                        </Grid>

+                    </ControlTemplate>

+                </Setter.Value>

+            </Setter>

+        </Style>

         <!-- template for contacts. -->

         <DataTemplate x:Key="ContactTemplate"

                       x:DataType="local:Contact">

             <Grid>

+                <Grid.ColumnDefinitions>

+                    <ColumnDefinition Width="310"/>

+                </Grid.ColumnDefinitions>

                 <Grid.RowDefinitions>

                     <RowDefinition Height="60"/>

                     <!-- use the height of _contactBar_ to make it visible or collapsed. -->

@@ -73,9 +161,10 @@
                             <RowDefinition Height="30"/>

                         </Grid.RowDefinitions>

                         <!-- name of the contact. -->

-                        <TextBlock x:Name="_contactName_"

-                                   Grid.Row="0"

-                               Text="{x:Bind name_}">

+                        <TextBlock  x:Name="_contactName_"

+                                    Grid.Row="0"

+                                    Text="{x:Bind name_}"

+                                    TextTrimming="CharacterEllipsis">

                         </TextBlock>

                         <!-- call status. REFACTO : REMOVE CODE BELOW -->

                         <!--<StackPanel MaxWidth="240"

@@ -349,7 +438,7 @@
                         HorizontalAlignment="Center"

                         Content="&#xE948;"

                         Click="_addAccountBtn__Click"

-                        Style="{StaticResource ButtonStyle2}"/>

+                        Style="{StaticResource ButtonStyle6}"/>

             </Grid>

             <!-- account creation menu. -->

             <Grid x:Name="_accountCreationMenuGrid_"

@@ -455,7 +544,7 @@
                          VerticalAlignment="Center"

                          Width="320"

                          TextWrapping="Wrap"

-                         Style="{StaticResource TextBoxStyle1}"

+                         Style="{StaticResource addContactTextBoxStyle}"

                          KeyDown="_ringTxtBx__KeyDown"

                          Text=""/>

                 <ListBox x:Name="_smartList_"

diff --git a/SmartPanel.xaml.cpp b/SmartPanel.xaml.cpp
index 13d7af7..a61c161 100644
--- a/SmartPanel.xaml.cpp
+++ b/SmartPanel.xaml.cpp
@@ -293,6 +293,12 @@
     }

 }

 

+void RingClientUWP::Views::SmartPanel::_ringTxtBx__Click(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e)

+{

+    ContactsViewModel::instance->addNewContact(_ringTxtBx_->Text, _ringTxtBx_->Text);

+    _ringTxtBx_->Text = "";

+}

+

 // REFACTO : change the name IncomingCall if used with OutGoingCall too.

 void RingClientUWP::Views::SmartPanel::_rejectIncomingCallBtn__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)

 {

diff --git a/SmartPanel.xaml.h b/SmartPanel.xaml.h
index 121dd66..58c9f05 100644
--- a/SmartPanel.xaml.h
+++ b/SmartPanel.xaml.h
@@ -54,6 +54,7 @@
     void _smartList__SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);

     void _accountList__SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e);

     void _ringTxtBx__KeyDown(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);

+    void _ringTxtBx__Click(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs^ e);

     void _rejectIncomingCallBtn__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

     void _acceptIncomingCallBtn__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

     void _callContact__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

diff --git a/Styles.xaml b/Styles.xaml
index c0dafea..d010259 100644
--- a/Styles.xaml
+++ b/Styles.xaml
@@ -141,6 +141,19 @@
         <Setter Property="Background"

             Value="Transparent"/>

     </Style>

+    <Style x:Key="ButtonStyle6"

+        TargetType="Button">

+        <Setter Property="Width"

+            Value="320"/>

+        <Setter Property="Height"

+            Value="30"/>

+        <Setter Property="FontFamily"

+            Value="Segoe MDL2 Assets"/>

+        <Setter Property="Foreground"

+            Value="White"/>

+        <Setter Property="Background"

+            Value="Transparent"/>

+    </Style>

     <Style x:Key="ToggleButtonStyle1"

            TargetType="ToggleButton">

         <Setter Property="Width"

@@ -154,89 +167,6 @@
         <Setter Property="Background"

                 Value="Transparent"/>

     </Style>

-    <Style x:Key="TextBoxStyle1"

-           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="BorderBrush" Value="Red"/>

-        <Setter Property="BorderThickness" Value="0"/>

-        <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,4"/>

-        <Setter Property="Template">

-            <Setter.Value>

-                <ControlTemplate TargetType="TextBox">

-                    <Grid>

-                        <Grid.Resources>

-                            <Style x:Name="DeleteButtonStyle" TargetType="Button">

-                                <Setter Property="Template">

-                                    <Setter.Value>

-                                        <ControlTemplate TargetType="Button">

-                                            <Grid x:Name="ButtonLayoutGrid"

-                                                  BorderThickness="5"

-                                                  Background="Yellow">

-                                            </Grid>

-                                        </ControlTemplate>

-                                    </Setter.Value>

-                                </Setter>

-                            </Style>

-                        </Grid.Resources>

-                        <Grid.ColumnDefinitions>

-                            <ColumnDefinition Width="*"/>

-                            <ColumnDefinition Width="Auto"/>

-                        </Grid.ColumnDefinitions>

-                        <Grid.RowDefinitions>

-                            <RowDefinition Height="Auto"/>

-                            <RowDefinition Height="*"/>

-                        </Grid.RowDefinitions>

-                        <Border x:Name="BackgroundElement"

-                                    Grid.Row="1"

-                                    Background="{TemplateBinding Background}"

-                                    Margin="5"

-                                    Opacity="1"

-                                    Grid.ColumnSpan="2"

-                                    Grid.RowSpan="1"/>

-                        <ScrollViewer x:Name="ContentElement"

-                      Grid.Row="1"

-                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"

-                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"

-                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"

-                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"

-                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"

-                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"

-                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"

-                      Margin="5"

-                      Padding="{TemplateBinding Padding}"

-                      IsTabStop="False"

-                      AutomationProperties.AccessibilityView="Raw"

-                      ZoomMode="Disabled"/>

-

-                        <Button x:Name="DeleteButton"

-                                    Background="Transparent"

-                                    Grid.Row="1"

-                                    FontFamily="Segoe MDL2 Assets"

-                                    Foreground="LightBlue"

-                                    Content="&#xE102;"

-                                    BorderThickness="{TemplateBinding BorderThickness}"

-                                    Margin="{ThemeResource HelperButtonThemePadding}"

-                                    IsTabStop="False"

-                                    Grid.Column="1"

-                                    Visibility="Visible"

-                                    FontSize="{TemplateBinding FontSize}"

-                                    MinWidth="34"

-                                    VerticalAlignment="Stretch"/>

-                    </Grid>

-                </ControlTemplate>

-            </Setter.Value>

-        </Setter>

-    </Style>

     <Style x:Key="TextBoxStyle2"

            TargetType="TextBox">

         <Setter Property="IsReadOnly" Value="True"/>