Skip to content

Improve repo search UI #29767

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Mar 15, 2024
Merged

Improve repo search UI #29767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9d2db91
fix
wxiaoguang Mar 13, 2024
1323919
Merge branch 'main' into fix-repo-search-topic
wxiaoguang Mar 15, 2024
a9851be
fix merge
wxiaoguang Mar 15, 2024
960f746
rename to flex-items-menu
wxiaoguang Mar 15, 2024
805a7ca
Update templates/devtest/gitea-ui.tmpl
silverwind Mar 15, 2024
484fee3
make "input" easier to test
wxiaoguang Mar 15, 2024
a14da90
use type="hidden" for input
wxiaoguang Mar 15, 2024
0623f56
Merge branch 'main' into fix-repo-search-topic
GiteaBot Mar 15, 2024
595305c
Merge branch 'main' into fix-repo-search-topic
GiteaBot Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/admin/user/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 5 additions & 4 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
32 changes: 14 additions & 18 deletions templates/shared/repo_search.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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 changes: 1 addition & 1 deletion templates/shared/search/input.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 9 additions & 2 deletions tests/integration/explore_repos_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 1 deletion web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}