Skip to content

Commit d3ce829

Browse files
silverwindsilverwind
committed
Issue and Pulls lists rework
Reorganized and restyled the issue and pull request lists.
1 parent 24330f7 commit d3ce829

File tree

4 files changed

+181
-120
lines changed

4 files changed

+181
-120
lines changed

‎templates/repo/issue/list.tmpl

Lines changed: 112 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -204,97 +204,128 @@
204204
<div class="issue list">
205205
{{ $approvalCounts := .ApprovalCounts}}
206206
{{range .Issues}}
207-
<li class="item">
208-
{{if $.CanWriteIssuesOrPulls}}
209-
<div class="ui checkbox issue-checkbox">
210-
<input type="checkbox" data-issue-id={{.ID}}></input>
211-
</div>
212-
{{end}}
213-
<div class="ui {{if .IsClosed}}{{if .IsPull}}{{if .PullRequest.HasMerged}}purple{{else}}red{{end}}{{else}}red{{end}}{{else}}{{if .IsRead}}white{{else}}green{{end}}{{end}} label">#{{.Index}}</div>
214-
<a class="title" href="{{$.Link}}/{{.Index}}">{{RenderEmoji .Title}}</a>
215-
216-
{{if .IsPull }}
217-
{{if (index $.CommitStatus .PullRequest.ID)}}
218-
{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
219-
{{end}}
220-
{{end}}
221-
222-
{{range .Labels}}
223-
<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
224-
{{end}}
225-
226-
{{if .NumComments}}
227-
<span class="comment ui right">{{svg "octicon-comment"}} {{.NumComments}}</span>
228-
{{end}}
229-
230-
{{if .TotalTrackedTime}}
231-
<span class="comment ui right">{{svg "octicon-clock"}} {{.TotalTrackedTime | Sec2Time}}</span>
232-
{{end}}
233-
234-
<p class="desc">
235-
{{ $timeStr := TimeSinceUnix .GetLastEventTimestamp $.Lang }}
236-
{{if .OriginalAuthor }}
237-
{{$.i18n.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor | Safe}}
238-
{{else if gt .Poster.ID 0}}
239-
{{$.i18n.Tr .GetLastEventLabel $timeStr .Poster.HomeLink (.Poster.GetDisplayName | Escape) | Safe}}
240-
{{else}}
241-
{{$.i18n.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
242-
{{end}}
243-
244-
{{if .Milestone}}
245-
<a class="milestone" href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}">
246-
{{svg "octicon-milestone"}} {{.Milestone.Name}}
247-
</a>
248-
{{end}}
249-
{{if .Ref}}
250-
<a class="ref" href="{{index $.IssueRefURLs .ID}}">
251-
{{svg "octicon-git-branch"}} {{index $.IssueRefEndNames .ID}}
252-
</a>
253-
{{end}}
254-
{{$tasks := .GetTasks}}
255-
{{if gt $tasks 0}}
256-
{{$tasksDone := .GetTasksDone}}
257-
<span class="checklist">
258-
{{svg "octicon-checklist"}} {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
259-
</span>
207+
<li class="item df py-3">
208+
<div class="issue-item-left df py-2">
209+
{{if $.CanWriteIssuesOrPulls}}
210+
<div class="ui checkbox issue-checkbox">
211+
<input type="checkbox" data-issue-id={{.ID}}></input>
212+
<label></label>
213+
</div>
260214
{{end}}
261-
{{if ne .DeadlineUnix 0}}
262-
<span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center">
263-
{{svg "octicon-calendar"}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
215+
<div class="issue-item-icon">
216+
{{if .IsPull}}
217+
{{if .PullRequest.HasMerged}}
218+
{{svg "octicon-git-merge" 16 "text purple"}}
219+
{{else}}
220+
{{if .IsClosed}}
221+
{{svg "octicon-git-pull-request" 16 "text red"}}
222+
{{else}}
223+
{{svg "octicon-git-pull-request" 16 "text green"}}
224+
{{end}}
225+
{{end}}
226+
{{else}}
227+
{{if .IsClosed}}
228+
{{svg "octicon-issue-opened" 16 "text red"}}
229+
{{else}}
230+
{{svg "octicon-issue-closed" 16 "text green"}}
231+
{{end}}
232+
{{end}}
233+
</div>
234+
</div>
235+
<div class="issue-item-main f1 fc df">
236+
<div class="issue-item-top-row df ac">
237+
<a class="title my-1 mr-2" href="{{$.Link}}/{{.Index}}">{{RenderEmoji .Title}}</a>
238+
{{if .IsPull }}
239+
{{if (index $.CommitStatus .PullRequest.ID)}}
240+
{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
241+
{{end}}
242+
{{end}}
243+
{{range .Labels}}
244+
<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
245+
{{end}}
246+
</div>
247+
<div class="desc issue-item-bottom-row df ac my-1">
248+
<span class="index mr-2">
249+
#{{.Index}}
264250
</span>
265-
{{end}}
266-
{{range .Assignees}}
267-
<a class="ui right assignee poping up" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-variation="inverted" data-position="left center">
268-
<img class="ui avatar image" src="{{.RelAvatarLink}}">
269-
</a>
270-
{{end}}
271-
{{if .IsPull}}
272-
{{$approveOfficial := call $approvalCounts .ID "approve"}}
273-
{{$rejectOfficial := call $approvalCounts .ID "reject"}}
274-
{{$waitingOfficial := call $approvalCounts .ID "waiting"}}
275-
{{if gt $approveOfficial 0}}
276-
<span class="approvals">{{svg "octicon-check"}}
277-
{{$.i18n.Tr (TrN $.i18n.Lang $approveOfficial "repo.pulls.approve_count_1" "repo.pulls.approve_count_n") $approveOfficial}}
278-
</span>
251+
{{ $timeStr := TimeSinceUnix .GetLastEventTimestamp $.Lang }}
252+
{{if .OriginalAuthor }}
253+
{{$.i18n.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor | Safe}}
254+
{{else if gt .Poster.ID 0}}
255+
{{$.i18n.Tr .GetLastEventLabel $timeStr .Poster.HomeLink (.Poster.GetDisplayName | Escape) | Safe}}
256+
{{else}}
257+
{{$.i18n.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
279258
{{end}}
280259

281-
{{if gt $rejectOfficial 0}}
282-
<span class="rejects">{{svg "octicon-diff"}}
283-
{{$.i18n.Tr (TrN $.i18n.Lang $rejectOfficial "repo.pulls.reject_count_1" "repo.pulls.reject_count_n") $rejectOfficial}}
260+
{{if .Milestone}}
261+
<a class="milestone" href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}">
262+
{{svg "octicon-milestone"}} {{.Milestone.Name}}
263+
</a>
264+
{{end}}
265+
{{if .Ref}}
266+
<a class="ref" href="{{index $.IssueRefURLs .ID}}">
267+
{{svg "octicon-git-branch"}} {{index $.IssueRefEndNames .ID}}
268+
</a>
269+
{{end}}
270+
{{$tasks := .GetTasks}}
271+
{{if gt $tasks 0}}
272+
{{$tasksDone := .GetTasksDone}}
273+
<span class="checklist">
274+
{{svg "octicon-checklist"}} {{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
284275
</span>
285276
{{end}}
286-
287-
{{if gt $waitingOfficial 0}}
288-
<span class="waiting">{{svg "octicon-eye"}}
289-
{{$.i18n.Tr (TrN $.i18n.Lang $waitingOfficial "repo.pulls.waiting_count_1" "repo.pulls.waiting_count_n") $waitingOfficial}}
277+
{{if ne .DeadlineUnix 0}}
278+
<span class="due-date poping up" data-content="{{$.i18n.Tr "repo.issues.due_date"}}" data-variation="tiny inverted" data-position="right center">
279+
{{svg "octicon-calendar"}}<span{{if .IsOverdue}} class="overdue"{{end}}>{{.DeadlineUnix.FormatShort}}</span>
290280
</span>
291281
{{end}}
282+
{{if .IsPull}}
283+
{{$approveOfficial := call $approvalCounts .ID "approve"}}
284+
{{$rejectOfficial := call $approvalCounts .ID "reject"}}
285+
{{$waitingOfficial := call $approvalCounts .ID "waiting"}}
286+
{{if gt $approveOfficial 0}}
287+
<span class="approvals">{{svg "octicon-check"}}
288+
{{$.i18n.Tr (TrN $.i18n.Lang $approveOfficial "repo.pulls.approve_count_1" "repo.pulls.approve_count_n") $approveOfficial}}
289+
</span>
290+
{{end}}
291+
292+
{{if gt $rejectOfficial 0}}
293+
<span class="rejects">{{svg "octicon-diff"}}
294+
{{$.i18n.Tr (TrN $.i18n.Lang $rejectOfficial "repo.pulls.reject_count_1" "repo.pulls.reject_count_n") $rejectOfficial}}
295+
</span>
296+
{{end}}
297+
298+
{{if gt $waitingOfficial 0}}
299+
<span class="waiting">{{svg "octicon-eye"}}
300+
{{$.i18n.Tr (TrN $.i18n.Lang $waitingOfficial "repo.pulls.waiting_count_1" "repo.pulls.waiting_count_n") $waitingOfficial}}
301+
</span>
302+
{{end}}
292303

293-
{{if and (not .PullRequest.HasMerged) (gt (len .PullRequest.ConflictedFiles) 0)}}
294-
<span class="conflicting">{{svg "octicon-x"}} {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
304+
{{if and (not .PullRequest.HasMerged) (gt (len .PullRequest.ConflictedFiles) 0)}}
305+
<span class="conflicting">{{svg "octicon-x"}} {{$.i18n.Tr (TrN $.i18n.Lang (len .PullRequest.ConflictedFiles) "repo.pulls.num_conflicting_files_1" "repo.pulls.num_conflicting_files_n") (len .PullRequest.ConflictedFiles)}}</span>
306+
{{end}}
295307
{{end}}
296-
{{end}}
297-
</p>
308+
</div>
309+
</div>
310+
<div class="issue-item-icons-right df p-2">
311+
<div class="issue-item-icon-right text grey">
312+
{{if .TotalTrackedTime}}
313+
{{svg "octicon-clock" 16 "mr-2"}}{{.TotalTrackedTime | Sec2Time}}
314+
{{end}}
315+
</div>
316+
<div class="issue-item-icon-right text grey">
317+
{{range .Assignees}}
318+
<a class="ui assignee poping up" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-variation="inverted" data-position="left center">
319+
<img class="ui avatar image" src="{{.RelAvatarLink}}">
320+
</a>
321+
{{end}}
322+
</div>
323+
<div class="issue-item-icon-right text grey">
324+
{{if .NumComments}}
325+
{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
326+
{{end}}
327+
</div>
328+
</div>
298329
</li>
299330
{{end}}
300331

‎web_src/less/_base.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
/* target-based colors */
7777
--color-body: #ffffff;
7878
--color-text: #212121;
79+
--color-text-hover: #000000;
7980
--color-box-header: #f7f7f7;
8081
--color-box-body: #ffffff;
8182
--color-timeline: #ececec;
@@ -141,6 +142,15 @@ strong {
141142
font-weight: 500;
142143
}
143144

145+
h1,
146+
h2,
147+
h3,
148+
h4,
149+
h5,
150+
h6 {
151+
font-weight: 600;
152+
}
153+
144154
body {
145155
background-color: var(--color-body);
146156
overflow-y: auto;

‎web_src/less/_repository.less

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2586,42 +2586,78 @@
25862586
display: none;
25872587
}
25882588

2589-
.ui.checkbox.issue-checkbox {
2590-
vertical-align: middle;
2591-
}
2592-
25932589
.ui.menu .item > img:not(.ui) {
25942590
width: auto;
25952591
}
25962592

25972593
.issue.list {
25982594
list-style: none;
2595+
margin-top: 1rem;
25992596

26002597
> .item {
2601-
padding-top: 15px;
2602-
padding-bottom: 10px;
2603-
border-bottom: 1px dashed #aaaaaa;
2598+
.issue-checkbox {
2599+
margin-top: 1px;
2600+
}
2601+
2602+
.issue-item-icon svg {
2603+
margin-right: .75rem;
2604+
}
2605+
2606+
.issue-item-icons-right > * + * {
2607+
margin-left: .5rem;
2608+
}
2609+
2610+
.issue-item-main {
2611+
width: 100%;
2612+
}
2613+
2614+
.issue-item-top-row {
2615+
max-width: 80%;
2616+
overflow-wrap: break-word;
2617+
color: var(--color-text);
2618+
font-size: 16px;
2619+
font-weight: 600;
2620+
}
2621+
2622+
.issue-item-bottom-row {
2623+
font-size: 13px;
2624+
}
26042625

26052626
.title {
2606-
color: #444444;
2607-
font-size: 15px;
2608-
font-weight: 500;
2609-
margin: 0 6px;
2627+
display: block;
2628+
min-width: 0;
2629+
color: var(--color-text);
2630+
font-size: 16px;
2631+
font-weight: 600;
26102632

26112633
&:hover {
2612-
color: #000000;
2634+
color: var(--color-text-hover);
26132635
}
26142636
}
26152637

2616-
.comment {
2617-
padding-right: 10px;
2618-
color: #666666;
2638+
.issue-item-icon-right {
2639+
min-width: 2rem;
2640+
}
2641+
2642+
.assignee {
2643+
position: relative;
2644+
top: -3px;
2645+
}
2646+
2647+
.assignee img {
2648+
width: 20px;
2649+
height: 20px;
26192650
}
26202651

26212652
.desc {
2622-
padding-top: 5px;
26232653
color: #999999;
26242654

2655+
.time-since,
2656+
a {
2657+
margin-left: .25rem;
2658+
margin-right: .25rem;
2659+
}
2660+
26252661
.waiting,
26262662
.approvals,
26272663
.rejects {
@@ -2662,7 +2698,7 @@
26622698
color: #999999 !important;
26632699

26642700
&:hover {
2665-
color: #000000 !important;
2701+
color: var(--color-text-hover) !important;
26662702
}
26672703
}
26682704

@@ -2671,24 +2707,23 @@
26712707
color: #999999 !important;
26722708

26732709
&:hover {
2674-
color: #000000 !important;
2710+
color: var(--color-text-hover) !important;
26752711
}
26762712

26772713
span {
26782714
margin-right: -4px;
26792715
}
26802716
}
26812717

2682-
.assignee {
2683-
margin-top: -5px;
2684-
margin-right: 5px;
2685-
}
2686-
26872718
.overdue {
26882719
color: var(--color-red);
26892720
}
26902721
}
26912722
}
2723+
2724+
> .item + .item {
2725+
border-top: 1px solid var(--color-secondary);
2726+
}
26922727
}
26932728

26942729
.page.buttons {

0 commit comments

Comments
 (0)