Merge branch 'notifications'

app/controllers/notifications_controller.rb

@@ -24,7 +24,7 @@ class NotificationsController < VannaController
                                  :conditions => conditions,
                                  :order => 'created_at desc',
                                  :include => [:target, {:actors => :profile}],
-                                 :limit => pager.per_page,
+                                 :limit => request.format == :json ? 5 : pager.per_page,
                                  :offset => pager.offset
                                 )
 
@@ -32,6 +32,7 @@ class NotificationsController < VannaController
     end
     notifications.each do |n|
       n[:actors] = n.actors
+      n[:translation] = object_link(n, n.actors.map { |a| person_link(a) })
       n[:translation_key] = n.popup_translation_key
       n[:target] = n.translation_key == "notifications.mentioned" ? n.target.post : n.target
     end
@@ -42,9 +43,14 @@ class NotificationsController < VannaController
   def read_all(opts=params)
     Notification.where(:recipient_id => current_user.id).update_all(:unread => false)
   end
+
   post_process :html do
     def post_read_all(json)
       Response.new(:status => 302, :location => aspects_path)
     end
   end
+
+  def controller
+    Object.new
+  end
 end

app/helpers/notifications_helper.rb

@@ -1,4 +1,8 @@
 module NotificationsHelper
+  include ERB::Util
+  include ActionView::Helpers::TranslationHelper
+  include ActionView::Helpers::UrlHelper
+  include ApplicationHelper
   def object_link(note, actors)
     target_type = note.popup_translation_key
     actors_count = note.actors.count

app/views/layouts/_header.html.haml

@@ -43,6 +43,15 @@
             .badge_count{:class => ("hidden" if @unread_message_count == 0)}
               = @unread_message_count
 
+      #notification_dropdown
+        .header
+          = link_to t('.view_all'), notifications_path, :id => "view_all_notifications"
+          %h4
+            Recent notifications
+        .notifications
+          .ajax_loader
+            = image_tag("ajax-loader.gif")
+
     %ul#user_menu.dropdown
       %li
         .right

app/views/layouts/application.html.haml

@@ -94,8 +94,6 @@
       .span-24.last{:style=> "#{yield(:break_the_mold)}"}
         = yield
 
-    .clearfix
-      =render :partial => 'notifications/overlay'
       /=render :partial => 'layouts/debug.haml'
 
     %footer

app/views/notifications/_overlay.html.haml

@@ -1,19 +0,0 @@
-.span-24.last#notifications_overlay
-  .stream.notifications
-    .day_group.span-24.last
-      .span-3
-        .date
-          .day
-          .month
-      .span-8.notifications_for_day
-        .stream_element{:data=>{:guid => nil}}
-          .right
-          %span.from
-            = link_to("", "#", :class => "actor")
-            = link_to("", "#", :class => "object")
-
-          %br
-          %time
-  = link_to("all of them", notifications_path)
-  %a.close{:href => "#" }
-    close

config/locales/diaspora/en.yml

@@ -292,6 +292,7 @@ en:
       login: "log in"
       code: "code"
       admin: "admin"
+      view_all: "View all"
     application:
       powered_by: "POWERED BY DIASPORA*"
       whats_new: "what's new?"

features/notifications.feature

@@ -14,8 +14,14 @@ Background:
 
   And I go to the destroy user session page
 
-Scenario: someone shares with me
-  When I sign in as "alice@alice.alice"
-  And I follow "notifications" in the header
+  Scenario: someone shares with me
+    When I sign in as "alice@alice.alice"
+    And I follow "notifications" in the header
 
   Then I should see "started sharing with you"
+
+  Scenario: notification popup
+    When I sign in as "alice@alice.alice"
+    And I click the notification badge
+    And I wait for the ajax to finish
+    Then the notification dropdown should be visible

features/step_definitions/custom_web_steps.rb

@@ -194,3 +194,11 @@ end
 When /^I wait for (\d+) seconds$/ do |seconds|
   sleep seconds.to_i
 end
+
+When /^I click the notification badge$/ do
+  evaluate_script("$('#notification_badge a').click();");
+end
+
+Then /^the notification dropdown should be visible$/ do
+  evaluate_script("$('#notification_dropdown').css('display') === 'block'")
+end

public/javascripts/widgets/notifications-badge.js

