Merge branch 'notification-dropdown'

app/assets/stylesheets/scss/navbar.scss

@@ -3,7 +3,7 @@
   background-color: $navbar-inverse-link-active-bg;
 }
 
-.navbar .nav .active .badge {
+.navbar .nav .active .badge, li.dropdown.open a.dropdown-toggle span.badge {
   padding: 3px 6px 3px;
   background-color: $navbar-inverse-bg;
 }

app/assets/stylesheets/scss/notifications.scss

@@ -19,4 +19,30 @@
   color: $gray;
   opacity: 0.4;
   z-index: 0;
+}
+
+.notification--dropdown {
+  min-width: 370px;
+  margin-top: 0px !important;
+}
+
+.notification--dropdown-media {
+  padding: 3px 5px;
+}
+
+.notification--dropdown-user, .notification--dropdown-text {
+  margin-bottom: 0px;
+  overflow: hidden;
+  line-height: 1.3em;
+}
+
+.notification--dropdown-user {
+  margin-top: 0px;
+}
+
+.notification--dropdown-img {
+  min-height: 32px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
 }

app/views/layouts/_notifications.html.haml

@@ -1 +1,61 @@
-= nav_entry "Notifications", notifications_path, badge: notification_count
+= nav_entry "Notifications", notifications_path, badge: notification_count, class: 'visible-xs'
+- notifications = Notification.for(current_user).limit(4)
+%li.dropdown.hidden-xs
+  %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
+    Notifications
+    %span.badge= notification_count
+  %ul.dropdown-menu.notification--dropdown
+    - if notifications.count == 0
+      %li.centre.text-muted New notifications will appear here.
+    - else
+      - notifications.each do |notification|
+        %li{class: (notification.new? ? 'list-group-item-warning' : '')}
+          .media.notification--dropdown-media
+            - case notification.target_type
+              - when "Answer"
+                .pull-left
+                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                .media-body
+                  %h6.media-heading.notification--dropdown-user
+                    = user_screen_name notification.target.user
+                  .notification--dropdown-text
+                    answered
+                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id), title: "#{notification.target.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+                      your question
+                    = time_ago_in_words notification.target.created_at
+                    ago
+              - when "Relationship"
+                .pull-left
+                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.source)}
+                .media-body
+                  %h6.media-heading.notification--dropdown-user
+                    = user_screen_name notification.target.source
+                  .notification--dropdown-text
+                    followed you
+                    = time_ago_in_words notification.target.created_at
+                    ago
+              - when "Smile"
+                .pull-left
+                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                .media-body
+                  %h6.media-heading.notification--dropdown-user
+                    = user_screen_name notification.target.user
+                  .notification--dropdown-text
+                    smiled at
+                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+                      your answer
+                    = time_ago_in_words notification.target.created_at
+                    ago
+              - when "Comment"
+                .pull-left
+                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                .media-body
+                  %h6.media-heading.notification--dropdown-user
+                    = user_screen_name notification.target.user
+                  .notification--dropdown-text
+                    commented on
+                    %a{href: show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id), title: "#{notification.target.answer.content[0..40]}...", data: { toggle: :tooltip, placement: :top }}
+                      your answer
+                    = time_ago_in_words notification.target.created_at
+                    ago
+    %li= link_to "Show all notifications#{" and mark them as read" if notifications.pluck(:new).any?}", notifications_path

spec/features/users/inbox_spec.rb

@@ -84,7 +84,7 @@ feature "Inbox", :devise do
     page.find('.sweet-alert').click_button 'Delete'
     wait_for_ajax
 
-    visit root_path
+    login_as me, scope: :user
     visit inbox_path
     expect(page).not_to have_text(question.content)
     page.driver.render Rails.root.join("tmp/#{Time.now.to_i}_2.png"), full: true
@@ -111,11 +111,12 @@ feature "Inbox", :devise do
     expect(page).to have_text('Really delete 5 questions?')
     page.driver.render Rails.root.join("tmp/#{Time.now.to_i}_1.png"), full: true
 
-    # this apparently doesn't get triggered :(
     page.find('.sweet-alert').click_button 'Delete'
     wait_for_ajax
 
-    visit root_path
+    puts me.inbox.all
+
+    login_as me, scope: :user
     visit inbox_path
     page.driver.render Rails.root.join("tmp/#{Time.now.to_i}_2.png"), full: true
     expect(page).not_to have_text('Answer'.upcase)