Merge pull request #656 from vaclavek/feature/HxSearchBox_InputWithCl…

…earIcon HxSearchBox - fix clear button padding if there is delete icon
havit · Nov 29, 2023 · 61d1048 · 61d1048
2 parents 6c1e7e0 + 2d5f760
commit 61d1048
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/BlazorAppTest/Pages/HxSearchBoxTest.razor b/BlazorAppTest/Pages/HxSearchBoxTest.razor
@@ -1,6 +1,18 @@
 @page "/HxSearchBoxTest"
 
-<HxSearchBox DataProvider="ProvideSearchResults" Label="Search" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem" >
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Search needle in a haystack" InputSize="InputSize.Small" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem">
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+</HxSearchBox>
+
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Search regular stuff" InputSize="InputSize.Regular" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem">
+    <DefaultContentTemplate>
+        <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
+    </DefaultContentTemplate>
+</HxSearchBox>
+
+<HxSearchBox DataProvider="ProvideSearchResults" Label="Search huge things" InputSize="InputSize.Large" ItemTitleSelector="(i) => i.Title" ItemSubtitleSelector="(i) => i.Subtitle" ItemIconSelector="(i) => i.Icon" TItem="SearchBoxItem">
     <DefaultContentTemplate>
         <div class="small py-2 px-3 text-muted">Search for Mouse, Table or Door...</div>
     </DefaultContentTemplate>

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor
@@ -43,6 +43,7 @@
                     class="@CssClassHelper.Combine(
                        "form-control",
                        (!HasInputGroupEnd && HasInputGroups ? "hx-search-box-input-with-search-icon" : null),
+                       (HasClearButton ? "hx-search-box-input-with-clear-icon" : null),
                        InputCssClassEffective)" />
 
                 @if (!string.IsNullOrEmpty(Label) && LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs
@@ -218,6 +218,10 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 	protected bool HasInputGroups => HasInputGroupStart || HasInputGroupEnd;
 	private bool HasInputGroupStart => !String.IsNullOrWhiteSpace(InputGroupStartText) || (InputGroupStartTemplate is not null);
 	private bool HasInputGroupEnd => !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupEndTemplate is not null);
+	private bool HasClearButton => !HasInputGroupEnd
+							&& !dataProviderInProgress
+							&& !string.IsNullOrEmpty(TextQuery)
+							&& (ClearIconEffective is not null);
 
 	private string dropdownToggleElementId = "hx" + Guid.NewGuid().ToString("N");
 	private string dropdownId = "hx" + Guid.NewGuid().ToString("N");
@@ -239,6 +243,7 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 	private DotNetObjectReference<HxSearchBox<TItem>> dotnetObjectReference;
 	private bool clickIsComing;
 	private bool disposed = false;
+
 	public HxSearchBox()
 	{
 		dotnetObjectReference = DotNetObjectReference.Create(this);

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css
@@ -18,8 +18,12 @@
 }
 
 ::deep .hx-search-box-input-with-search-icon {
-    border-top-right-radius: 0.375rem !important;
-    border-bottom-right-radius: 0.375rem !important;
+	border-top-right-radius: 0.375rem !important;
+	border-bottom-right-radius: 0.375rem !important;
+}
+
+::deep .hx-search-box-input-with-clear-icon {
+	padding-right: 2.375rem;
 }
 
 .dropdown-item:not(:active) ::deep .hx-search-box-item-title {