Prepare for use

notifications/templatetags/notifications_tags.py

@@ -19,7 +19,7 @@ def live_notify_badge(context, badge_class='live_notify_badge', classes=''):
     if not user:
         return ''
 
-    html = "<span class='{badge_class} {classes}'>{unread}</span>".format(
+    html = "<span class='{badge_class} {classes}' data-count='{unread}'>{unread}</span>".format(
         badge_class=badge_class, unread=user.notifications.unread().count(),
         classes=classes
     )

notifications/urls.py

@@ -13,6 +13,5 @@ urlpatterns = [
     url(r'^delete/(?P<slug>\d+)/$', views.delete, name='delete'),
     url(r'^api/unread_count/$', views.live_unread_notification_count,
         name='live_unread_notification_count'),
-    url(r'^api/list/$', views.live_notification_list,
-        name='live_unread_notification_list'),
+    url(r'^api/list/$', views.live_notification_list, name='live_unread_notification_list'),
 ]

notifications/views.py

@@ -129,6 +129,7 @@ def live_notification_list(request):
             struct['forward_link'] = n.get_absolute_url()
         if n.action_object:
             struct['action_object'] = str(n.action_object)
+        struct['timesince'] = n.timesince()
 
         list.append(struct)
         if request.GET.get('mark_as_read'):

scipost/static/scipost/assets/config/preconfig.scss

@@ -147,7 +147,7 @@ $popover-border-color:                #dddddd;
 $popover-arrow-width:                 5px;
 $popover-arrow-height:                5px;
 // $popover-arrow-color:                 $popover-bg;
-$popover-max-width:                   400px;
+$popover-max-width:                   500px;
 
 $popover-arrow-outer-width:           ($popover-arrow-width + 1px);
 

scipost/static/scipost/assets/css/_badge.scss

 .badge {
     vertical-align: bottom;
 
-    .h3 &,
-    h3 & {
-        line-height: 1.25;
-    }
 }

scipost/static/scipost/assets/css/_navbar.scss

@@ -77,6 +77,10 @@
 .navbar-counter {
     position: relative;
 
+    a.dropdown-toggle {
+        min-width: 45px;
+    }
+
     a:hover {
         text-decoration: none;
 
@@ -90,8 +94,11 @@
     }
 
     .badge {
-        position: absolute;
-        right: 15px;
-        top: 2px;
+        vertical-align: top;
+        margin-left: -5px;
+        margin-top: -2px;
+        height: 16px;
+        min-width: 16px;
+        line-height: 12px;
     }
 }

scipost/static/scipost/assets/css/_popover.scss

 .popover {
-    width: 400px;
+    width: 500px;
+    box-shadow: #ccc 0px 1px 2px 1px;
 }
 
 .popover.notifications {
@@ -12,4 +13,31 @@
         border-radius: 0;
         border-top: 1px solid #fff;
     }
+
+    .actions {
+        display: block;
+        opacity: 0.0;
+        transition: opacity 0.1s;
+        width: 20px;
+        float: right;
+        height: 100%;
+
+        a:hover {
+            .fa-circle-o:before {
+                content: '\f111';
+            }
+
+            .fa-circle:before {
+                content: '\f10c';
+            }
+        }
+    }
+
+    .list-group-item:hover .actions {
+        opacity: 1.0;
+    }
+}
+
+.popover-header {
+    font-size: initial;
 }

scipost/static/scipost/assets/js/notifications.js

@@ -35,10 +35,16 @@ function get_notification_list() {
                     message += " " + item.target;
                 }
             }
-            if(typeof item.timestamp !== 'undefined'){
-                message = message + " " + item.timestamp;
+            if(typeof item.timesince !== 'undefined'){
+                message = message + " <div class='text-muted'>" + item.timesince + " ago</div>";
             }
-            return '<li class="list-group-item ' + (item.unread ? ' active' : '') + '">' + message + '</li>';
+
+            if(item.unread) {
+                var mark_as_read = '<div class="actions"><a href="#"><i class="fa fa-circle" data-toggle="tooltip" data-placement="auto" title="Mark as unread" aria-hidden="true"></i></a></div>';
+            } else {
+                var mark_as_read = '<div class="actions"><a href="#"><i class="fa fa-circle-o" data-toggle="tooltip" data-placement="auto" title="Mark as read" aria-hidden="true"></i></a></div>';
+            }
+            return '<li class="list-group-item ' + (item.unread ? ' active' : '') + '">' + mark_as_read + message + '</li>';
         }).join('');
 
         if (messages == '') { messages = 'You have no notifications.' }
@@ -88,10 +94,10 @@ function fetch_api_data(url=null, callback=null) {
 setTimeout(fetch_api_data, 1000);
 
 $(function(){
-    var notification_template = '<div class="popover notifications" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>';
+    var notification_template = '<div class="popover notifications" role="tooltip"><div class="arrow"></div><h3 class="popover-header h2"></h3><div class="popover-body"></div></div>';
 
     var get_notifications_title = function() {
-        return 'New notifications <div class="badge badge-warning live_notify_badge"></div>';
+        return 'New notifications <div class="badge badge-warning live_notify_badge"></div><div class="mt-1"><small><a href="/notifications">See all my notifications</a></small></div>';
     }
 
     var get_notifications = function() {
@@ -110,5 +116,12 @@ $(function(){
         offset: '0, 9px',
         placement: "bottom",
         html: true
+    }).on('inserted.bs.popover', function() {
+        console.log($('.popover [data-toggle="tooltip"]'))
+        $('.popover [data-toggle="tooltip"]').tooltip({
+            animation: false,
+            fallbackPlacement: 'clockwise',
+            placement: 'auto'
+        });
     });
 });

scipost/static/scipost/assets/js/tooltip.js

-jQuery('[data-toggle="tooltip"]').tooltip({
-    animation: false,
-    fallbackPlacement: 'clockwise',
-    placement: 'auto'
-});
+var activate_tooltip = function() {
+    jQuery('[data-toggle="tooltip"]').tooltip({
+        animation: false,
+        fallbackPlacement: 'clockwise',
+        placement: 'auto'
+    });
+}
+
+activate_tooltip();

scipost/templates/scipost/navbar.html

@@ -31,7 +31,7 @@
               <li class="nav-item highlighted dropdown navbar-counter">
                 <div class="nav-link">{# href="{% url 'notifications:all' %}" #}
                     <span class="user">{% if user.last_name %}{% if user.contributor %}{{ user.contributor.get_title_display }} {% endif %}{{ user.first_name }} {{ user.last_name }}{% else %}{{ user.username }}{% endif %}</span>
-                    <a href="#" class="d-inline dropdown-toggle" id="notifications_badge">
+                    <a href="javascript:;" class="d-inline-block ml-1 dropdown-toggle" id="notifications_badge">
                         <i class="fa fa-bell-o" aria-hidden="true"></i>
                         {% live_notify_badge classes="badge badge-pill badge-primary" %}
                     </a>