Introduce shared template for search inputs (#25338)

- Set
[type=search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)
- Disable spellcheck
- Set maxLength 255 that I found in `templates/repo/issue/search.tmpl`
- Remove unnecessary `max-width`, it does nothing

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-06-22 12:27:35 +02:00 committed by GitHub
parent ff90c87c87
commit af094fbb6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 24 additions and 23 deletions

View file

@ -15,9 +15,9 @@
</div> </div>
</div> </div>
</div> </div>
<form class="ui form ignore-dirty" style="max-width: 90%;"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -19,9 +19,9 @@
</div> </div>
</div> </div>
</div> </div>
<form class="ui form ignore-dirty" style="max-width: 90%"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -8,7 +8,7 @@
<div class="ui attached segment"> <div class="ui attached segment">
<form class="ui form ignore-dirty"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
<select class="ui dropdown" name="type"> <select class="ui dropdown" name="type">
<option value="">{{.locale.Tr "packages.filter.type"}}</option> <option value="">{{.locale.Tr "packages.filter.type"}}</option>
<option value="all">{{.locale.Tr "packages.filter.type.all"}}</option> <option value="all">{{.locale.Tr "packages.filter.type.all"}}</option>

View file

@ -21,9 +21,9 @@
</div> </div>
</div> </div>
</div> </div>
<form class="ui form ignore-dirty" style="max-width: 90%"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -51,8 +51,8 @@
</div> </div>
<!-- Search Text --> <!-- Search Text -->
<div class="ui fluid action input" style="max-width: 70%;"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -1,6 +1,6 @@
<form class="ui form ignore-dirty" style="max-width: 100%"> <form class="ui form ignore-dirty" style="max-width: 100%">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "explore.search"}}…" autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true "Disabled" .CodeIndexerUnavailable}}
<div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{.locale.Tr "explore.search.type.tooltip"}}"> <div class="ui dropdown selection {{if .CodeIndexerUnavailable}} disabled{{end}}" data-tooltip-content="{{.locale.Tr "explore.search.type.tooltip"}}">
<input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}} <input name="t" type="hidden" value="{{.queryType}}"{{if .CodeIndexerUnavailable}} disabled{{end}}>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">{{.locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div> <div class="text">{{.locale.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>

View file

@ -21,11 +21,11 @@
</div> </div>
</div> </div>
</div> </div>
<form class="ui form ignore-dirty" style="max-width: 90%"> <form class="ui form ignore-dirty">
<input type="hidden" name="sort" value="{{$.SortType}}"> <input type="hidden" name="sort" value="{{$.SortType}}">
<input type="hidden" name="language" value="{{$.Language}}"> <input type="hidden" name="language" value="{{$.Language}}">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}…" autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
{{if .PageIsExploreRepositories}} {{if .PageIsExploreRepositories}}
<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}"> <input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
{{end}} {{end}}

View file

@ -15,9 +15,9 @@
</div> </div>
</div> </div>
</div> </div>
<form class="ui form ignore-dirty" style="max-width: 90%"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}…" autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -2,7 +2,7 @@
{{template "base/alert" .}} {{template "base/alert" .}}
<form class="ui form ignore-dirty"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
<select class="ui dropdown" name="type"> <select class="ui dropdown" name="type">
<option value="">{{.locale.Tr "packages.filter.type"}}</option> <option value="">{{.locale.Tr "packages.filter.type"}}</option>
<option value="all">{{.locale.Tr "packages.filter.type.all"}}</option> <option value="all">{{.locale.Tr "packages.filter.type.all"}}</option>

View file

