third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Notifications: trying to get a better layout (#660)

Browse Source 
* i18n button titles

* Improvements on notification page layout

* Notification count badge fixes

* Make table <tr> clickable

* Fix octicon aligment

* Fix use of AppSubUrl
tokarchuk/v1.17
Andrey Nering 8 years ago committed by Lunny Xiao
parent d0ad7921f8
commit d2bb8ef503
8 changed files with 103 additions and 80 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      options/locale/locale_en-US.ini
  2. 3
      options/locale/locale_pt-BR.ini
  3. 11
      public/css/index.css
  4. 5
      public/js/index.js
  5. 12
      public/less/_user.less
  6. 4
      routers/user/notification.go
  7. 2
      templates/base/head.tmpl
  8. 143
      templates/user/notification/notification.tmpl

3
options/locale/locale_en-US.ini
Unescape View File

@ -1275,3 +1275,6 @@ unread = Unread
read = Read read = Read
no_unread = You have no unread notifications. no_unread = You have no unread notifications.
no_read = You have no read notifications. no_read = You have no read notifications.
pin = Pin
mark_as_read = Mark as read
mark_as_unread = Mark as unread

3
options/locale/locale_pt-BR.ini
Unescape View File

@ -1205,3 +1205,6 @@ unread = Não lidas
read = Lidas read = Lidas
no_unread = Você não possui notificações não lidas. no_unread = Você não possui notificações não lidas.
no_read = Você não possui notificações lidas. no_read = Você não possui notificações lidas.
pin = Fixar
mark_as_read = Marcar como lida
mark_as_unread = Marcar como não lida

11
public/css/index.css
Unescape View File

@ -2712,12 +2712,15 @@ footer .ui.language .menu {
float: left; float: left;
margin-left: 7px; margin-left: 7px;
} }
.user.notification .buttons-panel button { .user.notification table form {
padding: 3px;
}
.user.notification .buttons-panel form {
display: inline-block; display: inline-block;
} }
.user.notification table button {
padding: 3px 3px 3px 5px;
}
.user.notification table tr {
cursor: pointer;
}
.user.notification .octicon-issue-opened, .user.notification .octicon-issue-opened,
.user.notification .octicon-git-pull-request { .user.notification .octicon-git-pull-request {
color: #21ba45; color: #21ba45;

5
public/js/index.js
Unescape View File

@ -1243,6 +1243,11 @@ $(document).ready(function () {
$($(this).data('target')).slideToggle(100); $($(this).data('target')).slideToggle(100);
}); });
// make table <tr> element clickable like a link
$('tr[data-href]').click(function(event) {
window.location = $(this).data('href');
});
// Highlight JS // Highlight JS
if (typeof hljs != 'undefined') { if (typeof hljs != 'undefined') {
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();

12
public/less/_user.less
Unescape View File

@ -85,13 +85,17 @@
margin-left: 7px; margin-left: 7px;
} }
.buttons-panel { table {
form {
display: inline-block;
}
button { button {
padding: 3px; padding: 3px 3px 3px 5px;
} }
form { tr {
display: inline-block; cursor: pointer;
} }
} }

4
routers/user/notification.go
Unescape View File

@ -73,8 +73,8 @@ func Notifications(c *context.Context) {
} }
title := c.Tr("notifications") title := c.Tr("notifications")
if count := len(notifications); count > 0 { if status == models.NotificationStatusUnread && total > 0 {
title = fmt.Sprintf("(%d) %s", count, title) title = fmt.Sprintf("(%d) %s", total, title)
} }
c.Data["Title"] = title c.Data["Title"] = title
c.Data["Keyword"] = keyword c.Data["Keyword"] = keyword

2
templates/base/head.tmpl
Unescape View File

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

143
templates/user/notification/notification.tmpl
Unescape View File

