kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4571 from sbwalker/dev

Browse Source 
provide better support for AllowTextInput on Search component
This commit is contained in:
Shaun Walker 2024-08-27 12:16:50 -04:00 committed by GitHub
commit fb7dfdc800
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Oqtane.Client/Themes/Controls/Theme/Search.razor
View File

@ -8,34 +8,26 @@
@if (_searchResultsPage != null) @if (_searchResultsPage != null)
{ {
@if (AllowTextInput) <span class="@_defaultCssClass @CssClass">
{ <form method="post" class="app-form-inline" @formname="@($"SearchForm")" @onsubmit="@PerformSearch" data-enhance>
<span class="app-search @CssClass"> <input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" />
<form method="post" class="app-form-inline" @formname="@($"SearchForm")" @onsubmit="@PerformSearch" data-enhance> @if (AllowTextInput)
<input type="hidden" name="@Constants.RequestVerificationToken" value="@SiteState.AntiForgeryToken" /> {
<input type="text" name="keywords" maxlength="50" <input type="text" name="keywords" maxlength="50"
class="form-control d-inline-block pe-5 shadow-none" class="form-control d-inline-block pe-5 shadow-none"
@bind="_keywords" @bind="_keywords"
placeholder="@Localizer["SearchPlaceHolder"]" placeholder="@Localizer["SearchPlaceHolder"]"
aria-label="Search" /> aria-label="Search" />
<button type="submit" class="btn btn-search"> }
<span class="oi oi-magnifying-glass align-middle"></span> <button type="submit" class="btn btn-search">
</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">
<span class="oi oi-magnifying-glass align-middle"></span> <span class="oi oi-magnifying-glass align-middle"></span>
</button> </button>
</form> </form>
} </span>
} }
@code { @code {
private string _defaultCssClass;
private Page _searchResultsPage; private Page _searchResultsPage;
private string _keywords = ""; private string _keywords = "";
@ -43,7 +35,7 @@
public string CssClass { get; set; } public string CssClass { get; set; }
[Parameter] [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] [Parameter]
public string SearchResultPagePath { get; set; } = "search"; // setting to "" will disable search 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"))) if (bool.Parse(SettingService.GetSetting(PageState.Site.Settings, "Search_Enabled", "True")))
{ {
_defaultCssClass = (AllowTextInput) ? "app-search" : "app-search-noinput";
if (!string.IsNullOrEmpty(SearchResultPagePath)) if (!string.IsNullOrEmpty(SearchResultPagePath))
{ {
_searchResultsPage = PageState.Pages.FirstOrDefault(i => i.Path == SearchResultPagePath); _searchResultsPage = PageState.Pages.FirstOrDefault(i => i.Path == SearchResultPagePath);

19
Oqtane.Server/wwwroot/css/app.css
View File

@ -235,20 +235,33 @@ app {
.app-form-inline { .app-form-inline {
display: inline; display: inline;
} }
.app-search{
.app-search {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.app-search input + button{ .app-search input + button {
background: none; background: none;
border: none; border: none;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
.app-search input + button .oi{ .app-search input + button .oi {
top: 0; 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 Editor */
.text-area-editor > textarea { .text-area-editor > textarea {