mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Improve repo search UI (#29767)

Browse Source 
1. Introduce a special "flex-items-block" for menu items, to align the
dropdown menu items
2. Simplify the "repo search" form
3. Add missing "TopicOnly" search option

Screenshots:

The old UI items don't align:

<details>

![image](https://github.com/go-gitea/gitea/assets/2114189/b965ac00-bad6-4d2f-9103-8841bd940aa5)

</details>


New UI (doesn't change much, but the items align)

<details>

![image](https://github.com/go-gitea/gitea/assets/2114189/a1add892-21dc-423b-90d5-5569faa3dced)


![image](https://github.com/go-gitea/gitea/assets/2114189/fb4040b2-96d8-4fb2-a0ed-760b9881fd86)

</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
pull/29738/head^2
wxiaoguang 8 months ago committed by GitHub
parent 0d3ec8e2ad
commit 7a6260f889
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 37 additions and 27 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      templates/admin/user/list.tmpl
  2. 9
      templates/devtest/gitea-ui.tmpl
  3. 32
      templates/shared/repo_search.tmpl
  4. 2
      templates/shared/search/input.tmpl
  5. 11
      tests/integration/explore_repos_test.go
  6. 8
      web_src/css/base.css

2
templates/admin/user/list.tmpl
Unescape View File

@ -15,7 +15,7 @@
<div class="ui dropdown type jump item">
<span class="text">{{ctx.Locale.Tr "admin.users.list_status_filter.menu_text"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="menu flex-items-menu">
<a class="item j-reset-status-filter">{{ctx.Locale.Tr "admin.users.list_status_filter.reset"}}</a>
<div class="divider"></div>
<label class="item"><input type="radio" name="status_filter[is_admin]" value="1"> {{ctx.Locale.Tr "admin.users.list_status_filter.is_admin"}}</label>

9
templates/devtest/gitea-ui.tmpl
Unescape View File

@ -204,12 +204,13 @@
<h2>Dropdown with SVG</h2>
<div>
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
<span class="text">simple</span>
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
<span class="text">search-input &amp; flex-item in menu</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="menu flex-items-menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
<div class="item">item</div>
<div class="item"><input type="radio">item</div>
<div class="item"><input type="radio">item</div>
</div>
</div>
<div class="ui search selection dropdown">

32
templates/shared/repo_search.tmpl
Unescape View File

@ -1,22 +1,18 @@
<div class="ui small secondary filter menu">
<form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-flex-row tw-gap-x-2 gt-ac">
{{if .Language}}<input hidden name="language" value="{{.Language}}">{{end}}
<form id="repo-search-form" class="ui form ignore-dirty tw-flex-1 tw-flex tw-gap-x-2">
{{if .Language}}<input type="hidden" name="language" value="{{.Language}}">{{end}}
{{if .PageIsExploreRepositories}}<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">{{end}}
{{if .TabName}}<input type="hidden" name="tab" value="{{.TabName}}">{{end}}
{{if .TopicOnly}}<input type="hidden" name="topic" value="{{.TopicOnly}}">{{end}}
<div class="ui small fluid action input tw-flex-1">
{{template "shared/search/input" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.repo_kind")}}
{{if .PageIsExploreRepositories}}
<input type="hidden" name="only_show_relevant" value="{{.OnlyShowRelevant}}">
{{else if .TabName}}
<input type="hidden" name="tab" value="{{.TabName}}">
{{end}}
{{template "shared/search/button"}}
</div>
<!-- Filter -->
<div class="ui small dropdown type jump item tw-mr-0">
<span class="text">
{{ctx.Locale.Tr "filter"}}
</span>
<div class="item ui small dropdown jump">
<span class="text">{{ctx.Locale.Tr "filter"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="menu flex-items-menu">
<label class="item"><input type="radio" name="clear-filter"> {{ctx.Locale.Tr "filter.clear"}}</label>
<div class="divider"></div>
<label class="item"><input type="radio" name="archived" {{if .IsArchived.Value}}checked{{end}} value="1"> {{ctx.Locale.Tr "filter.is_archived"}}</label>
@ -36,10 +32,8 @@
</div>
</div>
<!-- Sort -->
<div class="ui small dropdown type jump item gt-mr-0">
<span class="text">
{{ctx.Locale.Tr "repo.issues.filter_sort"}}
</span>
<div class="item ui small dropdown jump">
<span class="text">{{ctx.Locale.Tr "repo.issues.filter_sort"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<label class="{{if eq .SortType "newest"}}active {{end}}item"><input hidden type="radio" name="sort" {{if eq .SortType "newest"}}checked{{end}} value="newest"> {{ctx.Locale.Tr "repo.issues.filter_sort.latest"}}</label>
@ -61,8 +55,10 @@
</form>
</div>
{{if and .PageIsExploreRepositories .OnlyShowRelevant}}
<div class="ui message explore-relevancy-note">
<span data-tooltip-content="{{ctx.Locale.Tr "explore.relevant_repositories_tooltip"}}">{{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}}</span>
<div class="ui message">
<span data-tooltip-content="{{ctx.Locale.Tr "explore.relevant_repositories_tooltip"}}">
{{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}}
</span>
</div>
{{end}}
<div class="divider"></div>

2
templates/shared/search/input.tmpl
Unescape View File

@ -1,4 +1,4 @@
{{/* Value - value of the search field (for search results page) */}}
{{/* Disabled (optional) - if search field has to be disabled */}}
{{/* Placeholder (optional) - placeholder text to be used */}}
<input type="search" spellcheck="false" name="q" maxlength="255" placeholder="{{with .Placeholder}}{{.}}{{else}}{{ctx.Locale.Tr "search.search"}}{{end}}"{{with .Value}} value="{{.}}"{{end}}{{if .Disabled}} disabled{{end}}>
<input type="search" name="q"{{with .Value}} value="{{.}}"{{end}} maxlength="255" spellcheck="false" placeholder="{{with .Placeholder}}{{.}}{{else}}{{ctx.Locale.Tr "search.search"}}{{end}}"{{if .Disabled}} disabled{{end}}>

11
tests/integration/explore_repos_test.go
Unescape View File

@ -8,11 +8,18 @@ import (
"testing"
"code.gitea.io/gitea/tests"
"github.com/stretchr/testify/assert"
)
func TestExploreRepos(t *testing.T) {
defer tests.PrepareTestEnv(t)()
req := NewRequest(t, "GET", "/explore/repos")
MakeRequest(t, req, http.StatusOK)
req := NewRequest(t, "GET", "/explore/repos?q=TheKeyword&topic=1&language=TheLang")
resp := MakeRequest(t, req, http.StatusOK)
respStr := resp.Body.String()
assert.Contains(t, respStr, `<input type="hidden" name="topic" value="true">`)
assert.Contains(t, respStr, `<input type="hidden" name="language" value="TheLang">`)
assert.Contains(t, respStr, `<input type="search" name="q" value="TheKeyword"`)
}

8
web_src/css/base.css
Unescape View File

@ -1980,7 +1980,6 @@ table th[data-sortt-desc] .svg {
.ui.ui.button,
.ui.ui.dropdown,
.ui.ui.label,
.flex-items-inline > .item,
.flex-text-inline {
display: inline-flex;
align-items: center;
@ -2017,3 +2016,10 @@ table th[data-sortt-desc] .svg {
align-items: center;
gap: .25rem;
}
/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */
.ui.dropdown .menu.flex-items-menu > .item {
display: flex !important;
align-items: center;
gap: .5rem;
}

Write Preview
Loading…
Cancel
Save