aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwxiaoguang <wxiaoguang@gmail.com>2024-03-15 17:45:30 +0800
committerGitHub <noreply@github.com>2024-03-15 09:45:30 +0000
commit7a6260f889e80856e2fb00bdfb8df90ec7652536 (patch)
treed95d867cc923c7acdb753b98e8dfbf3cd9957a23
parent0d3ec8e2adfcf49329b52d74367698b62ffb3f73 (diff)
downloadgitea-7a6260f889e80856e2fb00bdfb8df90ec7652536.tar.gz
gitea-7a6260f889e80856e2fb00bdfb8df90ec7652536.zip
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: <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>
-rw-r--r--templates/admin/user/list.tmpl2
-rw-r--r--templates/devtest/gitea-ui.tmpl9
-rw-r--r--templates/shared/repo_search.tmpl32
-rw-r--r--templates/shared/search/input.tmpl2
-rw-r--r--tests/integration/explore_repos_test.go11
-rw-r--r--web_src/css/base.css8
6 files changed, 37 insertions, 27 deletions
diff --git a/templates/admin/user/list.tmpl b/templates/admin/user/list.tmpl
index 11c2fa5940..091cbe7287 100644
--- a/templates/admin/user/list.tmpl
+++ b/templates/admin/user/list.tmpl
@@ -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>
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 0b1f982ee4..284566046d 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -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">
diff --git a/templates/shared/repo_search.tmpl b/templates/shared/repo_search.tmpl
index 7ba0070863..7fcb5d2361 100644
--- a/templates/shared/repo_search.tmpl
+++ b/templates/shared/repo_search.tmpl
@@ -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>
diff --git a/templates/shared/search/input.tmpl b/templates/shared/search/input.tmpl
index 195cefc2f6..75bed07b80 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 */}}
-<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}}>
diff --git a/tests/integration/explore_repos_test.go b/tests/integration/explore_repos_test.go
index 26fd1dde64..1e3ab314fd 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, `<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"`)
}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4083ec0413..2c055b7439 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -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;
+}