STYLIN'

app/views/layouts/_header.html.haml

@@ -44,6 +44,13 @@
               = @unread_message_count
 
       #notification_dropdown
+        .header
+          %h4
+            Recent notifications
+        .notifications
+
+        .notification_element.view_more
+          = link_to "View all notifications", notifications_path, :id => "notification_dropdown_link"
 
     %ul#user_menu.dropdown
       %li

public/javascripts/widgets/notifications-badge.js

@@ -41,10 +41,12 @@
   }
 
   NotificationDropdown.prototype.showDropdown = function() {
+    this.badge.parent().addClass("active");
     this.dropdown.css("display", "block");
   }
 
   NotificationDropdown.prototype.hideDropdown = function() {
+    this.badge.parent().removeClass("active");
     this.dropdown.css("display", "none");
   }
 
@@ -56,9 +58,16 @@
   };
 
   NotificationDropdown.prototype.renderNotifications = function() {
+    this.dropdown.find(".notifications").html("");
+
     $.each(this.notifications.notifications, $.proxy(function(index, notifications) {
       $.each(notifications, $.proxy(function(index, notification) {
-          this.dropdown.append(notification.translation);
+          $("<div/>", {
+            "class": "notification_element"
+          })
+            .html(notification.translation)
+            .prepend($("<img/>", { src: notification.actors[0].avatar }))
+            .prependTo(this.dropdown.find(".notifications"));
       }, this));
     }, this));
   };

public/stylesheets/sass/application.sass

@@ -1621,10 +1621,10 @@ h3 span.current_gs_step
         :color #22AAE0
 
 #nav_badges
-  :position relative
+  :position absolute
   :display inline-block
-  :top 3px
   :min-width 170px
+  :top 3px
 
   a:hover
     :text
@@ -1632,17 +1632,17 @@ h3 span.current_gs_step
 
   .badge
     :position relative
+    :top 2px
     :display inline
-    :margin 0 15px
-      :right -5px
+    :margin 0 5px
+      :left 4px
+    :padding 8px 3px
+      :bottom 9px
     :font
       :weight bold
       :size smaller
     :width 28px
 
-    &:active
-      :top 1px
-
     &:hover
       .badge_count
         :background
@@ -1662,8 +1662,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
@@ -3063,11 +3063,49 @@ ul.left_nav
   :display block
 
 #notification_dropdown
+  @include box-shadow(0,1px,5px,#666)
   :background white
-  :border solid #000 1px
-  :padding 25px
+  :border solid #888 1px
   :position absolute
-  :top 29px
+  :top 31px
   :left 540px
   :display none
 
+  :color #444
+  a
+    :color $blue
+
+  .header
+    :padding 15px 20px
+      :bottom 0
+
+  .notification_element
+    :padding 10px 20px
+    :min-height 30px
+
+    img
+      :height 30px
+      :width 30px
+      :float left
+      :margin
+        :right 10px
+
+    &.view_more
+      :background $blue
+      :min-height 0
+      :text
+        :align center
+      :font
+        :size 13px
+        :weight bold
+      :border
+        :top #eee 1px solid
+      a
+        :color white
+
+#notification_badge.active
+  :z-index 10
+  :background
+    :color #fff
+  :border 1px solid #888
+    :bottom none