@@ -1,41 +1,92 @@
-$(function() {
-  $("#notification_badge a").live("_click", function(event){
-    event.preventDefault();
-    $.getJSON("/notifications", function(hash) {
-      $("#notifications_overlay").show();
-      var notificationsElement =  $("#notifications_overlay .notifications");
-      var dayElementTemplate = $("#notifications_overlay .day_group").clone();
-      dayElementTemplate.find(".notifications_for_day").empty();
-      var streamElementTemplate = $("#notifications_overlay .stream_element").clone();
-      notificationsElement.empty();
-      $.each(hash["group_days"], function(day){
-        var dayElement = dayElementTemplate.clone();
-        var dayParts = day.split(" ");
-        dayElement.find(".month").text(dayParts[0])
-        dayElement.find(".day").text(dayParts[1])
-        var notificationsForDay = hash["group_days"][day],
-          notificationsForDayElement = dayElement.find('.notifications_for_day');
+(function() {
+  var NotificationDropdown = function() {
+    var self = this;
 
-        $.each(notificationsForDay, function(i, notificationHash) {
-          $.each(notificationHash, function(notificationType, notification) {
-            var actor = notification.actors[0];
-            var streamElement = streamElementTemplate.clone().appendTo(notificationsForDayElement);
-            streamElement.find(".actor")
-              .text(actor.name)
-              .attr("href", notification.actors[0]["url"]);
-            streamElement.find('time').attr("datetime", notification["created_at"]);
+    this.start = function() {
+      this.badge = $("#notification_badge");
+      this.badgeLink = this.badge.find("a");
+      this.documentBody = $(document.body);
+      this.dropdown = $("#notification_dropdown");
+      this.dropdownNotifications = this.dropdown.find(".notifications");
+      this.ajaxLoader = this.dropdown.find(".ajax_loader");
+
+      this.badgeLink.toggle(function(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          
+          self.ajaxLoader.show();
+          self.badge.addClass("active");
+          self.dropdown.css("display", "block");
+
+          self.getNotifications(function() { 
+            self.renderNotifications();
           });
-        });
-        notificationsElement.append(dayElement)
+        },  function(evt) {
+          evt.preventDefault();
+          evt.stopPropagation();
 
-        Diaspora.widgets.timeago.updateTimeAgo("time");
+          self.badge.removeClass("active");
+          self.dropdown.css("display", "none");
       });
-    });
-  });
 
-  $("#notifications_overlay").delegate('a.close', 'click', function() {
-    console.log("hi!");
-    $('#notifications_overlay').hide();
-  });
+      this.dropdown.click(function(evt) {
+        evt.stopPropagation();
+      });
 
-});
+      this.documentBody.click(function(evt) {
+        if(self.dropdownShowing()) {
+          self.badgeLink.click();
+        }
+      });
+    };
+
+
+    this.dropdownShowing = function() {
+      return this.dropdown.css("display") === "block";
+    };
+
+    this.getNotifications = function(callback) {
+      $.getJSON("/notifications", function(notifications) {
+        self.notifications = notifications;
+        callback.apply(self, []);
+      });
+    };
+
+    this.renderNotifications = function() {
+      self.dropdownNotifications.empty();
+
+      $.each(self.notifications.notifications, function(index, notifications) {
+        $.each(notifications, function(index, notification) {
+          var notificationElement = $("<div/>")
+            .addClass("notification_element")
+            .html(notification.translation)
+            .prepend($("<img/>", { src: notification.actors[0].avatar }))
+            .append("<br />")
+            .append($("<abbr/>", {
+              "class": "timeago",
+              "title": notification.created_at
+            }))
+            .appendTo(self.dropdownNotifications);
+
+          Diaspora.widgets.timeago.updateTimeAgo(".notification_element time.timeago");
+
+          if(notification.unread) {
+            notificationElement.addClass("unread");
+            $.ajax({
+              url: "/notifications/" + notification.id,
+              type: "PUT",
+              success: function() {
+                Diaspora.widgets.notifications.decrementCount();
+              }
+            });
+          }
+        });
+      });
+
+
+      self.ajaxLoader.hide();
+    };
+  };
+
+  Diaspora.widgets.add("notificationDropdown", NotificationDropdown);
+})();

public/stylesheets/sass/application.sass

@@ -131,6 +131,7 @@ header
   :z-index 50
   :padding 6px 0
   :color #CCC
+  :height 26px
 
   :position fixed
 
@@ -1548,10 +1549,13 @@ h3 span.current_gs_step
         :color #22AAE0
 
 #nav_badges
-  :position relative
+  :position absolute
   :display inline-block
-  :top 3px
   :min-width 170px
+  :top 3px
+  :left 460px
+  :margin
+    :left 20px
 
   a:hover
     :text
@@ -1559,17 +1563,16 @@ h3 span.current_gs_step
 
   .badge
     :position relative
+    :top 2px
     :display inline
-    :margin 0 15px
-      :right -5px
+    :margin 0 2px
+    :padding 8px 3px
+      :bottom 9px
     :font
       :weight bold
       :size smaller
     :width 28px
 
-    &:active
-      :top 1px
-
     &:hover
       .badge_count
         :background
@@ -1589,8 +1592,8 @@ h3 span.current_gs_step
 
   :z-index 3
   :position absolute
-  :top -10px
-  :left 11px
+  :top -2px
+  :left 13px
   :padding 0 2px
     :bottom 1px
   :background
@@ -2755,7 +2758,7 @@ ul#requested-scopes
     img
       :height 30px
       :width 30px
-  
+
     .scope-description
       :display none
 
@@ -2931,20 +2934,6 @@ ul.left_nav
     :height 30px
     :width 30px
 
-#notifications_overlay
-  :display none
-  :position absolute
-  :border 4px solid black
-  :background
-    :color white
-  :width 700px
-  :padding 10px
-  :top 275.5px
-  :left 217.5px
-  a.close
-    :float right
-    :text-decoration none
-
 #aspect_controls
   @include border-radius(2px)
   :background
@@ -2988,3 +2977,72 @@ ul.left_nav
 
 .big_stream_photo
   :display block
+
+#view_all_notifications
+  :float right
+  :margin
+    :right 3px
+  :font
+    :weight bold
+
+
+#notification_dropdown
+  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
+  :background white
+  :border solid #888 1px
+  :position absolute
+  :top 32px
+  :left 543px
+  :width 380px
+  :display none
+
+  :color #444
+
+  a
+    :color $blue
+
+  .header
+    :padding 10px
+    h4
+      :padding
+        :bottom 0
+      :margin
+        :bottom 0
+
+  .notification_element,
+  .header
+    :border
+      :bottom 1px solid #ddd
+
+  .ajax_loader
+    :text-align center
+    :padding 15px
+
+  .notification_element
+    :padding 10px 
+    :min-height 30px
+
+    img
+      :height 30px
+      :width 30px
+      :float left
+      :margin
+        :right 10px
+
+    &.unread
+      :background
+        :color #eee
+      :color #000
+      :font
+        :weight bold
+
+#notification_badge.active
+  :z-index 10
+  :background
+    :color #fff
+  :border 1px solid #888
+    :bottom none
+  :margin
+    :left 0px
+  :padding
+    :bottom 10px