From 1b919b9fae086d8ef3df9e32a3935d81edb2afdf Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 15 Dec 2022 20:45:51 -0600 Subject: [PATCH 1/4] Created new SearchBox class with button to clear the search. --- Source/Editor/GUI/Input/SearchBox.cs | 50 ++++++++++++++++++++++++ Source/Editor/Windows/ContentWindow.cs | 5 +-- Source/Editor/Windows/OutputLogWindow.cs | 4 +- Source/Editor/Windows/SceneTreeWindow.cs | 4 +- Source/Editor/Windows/ToolboxWindow.cs | 4 +- 5 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 Source/Editor/GUI/Input/SearchBox.cs diff --git a/Source/Editor/GUI/Input/SearchBox.cs b/Source/Editor/GUI/Input/SearchBox.cs new file mode 100644 index 000000000..485c7f99a --- /dev/null +++ b/Source/Editor/GUI/Input/SearchBox.cs @@ -0,0 +1,50 @@ +using FlaxEngine.GUI; + +namespace FlaxEditor.GUI.Input +{ + /// + /// Search box control which can gather text search input from the user. + /// + public class SearchBox : TextBox + { + /// + /// A button that clears the search bar. + /// + public Button ClearSearchButton { get; } + + /// + /// Init search box + /// + public SearchBox() + : this(false, 0, 0) + { + } + + /// + /// Init search box + /// + public SearchBox(bool isMultiline, float x, float y, float width = 120) + : base(isMultiline, x, y, width) + { + WatermarkText = "Search..."; + + ClearSearchButton = new Button + { + Parent = this, + Width = 15.0f, + Height = 14.0f, + AnchorPreset = AnchorPresets.TopRight, + Text = "X", + TooltipText = "Cancel Search.", + BackgroundColor = Style.Current.TextBoxBackground, + BorderColor = Style.Current.TextBoxBackground, + Visible = false, + }; + ClearSearchButton.LocalY += 2; + ClearSearchButton.LocalX -= 2; + ClearSearchButton.Clicked += Clear; + + TextChanged += () => ClearSearchButton.Visible = !string.IsNullOrEmpty(Text); + } + } +} diff --git a/Source/Editor/Windows/ContentWindow.cs b/Source/Editor/Windows/ContentWindow.cs index 22808a1f1..703dc8c81 100644 --- a/Source/Editor/Windows/ContentWindow.cs +++ b/Source/Editor/Windows/ContentWindow.cs @@ -113,10 +113,9 @@ namespace FlaxEditor.Windows IsScrollable = false, Offsets = new Margin(0, 0, 0, 18 + 6), }; - _foldersSearchBox = new TextBox + _foldersSearchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, - WatermarkText = "Search...", Parent = headerPanel, Bounds = new Rectangle(4, 4, headerPanel.Width - 8, 18), }; @@ -149,7 +148,7 @@ namespace FlaxEditor.Windows Parent = _split.Panel2, }; const float viewDropdownWidth = 50.0f; - _itemsSearchBox = new TextBox + _itemsSearchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, WatermarkText = "Search...", diff --git a/Source/Editor/Windows/OutputLogWindow.cs b/Source/Editor/Windows/OutputLogWindow.cs index c9f3ac6e2..22989124f 100644 --- a/Source/Editor/Windows/OutputLogWindow.cs +++ b/Source/Editor/Windows/OutputLogWindow.cs @@ -7,6 +7,7 @@ using System.Text; using System.Text.RegularExpressions; using System.Xml; using FlaxEditor.GUI.ContextMenu; +using FlaxEditor.GUI.Input; using FlaxEditor.Options; using FlaxEngine; using FlaxEngine.GUI; @@ -157,9 +158,8 @@ namespace FlaxEditor.Windows Parent = this, }; _viewDropdown.Clicked += OnViewButtonClicked; - _searchBox = new TextBox(false, _viewDropdown.Right + 2, 2, Width - _viewDropdown.Right - 2 - _scrollSize) + _searchBox = new SearchBox(false, _viewDropdown.Right + 2, 2, Width - _viewDropdown.Right - 2 - _scrollSize) { - WatermarkText = "Search...", Parent = this, }; _searchBox.TextChanged += Refresh; diff --git a/Source/Editor/Windows/SceneTreeWindow.cs b/Source/Editor/Windows/SceneTreeWindow.cs index 8fd6e33ee..28ab83ff5 100644 --- a/Source/Editor/Windows/SceneTreeWindow.cs +++ b/Source/Editor/Windows/SceneTreeWindow.cs @@ -6,6 +6,7 @@ using FlaxEditor.Gizmo; using FlaxEditor.Content; using FlaxEditor.GUI.Tree; using FlaxEditor.GUI.Drag; +using FlaxEditor.GUI.Input; using FlaxEditor.SceneGraph; using FlaxEditor.SceneGraph.GUI; using FlaxEditor.Scripting; @@ -49,10 +50,9 @@ namespace FlaxEditor.Windows IsScrollable = false, Offsets = new Margin(0, 0, 0, 18 + 6), }; - _searchBox = new TextBox + _searchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, - WatermarkText = "Search...", Parent = headerPanel, Bounds = new Rectangle(4, 4, headerPanel.Width - 8, 18), }; diff --git a/Source/Editor/Windows/ToolboxWindow.cs b/Source/Editor/Windows/ToolboxWindow.cs index ff03d8e0d..6c1b3d9cc 100644 --- a/Source/Editor/Windows/ToolboxWindow.cs +++ b/Source/Editor/Windows/ToolboxWindow.cs @@ -2,6 +2,7 @@ using System; using System.Collections.Generic; +using FlaxEditor.GUI.Input; using FlaxEditor.GUI.Tabs; using FlaxEditor.GUI.Tree; using FlaxEditor.Scripting; @@ -130,10 +131,9 @@ namespace FlaxEditor.Windows }; _groupSearch = CreateGroupWithList(_actorGroups, "Search", 26); - _searchBox = new TextBox + _searchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchTop, - WatermarkText = "Search...", Parent = _groupSearch.Parent.Parent, Bounds = new Rectangle(4, 4, _actorGroups.Width - 8, 18), }; From 1c85b30e9fb3fa1aede43e2bfabb686ea131629f Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 15 Dec 2022 20:53:47 -0600 Subject: [PATCH 2/4] Change color of button on hover. --- Source/Editor/GUI/Input/SearchBox.cs | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/Source/Editor/GUI/Input/SearchBox.cs b/Source/Editor/GUI/Input/SearchBox.cs index 485c7f99a..04ae0c2d5 100644 --- a/Source/Editor/GUI/Input/SearchBox.cs +++ b/Source/Editor/GUI/Input/SearchBox.cs @@ -1,3 +1,4 @@ +using FlaxEngine; using FlaxEngine.GUI; namespace FlaxEditor.GUI.Input @@ -11,6 +12,8 @@ namespace FlaxEditor.GUI.Input /// A button that clears the search bar. /// public Button ClearSearchButton { get; } + + private Color _defaultButtonTextColor; /// /// Init search box @@ -36,15 +39,28 @@ namespace FlaxEditor.GUI.Input AnchorPreset = AnchorPresets.TopRight, Text = "X", TooltipText = "Cancel Search.", - BackgroundColor = Style.Current.TextBoxBackground, - BorderColor = Style.Current.TextBoxBackground, + BackgroundColor = Color.Transparent, + BorderColor = Color.Transparent, + BackgroundColorHighlighted = Color.Transparent, + BorderColorHighlighted = Color.Transparent, + BackgroundColorSelected = Color.Transparent, + BorderColorSelected = Color.Transparent, Visible = false, }; ClearSearchButton.LocalY += 2; ClearSearchButton.LocalX -= 2; ClearSearchButton.Clicked += Clear; + _defaultButtonTextColor = ClearSearchButton.TextColor; TextChanged += () => ClearSearchButton.Visible = !string.IsNullOrEmpty(Text); } + + /// + public override void Update(float deltaTime) + { + base.Update(deltaTime); + + ClearSearchButton.TextColor = ClearSearchButton.IsMouseOver ? Style.Current.ForegroundGrey : _defaultButtonTextColor; + } } } From e725533ba7cd5679810dbe13189b9b3e5dabe843 Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 15 Dec 2022 21:18:49 -0600 Subject: [PATCH 3/4] Changed all search boxes to new class. --- Source/Editor/GUI/ItemsListContextMenu.cs | 4 ++-- Source/Editor/Surface/ContextMenu/VisjectCM.cs | 4 ++-- Source/Editor/Utilities/Utils.cs | 4 ++-- Source/Editor/Windows/Assets/PrefabWindow.cs | 4 ++-- Source/Editor/Windows/ContentWindow.cs | 1 - Source/Editor/Windows/Search/ContentSearchWindow.cs | 4 ++-- 6 files changed, 10 insertions(+), 11 deletions(-) diff --git a/Source/Editor/GUI/ItemsListContextMenu.cs b/Source/Editor/GUI/ItemsListContextMenu.cs index 77ee9af76..b761fa989 100644 --- a/Source/Editor/GUI/ItemsListContextMenu.cs +++ b/Source/Editor/GUI/ItemsListContextMenu.cs @@ -3,6 +3,7 @@ using System; using System.Collections.Generic; using FlaxEditor.GUI.ContextMenu; +using FlaxEditor.GUI.Input; using FlaxEditor.Utilities; using FlaxEngine; using FlaxEngine.GUI; @@ -204,11 +205,10 @@ namespace FlaxEditor.GUI Size = new Float2(width, height); // Search box - _searchBox = new TextBox(false, 1, 1) + _searchBox = new SearchBox(false, 1, 1) { Parent = this, Width = Width - 3, - WatermarkText = "Search...", }; _searchBox.TextChanged += OnSearchFilterChanged; diff --git a/Source/Editor/Surface/ContextMenu/VisjectCM.cs b/Source/Editor/Surface/ContextMenu/VisjectCM.cs index 984e3e520..5057e4445 100644 --- a/Source/Editor/Surface/ContextMenu/VisjectCM.cs +++ b/Source/Editor/Surface/ContextMenu/VisjectCM.cs @@ -4,6 +4,7 @@ using System; using System.Collections.Generic; using System.Linq; using FlaxEditor.GUI.ContextMenu; +using FlaxEditor.GUI.Input; using FlaxEditor.Scripting; using FlaxEngine; using FlaxEngine.GUI; @@ -128,10 +129,9 @@ namespace FlaxEditor.Surface.ContextMenu Size = new Float2(320, 220); // Search box - _searchBox = new TextBox(false, 1, 1) + _searchBox = new SearchBox(false, 1, 1) { Width = Width - 3, - WatermarkText = "Search...", Parent = this }; _searchBox.TextChanged += OnSearchFilterChanged; diff --git a/Source/Editor/Utilities/Utils.cs b/Source/Editor/Utilities/Utils.cs index 74ffb721b..ea7f44efc 100644 --- a/Source/Editor/Utilities/Utils.cs +++ b/Source/Editor/Utilities/Utils.cs @@ -14,6 +14,7 @@ using System.Reflection; using System.Runtime.InteropServices; using System.Text; using FlaxEditor.GUI.ContextMenu; +using FlaxEditor.GUI.Input; using FlaxEditor.GUI.Tree; using FlaxEditor.SceneGraph; using FlaxEditor.Scripting; @@ -956,10 +957,9 @@ namespace FlaxEditor.Utilities { Size = new Float2(320, 220), }; - searchBox = new TextBox(false, 1, 1) + searchBox = new SearchBox(false, 1, 1) { Width = menu.Width - 3, - WatermarkText = "Search...", Parent = menu, }; var panel1 = new Panel(ScrollBars.Vertical) diff --git a/Source/Editor/Windows/Assets/PrefabWindow.cs b/Source/Editor/Windows/Assets/PrefabWindow.cs index 78d210592..73f6aee21 100644 --- a/Source/Editor/Windows/Assets/PrefabWindow.cs +++ b/Source/Editor/Windows/Assets/PrefabWindow.cs @@ -6,6 +6,7 @@ using FlaxEditor.Content; using FlaxEditor.CustomEditors; using FlaxEditor.Gizmo; using FlaxEditor.GUI; +using FlaxEditor.GUI.Input; using FlaxEditor.SceneGraph; using FlaxEditor.Viewport; using FlaxEngine; @@ -124,10 +125,9 @@ namespace FlaxEditor.Windows.Assets IsScrollable = false, Offsets = new Margin(0, 0, 0, 18 + 6), }; - _searchBox = new TextBox + _searchBox = new SearchBox() { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, - WatermarkText = "Search...", Parent = headerPanel, Bounds = new Rectangle(4, 4, headerPanel.Width - 8, 18), }; diff --git a/Source/Editor/Windows/ContentWindow.cs b/Source/Editor/Windows/ContentWindow.cs index 703dc8c81..5833ea1d9 100644 --- a/Source/Editor/Windows/ContentWindow.cs +++ b/Source/Editor/Windows/ContentWindow.cs @@ -151,7 +151,6 @@ namespace FlaxEditor.Windows _itemsSearchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, - WatermarkText = "Search...", Parent = contentItemsSearchPanel, Bounds = new Rectangle(viewDropdownWidth + 8, 4, contentItemsSearchPanel.Width - 12 - viewDropdownWidth, 18), }; diff --git a/Source/Editor/Windows/Search/ContentSearchWindow.cs b/Source/Editor/Windows/Search/ContentSearchWindow.cs index cb539bf47..7128b7db9 100644 --- a/Source/Editor/Windows/Search/ContentSearchWindow.cs +++ b/Source/Editor/Windows/Search/ContentSearchWindow.cs @@ -10,6 +10,7 @@ using FlaxEditor; using FlaxEditor.GUI; using FlaxEditor.GUI.ContextMenu; using FlaxEditor.GUI.Docking; +using FlaxEditor.GUI.Input; using FlaxEditor.GUI.Tree; using FlaxEditor.Scripting; using FlaxEditor.Surface; @@ -224,10 +225,9 @@ namespace FlaxEngine.Windows.Search Parent = topPanel, }; optionsButton.ButtonClicked += OnOptionsDropdownClicked; - _searchBox = new TextBox + _searchBox = new SearchBox { AnchorPreset = AnchorPresets.HorizontalStretchMiddle, - WatermarkText = "Search...", Parent = topPanel, Bounds = new Rectangle(optionsButton.Right + 2.0f, 2, topPanel.Width - 4.0f - optionsButton.Width, 18.0f), }; From 96ec28c9a8156ca89449b799dddc3db90247f14a Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Wed, 21 Dec 2022 15:07:27 -0600 Subject: [PATCH 4/4] Cleaned up and used cross sprite. --- Source/Editor/GUI/Input/SearchBox.cs | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/Source/Editor/GUI/Input/SearchBox.cs b/Source/Editor/GUI/Input/SearchBox.cs index 04ae0c2d5..8ffd0874a 100644 --- a/Source/Editor/GUI/Input/SearchBox.cs +++ b/Source/Editor/GUI/Input/SearchBox.cs @@ -13,8 +13,6 @@ namespace FlaxEditor.GUI.Input /// public Button ClearSearchButton { get; } - private Color _defaultButtonTextColor; - /// /// Init search box /// @@ -34,33 +32,25 @@ namespace FlaxEditor.GUI.Input ClearSearchButton = new Button { Parent = this, - Width = 15.0f, + Width = 14.0f, Height = 14.0f, AnchorPreset = AnchorPresets.TopRight, - Text = "X", + Text = "", TooltipText = "Cancel Search.", - BackgroundColor = Color.Transparent, + BackgroundColor = TextColor, BorderColor = Color.Transparent, - BackgroundColorHighlighted = Color.Transparent, + BackgroundColorHighlighted = Style.Current.ForegroundGrey, BorderColorHighlighted = Color.Transparent, - BackgroundColorSelected = Color.Transparent, + BackgroundColorSelected = Style.Current.ForegroundGrey, BorderColorSelected = Color.Transparent, + BackgroundBrush = new SpriteBrush(Editor.Instance.Icons.Cross12), Visible = false, }; ClearSearchButton.LocalY += 2; ClearSearchButton.LocalX -= 2; ClearSearchButton.Clicked += Clear; - _defaultButtonTextColor = ClearSearchButton.TextColor; TextChanged += () => ClearSearchButton.Visible = !string.IsNullOrEmpty(Text); } - - /// - public override void Update(float deltaTime) - { - base.Update(deltaTime); - - ClearSearchButton.TextColor = ClearSearchButton.IsMouseOver ? Style.Current.ForegroundGrey : _defaultButtonTextColor; - } } }