Merge pull request #4571 from sbwalker/dev

provide better support for AllowTextInput on Search component
oqtane · Aug 27, 2024 · fb7dfdc · fb7dfdc
2 parents 65bff8f + e096af3
commit fb7dfdc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/Oqtane.Client/Themes/Controls/Theme/Search.razor b/Oqtane.Client/Themes/Controls/Theme/Search.razor
@@ -8,42 +8,34 @@
 
 @if (_searchResultsPage != null)
 {
-    @if (AllowTextInput)
-    {
-        <span class="app-search @CssClass">
-            <form method="post" class="app-form-inline" @formname="@($"SearchForm")" @onsubmit="@PerformSearch" data-enhance>
-                <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
+    <span class="@_defaultCssClass @CssClass">
+        <form method="post" class="app-form-inline" @formname="@($"SearchForm")" @onsubmit="@PerformSearch" data-enhance>
+            <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
+            @if (AllowTextInput)
+            {
                 <input type="text" name="keywords" maxlength="50"
                         class="form-control d-inline-block pe-5 shadow-none"
                         @bind="_keywords"
                         placeholder="@Localizer["SearchPlaceHolder"]"
                         aria-label="Search" />
-                <button type="submit" class="btn btn-search">
-                    <span class="oi oi-magnifying-glass align-middle"></span>
-                </button>
-            </form>
-        </span>
-    }
-    else
-    {
-        <form method="post" class="app-form-inline" @formname="@($"SearchForm")" @onsubmit="@PerformSearch" data-enhance>
-            <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
-            <button type="submit" class="btn btn-primary">
+            }
+            <button type="submit" class="btn btn-search">
                 <span class="oi oi-magnifying-glass align-middle"></span>
             </button>
         </form>
-    }
+    </span>
 }
 
 @code {
+    private string _defaultCssClass;
     private Page _searchResultsPage;
     private string _keywords = "";
 
     [Parameter]
     public string CssClass { get; set; }
 
     [Parameter]
-    public bool AllowTextInput { get; set; } = true; // setting to false will display only the search icon button - not the textbox 
+    public bool AllowTextInput { get; set; } = true; // setting to false will display only the search icon button - not the textbox
 
     [Parameter]
     public string SearchResultPagePath { get; set; } = "search"; // setting to "" will disable search
@@ -58,6 +50,7 @@
     {
         if (bool.Parse(SettingService.GetSetting(PageState.Site.Settings, "Search_Enabled", "True")))
         {
+            _defaultCssClass = (AllowTextInput) ? "app-search" : "app-search-noinput";
             if (!string.IsNullOrEmpty(SearchResultPagePath))
             {
                 _searchResultsPage = PageState.Pages.FirstOrDefault(i => i.Path == SearchResultPagePath);

diff --git a/Oqtane.Server/wwwroot/css/app.css b/Oqtane.Server/wwwroot/css/app.css
@@ -235,20 +235,33 @@ app {
 .app-form-inline {
     display: inline;
 }
-.app-search{
+
+.app-search {
     display: inline-block;
     position: relative;
 }
-.app-search input + button{
+.app-search input + button {
     background: none;
     border: none;
     position: absolute;
     right: 0;
     top: 0;
 }
-.app-search input + button .oi{
+.app-search input + button .oi {
     top: 0;
 }
+.app-search-noinput {
+    display: inline-block;
+    position: relative;
+}
+.app-search-noinput button {
+    background: none;
+    border: none;
+    color: var(--bs-heading-color);
+}
+.app-search-noinput button:hover {
+    color: var(--bs-heading-color);
+}
 
 /* Text Editor */
 .text-area-editor > textarea {