Improve branch select list ui in go templates (#29729)

Relate:[#27417](https://github.com/go-gitea/gitea/issues/27471)
Reference:  [#26631](https://github.com/go-gitea/gitea/pull/26631)

Before

![image](https://github.com/go-gitea/gitea/assets/37935145/88ca8da5-25dd-4f60-bea8-a80107f19cc5)

After

![image](https://github.com/go-gitea/gitea/assets/37935145/3cb180dc-1331-43e9-8633-be5e288401e8)

---------

Co-authored-by: silverwind <me@silverwind.io>

(cherry picked from commit 2eb7c564df950fb96a1970559719003e979ff30a)
This commit is contained in:
HEREYUA 2024-03-15 11:43:10 +08:00 committed by Gergely Nagy
parent f42f044bc4
commit 729849a2fd
No known key found for this signature in database
7 changed files with 45 additions and 9 deletions

View file

@ -156,6 +156,8 @@ filter.not_template = Not Template
filter.public = Public filter.public = Public
filter.private = Private filter.private = Private
no_results_found = No results found.
[aria] [aria]
navbar = Navigation Bar navbar = Navigation Bar
footer = Footer footer = Footer
@ -1774,7 +1776,6 @@ pulls.compare_compare = pull from
pulls.switch_comparison_type = Switch comparison type pulls.switch_comparison_type = Switch comparison type
pulls.switch_head_and_base = Switch head and base pulls.switch_head_and_base = Switch head and base
pulls.filter_branch = Filter branch pulls.filter_branch = Filter branch
pulls.no_results = No results found.
pulls.show_all_commits = Show all commits pulls.show_all_commits = Show all commits
pulls.show_changes_since_your_last_review = Show changes since your last review pulls.show_changes_since_your_last_review = Show changes since your last review
pulls.showing_only_single_commit = Showing only changes of commit %[1]s pulls.showing_only_single_commit = Showing only changes of commit %[1]s

View file

@ -56,7 +56,7 @@
'repoLink': {{.root.RepoLink}}, 'repoLink': {{.root.RepoLink}},
'treePath': {{.root.TreePath}}, 'treePath': {{.root.TreePath}},
'branchNameSubURL': {{.root.BranchNameSubURL}}, 'branchNameSubURL': {{.root.BranchNameSubURL}},
'noResults': {{ctx.Locale.Tr "repo.pulls.no_results"}}, 'noResults': {{ctx.Locale.Tr "no_results_found"}},
}; };
{{if .release}} {{if .release}}
data.release = { data.release = {

View file

@ -29,7 +29,7 @@
{{- end -}} {{- end -}}
<div class="ui segment choose branch"> <div class="ui segment choose branch">
<a class="gt-mr-3" href="{{$.HeadRepo.Link}}/compare/{{PathEscapeSegments $.HeadBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.BaseName}}/{{PathEscape $.Repository.Name}}:{{end}}{{PathEscapeSegments $.BaseBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_head_and_base"}}">{{svg "octicon-git-compare"}}</a> <a class="gt-mr-3" href="{{$.HeadRepo.Link}}/compare/{{PathEscapeSegments $.HeadBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.BaseName}}/{{PathEscape $.Repository.Name}}:{{end}}{{PathEscapeSegments $.BaseBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_head_and_base"}}">{{svg "octicon-git-compare"}}</a>
<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}"> <div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui basic small button"> <div class="ui basic small button">
<span class="text">{{if $.PageIsComparePull}}{{ctx.Locale.Tr "repo.pulls.compare_base"}}{{else}}{{ctx.Locale.Tr "repo.compare.compare_base"}}{{end}}: {{$BaseCompareName}}:{{$.BaseBranch}}</span> <span class="text">{{if $.PageIsComparePull}}{{ctx.Locale.Tr "repo.pulls.compare_base"}}{{else}}{{ctx.Locale.Tr "repo.compare.compare_base"}}{{end}}: {{$BaseCompareName}}:{{$.BaseBranch}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}

View file

@ -4,8 +4,8 @@
<form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form"> <form method="post" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref" id="update_issueref_form">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
</form> </form>
{{/* TODO: share this branch selector dropdown with the same in repo page */}}
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}"> <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui basic small button"> <div class="ui basic small button">
<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span> <span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}} {{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
@ -18,12 +18,12 @@
<div class="header"> <div class="header">
<div class="ui grid"> <div class="ui grid">
<div class="two column row"> <div class="two column row">
<a class="reference column" href="#" data-target="#branch-list"> <a class="reference column muted" href="#" data-target="#branch-list">
<span class="text black"> <span class="text black">
{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.branches"}} {{svg "octicon-git-branch" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.branches"}}
</span> </span>
</a> </a>
<a class="reference column" href="#" data-target="#tag-list"> <a class="reference column muted" href="#" data-target="#tag-list">
<span class="text"> <span class="text">
{{svg "octicon-tag" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.tags"}} {{svg "octicon-tag" 16 "gt-mr-2"}}{{ctx.Locale.Tr "repo.tags"}}
</span> </span>
@ -31,12 +31,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="branch-tag-divider"></div>
<div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}"> <div id="branch-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}">
{{if .Reference}} {{if .Reference}}
<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div> <div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
{{end}} {{end}}
{{range .Branches}} {{range .Branches}}
<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div> <div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div>
{{else}}
<div class="item">{{ctx.Locale.Tr "no_results_found"}}</div>
{{end}} {{end}}
</div> </div>
<div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} gt-hidden"> <div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} gt-hidden">
@ -45,6 +48,8 @@
{{end}} {{end}}
{{range .Tags}} {{range .Tags}}
<div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div> <div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div>
{{else}}
<div class="item">{{ctx.Locale.Tr "no_results_found"}}</div>
{{end}} {{end}}
</div> </div>
</div> </div>

View file

@ -88,7 +88,7 @@
</div> </div>
</div> </div>
{{svg "octicon-arrow-right"}} {{svg "octicon-arrow-right"}}
<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}"> <div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui basic small button"> <div class="ui basic small button">
<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{ctx.Locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span> <span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{ctx.Locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}

View file

@ -5,7 +5,7 @@
<div class="ui container"> <div class="ui container">
<div class="repo-button-row"> <div class="repo-button-row">
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}"> <div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui basic small button"> <div class="ui basic small button">
<span class="text"> <span class="text">
{{ctx.Locale.Tr "repo.wiki.page"}}: {{ctx.Locale.Tr "repo.wiki.page"}}:

View file

@ -3004,3 +3004,33 @@ tbody.commit-list {
#cherry-pick-modal .scrolling.menu { #cherry-pick-modal .scrolling.menu {
max-height: 200px; max-height: 200px;
} }
/* Branch tag selector - TODO: Merge this into the same selector on repo page */
.repository .issue-content .issue-content-right .ui.grid .column.row {
padding: 10px;
padding-bottom: 0;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted {
padding: 0;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted .text {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
border: 1px solid transparent;
border-bottom: none;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black {
border-color: var(--color-secondary);
background: var(--color-menu);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu {
border-top: none;
}
.repository .issue-content .issue-content-right .branch-tag-divider {
margin-top: -1px;
border-top: 1px solid var(--color-secondary);
}