diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index 754c70668..55dd8ae51 100644
--- a/app/views/layouts/_header.html.haml
+++ b/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
-
- .notification_element.view_more
- = link_to "View all notifications", notifications_path, :id => "notification_dropdown_link"
+ .ajax_loader
+ = image_tag("ajax-loader.gif")
%ul#user_menu.dropdown
%li
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 0fe815845..064663a3e 100644
--- a/app/views/layouts/application.html.haml
+++ b/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
diff --git a/app/views/notifications/_overlay.html.haml b/app/views/notifications/_overlay.html.haml
deleted file mode 100644
index ea149e55b..000000000
--- a/app/views/notifications/_overlay.html.haml
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml
index dd262bfd6..1a794142d 100644
--- a/config/locales/diaspora/en.yml
+++ b/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?"
diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js
index 72301de06..085923ef4 100644
--- a/public/javascripts/widgets/notifications-badge.js
+++ b/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();
};
};
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 247d030dc..b9190af61 100644
--- a/public/stylesheets/sass/application.sass
+++ b/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
- :left 4px
+ :margin 0 2px
: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
- :left 540px
+ :top 32px
+ :left 543px
+ :width 380px
:display none
:color #444
+
a
:color $blue
.header
- :padding 15px 20px
- :bottom 0
+ :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 20px
+ :padding 10px
:min-height 30px
img
@@ -3090,18 +3102,12 @@ ul.left_nav
:margin
:right 10px
- &.view_more
- :background $blue
- :min-height 0
- :text
- :align center
+ &.unread
+ :background
+ :color #eee
+ :color #000
: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