FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
pixeldesu 2015-09-16 22:18:40 +02:00
parent c834b7d4dd
commit ede3ad1b92
9 changed files with 236 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/assets/stylesheets/scss/notifications.scss
View File

@ -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;
}

2
app/controllers/notifications_controller.rb
View File

@ -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])

104
app/views/layouts/_notifications.html.haml
View File

@ -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

102
app/views/notifications/_notification.html.haml
View File

@ -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

3
app/views/notifications/_notification_nav.html.haml
View File

@ -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')

8
app/views/notifications/_notification_tabs.html.haml
View File

@ -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

10
app/views/notifications/index.html.haml
View File

@ -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

9
app/views/user/theme.css.scss.erb
View File

@ -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;
}

2
config/routes.rb
View File

@ -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'