visual touchups, show loading gif right away

app/views/layouts/_header.html.haml

@@ -45,12 +45,12 @@
 
       #notification_dropdown
         .header
+          = link_to t('.view_all'), notifications_path, :id => "view_all_notifications"
           %h4
             Recent notifications
         .notifications
-
+          .ajax_loader
-        .notification_element.view_more
+            = image_tag("ajax-loader.gif")
-          = link_to "View all notifications", notifications_path, :id => "notification_dropdown_link"
 
     %ul#user_menu.dropdown
       %li

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

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

public/javascripts/widgets/notifications-badge.js

@@ -8,15 +8,18 @@
       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.badge.addClass("active");
             self.renderNotifications();
-            self.dropdown.css("display", "block");
           });
         },  function(evt) {
           evt.preventDefault();
@@ -68,6 +71,7 @@
           Diaspora.widgets.timeago.updateTimeAgo(".notification_element time.timeago");
 
           if(notification.unread) {
+            notificationElement.addClass("unread");
             $.ajax({
               url: "/notifications/" + notification.id,
               type: "PUT",
@@ -78,6 +82,9 @@
           }
         });
       });
+
+
+      self.ajaxLoader.hide();
     };
   };
 

public/stylesheets/sass/application.sass

@@ -131,6 +131,7 @@ header
   :z-index 50
   :padding 6px 0
   :color #CCC
+  :height 26px
 
   :position fixed
 
@@ -1625,6 +1626,9 @@ h3 span.current_gs_step
   :display inline-block
   :min-width 170px
   :top 3px
+  :left 460px
+  :margin
+    :left 20px
 
   a:hover
     :text
@@ -1634,8 +1638,7 @@ h3 span.current_gs_step
     :position relative
     :top 2px
     :display inline
-    :margin 0 5px
+    :margin 0 2px
-      :left 4px
     :padding 8px 3px
       :bottom 9px
     :font
@@ -3004,20 +3007,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
@@ -3062,25 +3051,48 @@ 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,1px,5px,#666)
+  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
   :background white
   :border solid #888 1px
   :position absolute
-  :top 31px
+  :top 32px
-  :left 540px
+  :left 543px
+  :width 380px
   :display none
 
   :color #444
+
   a
     :color $blue
 
   .header
-    :padding 15px 20px
+    :padding 10px
-      :bottom 0
+    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 20px
+    :padding 10px 
     :min-height 30px
 
     img
@@ -3090,18 +3102,12 @@ ul.left_nav
       :margin
         :right 10px
 
-    &.view_more
+    &.unread
-      :background $blue
+      :background
-      :min-height 0
+        :color #eee
-      :text
+      :color #000
-        :align center
       :font
-        :size 13px
         :weight bold
-      :border
-        :top #eee 1px solid
-      a
-        :color white
 
 #notification_badge.active
   :z-index 10
@@ -3109,3 +3115,7 @@ ul.left_nav
     :color #fff
   :border 1px solid #888
     :bottom none
+  :margin
+    :left 0px
+  :padding
+    :bottom 10px