diff --git a/notifications/templatetags/notifications_tags.py b/notifications/templatetags/notifications_tags.py
index 16c08e260b7afcfecef267d03e06aa7589d2b7d6..42c62d09bfa42bf4735008e895623171f7f500ec 100644
--- a/notifications/templatetags/notifications_tags.py
+++ b/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
)
diff --git a/notifications/urls.py b/notifications/urls.py
index cd551b2adf6f5b21ffb07b4bdcfaa51cb3a1f372..e71492d47e0ec927823a4354d300f4988bd875b5 100644
--- a/notifications/urls.py
+++ b/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'),
]
diff --git a/notifications/views.py b/notifications/views.py
index 7aba49a673a01bb0854ea8edda390306e9a75e6e..c5a5f196c220a847675116f10f1e72735689cd98 100644
--- a/notifications/views.py
+++ b/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'):
diff --git a/scipost/static/scipost/assets/config/preconfig.scss b/scipost/static/scipost/assets/config/preconfig.scss
index 9a15bb0e389dcadf37a712d2e45627a6a0df315a..7ddb10372dd8fed7fd054288653e0a21ca3e1024 100644
--- a/scipost/static/scipost/assets/config/preconfig.scss
+++ b/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);
diff --git a/scipost/static/scipost/assets/css/_badge.scss b/scipost/static/scipost/assets/css/_badge.scss
index e78445df0ba966cc2b1865736d073070fbbf723a..13ed52bb69e315f34a811d44613535b4bc54404c 100644
--- a/scipost/static/scipost/assets/css/_badge.scss
+++ b/scipost/static/scipost/assets/css/_badge.scss
@@ -1,8 +1,4 @@
.badge {
vertical-align: bottom;
- .h3 &,
- h3 & {
- line-height: 1.25;
- }
}
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
index f142f50ae36838f78f855db521e0100019f47722..452b2716637529ae319a7b1506839cd1a91581ce 100644
--- a/scipost/static/scipost/assets/css/_navbar.scss
+++ b/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;
}
}
diff --git a/scipost/static/scipost/assets/css/_popover.scss b/scipost/static/scipost/assets/css/_popover.scss
index 31f5ec15249a81ee11b297ea49311fd9163345cd..f0a381ddaaf9d88bbf2a2adea907fdad0378dd49 100644
--- a/scipost/static/scipost/assets/css/_popover.scss
+++ b/scipost/static/scipost/assets/css/_popover.scss
@@ -1,5 +1,6 @@
.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;
}
diff --git a/scipost/static/scipost/assets/js/notifications.js b/scipost/static/scipost/assets/js/notifications.js
index 14ef93ed960d12deaa7efc018914dbbd7482835b..33acc8db84bc4daf1baa9d9f4fbfdb7909a184b1 100644
--- a/scipost/static/scipost/assets/js/notifications.js
+++ b/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'
+ });
});
});
diff --git a/scipost/static/scipost/assets/js/tooltip.js b/scipost/static/scipost/assets/js/tooltip.js
index 1542867e52fa2936c8a818e9fa08b33a293ed78c..f636b484f0f08f51adc9dcc92ad1d83a4f6985e2 100644
--- a/scipost/static/scipost/assets/js/tooltip.js
+++ b/scipost/static/scipost/assets/js/tooltip.js
@@ -1,5 +1,9 @@
-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();
diff --git a/scipost/templates/scipost/navbar.html b/scipost/templates/scipost/navbar.html
index beb5bce93a4e1e20fb84b7beea69ad1fbbb0a41b..70dd4ba4b2a6cf37d2c43116154a93769cea8699 100644
--- a/scipost/templates/scipost/navbar.html
+++ b/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>