Merge pull request #5417 from svbergerem/notifications-fix-timeago

Fix timeago for notifications, add 'no notifications yet' message

app/assets/javascripts/app/helpers/timeago.js

@@ -0,0 +1,9 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+(function(){
+  app.helpers.timeago = function(el) {
+    el.find('time.timeago').each(function(i,e) {
+      $(e).attr('title', new Date($(e).attr('datetime')).toLocaleString());
+    }).timeago().tooltip();
+  };
+})();
+// @license-end

app/assets/javascripts/app/views/conversations_view.js

@@ -17,13 +17,7 @@ app.views.Conversations = Backbone.View.extend({
     }
 
     new app.views.ConversationsForm({contacts: gon.contacts});
-
-    $('.timeago').each(function(i,e) {
-        var jqe = $(e);
-        jqe.attr('title', new Date(jqe.attr('datetime')).toLocaleString());
-      })
-      .timeago()
-      .tooltip();
+    app.helpers.timeago($(this.el));
   },
 
   hideParticipants: function(e){

app/assets/javascripts/app/views/notifications_view.js

@@ -9,6 +9,7 @@ app.views.Notifications = Backbone.View.extend({
   initialize: function() {
     Diaspora.page.header.notifications.setUpNotificationPage(this);
     $(".unread-toggle .entypo").tooltip();
+    app.helpers.timeago($(document));
   },
 
   toggleUnread: function(evt) {

app/assets/javascripts/widgets/notifications-badge.js

@@ -83,7 +83,8 @@
             self.dropdownNotifications.append(notification.note_html);
         });
       });
-      self.dropdownNotifications.find("time.timeago").timeago();
+
+      app.helpers.timeago(self.dropdownNotifications);
 
       self.dropdownNotifications.find('.unread').each(function() {
         Diaspora.page.header.notifications.setUpUnread( $(this) );

app/assets/stylesheets/header.css.scss

@@ -174,6 +174,7 @@ body > header {
 
         .notification_message {
           margin-left: 40px;
+          .tooltip { position: fixed; }
         }
 
         .unread-toggle {

app/assets/stylesheets/notifications.css.scss

@@ -78,5 +78,7 @@
     }
 
     .pagination { text-align: center; }
+
+    .no_notifications { text-align: center; }
   }
 }

app/views/conversations/show.js.erb

@@ -10,19 +10,8 @@ $(".stream_element", "#conversation_inbox").removeClass('selected');
 $(".stream_element[data-guid='<%= @conversation.id %>']", "#conversation_inbox").addClass('selected');
 $(".stream_element[data-guid='<%= @conversation.id %>']", "#conversation_inbox").find(".unread_message_count").remove()
 
-$('time.timeago').each(function(i,e) {
-  var jqe = $(e);
-  jqe.attr('data-original-title', new Date(jqe.attr('datetime')).toLocaleString());
-});
+app.helpers.timeago($(document));
 
 if ($('#first_unread') > 0) {
   $("html").scrollTop($('#first_unread').offset().top-50);
 }
-
-$(".timeago").tooltip();
-$("time.timeago").timeago();
-
-$('time.timeago').each(function(i,e) {
-  var jqe = $(e);
-  jqe.attr('title', '');
-});

app/views/notifications/index.html.haml

@@ -42,17 +42,23 @@
                 = t('.mark_all_shown_as_read')
               -else
                 = t('.mark_all_as_read')
-      - @group_days.each do |day, notes|
-        .day_group.row-fluid
-          .date.span2
-            .day= the_day(day.split(' '))
-            .month= the_month(day.split(' '))
+      - if @group_days.length > 0
+        - @group_days.each do |day, notes|
+          .day_group.row-fluid
+            .date.span2
+              .day= the_day(day.split(' '))
+              .month= the_month(day.split(' '))
 
-          .notifications_for_day.span10
-            - notes.each do |note|
-              = render :partial => 'notifications/notification', :locals => { :note => note }
+            .notifications_for_day.span10
+              - notes.each do |note|
+                = render :partial => 'notifications/notification', :locals => { :note => note }
 
-      = will_paginate @notifications, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer
+        = will_paginate @notifications, :renderer => WillPaginate::ActionView::BootstrapLinkRenderer
+
+      - else
+        .no_notifications.well
+          %h4
+            = t('.no_notifications')
 
 :javascript
   $(document).ready(function(){

config/locales/diaspora/en.yml

@@ -722,6 +722,7 @@ en:
       mentioned: "Mentioned"
       reshared: "Reshared"
       started_sharing: "Started sharing"
+      no_notifications: "You don't have any notifications yet."
       and_others:
         zero: "and nobody else"
         one: "and one more"

spec/javascripts/app/helpers/timeago_spec.js

@@ -0,0 +1,20 @@
+describe("app.helpers.timeago", function() {
+  beforeEach(function(){
+    this.date = '2015-02-08T13:37:42.000Z';
+    this.datestring = new Date(this.date).toLocaleString();
+    var html = '<time class="timeago" datetime="' + this.date + '"></time>';
+    this.content = spec.content().html(html);
+  });
+
+  it("converts the date into a locale string for the tooltip", function() {
+    var timeago = this.content.find('time.timeago');
+    expect(timeago.attr('datetime')).toEqual(this.date);
+    expect(timeago.data('original-title')).toEqual(undefined);
+
+    app.helpers.timeago(this.content);
+
+    timeago = this.content.find('time.timeago');
+    expect(timeago.attr('datetime')).toEqual(this.date);
+    expect(timeago.data('original-title')).toEqual(this.datestring);
+  });
+});