From 9ec905560c874196559ac2bfc379fab6a61bd28c Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Sat, 2 Jul 2011 17:53:07 -0700 Subject: [PATCH] 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