mirror/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-28 12:16:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Use semantic dropdown for code search query type (#15276)

Browse source 
Add comments to CSS rules

Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
Mike L 2021-04-09 22:53:16 +02:00 committed by GitHub
parent afa781bf20
commit 013657ec76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
templates/explore/code.tmpl
View file

@ -3,29 +3,27 @@
{{template "explore/navbar" .}} {{template "explore/navbar" .}}
<div class="ui container"> <div class="ui container">
<form class="ui form ignore-dirty" style="max-width: 100%"> <form class="ui form ignore-dirty" style="max-width: 100%">
<input type="hidden" name="tab" value="{{$.TabName}}"> <input type="hidden" name="tab" value="{{$.TabName}}">
<div class="ui fluid action input"> <div class="ui fluid action input">
<div class="twelve wide field"> <input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus> <div class="ui dropdown selection">
</div> <input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="two wide field mx-2"> <div class="text">{{.i18n.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>
<select name="t"> <div class="menu transition hidden" tabindex="-1" style="display: block !important;">
<option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option> <div class="item" data-value="">{{.i18n.Tr "explore.search.fuzzy"}}</div>
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option> <div class="item" data-value="match">{{.i18n.Tr "explore.search.match"}}</div>
</select> </div>
</div> </div>
<div class="three field"> <button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button> </div>
</div> </form>
</div> <div class="ui divider"></div>
</form>
<div class="ui divider"></div>
<div class="ui user list"> <div class="ui user list">
{{if .SearchResults}} {{if .SearchResults}}
<h3> <h3>
{{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }} {{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
</h3> </h3>
<div class="df ac fw"> <div class="df ac fw">
{{range $term := .SearchResultLanguages}} {{range $term := .SearchResultLanguages}}
<a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}"> <a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
@ -35,34 +33,34 @@
</a> </a>
{{end}} {{end}}
</div> </div>
<div class="repository search"> <div class="repository search">
{{range $result := .SearchResults}} {{range $result := .SearchResults}}
{{$repo := (index $.RepoMaps .RepoID)}} {{$repo := (index $.RepoMaps .RepoID)}}
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result"> <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
<h4 class="ui top attached normal header"> <h4 class="ui top attached normal header">
<span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span> <span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a> <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
</h4> </h4>
<div class="ui attached table segment"> <div class="ui attached table segment">
<div class="file-body file-code code-view"> <div class="file-body file-code code-view">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td class="lines-num"> <td class="lines-num">
{{range .LineNumbers}} {{range .LineNumbers}}
<a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a> <a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
{{end}} {{end}}
</td> </td>
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td> <td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{{template "shared/searchbottom" dict "root" $ "result" .}} {{template "shared/searchbottom" dict "root" $ "result" .}}
</div> </div>
{{end}} {{end}}
</div> </div>
{{else}} {{else}}
<div>{{$.i18n.Tr "explore.code_no_results"}}</div> <div>{{$.i18n.Tr "explore.code_no_results"}}</div>
{{end}} {{end}}

22
templates/repo/search.tmpl
View file

@ -5,20 +5,16 @@
<div class="ui repo-search"> <div class="ui repo-search">
<form class="ui form ignore-dirty" method="get"> <form class="ui form ignore-dirty" method="get">
<div class="ui fluid action input"> <div class="ui fluid action input">
<div class="twelve wide field"> <input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}"> <div class="ui dropdown selection">
</div> <input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="two wide field"> <div class="text">{{.i18n.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div>
<select name="t"> <div class="menu transition hidden" tabindex="-1" style="display: block !important;">
<option value="">{{.i18n.Tr "repo.search.fuzzy"}}</option> <div class="item" data-value="">{{.i18n.Tr "repo.search.fuzzy"}}</div>
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "repo.search.match"}}</option> <div class="item" data-value="match">{{.i18n.Tr "repo.search.match"}}</div>
</select> </div>
</div>
<div class="three field">
<button class="ui button" type="submit">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
</button>
</div> </div>
<button class="ui icon button" type="submit">{{svg "octicon-search" 16}}</button>
</div> </div>
</form> </form>
</div> </div>

9
web_src/less/_base.less
View file

@ -240,6 +240,15 @@ a.muted:hover,
border-color: var(--color-primary) !important; border-color: var(--color-primary) !important;
} }
/* currently used for search bar dropdowns in repo search and explore code */
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
min-width: 10em;
&:not(:focus):not(:hover) {
border-right-color: transparent;
}
}
.ui.action.input:not([class*="left action"]) > input:focus { .ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-primary); border-right-color: var(--color-primary);
} }