mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-30 00:03:57 -04:00 
			
		
		
		
	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
This commit is contained in:
		
							parent
							
								
									d0ad7921f8
								
							
						
					
					
						commit
						d2bb8ef503
					
				| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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; | ||||
|  | ||||
| @ -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(); | ||||
|  | ||||
| @ -85,14 +85,18 @@ | ||||
|             margin-left: 7px; | ||||
|         } | ||||
| 
 | ||||
|         .buttons-panel { | ||||
|             button { | ||||
|                 padding: 3px; | ||||
|             } | ||||
| 
 | ||||
|         table { | ||||
|             form { | ||||
|                 display: inline-block; | ||||
|             } | ||||
| 
 | ||||
|             button { | ||||
|                 padding: 3px 3px 3px 5px; | ||||
|             } | ||||
| 
 | ||||
|             tr { | ||||
|                 cursor: pointer; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         .octicon-issue-opened, .octicon-git-pull-request { | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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> | ||||
| 
 | ||||
|  | ||||
| @ -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"> | ||||
| 					{{range $notification := .Notifications}} | ||||
| 						{{$issue := $notification.GetIssue}} | ||||
| 						{{$repo := $notification.GetRepo}} | ||||
| 						{{$repoOwner := $repo.MustOwner}} | ||||
| 				<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"> | ||||
| 								{{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"> | ||||
| 								<div class="header">{{$repoOwner.Name}}/{{$repo.Name}}</div> | ||||
| 								<div class="description">#{{$issue.Index}} - {{$issue.Title}}</div> | ||||
| 							</div> | ||||
| 						</a> | ||||
| 					{{end}} | ||||
| 				</div> | ||||
| 							<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"> | ||||
| 											{{$.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}} | ||||
| 		</div> | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user