Skip to content

Commit 013657e

Browse files
CL-Jeremyzeripath
andauthored
Use semantic dropdown for code search query type (#15276)
Add comments to CSS rules Co-authored-by: zeripath <[email protected]>
1 parent afa781b commit 013657e

File tree

3 files changed

+64
-61
lines changed

3 files changed

+64
-61
lines changed

templates/explore/code.tmpl

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,27 @@
33
{{template "explore/navbar" .}}
44
<div class="ui container">
55
<form class="ui form ignore-dirty" style="max-width: 100%">
6-
<input type="hidden" name="tab" value="{{$.TabName}}">
7-
<div class="ui fluid action input">
8-
<div class="twelve wide field">
9-
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
10-
</div>
11-
<div class="two wide field mx-2">
12-
<select name="t">
13-
<option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option>
14-
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option>
15-
</select>
16-
</div>
17-
<div class="three field">
18-
<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
19-
</div>
20-
</div>
21-
</form>
22-
<div class="ui divider"></div>
6+
<input type="hidden" name="tab" value="{{$.TabName}}">
7+
<div class="ui fluid action input">
8+
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
9+
<div class="ui dropdown selection">
10+
<input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
11+
<div class="text">{{.i18n.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>
12+
<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
13+
<div class="item" data-value="">{{.i18n.Tr "explore.search.fuzzy"}}</div>
14+
<div class="item" data-value="match">{{.i18n.Tr "explore.search.match"}}</div>
15+
</div>
16+
</div>
17+
<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
18+
</div>
19+
</form>
20+
<div class="ui divider"></div>
2321

2422
<div class="ui user list">
2523
{{if .SearchResults}}
26-
<h3>
27-
{{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
28-
</h3>
24+
<h3>
25+
{{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
26+
</h3>
2927
<div class="df ac fw">
3028
{{range $term := .SearchResultLanguages}}
3129
<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 @@
3533
</a>
3634
{{end}}
3735
</div>
38-
<div class="repository search">
39-
{{range $result := .SearchResults}}
40-
{{$repo := (index $.RepoMaps .RepoID)}}
41-
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
42-
<h4 class="ui top attached normal header">
43-
<span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
44-
<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>
45-
</h4>
46-
<div class="ui attached table segment">
47-
<div class="file-body file-code code-view">
48-
<table>
49-
<tbody>
50-
<tr>
51-
<td class="lines-num">
52-
{{range .LineNumbers}}
53-
<a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
54-
{{end}}
55-
</td>
56-
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
57-
</tr>
58-
</tbody>
59-
</table>
60-
</div>
61-
</div>
62-
{{template "shared/searchbottom" dict "root" $ "result" .}}
63-
</div>
64-
{{end}}
65-
</div>
36+
<div class="repository search">
37+
{{range $result := .SearchResults}}
38+
{{$repo := (index $.RepoMaps .RepoID)}}
39+
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
40+
<h4 class="ui top attached normal header">
41+
<span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
42+
<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>
43+
</h4>
44+
<div class="ui attached table segment">
45+
<div class="file-body file-code code-view">
46+
<table>
47+
<tbody>
48+
<tr>
49+
<td class="lines-num">
50+
{{range .LineNumbers}}
51+
<a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
52+
{{end}}
53+
</td>
54+
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
</div>
59+
</div>
60+
{{template "shared/searchbottom" dict "root" $ "result" .}}
61+
</div>
62+
{{end}}
63+
</div>
6664
{{else}}
6765
<div>{{$.i18n.Tr "explore.code_no_results"}}</div>
6866
{{end}}

templates/repo/search.tmpl

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,16 @@
55
<div class="ui repo-search">
66
<form class="ui form ignore-dirty" method="get">
77
<div class="ui fluid action input">
8-
<div class="twelve wide field">
9-
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
10-
</div>
11-
<div class="two wide field">
12-
<select name="t">
13-
<option value="">{{.i18n.Tr "repo.search.fuzzy"}}</option>
14-
<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "repo.search.match"}}</option>
15-
</select>
16-
</div>
17-
<div class="three field">
18-
<button class="ui button" type="submit">
19-
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
20-
</button>
8+
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
9+
<div class="ui dropdown selection">
10+
<input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
11+
<div class="text">{{.i18n.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div>
12+
<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
13+
<div class="item" data-value="">{{.i18n.Tr "repo.search.fuzzy"}}</div>
14+
<div class="item" data-value="match">{{.i18n.Tr "repo.search.match"}}</div>
15+
</div>
2116
</div>
17+
<button class="ui icon button" type="submit">{{svg "octicon-search" 16}}</button>
2218
</div>
2319
</form>
2420
</div>

web_src/less/_base.less

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,15 @@ a.muted:hover,
240240
border-color: var(--color-primary) !important;
241241
}
242242

243+
/* currently used for search bar dropdowns in repo search and explore code */
244+
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
245+
min-width: 10em;
246+
247+
&:not(:focus):not(:hover) {
248+
border-right-color: transparent;
249+
}
250+
}
251+
243252
.ui.action.input:not([class*="left action"]) > input:focus {
244253
border-right-color: var(--color-primary);
245254
}

0 commit comments

Comments
 (0)