Skip to content

Commit 27c221a

Browse files
silverwindwxiaoguang
silverwind
and
wxiaoguang
authored
Rework notifications list (#24812)
- Replace `<table>` with flexbox - Add issue modification time and issue number - Remove big title - Replace tabs with menu items - Add clicked item deletion on back button cache restoration --------- Co-authored-by: wxiaoguang <[email protected]>
1 parent 309354c commit 27c221a

File tree

9 files changed

+216
-172
lines changed

9 files changed

+216
-172
lines changed

‎templates/repo/branch/list.tmpl

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</td>
2828
<td class="right aligned overflow-visible">
2929
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
30-
<button class="ui button button-ghost show-create-branch-modal gt-mx-3"
30+
<button class="ui button button-ghost show-create-branch-modal gt-p-3"
3131
data-modal="#create-branch-modal"
3232
data-branch-from="{{$.DefaultBranch}}"
3333
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
@@ -37,12 +37,12 @@
3737
</button>
3838
{{end}}
3939
{{if .EnableFeed}}
40-
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
40+
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
4141
{{svg "octicon-rss"}}
4242
</a>
4343
{{end}}
4444
{{if not $.DisableDownloadSourceArchives}}
45-
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
45+
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
4646
{{svg "octicon-download"}}
4747
<div class="menu">
4848
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -51,7 +51,7 @@
5151
</div>
5252
{{end}}
5353
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
54-
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
54+
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
5555
data-is-default-branch="true"
5656
data-modal="#rename-branch-modal"
5757
data-old-branch-name="{{$.DefaultBranch}}"
@@ -134,7 +134,7 @@
134134
</td>
135135
<td class="three wide right aligned overflow-visible">
136136
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
137-
<button class="ui button button-ghost show-modal show-create-branch-modal gt-mx-3"
137+
<button class="ui button button-ghost gt-p-3 show-modal show-create-branch-modal"
138138
data-branch-from="{{.Name}}"
139139
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
140140
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
@@ -144,12 +144,12 @@
144144
</button>
145145
{{end}}
146146
{{if $.EnableFeed}}
147-
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
147+
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
148148
{{svg "octicon-rss"}}
149149
</a>
150150
{{end}}
151151
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
152-
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
152+
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
153153
{{svg "octicon-download"}}
154154
<div class="menu">
155155
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
@@ -158,7 +158,7 @@
158158
</div>
159159
{{end}}
160160
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
161-
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
161+
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
162162
data-is-default-branch="false"
163163
data-old-branch-name="{{.Name}}"
164164
data-modal="#rename-branch-modal"
@@ -169,13 +169,13 @@
169169
{{end}}
170170
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
171171
{{if .IsDeleted}}
172-
<button class="ui button button-ghost undo-button gt-mx-3" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
172+
<button class="ui button button-ghost gt-p-3 undo-button" data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID}}&name={{.DeletedBranch.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.restore" (.Name)}}">
173173
<span class="text blue">
174174
{{svg "octicon-reply"}}
175175
</span>
176176
</button>
177177
{{else}}
178-
<button class="ui button button-ghost delete-button delete-branch-button gt-mx-3" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
178+
<button class="ui button button-ghost gt-p-3 delete-button delete-branch-button" data-url="{{$.Link}}/delete?name={{.Name}}&page={{$.Page.Paginater.Current}}" data-tooltip-content="{{$.locale.Tr "repo.branch.delete" (.Name)}}" data-name="{{.Name}}">
179179
{{svg "octicon-trash"}}
180180
</button>
181181
{{end}}

‎templates/repo/view_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
{{$subJumpablePathName}}
7070
{{else}}
7171
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
72-
<span class="color-text-light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
72+
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
7373
{{end}}
7474
</a>
7575
{{else}}

‎templates/shared/issueicon.tmpl

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{{if .IsPull}}
2+
{{if and .PullRequest .PullRequest.HasMerged}}
3+
{{svg "octicon-git-merge" 16 "text purple"}}
4+
{{else if and .GetPullRequest .GetPullRequest.HasMerged}}
5+
{{svg "octicon-git-merge" 16 "text purple"}}
6+
{{else}}
7+
{{if .IsClosed}}
8+
{{svg "octicon-git-pull-request" 16 "text red"}}
9+
{{else}}
10+
{{if and .PullRequest .PullRequest.IsWorkInProgress}}
11+
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
12+
{{else if and .GetPullRequest .GetPullRequest.IsWorkInProgress}}
13+
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
14+
{{else}}
15+
{{svg "octicon-git-pull-request" 16 "text green"}}
16+
{{end}}
17+
{{end}}
18+
{{end}}
19+
{{else}}
20+
{{if .IsClosed}}
21+
{{svg "octicon-issue-closed" 16 "text red"}}
22+
{{else}}
23+
{{svg "octicon-issue-opened" 16 "text green"}}
24+
{{end}}
25+
{{end}}

‎templates/shared/issuelist.tmpl

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,7 @@
77
<input type="checkbox" autocomplete="off" class="issue-checkbox gt-mt-2 gt-mr-4" data-issue-id={{.ID}} aria-label="{{$.locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
88
{{end}}
99
<div class="issue-item-icon">
10-
{{if .IsPull}}
11-
{{if .PullRequest.HasMerged}}
12-
{{svg "octicon-git-merge" 16 "text purple"}}
13-
{{else}}
14-
{{if .IsClosed}}
15-
{{svg "octicon-git-pull-request" 16 "text red"}}
16-
{{else}}
17-
{{if .PullRequest.IsWorkInProgress}}
18-
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
19-
{{else}}
20-
{{svg "octicon-git-pull-request" 16 "text green"}}
21-
{{end}}
22-
{{end}}
23-
{{end}}
24-
{{else}}
25-
{{if .IsClosed}}
26-
{{svg "octicon-issue-closed" 16 "text red"}}
27-
{{else}}
28-
{{svg "octicon-issue-opened" 16 "text green"}}
29-
{{end}}
30-
{{end}}
10+
{{template "shared/issueicon" .}}
3111
</div>
3212
</div>
3313
<div class="issue-item-main gt-f1 gt-fc gt-df">

‎templates/user/notification/notification_div.tmpl

Lines changed: 102 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
<div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-params="{{.Page.GetParams}}" data-sequence-number="{{.SequenceNumber}}">
22
<div class="ui container">
3-
<h1 class="ui header gt-df gt-ac">
4-
{{svg "octicon-bell" 28 "gt-mr-3 gt-mt-1"}}
5-
{{.locale.Tr "notification.notifications"}}
6-
</h1>
7-
<div class="ui top attached tabular menu">
8-
{{$notificationUnreadCount := call .NotificationUnreadCount}}
9-
<a href="{{AppSubUrl}}/notifications?q=unread" class="{{if eq .Status 1}}active {{end}}item">
10-
{{.locale.Tr "notification.unread"}}
11-
<div class="ui label {{if not $notificationUnreadCount}}gt-hidden{{end}}">{{$notificationUnreadCount}}</div>
12-
</a>
13-
<a href="{{AppSubUrl}}/notifications?q=read" class="{{if eq .Status 2}}active {{end}}item">
14-
{{.locale.Tr "notification.read"}}
15-
</a>
3+
{{$notificationUnreadCount := call .NotificationUnreadCount}}
4+
<div class="gt-df gt-ac gt-sb gt-mb-4">
5+
<div class="small-menu-items ui compact tiny menu">
6+
<a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread">
7+
{{.locale.Tr "notification.unread"}}
8+
<div class="notifications-unread-count ui label {{if not $notificationUnreadCount}}gt-hidden{{end}}">{{$notificationUnreadCount}}</div>
9+
</a>
10+
<a class="{{if eq .Status 2}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=read">
11+
{{.locale.Tr "notification.read"}}
12+
</a>
13+
</div>
1614
{{if and (eq .Status 1)}}
17-
<form class="gt-ml-auto" action="{{AppSubUrl}}/notifications/purge" method="POST">
15+
<form action="{{AppSubUrl}}/notifications/purge" method="POST">
1816
{{$.CsrfTokenHtml}}
1917
<div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}">
2018
<button class="ui mini button primary gt-mr-0" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
@@ -24,113 +22,100 @@
2422
</form>
2523
{{end}}
2624
</div>
27-
<div class="ui bottom attached active tab segment gt-p-3">
28-
{{if eq (len .Notifications) 0}}
29-
<div class="gt-df gt-ac gt-fc gt-p-4">
30-
{{svg "octicon-inbox" 56 "gt-mb-4"}}
31-
{{if eq .Status 1}}
32-
{{.locale.Tr "notification.no_unread"}}
33-
{{else}}
34-
{{.locale.Tr "notification.no_read"}}
35-
{{end}}
36-
</div>
37-
{{else}}
38-
<table class="ui unstackable very compact small table" id="notification_table">
39-
<tbody>
40-
{{range $notification := .Notifications}}
41-
{{$issue := .Issue}}
42-
{{$repo := .Repository}}
43-
<tr id="notification_{{.ID}}">
44-
<td class="collapsing gt-pl-4">
25+
<div class="gt-p-0">
26+
<div id="notification_table">
27+
{{if eq (len .Notifications) 0}}
28+
<div class="gt-df gt-ac gt-fc gt-p-4">
29+
{{svg "octicon-inbox" 56 "gt-mb-4"}}
30+
{{if eq .Status 1}}
31+
{{.locale.Tr "notification.no_unread"}}
32+
{{else}}
33+
{{.locale.Tr "notification.no_read"}}
34+
{{end}}
35+
</div>
36+
{{else}}
37+
{{$locale := .locale}}
38+
{{range $notification := .Notifications}}
39+
<div class="notifications-item gt-df gt-ac gt-fw gt-gap-3 gt-p-3" id="notification_{{.ID}}" data-status="{{.Status}}">
40+
<div class="notifications-icon gt-ml-3 gt-mr-2 gt-self-start gt-mt-2">
41+
{{if .Issue}}
42+
{{template "shared/issueicon" .Issue}}
43+
{{else}}
44+
{{svg "octicon-repo" 16 "text grey"}}
45+
{{end}}
46+
</div>
47+
<a class="notifications-link gt-df gt-f1 gt-fc silenced" href="{{.Link}}">
48+
<div class="notifications-top-row gt-font-13">
49+
{{.Repository.FullName}} <span class="text light-3">#{{.Issue.Index}}</span>
4550
{{if eq .Status 3}}
46-
{{svg "octicon-pin" 16 "text blue"}}
47-
{{else if not $issue}}
48-
{{svg "octicon-repo" 16 "text grey"}}
49-
{{else if $issue.IsPull}}
50-
{{if $issue.IsClosed}}
51-
{{if $issue.GetPullRequest.HasMerged}}
52-
{{svg "octicon-git-merge" 16 "text purple"}}
53-
{{else}}
54-
{{svg "octicon-git-pull-request" 16 "text red"}}
55-
{{end}}
56-
{{else}}
57-
{{svg "octicon-git-pull-request" 16 "text green"}}
58-
{{end}}
59-
{{else}}
60-
{{if $issue.IsClosed}}
61-
{{svg "octicon-issue-closed" 16 "text red"}}
62-
{{else}}
63-
{{svg "octicon-issue-opened" 16 "text green"}}
64-
{{end}}
51+
{{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}}
6552
{{end}}
66-
</td>
67-
<td class="eleven wide">
68-
<a class="item issue-title muted" href="{{.Link}}">
69-
{{if $issue}}
70-
#{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
53+
</div>
54+
<div class="notifications-bottom-row gt-font-16 gt-py-1">
55+
<span class="issue-title">
56+
{{if .Issue}}
57+
{{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
7158
{{else}}
72-
{{$repo.FullName}}
59+
{{.Repository.FullName}}
7360
{{end}}
74-
</a>
75-
</td>
76-
<td>
77-
<a class="item muted" href="{{$repo.Link}}">{{$repo.FullName}}</a>
78-
</td>
79-
<td class="collapsing">
80-
{{if ne .Status 3}}
81-
<form action="{{AppSubUrl}}/notifications/status" method="POST">
82-
{{$.CsrfTokenHtml}}
83-
<input type="hidden" name="notification_id" value="{{.ID}}">
84-
<input type="hidden" name="status" value="pinned">
85-
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.pin"}}'
86-
data-url="{{AppSubUrl}}/notifications/status"
87-
data-status="pinned"
88-
data-page="{{$.Page.Paginater.Current}}"
89-
data-notification-id="{{.ID}}"
90-
data-q="{{$.Keyword}}">
91-
{{svg "octicon-pin"}}
92-
</button>
93-
</form>
94-
{{end}}
95-
</td>
96-
<td class="collapsing">
97-
{{if or (eq .Status 1) (eq .Status 3)}}
98-
<form action="{{AppSubUrl}}/notifications/status" method="POST">
99-
{{$.CsrfTokenHtml}}
100-
<input type="hidden" name="notification_id" value="{{.ID}}">
101-
<input type="hidden" name="status" value="read">
102-
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
103-
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_read"}}'
104-
data-url="{{AppSubUrl}}/notifications/status"
105-
data-status="read"
106-
data-page="{{$.Page.Paginater.Current}}"
107-
data-notification-id="{{.ID}}"
108-
data-q="{{$.Keyword}}">
109-
{{svg "octicon-check"}}
110-
</button>
111-
</form>
112-
{{else if eq .Status 2}}
113-
<form action="{{AppSubUrl}}/notifications/status" method="POST">
114-
{{$.CsrfTokenHtml}}
115-
<input type="hidden" name="notification_id" value="{{.ID}}">
116-
<input type="hidden" name="status" value="unread">
117-
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
118-
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_unread"}}'
119-
data-url="{{AppSubUrl}}/notifications/status"
120-
data-status="unread"
121-
data-page="{{$.Page.Paginater.Current}}"
122-
data-notification-id="{{.ID}}"
123-
data-q="{{$.Keyword}}">
124-
{{svg "octicon-bell"}}
125-
</button>
126-
</form>
127-
{{end}}
128-
</td>
129-
</tr>
130-
{{end}}
131-
</tbody>
132-
</table>
133-
{{end}}
61+
</span>
62+
</div>
63+
</a>
64+
<div class="notifications-updated gt-ac gt-mr-3">
65+
{{TimeSinceUnix .Issue.UpdatedUnix $locale}}
66+
</div>
67+
<div class="notifications-buttons gt-ac gt-je gt-gap-2 gt-px-2">
68+
{{if ne .Status 3}}
69+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
70+
{{$.CsrfTokenHtml}}
71+
<input type="hidden" name="notification_id" value="{{.ID}}">
72+
<input type="hidden" name="status" value="pinned">
73+
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
74+
data-url="{{AppSubUrl}}/notifications/status"
75+
data-status="pinned"
76+
data-page="{{$.Page.Paginater.Current}}"
77+
data-notification-id="{{.ID}}"
78+
data-q="{{$.Keyword}}">
79+
{{svg "octicon-pin"}}
80+
</button>
81+
</form>
82+
{{end}}
83+
{{if or (eq .Status 1) (eq .Status 3)}}
84+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
85+
{{$.CsrfTokenHtml}}
86+
<input type="hidden" name="notification_id" value="{{.ID}}">
87+
<input type="hidden" name="status" value="read">
88+
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
89+
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
90+
data-url="{{AppSubUrl}}/notifications/status"
91+
data-status="read"
92+
data-page="{{$.Page.Paginater.Current}}"
93+
data-notification-id="{{.ID}}"
94+
data-q="{{$.Keyword}}">
95+
{{svg "octicon-check"}}
96+
</button>
97+
</form>
98+
{{else if eq .Status 2}}
99+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
100+
{{$.CsrfTokenHtml}}
101+
<input type="hidden" name="notification_id" value="{{.ID}}">
102+
<input type="hidden" name="status" value="unread">
103+
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
104+
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
105+
data-url="{{AppSubUrl}}/notifications/status"
106+
data-status="unread"
107+
data-page="{{$.Page.Paginater.Current}}"
108+
data-notification-id="{{.ID}}"
109+
data-q="{{$.Keyword}}">
110+
{{svg "octicon-bell"}}
111+
</button>
112+
</form>
113+
{{end}}
114+
</div>
115+
</div>
116+
{{end}}
117+
{{end}}
118+
</div>
134119
</div>
135120
{{template "base/paginate" .}}
136121
</div>

0 commit comments

Comments
 (0)