From 7a6260f889e80856e2fb00bdfb8df90ec7652536 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 15 Mar 2024 17:45:30 +0800 Subject: [PATCH] Improve repo search UI (#29767) 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:
![image](https://github.com/go-gitea/gitea/assets/2114189/b965ac00-bad6-4d2f-9103-8841bd940aa5)
New UI (doesn't change much, but the items align)
![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)
--------- Co-authored-by: silverwind --- templates/admin/user/list.tmpl | 2 +- templates/devtest/gitea-ui.tmpl | 9 +++---- templates/shared/repo_search.tmpl | 32 +++++++++++-------------- templates/shared/search/input.tmpl | 2 +- tests/integration/explore_repos_test.go | 11 +++++++-- web_src/css/base.css | 8 ++++++- 6 files changed, 37 insertions(+), 27 deletions(-) diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl index 11c2fa59403..091cbe72879 100644 --- a/templates/admin/user/list.tmpl +++ b/templates/admin/user/list.tmpl @@ -15,7 +15,7 @@
{{ctx.Locale.Tr "admin.users.list_status_filter.menu_text"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
+
{{ctx.Locale.Tr "admin.users.list_status_filter.reset"}}
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 0b1f982ee4f..284566046dc 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -204,12 +204,13 @@

Dropdown with SVG

-
- simple +
+ search-input & flex-item in menu {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
+
{{svg "octicon-search"}}
-
item
+
item
+
item
diff --git a/templates/shared/repo_search.tmpl b/templates/shared/repo_search.tmpl index 7ba00708630..7fcb5d23611 100644 --- a/templates/shared/repo_search.tmpl +++ b/templates/shared/repo_search.tmpl @@ -1,22 +1,18 @@
-
- {{if .Language}}{{end}} + + {{if .Language}}{{end}} + {{if .PageIsExploreRepositories}}{{end}} + {{if .TabName}}{{end}} + {{if .TopicOnly}}{{end}}
{{template "shared/search/input" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.repo_kind")}} - {{if .PageIsExploreRepositories}} - - {{else if .TabName}} - - {{end}} {{template "shared/search/button"}}
-
- - {{ctx.Locale.Tr "filter"}} - +
+ {{ctx.Locale.Tr "filter"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
+
@@ -36,10 +32,8 @@
-
- - {{ctx.Locale.Tr "repo.issues.filter_sort"}} - +
+ {{ctx.Locale.Tr "repo.issues.filter_sort"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -61,8 +55,10 @@
{{if and .PageIsExploreRepositories .OnlyShowRelevant}} -
- {{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}} +
+ + {{ctx.Locale.Tr "explore.relevant_repositories" (printf "?only_show_relevant=0&sort=%s&q=%s&language=%s" $.SortType (QueryEscape $.Keyword) (QueryEscape $.Language))}} +
{{end}}
diff --git a/templates/shared/search/input.tmpl b/templates/shared/search/input.tmpl index 195cefc2f6f..75bed07b80b 100644 --- a/templates/shared/search/input.tmpl +++ b/templates/shared/search/input.tmpl @@ -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 */}} - + diff --git a/tests/integration/explore_repos_test.go b/tests/integration/explore_repos_test.go index 26fd1dde644..1e3ab314fd4 100644 --- a/tests/integration/explore_repos_test.go +++ b/tests/integration/explore_repos_test.go @@ -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, ``) + assert.Contains(t, respStr, ``) + assert.Contains(t, respStr, ` .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; +}