@ -2,7 +2,7 @@
<p><a href="{{.PackageDescriptor.PackageWebLink}}">{{.PackageDescriptor.Package.Name}}</a> / <strong>{{.locale.Tr "packages.versions"}}</strong></p> <p><a href="{{.PackageDescriptor.PackageWebLink}}">{{.PackageDescriptor.Package.Name}}</a> / <strong>{{.locale.Tr "packages.versions"}}</strong></p>
<form class="ui form ignore-dirty"> <form class="ui form ignore-dirty">
<div class="ui fluid action input"> <div class="ui fluid action input">
<input name="q" value="{{.Query}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Query "AutoFocus" true}}
<select class="ui dropdown" name="sort"> <select class="ui dropdown" name="sort">
<option value="version_asc"{{if eq .Sort "version_asc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.asc"}}</option> <option value="version_asc"{{if eq .Sort "version_asc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.asc"}}</option>
<option value="version_desc"{{if eq .Sort "version_desc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.desc"}}</option> <option value="version_desc"{{if eq .Sort "version_desc"}} selected="selected"{{end}}>{{.locale.Tr "filter.string.desc"}}</option>

View file

@ -28,7 +28,7 @@
<form class="list-header-search ui form ignore-dirty"> <form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input"> <div class="ui small search fluid action input">
<input type="hidden" name="state" value="{{$.State}}"> <input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..."> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword}}
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}"> <button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}} {{svg "octicon-search"}}
</button> </button>

View file

@ -7,7 +7,7 @@
<input type="hidden" name="project" value="{{$.ProjectID}}"> <input type="hidden" name="project" value="{{$.ProjectID}}">
<input type="hidden" name="assignee" value="{{$.AssigneeID}}"> <input type="hidden" name="assignee" value="{{$.AssigneeID}}">
<input type="hidden" name="poster" value="{{$.PosterID}}"> <input type="hidden" name="poster" value="{{$.PosterID}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." maxlength="255"> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword}}
{{if .PageIsIssueList}} {{if .PageIsIssueList}}
<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}" data-repo-link="{{.RepoLink}}">{{svg "octicon-hash"}}</button> <button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}" data-repo-link="{{.RepoLink}}">{{svg "octicon-hash"}}</button>
{{end}} {{end}}

View file

@ -35,8 +35,8 @@
<div class="ui attached segment"> <div class="ui attached segment">
<form class="ui form ignore-dirty" id="user-list-search-form" action="{{$.Link}}"> <form class="ui form ignore-dirty" id="user-list-search-form" action="{{$.Link}}">
<!-- Search Text --> <!-- Search Text -->
<div class="ui fluid action input" style="max-width: 70%;"> <div class="ui fluid action input">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus> {{template "shared/searchinput" dict "locale" .locale "Value" .Keyword "AutoFocus" true}}
<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> <button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
</div> </div>
</form> </form>

View file

@ -0,0 +1 @@
<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{.locale.Tr "explore.search"}}…"{{if .Value}} value="{{.Value}}"{{end}}{{if .AutoFocus}} autofocus{{end}}{{if .Disabled}} disabled{{end}}>

View file

@ -77,7 +77,7 @@
<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}}%2C{{end}}]"> <input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}}%2C{{end}}]">
<input type="hidden" name="sort" value="{{$.SortType}}"> <input type="hidden" name="sort" value="{{$.SortType}}">
<input type="hidden" name="state" value="{{$.State}}"> <input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..."> {{template "shared/searchinput" dict "locale" .locale "Value" $.Keyword}}
<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button> <button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
<button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button> <button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
</div> </div>

View file

@ -51,7 +51,7 @@
<input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}},{{end}}]"> <input type="hidden" name="repos" value="[{{range $.RepoIDs}}{{.}},{{end}}]">
<input type="hidden" name="sort" value="{{$.SortType}}"> <input type="hidden" name="sort" value="{{$.SortType}}">
<input type="hidden" name="state" value="{{$.State}}"> <input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..."> {{template "shared/searchinput" dict "locale" .locale "Value" $.Keyword}}
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button> <button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
</div> </div>
</form> </form>

View file

@ -16,7 +16,7 @@
</h4> </h4>
<div class="ui attached segment repos-search"> <div class="ui attached segment repos-search">
<div class="ui fluid right action left icon input" :class="{loading: isLoading}"> <div class="ui fluid right action left icon input" :class="{loading: isLoading}">
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos"> <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i> <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
<div class="ui dropdown icon button" :title="textFilter"> <div class="ui dropdown icon button" :title="textFilter">
<svg-icon name="octicon-filter" :size="16"/> <svg-icon name="octicon-filter" :size="16"/>