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

Add comments to CSS rules

Co-authored-by: zeripath <art27@cantab.net>

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

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

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index e1e59b492fac3ce5fd7b9a43c10a90abd6250e6d..cb1cd18e3d662d56eca326253a879d203209f47c 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -240,6 +240,15 @@ a.muted:hover,
   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 {
   border-right-color: var(--color-primary);
 }