Refactor notifications into partials

All notification type layouts have been:

1) present in both the navigation layout and the notification page
2) in a single file

This commit addresses both issues and creates partials for all notfication types.
This commit is contained in:
Andreas Nedbal 2020-04-26 15:26:55 +02:00
parent 4917ce46d3
commit b550e78272
8 changed files with 97 additions and 199 deletions

View File

@ -19,104 +19,8 @@
- else
- notifications.each do |notification|
.dropdown-item.media.notification--dropdown-media
- case notification.target_type
- when "Answer"
.pull-left
%i.fa.fa-2x.fa-fw.fa-exclamation
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading answer
.notification--list-content
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
- when "Relationship"
.pull-left
%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
.notification--dropdown-text
= raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
- when "Smile"
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
- when "CommentSmile"
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
- when "Comment"
.pull-left
%i.fa.fa-2x.fa-fw.fa-comments
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
commented on
- if notification.target.answer.user == current_user
= 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
= link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
- else
= link_to "#{notification.target.answer.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
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading comment
.notification--list-content
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
= render "notifications/type/#{notification.target_type.downcase}", notification: notification
%a.dropdown-item.text-center{href: notifications_path}
%i.fa.fa-fw.fa-chevron-right
Show all new notifications

View File

@ -1,100 +0,0 @@
%li.list-group-item
.media
- case notification.target_type
- when "Answer"
.pull-left
%i.fa.fa-2x.fa-fw.fa-exclamation
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.question.content
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading answer
.notification--list-content
= markdown notification.target.content[0..255] + "#{notification.target.content.length > 255 ? '[...]' : ''}"
- when "Relationship"
.pull-left
%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
.notification--dropdown-text
= raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
- when "Smile"
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.answer.content[0..255] + "#{notification.target.answer.content.length > 255 ? '[...]' : ''}"
- when "CommentSmile"
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.comment.content
- when "Comment"
.pull-left
%i.fa.fa-2x.fa-fw.fa-comments
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
commented on
- if notification.target.answer.user == current_user
= 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
= link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
- else
= link_to "#{notification.target.answer.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
= markdown notification.target.answer.content[0..255] + "#{notification.target.answer.content.length > 255 ? '[...]' : ''}"
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading comment
.notification--list-content
= markdown notification.target.content

View File

@ -11,7 +11,9 @@
No notifications.
- else
- @notifications.each do |notification|
= render 'notifications/notification', notification: notification
%li.list-group-item
.media
= render "notifications/type/#{notification.target_type.downcase}", notification: notification
= render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]

View File

@ -0,0 +1,23 @@
.pull-left
%i.fa.fa-2x.fa-fw.fa-exclamation
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading answer
.notification--list-content
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"

View File

@ -0,0 +1,28 @@
.pull-left
%i.fa.fa-2x.fa-fw.fa-comments
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
commented on
- if notification.target.answer.user == current_user
= 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
= link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
- else
= link_to "#{notification.target.answer.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
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
.list-group-item
.media.question-media
.media-body
%h6.notification--list-heading comment
.notification--list-content
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"

View File

@ -0,0 +1,17 @@
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"

View File

@ -0,0 +1,7 @@
.pull-left
%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
.notification--dropdown-text
= raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))

View File

@ -0,0 +1,17 @@
.pull-left
%i.fa.fa-2x.fa-fw.fa-smile-o
.media-body
.notification--heading
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
= user_screen_name notification.target.user
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
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"