Improvements to Node Autocomplete UI (#11663)

reddyashish · web-flow · commit 08ed01be830e · 2021-05-06T13:27:34.000-04:00
* Improvements to Node Autocomplete UI

* Some UI changes

* Adjust font size

* Add new close tab image and some UI adjustments

* update search text
diff --git a/src/DynamoCore/Properties/Resources.Designer.cs b/src/DynamoCore/Properties/Resources.Designer.cs
diff --git a/src/DynamoCore/Properties/Resources.en-US.resx b/src/DynamoCore/Properties/Resources.en-US.resx
@@ -591,7 +591,10 @@ value : bool = false</value>
     <value>Nothing is selected. href=NothingIsSelectedWarning.html</value>
   </data>
   <data name="SearchTextBlockText" xml:space="preserve">
-    <value>Search</value>
+    <value>Search Autocomplete Results</value>
+  </data>
+  <data name="Autocomplete" xml:space="preserve">
+    <value>Autocomplete</value>
   </data>
   <data name="WatermarkLabelText" xml:space="preserve">
     <value>Your code goes here</value>
diff --git a/src/DynamoCore/Properties/Resources.resx b/src/DynamoCore/Properties/Resources.resx
@@ -591,7 +591,7 @@ value : bool = false</value>
     <value>Nothing is selected. href=NothingIsSelectedWarning.html</value>
   </data>
   <data name="SearchTextBlockText" xml:space="preserve">
-    <value>Search</value>
+    <value>Search Autocomplete Results</value>
   </data>
   <data name="WatermarkLabelText" xml:space="preserve">
     <value>Your code goes here</value>
@@ -744,4 +744,7 @@ Parameter name: {0}</value>
   <data name="DuplicatedNewerPackage" xml:space="preserve">
     <value>A newer version of the package called {0} version {2} was found at {1} with version {3}. The newer version has been ignored.</value>
   </data>
+  <data name="Autocomplete" xml:space="preserve">
+    <value>Autocomplete</value>
+  </data>
 </root>
diff --git a/src/DynamoCoreWpf/Controls/NodeAutoCompleteSearchControl.xaml b/src/DynamoCoreWpf/Controls/NodeAutoCompleteSearchControl.xaml
@@ -39,11 +39,94 @@
 
     <Grid PreviewKeyDown="OnInCanvasSearchKeyDown">
         <Grid.RowDefinitions>
-            <RowDefinition Height="40" />
+            <RowDefinition Height="30" />
             <RowDefinition Height="*" />
+            <RowDefinition Height="40" />
         </Grid.RowDefinitions>
-        <Grid Name="SearchText"
+
+        <Grid Name="Header"
               Grid.Row="0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Border Background="{StaticResource autocompletionWindow}"
+                    Padding="0">
+                <Grid>
+                    <StackPanel Name="AutoCompletionHeader"
+                                Grid.ColumnSpan="1"
+                                Width="Auto"
+                                HorizontalAlignment="Center"
+                                Orientation="Horizontal">
+                        <TextBlock Text="{x:Static resx:Resources.Autocomplete}"
+                               TextWrapping="Wrap"
+                               Padding="4"
+                               Margin="80,0,0,0"
+                               Foreground="{StaticResource SearchTextBoxBackground}"
+                               TextAlignment="Center"
+                               FontSize="14">
+                        </TextBlock>
+                        <Button Name="CloseButton" Margin="50,0,5,0" BorderThickness="0"  Background="{StaticResource autocompletionWindow}">
+                            <Image Width="14" Height="14" HorizontalAlignment="Right" VerticalAlignment="Center">
+                                <Image.Style>
+                                    <Style TargetType="{x:Type Image}">
+                                        <Style.Triggers>
+                                            <Trigger Property="IsMouseOver" Value="False">
+                                                <Setter Property="Source"
+                                                            Value="/DynamoCoreWpf;component/UI/Images/whiteclosetab.png" />
+                                            </Trigger>
+                                            <Trigger Property="IsMouseOver" Value="True">
+                                                <Setter Property="Source"
+                                                            Value="/DynamoCoreWpf;component/UI/Images/whiteclosetab.png" />
+                                            </Trigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </Image.Style>
+                            </Image>
+                        </Button>
+                    </StackPanel>
+                </Grid>
+            </Border>
+        </Grid>
+        
+        <Border Opacity=".9"
+                Background="{StaticResource LibraryCommonBackground}"
+                Grid.Row="1"
+                Name="AutoCompleteCandidates"
+                MaxHeight="250">
+            <ListBox Name="MembersListBox"
+                     Background="Transparent"
+                     BorderBrush="Transparent"
+                     ItemContainerStyle="{StaticResource SearchMemberStyle}"
+                     ItemsSource="{Binding FilteredResults, NotifyOnTargetUpdated=True}"
+                     TargetUpdated="OnMembersListBoxUpdated"
+                     PreviewMouseWheel="OnMembersListBoxMouseWheel"
+                     Margin="-15,0,5,0"
+                     Visibility="Visible">
+                <ListBox.ItemTemplate>
+                    <DataTemplate>
+                        <ScrollViewer Template="{StaticResource InCanvasScrollViewerControlTemplate}"
+                                      Style="{StaticResource InCanvasScrollViewerStyle}"
+                                      CanContentScroll="True"
+                                      Width="250">
+                            <ContentPresenter ContentTemplate="{StaticResource MemberTemplate}" />
+                        </ScrollViewer>
+                    </DataTemplate>
+                </ListBox.ItemTemplate>
+            </ListBox>
+        </Border>
+
+        <Border Margin="-3,0,-3,0">
+            <Popup StaysOpen="True"
+                   AllowsTransparency="True"
+                   Placement="Right"
+                   x:Name="toolTipPopup">
+                <uicontrols:ToolTipWindow />
+            </Popup>
+        </Border>
+
+        <Grid Name="SearchText"
+              Background="{StaticResource LibraryCommonBackground}"
+              Grid.Row="2">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
@@ -53,7 +136,7 @@
                     BorderBrush="{StaticResource outerBorderSelection}"
                     BorderThickness="1"
                     Padding="5"
-                    Margin="1 3"
+                    Margin="10 7"
                     Grid.ColumnSpan="2">
                 <Grid>
                     <StackPanel Name="SearchIconAndTextBlockGrid"
@@ -62,7 +145,7 @@
                                 Orientation="Horizontal">
                         <Image x:Name="SearchIcon"
                                Width="18"
-                               Height="18"
+                               Height="14"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left">
                             <Image.Style>
@@ -82,15 +165,15 @@
                         </Image>
 
                         <TextBlock Name="SearchTextBlock"
-                                   FontSize="14"
+                                   FontSize="12"
                                    IsHitTestVisible="False"
                                    Foreground="{StaticResource DeafultSearchTextBlockText}"
                                    VerticalAlignment="Center"
                                    Visibility="{Binding Path=SearchText, 
                                                     Converter={StaticResource NonEmptyStringToCollapsedConverter}}"
                                    HorizontalAlignment="Center"
                                    Height="18"
