NodeAutocomplete UI fix (#12789)

* NodeAutocomplete UI fix * Update NodeAutoCompleteSearchControl.xaml * Set dynamic width to autocomplete window * Update NodeAutoCompleteSearchControl.xaml
DynamoDS · Apr 22, 2022 · 1454e9b · 1454e9b
1 parent 93735cc
commit 1454e9b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/src/DynamoCoreWpf/Controls/IncanvasSearchControl.xaml b/src/DynamoCoreWpf/Controls/IncanvasSearchControl.xaml
@@ -71,7 +71,7 @@
                                    DockPanel.Dock="Left"
                                    FontFamily="{StaticResource ArtifaktElementRegular}"
                                    FontSize="14"
-                                   Foreground="{StaticResource DeafultSearchTextBlockText}"
+                                   Foreground="{StaticResource DefaultSearchTextBlockText}"
                                    IsHitTestVisible="False"
                                    Text="{x:Static resx:Resources.SearchTextBlockText}"
                                    Visibility="{Binding Path=SearchText, Converter={StaticResource NonEmptyStringToCollapsedConverter}}" />
@@ -85,7 +85,7 @@
                              CaretBrush="{StaticResource CommonSidebarTextColor}"
                              FontFamily="{StaticResource ArtifaktElementRegular}"
                              FontSize="14"
-                             Foreground="{StaticResource DeafultSearchTextBlockText}"
+                             Foreground="{StaticResource DefaultSearchTextBlockText}"
                              IsEnabled="True"
                              Text="{Binding Path=SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                 </Grid>

diff --git a/src/DynamoCoreWpf/Controls/NodeAutoCompleteSearchControl.xaml b/src/DynamoCoreWpf/Controls/NodeAutoCompleteSearchControl.xaml
@@ -8,6 +8,7 @@
              xmlns:resx="clr-namespace:Dynamo.Properties;assembly=DynamoCore"
              mc:Ignorable="d"
              MinWidth="256"
+             MaxWidth="350"
              IsVisibleChanged="OnNodeAutoCompleteSearchControlVisibilityChanged">
     <UserControl.Resources>
         <ResourceDictionary>
@@ -64,7 +65,7 @@
                     <StackPanel Name="AutoCompletionHeader"
                                 Grid.ColumnSpan="1"
                                 Width="Auto"
-                                HorizontalAlignment="Center"
+                                HorizontalAlignment="Left"
                                 Orientation="Horizontal">
                         <TextBlock Text="{x:Static resx:Resources.Autocomplete}"
                                TextWrapping="Wrap"
@@ -114,21 +115,22 @@
                 Name="AutoCompleteCandidates"
                 MaxHeight="250">
             <ListBox Name="MembersListBox"
+                     HorizontalAlignment="Left"
                      Background="Transparent"
                      BorderBrush="Transparent"
                      ItemContainerStyle="{StaticResource SearchMemberStyle}"
                      ItemsSource="{Binding FilteredResults, NotifyOnTargetUpdated=True}"
                      TargetUpdated="OnMembersListBoxUpdated"
                      PreviewMouseWheel="OnMembersListBoxMouseWheel"
-                     Margin="-15,0,5,0"
+                     Margin="10,0,5,0"
                      Visibility="Visible">
                 <ListBox.ItemTemplate>
                     <DataTemplate>
-                        <ScrollViewer Template="{StaticResource InCanvasScrollViewerControlTemplate}"
+                            <ScrollViewer Template="{StaticResource InCanvasScrollViewerControlTemplate}"
                                       Style="{StaticResource InCanvasScrollViewerStyle}"
                                       CanContentScroll="True"
-                                      Width="250">
-                            <ContentPresenter ContentTemplate="{StaticResource MemberTemplate}" />
+                                      Width="{Binding Source={x:Static resx:Resources.Autocomplete}, Converter={StaticResource NodeAutocompleteWidthConverter}}">
+                                <ContentPresenter ContentTemplate="{StaticResource MemberTemplate}" />
                         </ScrollViewer>
                     </DataTemplate>
                 </ListBox.ItemTemplate>
@@ -187,11 +189,13 @@
                         <TextBlock Name="SearchTextBlock"
                                    FontSize="12"
                                    IsHitTestVisible="False"
-                                   Foreground="{StaticResource DeafultSearchTextBlockText}"
+                                   TextTrimming="CharacterEllipsis"
+                                   MaxWidth="250"
+                                   Foreground="{StaticResource DefaultSearchTextBlockText}"
                                    VerticalAlignment="Center"
                                    Visibility="{Binding Path=SearchText, 
                                                     Converter={StaticResource NonEmptyStringToCollapsedConverter}}"
-                                   HorizontalAlignment="Center"
+                                   HorizontalAlignment="Left"
                                    Height="18"
                                    Text="{x:Static resx:Resources.AutocompleteSearchTextBlockText}" />
 

diff --git a/src/DynamoCoreWpf/UI/Converters.cs b/src/DynamoCoreWpf/UI/Converters.cs
@@ -1233,6 +1233,26 @@ public object ConvertBack(object value, Type targetType, object parameter, Syste
         }
     }
 
+    public class NodeAutocompleteWidthConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter,
+          CultureInfo culture)
+        {
+            if (value is string && value.ToString().Length > 15)
+            {
+                return 350;
+            }
+
+            return 250;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter,
+          CultureInfo culture)
+        {
+            return null;
+        }
+    }
+
     public class BoolToFullscreenWatchVisibilityConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
@@ -129,7 +129,7 @@
 
     <!--  Library text colors  -->
     <SolidColorBrush x:Key="MemberButtonText" Color="#aaaaaa" />
-    <SolidColorBrush x:Key="DeafultSearchTextBlockText" Color="#C0C0C0" />
+    <SolidColorBrush x:Key="DefaultSearchTextBlockText" Color="#C0C0C0" />
     <SolidColorBrush x:Key="CommonSidebarTextColor" Color="#CCCCCC" />
     <SolidColorBrush x:Key="SearchBoxBackgroundColor" Color="#231F20" />
     <SolidColorBrush x:Key="NestedMemberTextColor" Color="#989898" />

diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml
@@ -78,6 +78,7 @@
     <controls:PortTypeToGridColumnConverter x:Key="PortTypeToGridColumnConverter" />
     <controls:PortTypeToClipConverter x:Key="PortTypeToClipConverter" />
     <controls:ConsoleHeightConverter x:Key="ConsoleHeightConverter" />
+    <controls:NodeAutocompleteWidthConverter x:Key="NodeAutocompleteWidthConverter" />
     <controls:BoolToFullscreenWatchVisibilityConverter x:Key="BoolToFullscreenWatchVisibilityConverter" />
     <controls:BoolToCanvasCursorConverter x:Key="BoolToCanvasCursorConverter" />
     <controls:LacingToVisibilityConverter x:Key="LacingToVisibilityConverter" />