feat: change EmailsInputControl

References: Eppie-io#382
al-kau · Nov 4, 2024 · 0ec7497 · 0ec7497
1 parent 9c74518
commit 0ec7497
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 29 deletions.
diff --git a/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.Shared/Eppie.App.UI.Shared.projitems b/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.Shared/Eppie.App.UI.Shared.projitems
@@ -35,9 +35,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\EmailProvidersListControl.xaml.cs">
       <DependentUpon>EmailProvidersListControl.xaml</DependentUpon>
     </Compile>
-    <Compile Include="$(MSBuildThisFileDirectory)Controls\EmailsInputControl.xaml.cs">
-      <DependentUpon>EmailsInputControl.xaml</DependentUpon>
-    </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\EmailsInputControl.xaml.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\ErrorControl.xaml.cs">
       <DependentUpon>ErrorControl.xaml</DependentUpon>
     </Compile>
@@ -99,10 +97,6 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="$(MSBuildThisFileDirectory)Controls\EmailsInputControl.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Controls\ErrorControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

diff --git a/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.UWP/Controls/EmailsInputControl.xaml b/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.UWP/Controls/EmailsInputControl.xaml
@@ -0,0 +1,79 @@
+<UserControl x:Class="Tuvi.App.Shared.Controls.EmailsInputControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:viewmodels="using:Tuvi.App.ViewModels"
+             d:DesignHeight="300"
+             d:DesignWidth="400"
+             mc:Ignorable="d">
+
+    <UserControl.Resources>
+
+        <DataTemplate x:Key="SuggestContactItemTemplate" x:DataType="viewmodels:ContactItem">
+            <Grid Padding="4">
+                <Grid.RowDefinitions>
+                    <RowDefinition />
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="8" />
+                    <ColumnDefinition />
+                </Grid.ColumnDefinitions>
+
+                <PersonPicture Grid.RowSpan="2"
+                               Width="48"
+                               Height="48"
+                               DisplayName="{x:Bind FullName, Mode=OneWay}"
+                               ProfilePicture="{x:Bind AvatarInfo, Mode=OneWay, Converter={StaticResource ImageInfoToBitmapConverter}}" />
+
+                <TextBlock Grid.Column="2"
+                           FontSize="16"
+                           Text="{x:Bind FullName, Mode=OneWay}" />
+
+                <TextBlock Grid.Row="1"
+                           Grid.Column="2"
+                           FontSize="12"
+                           Opacity="0.6"
+                           Text="{x:Bind Email.Address, Mode=OneWay}" />
+
+            </Grid>
+        </DataTemplate>
+
+        <DataTemplate x:Key="TokenContactItemTemplate" x:DataType="viewmodels:ContactItem">
+            <Grid ToolTipService.ToolTip="{x:Bind Email.Address, Mode=OneWay}">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="8" />
+                    <ColumnDefinition />
+                </Grid.ColumnDefinitions>
+
+                <PersonPicture Grid.RowSpan="2"
+                               Width="24"
+                               Height="24"
+                               Margin="0,4,0,0"
+                               DisplayName="{x:Bind FullName, Mode=OneWay}"
+                               ProfilePicture="{x:Bind AvatarInfo, Mode=OneWay, Converter={StaticResource ImageInfoToBitmapConverter}}" />
+
+                <TextBlock Grid.Column="2"
+                           VerticalAlignment="Center"
+                           Text="{x:Bind DisplayName, Mode=OneWay}" />
+
+            </Grid>
+        </DataTemplate>
+
+    </UserControl.Resources>
+
+    <Grid>
+
+        <!--  Microsoft.Toolkit.Uwp.UI.Controls is deprecated try use CommunityToolkit.Uwp.Controls.TokenizingTextBox.  -->
+        <controls:TokenizingTextBox ItemsSource="{x:Bind SelectedContacts, Mode=OneWay}"
+                                    SuggestedItemTemplate="{StaticResource SuggestContactItemTemplate}"
+                                    TextChanged="SuggestBox_TextChanged"
+                                    TokenDelimiter=";"
+                                    TokenItemAdding="SuggestBox_TokenItemAdding"
+                                    TokenItemTemplate="{StaticResource TokenContactItemTemplate}" />
+    </Grid>
+</UserControl>
diff --git a/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.UWP/Eppie.App.UI.UWP.csproj b/source/Eppie.App/Eppie.App.UI/Eppie.App.UI.UWP/Eppie.App.UI.UWP.csproj
@@ -126,6 +126,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\EmailsInputControl.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Controls\MessageControl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

diff --git a/...I.Shared/Controls/EmailsInputControl.xaml → ...p.UI.Uno/Controls/EmailsInputControl.xaml b/...I.Shared/Controls/EmailsInputControl.xaml → ...p.UI.Uno/Controls/EmailsInputControl.xaml
@@ -3,13 +3,10 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:not_win="http://uno.ui/not_win"
-             xmlns:uwp_toolkit_controls="http://uno.ui/uwp#using:Microsoft.Toolkit.Uwp.UI.Controls"
              xmlns:viewmodels="using:Tuvi.App.ViewModels"
-             xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              d:DesignHeight="300"
              d:DesignWidth="400"
-             mc:Ignorable="d not_win uwp_toolkit_controls">
+             mc:Ignorable="d">
 
     <UserControl.Resources>
 
@@ -70,27 +67,11 @@
 
     <Grid>
 
-        <win:Grid>
-
-            <!--
-                Now it's off.
-                Use CommunityToolkit.Uwp.Controls.TokenizingTextBox and CommunityToolkit.WinUI.Controls.TokenizingTextBox
-                look at: https://platform.uno/docs/articles/platform-specific-xaml.html
-                look at: https://github.com/unoplatform/uno/discussions/12009
-            -->
-            <uwp_toolkit_controls:TokenizingTextBox ItemsSource="{x:Bind SelectedContacts, Mode=OneWay}"
-                                                    SuggestedItemTemplate="{StaticResource SuggestContactItemTemplate}"
-                                                    TextChanged="SuggestBox_TextChanged"
-                                                    TokenDelimiter=";"
-                                                    TokenItemAdding="SuggestBox_TokenItemAdding"
-                                                    TokenItemTemplate="{StaticResource TokenContactItemTemplate}" />
-        </win:Grid>
         <!--  TokenizingTextBox is not available in Uno (is only available in UWP)  -->
         <!--  TODO: Replace with TokenizingTextBox or similar control in future  -->
+        <!--  WinUI try use CommunityToolkit.WinUI.Controls.TokenizingTextBox  -->
         <!--  TVM-373  -->
-        <not_win:Grid>
-            <TextBox IsSpellCheckEnabled="False" Text="{x:Bind SelectedContactsText, Mode=TwoWay}" />
-        </not_win:Grid>
+        <TextBox IsSpellCheckEnabled="False" Text="{x:Bind SelectedContactsText, Mode=TwoWay}" />
 
     </Grid>
 </UserControl>