Skip to content
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

Rework header bar on issue, pull requests and milestone #24420

Merged
merged 13 commits into from
Apr 30, 2023
Merged

Rework header bar on issue, pull requests and milestone #24420

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b24b3e8
Rework search form on issue, pull requests and milestone
silverwind Apr 29, 2023
854600f
use svg on milestone as well
silverwind Apr 29, 2023
a2a79a0
reduce margin above
silverwind Apr 29, 2023
7c03874
fix pill buttons via addition of small-pill-buttons
silverwind Apr 29, 2023
f5acdc4
refine selector, add TODO
silverwind Apr 29, 2023
50350cb
reduce and move css rules
silverwind Apr 29, 2023
379e987
fix integration
silverwind Apr 29, 2023
550db47
Merge branch 'main' into full-width-search
silverwind Apr 29, 2023
a1a788e
wip
silverwind Apr 29, 2023
c87af9c
handle milestone and projects view
silverwind Apr 29, 2023
785c48a
Merge branch 'main' into full-width-search
silverwind Apr 29, 2023
a8dc9fc
move to separate file
silverwind Apr 29, 2023
79b3475
Merge branch 'main' into full-width-search
GiteaBot Apr 30, 2023
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
4 changes: 2 additions & 2 deletions templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
<div class="ui repo-search">
<form class="ui form ignore-dirty" action="{{.RepoLink}}/search" method="get">
<div class="field">
<div class="ui action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "repo.search.search_repo"}}">
{{if .CodeIndexerUnavailable}}
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-alert"}}</i>
{{end}}
<button class="ui icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
{{svg "octicon-search"}}
</button>
</div>
Expand Down
26 changes: 9 additions & 17 deletions templates/repo/issue/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,18 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository issue-list">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui three column grid issue-list-headers">
<div class="column">
{{template "repo/issue/navbar" .}}
</div>
<div class="column center aligned">
{{template "repo/issue/search" .}}
</div>
<div class="issue-list-header gt-df gt-ac gt-gap-3 gt-fw">
{{template "repo/issue/navbar" .}}
{{template "repo/issue/search" .}}
{{if not .Repository.IsArchived}}
<div class="column right aligned">
{{if .PageIsIssueList}}
<a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
{{else}}
<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
{{end}}
</div>
{{if .PageIsIssueList}}
<a class="ui small green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
{{else}}
<a class="ui small green button new-pr-button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
{{end}}
{{else}}
{{if not .PageIsIssueList}}
<div class="column right aligned">
<a class="ui green button {{if not .PullRequestCtx.Allowed}}disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
</div>
<a class="ui small green small button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
{{end}}
{{end}}
</div>
Expand Down
70 changes: 33 additions & 37 deletions templates/repo/issue/milestones.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,49 @@
{{template "repo/issue/navbar" .}}
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
<div class="ui right">
<a class="ui green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
</div>
{{end}}
</div>
<div class="ui divider"></div>
{{template "base/alert" .}}

<div class="ui three column stackable grid">
<div class="column">
<div class="ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
{{svg "octicon-check" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a>
</div>
<div class="milestone-list-header gt-df gt-ac gt-gap-3 gt-fw">
silverwind marked this conversation as resolved.
Show resolved Hide resolved
<div class="ui compact tiny menu small-pill-buttons">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
</a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
{{svg "octicon-check" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a>
</div>

<!-- Search -->
<div class="column center aligned">
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
</div>
</form>
</div>
<form class="milestone-search-form ui form ignore-dirty gt-df gt-f1">
<div class="ui small search fluid action input gt-f1">
<input type="hidden" name="state" value="{{$.State}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
</div>
</form>

<div class="column right aligned gt-df gt-ac gt-je">
<!-- Sort -->
<div class="ui dropdown type jump item">
<span class="text">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span>
<div class="menu">
<a class="{{if or (eq .SortType "closestduedate") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=closestduedate&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.closest_due_date"}}</a>
<a class="{{if eq .SortType "furthestduedate"}}active {{end}}item" href="{{$.Link}}?sort=furthestduedate&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.furthest_due_date"}}</a>
<a class="{{if eq .SortType "leastcomplete"}}active {{end}}item" href="{{$.Link}}?sort=leastcomplete&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.least_complete"}}</a>
<a class="{{if eq .SortType "mostcomplete"}}active {{end}}item" href="{{$.Link}}?sort=mostcomplete&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.most_complete"}}</a>
<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
</div>
<!-- Sort -->
<div class="ui small dropdown type jump item gt-df gt-ac gt-je gt-px-4">
<span class="text">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span>
<div class="menu">
<a class="{{if or (eq .SortType "closestduedate") (not .SortType)}}active {{end}}item" href="{{$.Link}}?sort=closestduedate&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.closest_due_date"}}</a>
<a class="{{if eq .SortType "furthestduedate"}}active {{end}}item" href="{{$.Link}}?sort=furthestduedate&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.furthest_due_date"}}</a>
<a class="{{if eq .SortType "leastcomplete"}}active {{end}}item" href="{{$.Link}}?sort=leastcomplete&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.least_complete"}}</a>
<a class="{{if eq .SortType "mostcomplete"}}active {{end}}item" href="{{$.Link}}?sort=mostcomplete&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.most_complete"}}</a>
<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="{{$.Link}}?sort=mostissues&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="{{$.Link}}?sort=leastissues&state={{$.State}}&q={{$.Keyword}}">{{.locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h2 class="ui compact small menu header">
<h2 class="ui compact small menu header small-pill-buttons">
<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
</h2>
8 changes: 5 additions & 3 deletions templates/repo/issue/search.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<form class="ui form ignore-dirty">
<div class="ui search fluid action input">
<form class="issue-search-form ui form ignore-dirty gt-df gt-f1">
<div class="ui small search fluid action input gt-df gt-f1">
<input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="state" value="{{$.State}}">
<input type="hidden" name="labels" value="{{.SelectLabels}}">
Expand All @@ -8,6 +8,8 @@
<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
<input type="hidden" name="poster" value="{{$.PosterID}}">
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
<button class="ui primary button" type="submit">{{.locale.Tr "explore.search"}}</button>
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
</div>
</form>
2 changes: 1 addition & 1 deletion templates/repo/sub_menu_release_tag.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}

