notification inbox improvements

- added pagers
- css+styling fixes

rhodecode/controllers/admin/notifications.py

@@ -30,6 +30,8 b' from pylons import request'
 from pylons import tmpl_context as c, url
 from pylons.controllers.util import redirect
 
+from webhelpers.paginate import Page
+
 from rhodecode.lib.base import BaseController, render
 from rhodecode.model.db import Notification
 
@@ -58,8 +60,9 b' class NotificationsController(BaseContro'
         """GET /_admin/notifications: All items in the collection"""
         # url('notifications')
         c.user = self.rhodecode_user
-        c.notifications = NotificationModel()\
-                            .get_for_user(self.rhodecode_user.user_id)
+        notif = NotificationModel().get_for_user(self.rhodecode_user.user_id)
+        p = int(request.params.get('page', 1))
+        c.notifications = Page(notif, page=p, items_per_page=10)
         return render('admin/notifications/notifications.html')
 
     def mark_all_read(self):
@@ -69,7 +72,8 b' class NotificationsController(BaseContro'
             nm.mark_all_read_for_user(self.rhodecode_user.user_id)
             Session.commit()
             c.user = self.rhodecode_user
-            c.notifications = nm.get_for_user(self.rhodecode_user.user_id)
+            notif = nm.get_for_user(self.rhodecode_user.user_id)
+            c.notifications = Page(notif, page=1, items_per_page=10)
             return render('admin/notifications/notifications_data.html')
 
     def create(self):

rhodecode/public/css/style.css

@@ -4103,6 +4103,13 b' form.comment-inline-form {'
 .inline-comments-button .add-comment{
 	margin:2px 0px 8px 5px !important
 }
+
+
+.notification-paginator{
+    padding: 0px 0px 4px 16px;
+    float: left;    	
+}
+
 .notifications{
     border-radius: 4px 4px 4px 4px;
     -webkit-border-radius: 4px;
@@ -4136,16 +4143,24 b' form.comment-inline-form {'
     float: left
 }
 .notification-list .container.unread{
-	
+	background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
 }
 .notification-header .gravatar{
-	
+    background: none repeat scroll 0 0 transparent;
+    padding: 0px 0px 0px 8px;	
 }
 .notification-header .desc.unread{
     font-weight: bold;
     font-size: 17px;
 }
-
+.notification-table{
+	border: 1px solid #ccc;
+    -webkit-border-radius: 6px 6px 6px 6px;
+    -moz-border-radius: 6px 6px 6px 6px;
+    border-radius: 6px 6px 6px 6px;
+    clear: both;
+    margin: 0px 20px 0px 20px;
+}
 .notification-header .delete-notifications{
     float: right;
     padding-top: 8px;
@@ -4157,6 +4172,11 b' form.comment-inline-form {'
     padding:5px 0px 5px 38px;
 }
 
+.notification-body{
+	clear:both;
+	margin: 34px 2px 2px 8px
+}
+
 /****
   PERMS
 *****/

rhodecode/templates/admin/notifications/notifications.html

@@ -25,7 +25,7 b''
         ##</ul>
     </div>
     %if c.notifications:
-      <div style="padding:10px 15px;text-align: right">
+      <div style="padding:14px 18px;text-align: right;float:right">
       <span id='mark_all_read' class="ui-btn">${_('Mark all read')}</span>
       </div>
     %endif
@@ -39,15 +39,18 b" YUE.on(YUQ('.delete-notification'),'clic"
  var notification_id = e.currentTarget.id;
  deleteNotification(url_del,notification_id)
 })
- YUE.on('mark_all_read','click',function(e){
-	    var url = "${h.url('notifications_mark_all_read')}";
-	    ypjax(url,'notification_data',function(){
-	    	YUD.get('notification_counter').innerHTML=0;
-	    	YUE.on(YUQ('.delete-notification'),'click',function(e){
-	    		 var notification_id = e.currentTarget.id;
-	    		 deleteNotification(url_del,notification_id)
-	    	})
-	    });
- })
+YUE.on('mark_all_read','click',function(e){
+    var url = "${h.url('notifications_mark_all_read')}";
+    ypjax(url,'notification_data',function(){
+    	var notification_counter = YUD.get('notification_counter');
+    	if(notification_counter){
+    		notification_counter.innerHTML=0;	
+    	}
+    	YUE.on(YUQ('.delete-notification'),'click',function(e){
+    		 var notification_id = e.currentTarget.id;
+    		 deleteNotification(url_del,notification_id)
+    	})
+    });
+})
 </script>
 </%def>

rhodecode/templates/admin/notifications/notifications_data.html

@@ -3,26 +3,37 b''
 <%
 unread = lambda n:{False:'unread'}.get(n)
 %>
-<div class="table">
-  <div class="notification-list">
-  %for notification in c.notifications:
-    <div id="notification_${notification.notification.notification_id}" class="container ${unread(notification.read)}">
-      <div class="notification-header">
-        <div class="gravatar">
-            <img alt="gravatar" src="${h.gravatar_url(h.email(notification.notification.created_by_user.email),24)}"/>
-        </div>
-        <div class="desc ${unread(notification.read)}">
-        <a href="${url('notification', notification_id=notification.notification.notification_id)}">${notification.notification.description}</a>
-        </div>
-        <div class="delete-notifications">
-          <span id="${notification.notification.notification_id}" class="delete-notification delete_icon action"></span>
-        </div>
-      </div>
-      <div class="notification-subject">${h.literal(notification.notification.subject)}</div>
-    </div>
-  %endfor
+<div class="notification-paginator">
+  <div class="pagination-wh pagination-left">
+  ${c.notifications.pager('$link_previous ~2~ $link_next')}
   </div>
 </div>
+
+<div class="notification-list  notification-table">
+%for notification in c.notifications:
+  <div id="notification_${notification.notification.notification_id}" class="container ${unread(notification.read)}">
+    <div class="notification-header">
+      <div class="gravatar">
+          <img alt="gravatar" src="${h.gravatar_url(h.email(notification.notification.created_by_user.email),24)}"/>
+      </div>
+      <div class="desc ${unread(notification.read)}">
+      <a href="${url('notification', notification_id=notification.notification.notification_id)}">${notification.notification.description}</a>
+      </div>
+      <div class="delete-notifications">
+        <span id="${notification.notification.notification_id}" class="delete-notification delete_icon action"></span>
+      </div>
+    </div>
+    <div class="notification-subject">${h.literal(notification.notification.subject)}</div>
+  </div>
+%endfor
+</div>
+
+<div class="notification-paginator">
+  <div class="pagination-wh pagination-left">
+  ${c.notifications.pager('$link_previous ~2~ $link_next')}
+  </div>
+</div>
+
 %else:
     <div class="table">${_('No notifications here yet')}</div>
 %endif

rhodecode/templates/admin/notifications/show_notification.html

@@ -39,7 +39,7 b''
             <span id="${c.notification.notification_id}" class="delete-notification delete_icon action"></span>
           </div>
         </div>
-        <div>${h.rst_w_mentions(c.notification.body)}</div>
+        <div class="notification-body">${h.rst_w_mentions(c.notification.body)}</div>
       </div>
     </div>
 </div>