From 05688c2f430cf44ce0ab4714c5f922ea9998fdb6 Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Fri, 1 Jul 2011 22:45:22 -0700 Subject: [PATCH 1/6] notifications wip --- app/controllers/notifications_controller.rb | 6 ++ app/helpers/notifications_helper.rb | 4 + app/views/layouts/_header.html.haml | 2 + features/notifications.feature | 12 ++- features/step_definitions/custom_web_steps.rb | 8 ++ .../widgets/notifications-badge.js | 98 ++++++++++++------- public/stylesheets/sass/application.sass | 12 ++- 7 files changed, 102 insertions(+), 40 deletions(-) diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb index 507f8c0bf..af52b16a3 100644 --- a/app/controllers/notifications_controller.rb +++ b/app/controllers/notifications_controller.rb @@ -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 diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index 058124822..5c30f9ede 100644 --- a/app/helpers/notifications_helper.rb +++ b/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 diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index 0bd36b062..eaf066ee0 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -43,6 +43,8 @@ .badge_count{:class => ("hidden" if @unread_message_count == 0)} = @unread_message_count + #notification_dropdown + %ul#user_menu.dropdown %li .right diff --git a/features/notifications.feature b/features/notifications.feature index 7c94cb1ea..a5ad1fda3 100644 --- a/features/notifications.feature +++ b/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 diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index d239eda9c..9856a7d26 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/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 diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index 23384aeaf..cff936674 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/public/javascripts/widgets/notifications-badge.js @@ -1,41 +1,67 @@ -$(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() { + this.start = function() { + this.badge = $("#notification_badge a"); + this.documentBody = $(document.body); + this.dropdown = $("#notification_dropdown"); - $.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.badge.click($.proxy(function(evt) { + evt.preventDefault(); + evt.stopPropagation(); + + if(!this.dropdownShowing()) { + this.getNotifications(function() { + this.toggleDropdown(); }); - }); - notificationsElement.append(dayElement) + } + else { + this.toggleDropdown(); + } + }, this)); - Diaspora.widgets.timeago.updateTimeAgo("time"); - }); - }); - }); + this.documentBody.click($.proxy(function(evt) { + if(this.dropdownShowing()) { + this.toggleDropdown(evt); + } + }, this)); + }; + }; - $("#notifications_overlay").delegate('a.close', 'click', function() { - console.log("hi!"); - $('#notifications_overlay').hide(); - }); + NotificationDropdown.prototype.dropdownShowing = function() { + return this.dropdown.css("display") === "block"; + } -}); + NotificationDropdown.prototype.toggleDropdown = function() { + if(!this.dropdownShowing()) { + this.renderNotifications(); + this.showDropdown(); + } else { + this.hideDropdown(); + } + } + + NotificationDropdown.prototype.showDropdown = function() { + this.dropdown.css("display", "block"); + } + + NotificationDropdown.prototype.hideDropdown = function() { + this.dropdown.css("display", "none"); + } + + NotificationDropdown.prototype.getNotifications = function(callback) { + $.getJSON("/notifications", $.proxy(function(notifications) { + this.notifications = notifications; + callback.apply(this, [notifications]); + }, this)); + }; + + NotificationDropdown.prototype.renderNotifications = function() { + $.each(this.notifications.notifications, $.proxy(function(index, notifications) { + $.each(notifications, $.proxy(function(index, notification) { + this.dropdown.append(notification.translation); + }, this)); + }, this)); + }; + + Diaspora.widgets.add("notificationDropdown", NotificationDropdown); +})(); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index bc2746938..dd0c01363 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -2828,7 +2828,7 @@ ul#requested-scopes img :height 30px :width 30px - + .scope-description :display none @@ -3061,3 +3061,13 @@ ul.left_nav .big_stream_photo :display block + +#notification_dropdown + :background white + :border solid #000 1px + :padding 25px + :position absolute + :top 29px + :left 540px + :display none + From b48b182c732d2ff827dfcbbbe2f4fe4e5601d8db Mon Sep 17 00:00:00 2001 From: Dan Hansen & Daniel Grippi Date: Sat, 2 Jul 2011 00:04:14 -0700 Subject: [PATCH 2/6] STYLIN' --- app/views/layouts/_header.html.haml | 7 +++ .../widgets/notifications-badge.js | 11 +++- public/stylesheets/sass/application.sass | 62 +++++++++++++++---- 3 files changed, 67 insertions(+), 13 deletions(-) diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index eaf066ee0..754c70668 100644 --- a/app/views/layouts/_header.html.haml +++ b/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 diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index cff936674..9dbaf2b54 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/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); + $("
", { + "class": "notification_element" + }) + .html(notification.translation) + .prepend($("", { src: notification.actors[0].avatar })) + .prependTo(this.dropdown.find(".notifications")); }, this)); }, this)); }; diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index dd0c01363..247d030dc 100644 --- a/public/stylesheets/sass/application.sass +++ b/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 From 3941d562a811fef3360790933fd7448b8b11d264 Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Sat, 2 Jul 2011 14:57:17 -0700 Subject: [PATCH 3/6] clean up notifications-badge.js --- .../widgets/notifications-badge.js | 99 +++++++++---------- 1 file changed, 44 insertions(+), 55 deletions(-) diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index 9dbaf2b54..067f241de 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/public/javascripts/widgets/notifications-badge.js @@ -1,75 +1,64 @@ (function() { var NotificationDropdown = function() { + var self = this; + this.start = function() { - this.badge = $("#notification_badge a"); + 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.badge.click($.proxy(function(evt) { - evt.preventDefault(); - evt.stopPropagation(); - - if(!this.dropdownShowing()) { - this.getNotifications(function() { - this.toggleDropdown(); + this.badgeLink.toggle(function(evt) { + evt.preventDefault(); + evt.stopPropagation(); + + self.getNotifications(function() { + self.renderNotifications(); + self.dropdown.css("display", "block"); }); - } - else { - this.toggleDropdown(); - } - }, this)); + }, function(evt) { + evt.preventDefault(); + evt.stopPropagation(); - this.documentBody.click($.proxy(function(evt) { - if(this.dropdownShowing()) { - this.toggleDropdown(evt); + self.dropdown.css("display", "none"); + }); + + this.dropdown.click(function(evt) { + evt.stopPropagation(); + }); + + this.documentBody.click(function(evt) { + if(self.dropdownShowing()) { + self.badgeLink.click(); } - }, this)); + }); }; - }; - NotificationDropdown.prototype.dropdownShowing = function() { - return this.dropdown.css("display") === "block"; - } - NotificationDropdown.prototype.toggleDropdown = function() { - if(!this.dropdownShowing()) { - this.renderNotifications(); - this.showDropdown(); - } else { - this.hideDropdown(); - } - } + this.dropdownShowing = function() { + return this.dropdown.css("display") === "block"; + }; - NotificationDropdown.prototype.showDropdown = function() { - this.badge.parent().addClass("active"); - this.dropdown.css("display", "block"); - } + this.getNotifications = function(callback) { + $.getJSON("/notifications", function(notifications) { + self.notifications = notifications; + callback.apply(self, []); + }); + }; - NotificationDropdown.prototype.hideDropdown = function() { - this.badge.parent().removeClass("active"); - this.dropdown.css("display", "none"); - } + this.renderNotifications = function() { + self.dropdownNotifications.empty(); - NotificationDropdown.prototype.getNotifications = function(callback) { - $.getJSON("/notifications", $.proxy(function(notifications) { - this.notifications = notifications; - callback.apply(this, [notifications]); - }, this)); - }; - - NotificationDropdown.prototype.renderNotifications = function() { - this.dropdown.find(".notifications").html(""); - - $.each(this.notifications.notifications, $.proxy(function(index, notifications) { - $.each(notifications, $.proxy(function(index, notification) { - $("
", { - "class": "notification_element" - }) + $.each(self.notifications.notifications, function(index, notifications) { + $.each(notifications, function(index, notification) { + $("
", { "class": "notification_element" }) .html(notification.translation) .prepend($("", { src: notification.actors[0].avatar })) - .prependTo(this.dropdown.find(".notifications")); - }, this)); - }, this)); + .prependTo(self.dropdownNotifications); + }); + }); + }; }; Diaspora.widgets.add("notificationDropdown", NotificationDropdown); From 0b56ade4689fe15b9aeeb13d36688a7e91f386fb Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Sat, 2 Jul 2011 15:14:02 -0700 Subject: [PATCH 4/6] basic unread/read states --- public/javascripts/widgets/notifications-badge.js | 4 +++- public/stylesheets/sass/application.sass | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index 067f241de..ff2d0ad81 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/public/javascripts/widgets/notifications-badge.js @@ -52,7 +52,9 @@ $.each(self.notifications.notifications, function(index, notifications) { $.each(notifications, function(index, notification) { - $("
", { "class": "notification_element" }) + $("
") + .addClass("notification_element") + .addClass((notification.unread) ? "unread" : "read" ) .html(notification.translation) .prepend($("", { src: notification.actors[0].avatar })) .prependTo(self.dropdownNotifications); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 247d030dc..a9b5c6b37 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3082,6 +3082,10 @@ ul.left_nav .notification_element :padding 10px 20px :min-height 30px + .unread + :background #CCC + .read + :background white img :height 30px From eb0fbe519c4801f97d9eaecc9ac5ff65ff124e7e Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Sat, 2 Jul 2011 16:39:01 -0700 Subject: [PATCH 5/6] remove read/unread state, always mark notifications as read, only return 5 notifications for json requests --- app/controllers/notifications_controller.rb | 2 +- .../widgets/notifications-badge.js | 24 ++++++++++++++++--- public/stylesheets/sass/application.sass | 4 ---- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb index af52b16a3..52c5bd3f7 100644 --- a/app/controllers/notifications_controller.rb +++ b/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 ) diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index ff2d0ad81..72301de06 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/public/javascripts/widgets/notifications-badge.js @@ -14,6 +14,7 @@ evt.stopPropagation(); self.getNotifications(function() { + self.badge.addClass("active"); self.renderNotifications(); self.dropdown.css("display", "block"); }); @@ -21,6 +22,7 @@ evt.preventDefault(); evt.stopPropagation(); + self.badge.removeClass("active"); self.dropdown.css("display", "none"); }); @@ -52,12 +54,28 @@ $.each(self.notifications.notifications, function(index, notifications) { $.each(notifications, function(index, notification) { - $("
") + var notificationElement = $("
") .addClass("notification_element") - .addClass((notification.unread) ? "unread" : "read" ) .html(notification.translation) .prepend($("", { src: notification.actors[0].avatar })) - .prependTo(self.dropdownNotifications); + .append("
") + .append($("", { + "class": "timeago", + "title": notification.created_at + })) + .appendTo(self.dropdownNotifications); + + Diaspora.widgets.timeago.updateTimeAgo(".notification_element time.timeago"); + + if(notification.unread) { + $.ajax({ + url: "/notifications/" + notification.id, + type: "PUT", + success: function() { + Diaspora.widgets.notifications.decrementCount(); + } + }); + } }); }); }; diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index a9b5c6b37..247d030dc 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3082,10 +3082,6 @@ ul.left_nav .notification_element :padding 10px 20px :min-height 30px - .unread - :background #CCC - .read - :background white img :height 30px From 9ec905560c874196559ac2bfc379fab6a61bd28c Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Sat, 2 Jul 2011 17:53:07 -0700 Subject: [PATCH 6/6] visual touchups, show loading gif right away --- app/views/layouts/_header.html.haml | 6 +- app/views/layouts/application.html.haml | 2 - app/views/notifications/_overlay.html.haml | 19 ----- config/locales/diaspora/en.yml | 1 + .../widgets/notifications-badge.js | 11 ++- public/stylesheets/sass/application.sass | 74 +++++++++++-------- 6 files changed, 55 insertions(+), 58 deletions(-) delete mode 100644 app/views/notifications/_overlay.html.haml 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