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 (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 = "";
@ -43,7 +35,7 @@
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);

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

@ -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 {