Update notification design and behaviour

- Add display of content that was replied to/with
- Instead of marking notifications new, only show new items and hide seen entries
- Add a 'New Notifications' page and set it as default
- Add proper display if there are no new notifications
- Adjust theme to fit new changes

app/assets/stylesheets/scss/notifications.scss

@@ -5,6 +5,16 @@
   width: 32px;
 }
 
+.notification--img-sm {
+  min-height: 18px;
+  min-width: 18px;
+  height: 18px;
+  width: 18px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
 .notification--user, .notification--text {
   z-index: 99;
   margin-bottom: 0px;
@@ -27,7 +37,7 @@
 }
 
 .notification--dropdown-media {
-  padding: 3px 5px;
+  padding: 5px 10px;
 }
 
 .notification--dropdown-user, .notification--dropdown-text {
@@ -45,4 +55,47 @@
   min-width: 32px;
   height: 32px;
   width: 32px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.notification-center {
+  min-width: 500px;
+  margin-top: 0px !important;
+}
+
+.no-notifications:before {
+  font-size: 64px;
+  text-align: center;
+  display: block;
+  margin-bottom: 2px;
+}
+
+.notification--heading {
+  margin-bottom: 4px;
+}
+
+.notification--list-heading {
+  margin: 0px;
+  position: absolute;
+  top: 1px;
+  left: 3px;
+  margin: 0px;
+  text-transform: uppercase;
+  font-weight: bold;
+  opacity: 0.3;
+}
+
+.notification--list-content {
+  line-height: 1.3em;
+  padding-top: 3px;
+}
+
+.notification--list {
+  margin: 0px;
+}
+
+.notifications--none {
+  padding: 10px;
 }

app/controllers/notifications_controller.rb

@@ -5,6 +5,8 @@ class NotificationsController < ApplicationController
     @type = params[:type]
     @notifications = if @type == 'all'
                        Notification.for(current_user)
+                     elsif @type == 'new'
+                       Notification.for(current_user).where(new: true)
                      else
                        Notification.for(current_user).where('LOWER(target_type) = ?', @type)
                      end.paginate(page: params[:page])

app/views/layouts/_notifications.html.haml

@@ -1,5 +1,5 @@
 = nav_entry t('views.navigation.notifications'), notifications_path, badge: notification_count, class: 'visible-xs'
-- notifications = Notification.for(current_user).limit(4)
+- notifications = Notification.for(current_user).where(new: true).limit(4)
 %li.dropdown.hidden-xs
   %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
     - if notification_count.nil?
@@ -8,25 +8,46 @@
       %i.fa.fa-bell
     %span.sr-only Notifications
     %span.badge= notification_count
-  %ul.dropdown-menu.notification--dropdown
+  %ul.dropdown-menu.notification-center
     - if notifications.count == 0
-      %li.centre.text-muted New notifications will appear here.
+      %li.text-center
+        .notifications--none
+          %i.fa.fa-bell-o.no-notifications
+          %p No new notifications.
+      %li.text-center
+        %a{href: notifications_path('all')}
+          %i.fa.fa-fw.fa-chevron-right
+          Show all notifications
     - else
       - notifications.each do |notification|
-        %li{class: (notification.new? ? 'list-group-item-warning' : '')}
+        %li
           .media.notification--dropdown-media
             - case notification.target_type
               - when "Answer"
                 .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                  %i.fa.fa-2x.fa-fw.fa-exclamation
                 .media-body
-                  %h6.media-heading.notification--dropdown-user
+                  .notification--heading
+                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                     = user_screen_name notification.target.user
-                  .notification--dropdown-text
-                    = raw t('views.notifications.answer.body', question: link_to(t('views.notifications.answer.question'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)), time: time_ago_in_words(notification.target.created_at))
+                    answered
+                    = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
+                    = time_tooltip(notification.target)
+                    ago
+                  .list-group.notification--list
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading question
+                          .notification--list-content= notification.target.question.content
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading answer
+                          .notification--list-content= notification.target.content
               - when "Relationship"
                 .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.source)}
+                  %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
                 .media-body
                   %h6.media-heading.notification--dropdown-user
                     = user_screen_name notification.target.source
@@ -34,31 +55,66 @@
                     = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
               - when "Smile"
                 .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                  %i.fa.fa-2x.fa-fw.fa-smile-o
                 .media-body
