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. 87
      templates/user/notification/notification.tmpl

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

@ -1275,3 +1275,6 @@ unread = Unread
read = Read
no_unread = You have no unread 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
no_unread = Você não possui notificações não 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;
margin-left: 7px;
}
.user.notification .buttons-panel button {
padding: 3px;
}
.user.notification .buttons-panel form {
.user.notification table form {
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-git-pull-request {
color: #21ba45;

5
public/js/index.js
Unescape View File

@ -1243,6 +1243,11 @@ $(document).ready(function () {
$($(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
if (typeof hljs != 'undefined') {
hljs.initHighlightingOnLoad();

12
public/less/_user.less
Unescape View File

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

4
routers/user/notification.go
Unescape View File

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

2
templates/base/head.tmpl
Unescape View File

@ -82,7 +82,7 @@
{{if .IsSigned}}
<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">
<i class="octicon octicon-inbox"><span class="sr-only">{{.i18n.Tr "notifications"}}</span></i>

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

@ -2,23 +2,20 @@
<div class="user notification">
<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">
<a href="{{$.AppSubUrl}}/notifications?q=unread">
<a href="{{AppSubUrl}}/notifications?q=unread">
<div class="{{if eq .Status 1}}active{{end}} item">
{{.i18n.Tr "notification.unread"}}
{{if eq .Status 1}}
<div class="ui label">{{len .Notifications}}</div>
{{if .NotificationUnreadCount}}
<div class="ui label">{{.NotificationUnreadCount}}</div>
{{end}}
</div>
</a>
<a href="{{$.AppSubUrl}}/notifications?q=read">
<a href="{{AppSubUrl}}/notifications?q=read">
<div class="{{if eq .Status 2}}active{{end}} item">
{{.i18n.Tr "notification.read"}}
{{if eq .Status 2}}
<div class="ui label">{{len .Notifications}}</div>
{{end}}
</div>
</a>
</div>
@ -30,68 +27,76 @@
{{.i18n.Tr "notification.no_read"}}
{{end}}
{{else}}
<div class="ui relaxed divided selection list">
<table class="ui unstackable striped very compact small selectable table">
<tbody>
{{range $notification := .Notifications}}
{{$issue := $notification.GetIssue}}
{{$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">
<tr data-href="{{AppSubUrl}}/{{$repoOwner.Name}}/{{$repo.Name}}/issues/{{$issue.Index}}">
<td class="collapsing">
{{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}}
</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">
<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">
<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">
<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">
<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">
<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">
<button class="ui mini button" title='{{$.i18n.Tr "notification.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>
</td>
</tr>
{{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">
<div class="header">{{$repoOwner.Name}}/{{$repo.Name}}</div>
<div class="description">#{{$issue.Index}} - {{$issue.Title}}</div>
</div>
</a>
{{end}}
</div>
</tbody>
</table>
{{end}}
</div>

Write Preview
Loading…
Cancel
Save