{{if $canReadReleases}}
<h2 class="ui compact small menu header">
<h2 class="ui compact small menu header small-pill-buttons">
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
{{if $canReadCode}}
<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
Expand Down
2 changes: 1 addition & 1 deletion tests/integration/pull_compare_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ func TestPullCompare(t *testing.T) {
req := NewRequest(t, "GET", "/user2/repo1/pulls")
resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body)
link, exists := htmlDoc.doc.Find(".ui.three.column.grid").Find(".ui.green.button").Attr("href")
link, exists := htmlDoc.doc.Find(".new-pr-button").Attr("href")
assert.True(t, exists, "The template has changed")

req = NewRequest(t, "GET", link)
Expand Down
16 changes: 16 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -782,6 +782,18 @@ a.label,
border-right-color: var(--color-primary);
}

/* fix button enlarged vertically by svg icon */
/* TODO: change to just `.small.button:has(svg)` but may have global side effects */
.ui.action.input .small.button:has(svg) {
padding-top: 7px !important;
padding-bottom: 7px !important;
}

/* fix fomantic bug with visible border-right on hover */
.ui.action.input:not([class*="left action"]) > input:hover {
border-right-color: transparent;
}

.ui.menu,
.ui.vertical.menu {
background: var(--color-menu);
Expand Down Expand Up @@ -830,6 +842,10 @@ a.label,
color: var(--color-text-light-3);
}

.ui.menu .item::before {
background: var(--color-secondary);
}

/* sub menu of vertical menu */
.ui.vertical.menu .item .menu .item {
color: var(--color-text-light-2);
Expand Down
28 changes: 15 additions & 13 deletions web_src/css/repository.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@

.repository .ui.tabs.divider {
margin-top: -1px;
margin-bottom: 20px;
margin-bottom: 12px;
}

.repository #clone-panel #repo-clone-url {
Expand Down Expand Up @@ -3269,6 +3269,20 @@ td.blob-excerpt {
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
}

.issue-search-form,
.milestone-search-form {
min-width: 200px; /* to enable flexbox wrapping on mobile */
}

.small-pill-buttons {
min-height: 35.4px !important; /* match .small.button in height */
}

.small-pill-buttons .item {
padding-top: 6px !important;
padding-bottom: 6px !important;
}

@media (max-width: 767px) {
.repository.file.list #repo-files-table .entry,
.repository.file.list #repo-files-table .commit-list {
Expand All @@ -3289,18 +3303,6 @@ td.blob-excerpt {
.repository.file.list #repo-files-table .commit-list span.commit-summary {
display: none !important;
}
.issue-list-headers.ui[class].grid > div:nth-child(1) {
order: 1;
width: 50%;
}
.issue-list-headers.ui[class].grid > div:nth-child(2) {
order: 3;
width: 100%;
}
.issue-list-headers.ui[class].grid > div.column:not(.row):nth-child(3) {
order: 2;
width: 50%;
}
.repository.view.issue .comment-list .timeline,
.repository.view.issue .comment-list .timeline-item {
margin-left: 0;
Expand Down