@ -2,23 +2,20 @@
<div class="user notification"> <div class="user notification">
<div class="ui container"> <div class="ui container">
<h1 class="ui header">{{.i18n.Tr "notification.notifications"}}</h1> <h1 class="ui dividing header">{{.i18n.Tr "notification.notifications"}}</h1>
<div class="ui top attached tabular menu"> <div class="ui top attached tabular menu">
<a href="{{$.AppSubUrl}}/notifications?q=unread"> <a href="{{AppSubUrl}}/notifications?q=unread">
<div class="{{if eq .Status 1}}active{{end}} item"> <div class="{{if eq .Status 1}}active{{end}} item">
{{.i18n.Tr "notification.unread"}} {{.i18n.Tr "notification.unread"}}
{{if eq .Status 1}} {{if .NotificationUnreadCount}}
<div class="ui label">{{len .Notifications}}</div> <div class="ui label">{{.NotificationUnreadCount}}</div>
{{end}} {{end}}
</div> </div>
</a> </a>
<a href="{{$.AppSubUrl}}/notifications?q=read"> <a href="{{AppSubUrl}}/notifications?q=read">
<div class="{{if eq .Status 2}}active{{end}} item"> <div class="{{if eq .Status 2}}active{{end}} item">
{{.i18n.Tr "notification.read"}} {{.i18n.Tr "notification.read"}}
{{if eq .Status 2}}
<div class="ui label">{{len .Notifications}}</div>
{{end}}
</div> </div>
</a> </a>
</div> </div>
@ -30,68 +27,76 @@
{{.i18n.Tr "notification.no_read"}} {{.i18n.Tr "notification.no_read"}}
{{end}} {{end}}
{{else}} {{else}}
<div class="ui relaxed divided selection list"> <table class="ui unstackable striped very compact small selectable table">
{{range $notification := .Notifications}} <tbody>
{{$issue := $notification.GetIssue}} {{range $notification := .Notifications}}
{{$repo := $notification.GetRepo}} {{$issue := $notification.GetIssue}}
{{$repoOwner := $repo.MustOwner}} {{$repo := $notification.GetRepo}}
{{$repoOwner := $repo.MustOwner}}
<a class="item" href="{{$.AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
<div class="buttons-panel right floated content">
{{if ne $notification.Status 3}}
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="pinned" />
<button class="ui button" title="Pin notification">
<i class="octicon octicon-pin"></i>
</button>
</form>
{{end}}
{{if or (eq $notification.Status 1) (eq $notification.Status 3)}}
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="read" />
<button class="ui button" title="Mark as read">
<i class="octicon octicon-check"></i>
</button>
</form>
{{else if eq $notification.Status 2}}
<form action="{{$.AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="unread" />
<button class="ui button" title="Mark as unread">
<i class="octicon octicon-bell"></i>
</button>
</form>
{{end}}
</div>
{{if eq $notification.Status 3}}
<i class="blue octicon octicon-pin"></i>
{{else if $issue.IsPull}}
{{if $issue.IsClosed}}
<i class="octicon octicon-git-merge"></i>
{{else}}
<i class="octicon octicon-git-pull-request"></i>
{{end}}
{{else}}
{{if $issue.IsClosed}}
<i class="octicon octicon-issue-closed"></i>
{{else}}
<i class="octicon octicon-issue-opened"></i>
{{end}}
{{end}}
<div class="content"> <tr data-href="{{AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
<div class="header">{{$repoOwner.Name}}/{{$repo.Name}}</div> <td class="collapsing">
<div class="description">#{{$issue.Index}} - {{$issue.Title}}</div> {{if eq $notification.Status 3}}
</div> <i class="blue octicon octicon-pin"></i>
</a> {{else if $issue.IsPull}}
{{end}} {{if $issue.IsClosed}}
</div> <i class="octicon octicon-git-merge"></i>
{{else}}
<i class="octicon octicon-git-pull-request"></i>
{{end}}
{{else}}
{{if $issue.IsClosed}}
<i class="octicon octicon-issue-closed"></i>
{{else}}
<i class="octicon octicon-issue-opened"></i>
{{end}}
{{end}}
</td>
<td class="twelve wide">
<a class="item" href="{{AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
#{{$issue.Index}} - {{$issue.Title}}
</a>
</td>
<td>
{{$repoOwner.Name}}/{{$repo.Name}}
</td>
<td class="collapsing">
{{if ne $notification.Status 3}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="pinned" />
<button class="ui mini button" title='{{$.i18n.Tr "notification.pin"}}'>
<i class="octicon octicon-pin"></i>
</button>
</form>
{{end}}
</td>
<td class="collapsing">
{{if or (eq $notification.Status 1) (eq $notification.Status 3)}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="read" />
<button class="ui mini button" title='{{$.i18n.Tr "notification.mark_as_read"}}'>
<i class="octicon octicon-check"></i>
</button>
</form>
{{else if eq $notification.Status 2}}
<form action="{{AppSubUrl}}/notifications/status" method="POST">
{{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{$notification.ID}}" />
<input type="hidden" name="status" value="unread" />
<button class="ui mini button" title='{{$.i18n.Tr "notification.mark_as_unread"}}'>
<i class="octicon octicon-bell"></i>
</button>
</form>
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
{{end}} {{end}}
</div> </div>

Write Preview
Loading…
Cancel
Save