Skip to content

Rework notifications list #24812

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 34 commits into from
May 25, 2023
Merged

Rework notifications list #24812

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
db0a5b0
Rework notifications list
silverwind May 19, 2023
d7fb689
remove title
silverwind May 19, 2023
ebc5cb1
replace tabs with menu items
silverwind May 19, 2023
e7089f0
tweak notification icon line height
silverwind May 19, 2023
e5b9c9b
remove unnecessary class
silverwind May 19, 2023
77e3b5e
fix button alignment
silverwind May 19, 2023
1f4b9f8
remove duplicate issue index
silverwind May 19, 2023
36a2a86
remove dead styles
silverwind May 19, 2023
ef49efa
make button-ghost always have padding
silverwind May 19, 2023
55cf168
introduce and use button-link for repo homepage
silverwind May 19, 2023
5350fd4
add link button to devtest
silverwind May 19, 2023
806b068
support bfcache to remove items in table
silverwind May 19, 2023
06d4eb3
use e over event
silverwind May 19, 2023
2e4e199
update comments
silverwind May 19, 2023
4bcd2ca
tweak
silverwind May 19, 2023
5d42726
tweak margin
silverwind May 19, 2023
4f0f6b3
remove padding from button-ghost and add explicit padding everywhere
silverwind May 19, 2023
f6d2d4d
revert button-link changes
silverwind May 21, 2023
4e0a2c4
add shared icon template, add hover effect
silverwind May 21, 2023
c11e27b
Merge branch 'main' into notif3
silverwind May 21, 2023
14a74f4
Update templates/devtest/gitea-ui.tmpl
silverwind May 21, 2023
3a96616
remove one useless class
silverwind May 21, 2023
ec9c3b9
make hover effect without color
silverwind May 21, 2023
07fb97a
more margin on pin
silverwind May 21, 2023
4ad1b11
Update templates/repo/branch/list.tmpl
silverwind May 22, 2023
49e710c
Remove capture option
silverwind May 22, 2023
d66db5e
Merge branch 'main' into notif3
silverwind May 22, 2023
fed2afa
add --font-weight-bold for notifcation number
silverwind May 22, 2023
590a12b
Merge branch 'main' into notif3
silverwind May 22, 2023
3f835c6
remove unused helper
silverwind May 22, 2023
95ce946
handle case of 'repo notification'
silverwind May 22, 2023
2401459
Merge branch 'main' into notif3
silverwind May 24, 2023
d256d52
Merge branch 'main' into notif3
GiteaBot May 25, 2023
074d3fe
Merge branch 'main' into notif3
GiteaBot May 25, 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
20 changes: 10 additions & 10 deletions templates/repo/branch/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</td>
<td class="right aligned overflow-visible">
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
<button class="ui button button-ghost show-create-branch-modal gt-mx-3"
<button class="ui button button-ghost show-create-branch-modal gt-p-3"
data-modal="#create-branch-modal"
data-branch-from="{{$.DefaultBranch}}"
data-branch-from-urlcomponent="{{PathEscapeSegments $.DefaultBranch}}"
Expand All @@ -37,12 +37,12 @@
</button>
{{end}}
{{if .EnableFeed}}
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .DefaultBranch}}">
{{svg "octicon-rss"}}
</a>
{{end}}
{{if not $.DisableDownloadSourceArchives}}
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" ($.DefaultBranch)}}">
{{svg "octicon-download"}}
<div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.DefaultBranch}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
Expand All @@ -51,7 +51,7 @@
</div>
{{end}}
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
data-is-default-branch="true"
data-modal="#rename-branch-modal"
data-old-branch-name="{{$.DefaultBranch}}"
Expand Down Expand Up @@ -134,7 +134,7 @@
</td>
<td class="three wide right aligned overflow-visible">
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
<button class="ui button button-ghost show-modal show-create-branch-modal gt-mx-3"
<button class="ui button button-ghost gt-p-3 show-modal show-create-branch-modal"
data-branch-from="{{.Name}}"
data-branch-from-urlcomponent="{{PathEscapeSegments .Name}}"
data-tooltip-content="{{$.locale.Tr "repo.branch.new_branch_from" .Name}}"
Expand All @@ -144,12 +144,12 @@
</button>
{{end}}
{{if $.EnableFeed}}
<a role="button" class="ui button button-ghost gt-mx-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
<a role="button" class="ui button button-ghost gt-p-3" href="{{$.FeedURL}}/rss/branch/{{PathEscapeSegments .Name}}">
{{svg "octicon-rss"}}
</a>
{{end}}
{{if and (not .IsDeleted) (not $.DisableDownloadSourceArchives)}}
<div class="ui dropdown button button-ghost gt-mx-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
<div class="ui dropdown button button-ghost gt-p-3" data-tooltip-content="{{$.locale.Tr "repo.branch.download" (.Name)}}">
{{svg "octicon-download"}}
<div class="menu">
<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments .Name}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
Expand All @@ -158,7 +158,7 @@
</div>
{{end}}
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted) (not $.IsMirror)}}
<button class="ui button button-ghost show-modal show-rename-branch-modal gt-mx-3"
<button class="ui button button-ghost gt-p-3 show-modal show-rename-branch-modal"
data-is-default-branch="false"
data-old-branch-name="{{.Name}}"
data-modal="#rename-branch-modal"
Expand All @@ -169,13 +169,13 @@
{{end}}
{{if and $.IsWriter (not $.IsMirror) (not $.Repository.IsArchived) (not .IsProtected)}}
{{if .IsDeleted}}
<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)}}">
<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)}}">
<span class="text blue">
{{svg "octicon-reply"}}
</span>
</button>
{{else}}
<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}}">
<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}}">
{{svg "octicon-trash"}}
</button>
{{end}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/view_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
{{$subJumpablePathName}}
{{else}}
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
<span class="color-text-light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
{{end}}
</a>
{{else}}
Expand Down
25 changes: 25 additions & 0 deletions templates/shared/issueicon.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{{if .IsPull}}
{{if and .PullRequest .PullRequest.HasMerged}}
{{svg "octicon-git-merge" 16 "text purple"}}
{{else if and .GetPullRequest .GetPullRequest.HasMerged}}
{{svg "octicon-git-merge" 16 "text purple"}}
{{else}}
{{if .IsClosed}}
{{svg "octicon-git-pull-request" 16 "text red"}}
{{else}}
{{if and .PullRequest .PullRequest.IsWorkInProgress}}
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
{{else if and .GetPullRequest .GetPullRequest.IsWorkInProgress}}
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
{{else}}
{{svg "octicon-git-pull-request" 16 "text green"}}
{{end}}
{{end}}
{{end}}
{{else}}
{{if .IsClosed}}
{{svg "octicon-issue-closed" 16 "text red"}}
{{else}}
{{svg "octicon-issue-opened" 16 "text green"}}
{{end}}
{{end}}
22 changes: 1 addition & 21 deletions templates/shared/issuelist.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,7 @@
<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;">
{{end}}
<div class="issue-item-icon">
{{if .IsPull}}
{{if .PullRequest.HasMerged}}
{{svg "octicon-git-merge" 16 "text purple"}}
{{else}}
{{if .IsClosed}}
{{svg "octicon-git-pull-request" 16 "text red"}}
{{else}}
{{if .PullRequest.IsWorkInProgress}}
{{svg "octicon-git-pull-request-draft" 16 "text grey"}}
{{else}}
{{svg "octicon-git-pull-request" 16 "text green"}}
{{end}}
{{end}}
{{end}}
{{else}}
{{if .IsClosed}}
{{svg "octicon-issue-closed" 16 "text red"}}
{{else}}
{{svg "octicon-issue-opened" 16 "text green"}}
{{end}}
{{end}}
{{template "shared/issueicon" .}}
</div>
</div>
<div class="issue-item-main gt-f1 gt-fc gt-df">
Expand Down
215 changes: 98 additions & 117 deletions templates/user/notification/notification_div.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-params="{{.Page.GetParams}}" data-sequence-number="{{.SequenceNumber}}">
<div class="ui container">
<h1 class="ui header gt-df gt-ac">
{{svg "octicon-bell" 28 "gt-mr-3 gt-mt-1"}}
{{.locale.Tr "notification.notifications"}}
</h1>
<div class="ui top attached tabular menu">
{{$notificationUnreadCount := call .NotificationUnreadCount}}
<a href="{{AppSubUrl}}/notifications?q=unread" class="{{if eq .Status 1}}active {{end}}item">
{{.locale.Tr "notification.unread"}}
<div class="ui label {{if not $notificationUnreadCount}}gt-hidden{{end}}">{{$notificationUnreadCount}}</div>
</a>
<a href="{{AppSubUrl}}/notifications?q=read" class="{{if eq .Status 2}}active {{end}}item">
{{.locale.Tr "notification.read"}}
</a>
{{$notificationUnreadCount := call .NotificationUnreadCount}}
<div class="gt-df gt-ac gt-sb gt-mb-4">
<div class="small-menu-items ui compact tiny menu">
<a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread">
{{.locale.Tr "notification.unread"}}
<div class="notifications-unread-count ui label {{if not $notificationUnreadCount}}gt-hidden{{end}}">{{$notificationUnreadCount}}</div>
</a>
<a class="{{if eq .Status 2}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=read">
{{.locale.Tr "notification.read"}}
</a>
</div>
{{if and (eq .Status 1)}}
<form class="gt-ml-auto" action="{{AppSubUrl}}/notifications/purge" method="POST">
<form action="{{AppSubUrl}}/notifications/purge" method="POST">
{{$.CsrfTokenHtml}}
<div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}">
<button class="ui mini button primary gt-mr-0" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
Expand All @@ -24,113 +22,96 @@
</form>
{{end}}
</div>
<div class="ui bottom attached active tab segment gt-p-3">
{{if eq (len .Notifications) 0}}
<div class="gt-df gt-ac gt-fc gt-p-4">
{{svg "octicon-inbox" 56 "gt-mb-4"}}
{{if eq .Status 1}}
{{.locale.Tr "notification.no_unread"}}
{{else}}
{{.locale.Tr "notification.no_read"}}
{{end}}
</div>
{{else}}
<table class="ui unstackable very compact small table" id="notification_table">
<tbody>
{{range $notification := .Notifications}}
{{$issue := .Issue}}
{{$repo := .Repository}}
<tr id="notification_{{.ID}}">
<td class="collapsing gt-pl-4">
<div class="gt-p-0">
<div id="notification_table">
{{if eq (len .Notifications) 0}}
<div class="gt-df gt-ac gt-fc gt-p-4">
{{svg "octicon-inbox" 56 "gt-mb-4"}}
{{if eq .Status 1}}
{{.locale.Tr "notification.no_unread"}}
{{else}}
{{.locale.Tr "notification.no_read"}}
{{end}}
</div>
{{else}}
{{$locale := .locale}}
{{range $notification := .Notifications}}
<div class="notifications-item gt-df gt-ac gt-fw gt-gap-3 gt-p-3" id="notification_{{.ID}}" data-status="{{.Status}}">
<div class="notifications-icon gt-ml-3 gt-mr-2 gt-self-start gt-mt-2">
{{template "shared/issueicon" .Issue}}
</div>
<a class="notifications-link gt-df gt-f1 gt-fc silenced" href="{{.Link}}">
<div class="notifications-top-row gt-font-13">
{{.Repository.FullName}} <span class="text light-3">#{{.Issue.Index}}</span>
{{if eq .Status 3}}
{{svg "octicon-pin" 16 "text blue"}}
{{else if not $issue}}
{{svg "octicon-repo" 16 "text grey"}}
{{else if $issue.IsPull}}
{{if $issue.IsClosed}}
{{if $issue.GetPullRequest.HasMerged}}
{{svg "octicon-git-merge" 16 "text purple"}}
{{else}}
{{svg "octicon-git-pull-request" 16 "text red"}}
{{end}}
{{else}}
{{svg "octicon-git-pull-request" 16 "text green"}}
{{end}}
{{else}}
{{if $issue.IsClosed}}
{{svg "octicon-issue-closed" 16 "text red"}}
{{else}}
{{svg "octicon-issue-opened" 16 "text green"}}
{{end}}
{{svg "octicon-pin" 13 "text blue gt-mt-1 gt-ml-2"}}
{{end}}
</td>
<td class="eleven wide">
<a class="item issue-title muted" href="{{.Link}}">
{{if $issue}}
#{{$issue.Index}} - {{$issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
</div>
<div class="notifications-bottom-row gt-font-16 gt-py-1">
<span class="issue-title">
{{if .Issue}}
{{.Issue.Title | RenderEmoji $.Context | RenderCodeBlock}}
{{else}}
{{$repo.FullName}}
{{.Repository.FullName}}
{{end}}
</a>
</td>
<td>
<a class="item muted" href="{{$repo.Link}}">{{$repo.FullName}}</a>
</td>
<td class="collapsing">
{{if ne .Status 3}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="pinned">
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.pin"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="pinned"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-pin"}}
</button>
</form>
{{end}}
</td>
<td class="collapsing">
{{if or (eq .Status 1) (eq .Status 3)}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="read">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_read"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="read"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-check"}}
</button>
</form>
{{else if eq .Status 2}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="unread">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_unread"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="unread"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-bell"}}
</button>
</form>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
{{end}}
</span>
</div>
</a>
<div class="notifications-updated gt-ac gt-mr-3">
{{TimeSinceUnix .Issue.UpdatedUnix $locale}}
</div>
<div class="notifications-buttons gt-ac gt-je gt-gap-2 gt-px-2">
{{if ne .Status 3}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="pinned">
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.pin"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="pinned"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-pin"}}
</button>
</form>
{{end}}
{{if or (eq .Status 1) (eq .Status 3)}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="read">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_read"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="read"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-check"}}
</button>
</form>
{{else if eq .Status 2}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="unread">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-ghost gt-p-3" title='{{$.locale.Tr "notification.mark_as_unread"}}'
data-url="{{AppSubUrl}}/notifications/status"
data-status="unread"
data-page="{{$.Page.Paginater.Current}}"
data-notification-id="{{.ID}}"
data-q="{{$.Keyword}}">
{{svg "octicon-bell"}}
</button>
</form>
{{end}}
</div>
</div>
{{end}}
{{end}}
</div>
</div>
{{template "base/paginate" .}}
</div>
Expand Down
Loading