-                  %h6.media-heading.notification--dropdown-user
+                  .notification--heading
+                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                     = user_screen_name notification.target.user
-                  .notification--dropdown-text
-                    = raw t('views.notifications.smile.body', content: link_to(t('views.notifications.smile.answer'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_ago_in_words(notification.target.created_at))
+                    smiled
+                    = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+                    = time_tooltip(notification.target)
+                    ago
+                  .list-group.notification--list
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading answer
+                          .notification--list-content= notification.target.answer.content
               - when "CommentSmile"
                 .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                  %i.fa.fa-2x.fa-fw.fa-smile-o
                 .media-body
-                  %h6.media-heading.notification--dropdown-user
+                  .notification--heading
+                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                     = user_screen_name notification.target.user
-                  .notification--dropdown-text
-                    = raw t('views.notifications.smile.body', content: link_to(t('views.notifications.smile.comment'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)), time: time_ago_in_words(notification.target.created_at))
+                    smiled
+                    = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
+                    = time_tooltip(notification.target)
+                    ago
+                  .list-group.notification--list
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading comment
+                          .notification--list-content= notification.target.comment.content
               - when "Comment"
                 .pull-left
-                  %img.img-rounded.notification--dropdown-img{src: gravatar_url(notification.target.user)}
+                  %i.fa.fa-2x.fa-fw.fa-comments
                 .media-body
-                  %h6.media-heading.notification--dropdown-user
+                  .notification--heading
+                    %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
                     = user_screen_name notification.target.user
-                  .notification--dropdown-text
+                    commented on
                     - if notification.target.answer.user == current_user
-                      = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.your', user: user_screen_name(current_user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
+                      = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                     - elsif notification.target.user == notification.target.answer.user
-                      = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.their', user: user_screen_name(notification.target.answer.user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
+                      = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
                     - else
-                      = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.user', user: user_screen_name(notification.target.answer.user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
-    %li= link_to "#{t('views.notifications.show')}#{t('views.notifications.mark') if notifications.pluck(:new).any?}", notifications_path
+                      = link_to "#{notification.target.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+                    = time_tooltip(notification.target)
+                    ago
+                  .list-group.notification--list
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading answer
+                          .notification--list-content= notification.target.answer.content
+                    .list-group-item
+                      .media.question-media
+                        .media-body
+                          %h6.notification--list-heading comment
+                          .notification--list-content= notification.target.content
+      %li.text-center
+        %a{href: notifications_path}
+          %i.fa.fa-fw.fa-chevron-right
+          Show all new notifications

app/views/notifications/_notification.html.haml

@@ -1,58 +1,94 @@
-%li.list-group-item{class: (notification.new? ? 'list-group-item-warning' : '')}
+%li.list-group-item
   .media
     - case notification.target_type
       - when "Answer"
         .pull-left
-          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+          %i.fa.fa-2x.fa-fw.fa-exclamation
         .media-body
-          %h6.media-heading.notification--user
+          .notification--heading
+            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
             = user_screen_name notification.target.user
-          %p.notification--text
-            = raw t('views.notifications.answer.body', question: link_to(t('views.notifications.answer.question'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)), time: time_tooltip(notification.target))
-          .notification--icon
-            %i.fa.fa-exclamation
+            answered
+            = link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
+            = time_tooltip(notification.target)
+            ago
+          .list-group.notification--list
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading question
+                  .notification--list-content= notification.target.question.content
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading answer
+                  .notification--list-content= notification.target.content
       - when "Relationship"
         .pull-left
-          %img.img-rounded.notification--img{src: gravatar_url(notification.target.source)}
+          %img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
         .media-body
-          %h6.media-heading.notification--user
+          %h6.media-heading.notification--dropdown-user
             = user_screen_name notification.target.source
-          %p.notification--text
-            = raw t('views.notifications.relationship.body', time: time_tooltip(notification.target))
-          .notification--icon
-            %i.fa.fa-users
+          .notification--dropdown-text
+            = raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
       - when "Smile"
         .pull-left
-          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+          %i.fa.fa-2x.fa-fw.fa-smile-o
         .media-body
-          %h6.media-heading.notification--user
+          .notification--heading
+            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
             = user_screen_name notification.target.user
-          %p.notification--text
-            = raw t('views.notifications.smile.body', content: link_to(t('views.notifications.smile.answer'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
-          .notification--icon
-            %i.fa.fa-smile-o
+            smiled
+            = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+            = time_tooltip(notification.target)
+            ago
+          .list-group.notification--list
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading answer
+                  .notification--list-content= notification.target.answer.content
       - when "CommentSmile"
         .pull-left
-          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+          %i.fa.fa-2x.fa-fw.fa-smile-o
         .media-body
-          %h6.media-heading.notification--user
+          .notification--heading
+            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
             = user_screen_name notification.target.user
-          %p.notification--text
-            = raw t('views.notifications.smile.body', content: link_to(t('views.notifications.smile.comment'), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)), time: time_tooltip(notification.target))
-          .notification--icon
-            %i.fa.fa-smile-o
+            smiled
+            = link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
+            = time_tooltip(notification.target)
+            ago
+          .list-group.notification--list
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading comment
+                  .notification--list-content= notification.target.comment.content
       - when "Comment"
         .pull-left
-          %img.img-rounded.notification--img{src: gravatar_url(notification.target.user)}
+          %i.fa.fa-2x.fa-fw.fa-comments
         .media-body
-          %h6.media-heading.notification--user
+          .notification--heading
+            %img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
             = user_screen_name notification.target.user
-          %p.notification--text
+            commented on
             - if notification.target.answer.user == current_user
-              = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.your', user: user_screen_name(current_user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
+              = link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
             - elsif notification.target.user == notification.target.answer.user
-              = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.their', user: user_screen_name(notification.target.answer.user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
+              = link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
             - else
-              = raw t('views.notifications.comment.body', content: link_to(t('views.notifications.comment.user', user: user_screen_name(notification.target.answer.user, false, false)), show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)), time: time_tooltip(notification.target))
-          .notification--icon
-            %i.fa.fa-comments
+              = link_to "#{notification.target.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
+            = time_tooltip(notification.target)
+            ago
+          .list-group.notification--list
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading answer
+                  .notification--list-content= notification.target.answer.content
+            .list-group-item
+              .media.question-media
+                .media-body
+                  %h6.notification--list-heading comment
+                  .notification--list-content= notification.target.content

app/views/notifications/_notification_nav.html.haml

@@ -9,7 +9,8 @@
       %a.navbar-brand{href: notifications_path} Notifications
     #j2-tl-navbar-collapse.collapse.navbar-collapse
       %ul.nav.navbar-nav
-        = nav_entry t('views.notifications.tabs.all'), notifications_path
+        = nav_entry "New Notifications", notifications_path
+        = nav_entry "All Notifications", notifications_path('all')
         = nav_entry t('views.notifications.tabs.answer'), notifications_path('answer')
         = nav_entry t('views.notifications.tabs.smile'), notifications_path('smile')
         = nav_entry t('views.notifications.tabs.comment'), notifications_path('comment')

app/views/notifications/_notification_tabs.html.haml

@@ -1,7 +1,13 @@
 .col-md-3.col-xs-12.col-sm-4
   .panel.panel-default.hidden-xs
     .list-group
-      = list_group_item t('views.notifications.tabs.all'), notifications_path, badge: Notification.for(current_user).where(new: true).count
+      = list_group_item "New Notifications", notifications_path, badge: Notification.for(current_user).where(new: true).count
+      = list_group_item "All Notifications", notifications_path('all')
+
+  .panel.panel-default.hidden-xs
+    .panel-heading
+      Filter by Type
+    .list-group
       = list_group_item t('views.notifications.tabs.answer'), notifications_path('answer'), badge: Notification.for(current_user).where(target_type: "Answer", new: true).count
       = list_group_item t('views.notifications.tabs.smile'), notifications_path('smile'), badge: Notification.for(current_user).where(target_type: "Smile", new: true).count
       = list_group_item t('views.notifications.tabs.comment'), notifications_path('comment'), badge: Notification.for(current_user).where(target_type: "Comment", new: true).count

app/views/notifications/index.html.haml

@@ -5,6 +5,16 @@
   .col-md-9.col-xs-12.col-sm-8
     .panel.panel-default
       %ul#notifications.list-group
+        - if @notifications.count == 0
+          %li.list-group-item.text-center
+            .notifications--none
+              %i.fa.fa-bell-o.no-notifications
+            %p
+              - if params[:type] != "all"
+                No new notifications.
+              - else
+                No notifications.
+        - else
           - @notifications.each do |notification|
             = render 'notifications/notification', notification: notification
 

app/views/user/theme.css.scss.erb

@@ -129,6 +129,15 @@ body#version1 {
         color: $primary_text;
       }
 
+      .notification--dropdown-media .notification--list .list-group-item {
+          background-color: $primary_color;
+          border-color: $primary_border;
+
+          .notification--list-heading {
+              color: $primary_text;
+          }
+      }
+
       > li.divider {
         background-color: $primary_border;
       }

config/routes.rb

@@ -105,7 +105,7 @@ Rails.application.routes.draw do
   match '/public', to: 'public#index', via: :get, as: :public_timeline
   match '/group/:group_name', to: 'group#index', via: :get, as: :group_timeline
 
-  match '/notifications(/:type)', to: 'notifications#index', via: :get, as: :notifications, defaults: {type: 'all'}
+  match '/notifications(/:type)', to: 'notifications#index', via: :get, as: :notifications, defaults: {type: 'new'}
 
   match '/inbox', to: 'inbox#show', via: 'get'
   match '/inbox/:author', to: 'inbox#show', via: 'get'