Improvements to Node Autocomplete UI

[reddyashish]

Purpose

This PR is to make Node Autocomplete UI match the Dynamo Visual Refresh styling.
Task: https://jira.autodesk.com/browse/DYN-3359

Things to do:

1. We need a new more information icon as we don't have it being used anywhere else
2. Add a new task for implementing additional features

Declarations

Check these if you believe they are true

• The codebase is in a better state after this PR
• Is documented according to the standards
• The level of testing this PR includes is appropriate
• User facing strings, if any, are extracted into *.resx files
• All tests pass using the self-service CI.
• Snapshot of UI changes, if any.
• Changes to the API follow Semantic Versioning and are documented in the API Changes document.
• This PR modifies some build requirements and the readme is updated

Reviewers

@QilongTang @mjkkirschner @zeusongit @Amoursol

[Amoursol]

Hi @reddyashish - Looking pretty awesome so far! A few comments on what can be improved:

1. It looks like the Search icon in the bar is truncated at the top and bottom (Flattened off). We probably need a little more breathing room here? [Orange]
2. Looks like the search text is also not centre justified? Would it look better if so? Or maybe center justified and a little smaller? [Green]
3. Looks like we have a lot of white space (Grey in this case) on the left hand margin of the results, and no white space (Grey space) on the right. Can we shift the results more to the left, and build in the same border / white space for the results? [Lilac]
4. Can we make the "X" in the upper right white please? And also the same overall size as the "Autocomplete" header text? Also confirm they are justified the same. [Pink]

@Jingyi-Wen any additional thoughts here?

[Jingyi-Wen]

Looking good! I agree with @Amoursol 's comments above, also covered everything!

[reddyashish]

@Amoursol I have made some changes based on your comments. This is the current look:

1. Addressed the search icon issue.
2. Made the search text little smaller and center-spaced(vertically).
3. Moved the results to the left and aligned it with other components.
4. Regarding the 'X' icon, I am actually using the image from here:https://github.com/DynamoDS/Dynamo/blob/master/src/DynamoCoreWpf/UI/Images/closetab_normal.png, which is used in other Dynamo locations. We do not have a white close icon as of now. What do you think?

[Amoursol]

1. Addressed the search icon issue.
2. Made the search text little smaller and center-spaced(vertically).
3. Moved the results to the left and aligned it with other components.
4. Regarding the 'X' icon, I am actually using the image from here:https://github.com/DynamoDS/Dynamo/blob/master/src/DynamoCoreWpf/UI/Images/closetab_normal.png, which is used in other Dynamo locations. We do not have a white close icon as of now. What do you think?

Awesome, thank you @reddyashish! Search icon and bar text looks great now.

Would it be possible to give a little more breathing room (i.e. grey/white space) for both sides of the results? It's very close, I'm thinking only a few pixels here.

@Jingyi-Wen are you able to provide a white cross Icon for this work? We don't currently have one 😊

[Jingyi-Wen]

Here's a white close icon (16*16 pixels, same as current one)

[QilongTang]

You guys rock! I will take a look tomorrow

[Amoursol]

You guys rock! I will take a look tomorrow

Make sure you enjoy your vacay first man 🙌

[reddyashish]

@Amoursol @Jingyi-Wen Addressed the suggested changes. Here is the current look:

Let me know if you think of any changes.

[QilongTang]

@Amoursol @Jingyi-Wen @reddyashish I found Search all nodes misleading in this case because what it really does is searching through all autocomplete suggestions, anyway we can capture that?

[reddyashish]

Yes, I agree. Something like "Search Node Results"?

[Jingyi-Wen]

Agreed! I'd suggest "Search Autocomplete Results", or just "Search" would work

[QilongTang]

@reddyashish @Jingyi-Wen Nice, I vote for Search Autocomplete Results so we can be specific. Otherthan that, LGTM

[Amoursol]

LGTM with the 'Search Autocomplete Results' in the search bar amendment @reddyashish !

[reddyashish]

Yes, changed it.

Merging this PR.