-                                   Margin="9,0,0,0"
+                                   Margin="2,0,0,0"
                                    Text="{x:Static resx:Resources.SearchTextBlockText}" />
 
                     </StackPanel>
@@ -99,54 +182,17 @@
                              Foreground="{StaticResource SearchBoxBackgroundColor}"
                              Background="Transparent"
                              BorderThickness="0"
-                             FontSize="14"
+                             FontSize="12"
                              IsEnabled="True"
                              VerticalAlignment="Center"
                              Text="{Binding Path=SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              MinWidth="200"
                              CaretBrush="{StaticResource CommonSidebarTextColor}"
-                             Margin="26,0,0,-1"
+                             Margin="20,0,0,0"
                              TextChanged="OnSearchTextBoxTextChanged" />
                 </Grid>
             </Border>
         </Grid>
 
-        <Border Opacity=".9"
-                Background="{StaticResource LibraryCommonBackground}"
-                Margin="1,2,1,0"
-                Grid.Row="1"
-                Name="AutoCompleteCandidates"
-                MaxHeight="250">
-            <ListBox Name="MembersListBox"
-                     Background="Transparent"
-                     BorderBrush="Transparent"
-                     ItemContainerStyle="{StaticResource SearchMemberStyle}"
-                     ItemsSource="{Binding FilteredResults, NotifyOnTargetUpdated=True}"
-                     TargetUpdated="OnMembersListBoxUpdated"
-                     PreviewMouseWheel="OnMembersListBoxMouseWheel"
-                     Visibility="Visible">
-                <ListBox.ItemTemplate>
-                    <DataTemplate>
-                        <ScrollViewer Template="{StaticResource InCanvasScrollViewerControlTemplate}"
-                                      Style="{StaticResource InCanvasScrollViewerStyle}"
-                                      CanContentScroll="True"
-                                      Width="250">
-                            <ContentPresenter ContentTemplate="{StaticResource MemberTemplate}" />
-                        </ScrollViewer>
-                    </DataTemplate>
-                </ListBox.ItemTemplate>
-            </ListBox>
-        </Border>
-
-
-        <Border Margin="-3,0,-3,0">
-            <Popup StaysOpen="True"
-                   AllowsTransparency="True"
-                   Placement="Right"
-                   x:Name="toolTipPopup">
-                <uicontrols:ToolTipWindow />
-            </Popup>
-        </Border>
-
     </Grid>
 </UserControl>
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -663,6 +663,9 @@
   <ItemGroup>
     <Resource Include="UI\Images\closetab_normal.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="UI\Images\whiteclosetab.png" />
+  </ItemGroup>
   <ItemGroup>
     <Resource Include="UI\Images\closewindow_hover.png" />
   </ItemGroup>
diff --git a/src/DynamoCoreWpf/UI/Images/whiteclosetab.png b/src/DynamoCoreWpf/UI/Images/whiteclosetab.png
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
@@ -61,6 +61,8 @@
     <!-- Node colors in selected state -->
     <SolidColorBrush x:Key="outerBorderSelection" Color="#4192d9" />
 
+    <SolidColorBrush x:Key="autocompletionWindow" Color="#4192d9" />
+
     <!-- NodeLabel background color -->
     <SolidColorBrush x:Key="renamedLabelBackground"
                      Color="#FCDC95" />
