Skip to content

Commit d2bb8ef

Browse files
andreyneringlunny
andreynering
authored and
lunny
committed
Notifications: trying to get a better layout (#660)
* i18n button titles * Improvements on notification page layout * Notification count badge fixes * Make table <tr> clickable * Fix octicon aligment * Fix use of AppSubUrl
1 parent d0ad792 commit d2bb8ef

File tree

8 files changed

+103
-80
lines changed

8 files changed

+103
-80
lines changed

‎options/locale/locale_en-US.ini‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1275,3 +1275,6 @@ unread = Unread
12751275
read = Read
12761276
no_unread = You have no unread notifications.
12771277
no_read = You have no read notifications.
1278+
pin = Pin
1279+
mark_as_read = Mark as read
1280+
mark_as_unread = Mark as unread

‎options/locale/locale_pt-BR.ini‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1205,3 +1205,6 @@ unread = Não lidas
12051205
read = Lidas
12061206
no_unread = Você não possui notificações não lidas.
12071207
no_read = Você não possui notificações lidas.
1208+
pin = Fixar
1209+
mark_as_read = Marcar como lida
1210+
mark_as_unread = Marcar como não lida

‎public/css/index.css‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2712,12 +2712,15 @@ footer .ui.language .menu {
27122712
float: left;
27132713
margin-left: 7px;
27142714
}
2715-
.user.notification .buttons-panel button {
2716-
padding: 3px;
2717-
}
2718-
.user.notification .buttons-panel form {
2715+
.user.notification table form {
27192716
display: inline-block;
27202717
}
2718+
.user.notification table button {
2719+
padding: 3px 3px 3px 5px;
2720+
}
2721+
.user.notification table tr {
2722+
cursor: pointer;
2723+
}
27212724
.user.notification .octicon-issue-opened,
27222725
.user.notification .octicon-git-pull-request {
27232726
color: #21ba45;

‎public/js/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1243,6 +1243,11 @@ $(document).ready(function () {
12431243
$($(this).data('target')).slideToggle(100);
12441244
});
12451245

1246+
// make table <tr> element clickable like a link
1247+
$('tr[data-href]').click(function(event) {
1248+
window.location = $(this).data('href');
1249+
});
1250+
12461251
// Highlight JS
12471252
if (typeof hljs != 'undefined') {
12481253
hljs.initHighlightingOnLoad();

‎public/less/_user.less‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,17 @@
8585
margin-left: 7px;
8686
}
8787

88-
.buttons-panel {
88+
table {
89+
form {
90+
display: inline-block;
91+
}
92+
8993
button {
90-
padding: 3px;
94+
padding: 3px 3px 3px 5px;
9195
}
9296

93-
form {
94-
display: inline-block;
97+
tr {
98+
cursor: pointer;
9599
}
96100
}
97101

‎routers/user/notification.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ func Notifications(c *context.Context) {
7373
}
7474

7575
title := c.Tr("notifications")
76-
if count := len(notifications); count > 0 {
77-
title = fmt.Sprintf("(%d) %s", count, title)
76+
if status == models.NotificationStatusUnread && total > 0 {
77+
title = fmt.Sprintf("(%d) %s", total, title)
7878
}
7979
c.Data["Title"] = title
8080
c.Data["Keyword"] = keyword

‎templates/base/head.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282

8383
{{if .IsSigned}}
8484
<div class="right menu">
85-
<a href="{{$.AppSubUrl}}/notifications" class="ui head link jump item poping up" data-content='{{.i18n.Tr "notifications"}}' data-variation="tiny inverted">
85+
<a href="{{AppSubUrl}}/notifications" class="ui head link jump item poping up" data-content='{{.i18n.Tr "notifications"}}' data-variation="tiny inverted">
8686
<span class="text">
8787
<i class="octicon octicon-inbox"><span class="sr-only">{{.i18n.Tr "notifications"}}</span></i>
8888

‎templates/user/notification/notification.tmpl‎

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,20 @@
22

33
<div class="user notification">
44
<div class="ui container">
5-
<h1 class="ui header">{{.i18n.Tr "notification.notifications"}}</h1>
5+
<h1 class="ui dividing header">{{.i18n.Tr "notification.notifications"}}</h1>
66

77
<div class="ui top attached tabular menu">
8-
<a href="{{$.AppSubUrl}}/notifications?q=unread">
8+
<a href="{{AppSubUrl}}/notifications?q=unread">
99
<div class="{{if eq .Status 1}}active{{end}} item">
1010
{{.i18n.Tr "notification.unread"}}
11-
{{if eq .Status 1}}
12-
<div class="ui label">{{len .Notifications}}</div>
11+
{{if .NotificationUnreadCount}}
12+
<div class="ui label">{{.NotificationUnreadCount}}</div>
1313
{{end}}
1414
</div>
1515
</a>
16-
<a href="{{$.AppSubUrl}}/notifications?q=read">
16+
<a href="{{AppSubUrl}}/notifications?q=read">
1717
<div class="{{if eq .Status 2}}active{{end}} item">
1818
{{.i18n.Tr "notification.read"}}
19-
{{if eq .Status 2}}
20-
<div class="ui label">{{len .Notifications}}</div>
21-
{{end}}
2219
</div>
2320
</a>
2421
</div>
@@ -30,68 +27,76 @@
3027
{{.i18n.Tr "notification.no_read"}}
3128
{{end}}
3229
{{else}}
33-
<div class="ui relaxed divided selection list">
34-
{{range $notification := .Notifications}}
35-
{{$issue := $notification.GetIssue}}
36-
{{$repo := $notification.GetRepo}}
37-
{{$repoOwner := $repo.MustOwner}}
38-
39-
<a class="item" href="{{$.AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
40-
<div class="buttons-panel right floated content">
41-
{{if ne $notification.Status 3}}
42-
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
43-
{{$.CsrfTokenHtml}}
44-
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
45-
<input type="hidden" name="status" value="pinned" />
46-
<button class="ui button" title="Pin notification">
47-
<i class="octicon octicon-pin"></i>
48-
</button>
49-
</form>
50-
{{end}}
51-
{{if or (eq $notification.Status 1) (eq $notification.Status 3)}}
52-
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
53-
{{$.CsrfTokenHtml}}
54-
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
55-
<input type="hidden" name="status" value="read" />
56-
<button class="ui button" title="Mark as read">
57-
<i class="octicon octicon-check"></i>
58-
</button>
59-
</form>
60-
{{else if eq $notification.Status 2}}
61-
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
62-
{{$.CsrfTokenHtml}}
63-
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
64-
<input type="hidden" name="status" value="unread" />
65-
<button class="ui button" title="Mark as unread">
66-
<i class="octicon octicon-bell"></i>
67-
</button>
68-
</form>
69-
{{end}}
70-
</div>
71-
72-
{{if eq $notification.Status 3}}
73-
<i class="blue octicon octicon-pin"></i>
74-
{{else if $issue.IsPull}}
75-
{{if $issue.IsClosed}}
76-
<i class="octicon octicon-git-merge"></i>
77-
{{else}}
78-
<i class="octicon octicon-git-pull-request"></i>
79-
{{end}}
80-
{{else}}
81-
{{if $issue.IsClosed}}
82-
<i class="octicon octicon-issue-closed"></i>
83-
{{else}}
84-
<i class="octicon octicon-issue-opened"></i>
85-
{{end}}
86-
{{end}}
30+
<table class="ui unstackable striped very compact small selectable table">
31+
<tbody>
32+
{{range $notification := .Notifications}}
33+
{{$issue := $notification.GetIssue}}
34+
{{$repo := $notification.GetRepo}}
35+
{{$repoOwner := $repo.MustOwner}}
8736

88-
<div class="content">
89-
<div class="header">{{$repoOwner.Name}}/{{$repo.Name}}</div>
90-
<div class="description">#{{$issue.Index}} - {{$issue.Title}}</div>
91-
</div>
92-
</a>
93-
{{end}}
94-
</div>
37+
<tr data-href="{{AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
38+
<td class="collapsing">
39+
{{if eq $notification.Status 3}}
40+
<i class="blue octicon octicon-pin"></i>
41+
{{else if $issue.IsPull}}
42+
{{if $issue.IsClosed}}
43+
<i class="octicon octicon-git-merge"></i>
44+
{{else}}
45+
<i class="octicon octicon-git-pull-request"></i>
46+
{{end}}
47+
{{else}}
48+
{{if $issue.IsClosed}}
49+
<i class="octicon octicon-issue-closed"></i>
50+
{{else}}
51+
<i class="octicon octicon-issue-opened"></i>
52+
{{end}}
53+
{{end}}
54+
</td>
55+
<td class="twelve wide">
56+
<a class="item" href="{{AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
57+
#{{$issue.Index}} - {{$issue.Title}}
58+
</a>
59+
</td>
60+
<td>
61+
{{$repoOwner.Name}}/{{$repo.Name}}
62+
</td>
63+
<td class="collapsing">
64+
{{if ne $notification.Status 3}}
65+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
66+
{{$.CsrfTokenHtml}}
67+
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
68+
<input type="hidden" name="status" value="pinned" />
69+
<button class="ui mini button" title='{{$.i18n.Tr "notification.pin"}}'>
70+
<i class="octicon octicon-pin"></i>
71+
</button>
72+
</form>
73+
{{end}}
74+
</td>
75+
<td class="collapsing">
76+
{{if or (eq $notification.Status 1) (eq $notification.Status 3)}}
77+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
78+
{{$.CsrfTokenHtml}}
79+
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
80+
<input type="hidden" name="status" value="read" />
81+
<button class="ui mini button" title='{{$.i18n.Tr "notification.mark_as_read"}}'>
82+
<i class="octicon octicon-check"></i>
83+
</button>
84+
</form>
85+
{{else if eq $notification.Status 2}}
86+
<form action="{{AppSubUrl}}/notifications/status" method="POST">
87+
{{$.CsrfTokenHtml}}
88+
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
89+
<input type="hidden" name="status" value="unread" />
90+
<button class="ui mini button" title='{{$.i18n.Tr "notification.mark_as_unread"}}'>
91+
<i class="octicon octicon-bell"></i>
92+
</button>
93+
</form>
94+
{{end}}
95+
</td>
96+
</tr>
97+
{{end}}
98+
</tbody>
99+
</table>
95100
{{end}}
96101
</div>
97102

0 commit comments

Comments
 (0)