maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix small details in notification results and add filtering (#1166)

Browse source 
* Fix small details in notification results and add filtering

* Adjust filter styling

* Fix filtering

* Add reaction render to comments
This commit is contained in:
Ben Halpern 2018-11-20 18:00:11 -05:00 • committed by GitHub
parent 0e76bdcd33
commit 5ee5c931fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 126 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/initializers/initNotifications.js
View file

@ -23,7 +23,7 @@ function markNotificationsAsRead() {
xmlhttp.setRequestHeader('X-CSRF-Token', csrfToken);
xmlhttp.send();
}
}, 380);
}, 450);
}
function fetchNotificationsCount() {

2
app/assets/javascripts/serviceworker.js.erb
View file

@ -1,4 +1,4 @@
var CACHE_VERSION = 'v2.6.3';
var CACHE_VERSION = 'v2.6.4';
var CACHE_NAME = CACHE_VERSION + ':sw-cache::';
var REQUESTS_LIMIT = 70;

43
app/assets/stylesheets/articles.scss
View file

@ -68,6 +68,33 @@
max-width:604px;
float:left;
}
.notifications-mobile-filters {
padding-bottom: 8px;
@media screen and ( min-width: 950px ){
display: none;
}
.query-filter-button{
font-size: 12px;
font-weight: bold;
background: transparent;
border: 0px;
display:inline-block;
width: 27%;
padding: 6px 0px;
text-align:left;
border-radius: 100px;
color: $black;
text-align: center;
margin: 1%;
&:hover{
background: lighten($bold-blue, 38%);
}
&.selected{
background: lighten($bold-blue, 8%);
color: white;
}
}
}
.on-page-nav-controls{
height:45px;
position:relative;
@ -913,6 +940,14 @@
border-radius:3px;
border: 1px solid $outline-color;
box-shadow: $bold-shadow;
&.fixed-widget {
position: fixed;
width: 254px;
top: 80px;
header {
padding-left: 6px;
}
}
&:hover{
opacity:1;
}
@ -1126,14 +1161,16 @@
border: 0px;
display:block;
padding: 6px 8px;
width: 100%;
width: calc(100% - 16px);
text-align:left;
border-radius: 0px;
color: $black;
&:hover{
background: lighten($yellow, 15%);
background: lighten($bold-blue, 38%);
}
&.selected{
background: lighten($yellow, 2%);
background: lighten($bold-blue, 10%);
color: white;
}
&.query-type-filter-button{
&:hover{

10
app/assets/stylesheets/user-profile-header.scss
View file

@ -104,16 +104,6 @@
a{
color:rgb(97, 97, 97);
}
.notifications-header{
font-size:calc(26px + 0.2vw);
padding-bottom:13px;
font-weight:600;
img{
width: calc(27px + 0.2vw);
margin-right: 9px;
vertical-align:-3px;
}
}
.profile-pic-wrapper{
float:left;
width:calc(14.5vw + 60px);

2
app/controllers/comments_controller.rb
View file

@ -63,7 +63,7 @@ class CommentsController < ApplicationController
current_user.update(checked_code_of_conduct: true)
end
Mention.create_all(@comment)
Notification.send_new_comment_notifications(@comment)
Notification.send_new_comment_notifications_without_delay(@comment)
if @comment.invalid?
@comment.destroy
render json: { status: "comment already exists" }

14
app/controllers/notifications_controller.rb
View file

@ -8,9 +8,19 @@ class NotificationsController < ApplicationController
else
current_user
end
@notifications = NotificationDecorator.
if params[:filter].to_s.downcase == "posts"
@notifications = NotificationDecorator.
decorate_collection(Notification.where(user_id: current_user.id, notifiable_type: "Article", action: "Published").
order("notified_at DESC").limit(55).to_a)
elsif params[:filter].to_s.downcase == "comments"
@notifications = NotificationDecorator.
decorate_collection(Notification.where(user_id: current_user.id, notifiable_type: "Comment").
order("notified_at DESC").limit(55).to_a)
else
@notifications = NotificationDecorator.
decorate_collection(Notification.where(user_id: current_user.id).
order("notified_at DESC").limit(60).to_a)
order("notified_at DESC").limit(55).to_a)
end
@last_user_reaction = @user.reactions.last&.id
@last_user_comment = @user.comments.last&.id
end

6
app/models/notification.rb
View file

@ -106,7 +106,7 @@ class Notification < ApplicationRecord
}
}
if aggregated_reaction_siblings.size.zero?
Notification.where(notifiable_type: notifiable.reactable.class.name, notifiable_id: notifiable.reactable.id, action: "reaction").destroy_all
Notification.where(notifiable_type: notifiable.reactable.class.name, notifiable_id: notifiable.reactable.id, action: "Reaction").destroy_all
else
previous_siblings_size = 0
notification = Notification.find_or_create_by(notifiable_type: notifiable.reactable.class.name, notifiable_id: notifiable.reactable.id, action: "Reaction")
@ -221,7 +221,9 @@ class Notification < ApplicationRecord
name: user.name,
username: user.username,
path: user.path,
profile_image_90: user.profile_image_90
profile_image_90: user.profile_image_90,
comments_count: user.comments_count,
created_at: user.created_at
}
end

14
app/views/articles/_sidebar.html.erb
View file

@ -77,16 +77,16 @@
</div>
<% end %>
<% elsif @query %>
<div class="widget">
<div class="widget fixed-widget">
<header>
&lt;FILTERS&gt;
search results
</header>
<div class="widget-body" style="margin-bottom:16px;">
<button class="query-filter-button" data-filter="class_name:Article">POSTS</button>
<button class="query-filter-button" data-filter="class_name:PodcastEpisode">PODCASTS</button>
<button class="query-filter-button" data-filter="class_name:User">PEOPLE</button>
<hr/ style="opacity:0.2">
<button class="query-filter-button my-posts-query-button" data-filter="MY_POSTS">ONLY MY POSTS</button>
<a class="query-filter-button" data-filter="class_name:Article">POSTS</a>
<a class="query-filter-button" data-filter="class_name:PodcastEpisode">PODCASTS</a>
<a class="query-filter-button" data-filter="class_name:User">PEOPLE</a>
<hr style="opacity:0.2" />
<a class="query-filter-button my-posts-query-button" data-filter="MY_POSTS">ONLY MY POSTS</a>
</div>
</div>
<% elsif @tag %>

4
app/views/notifications/_aggregated_reactions.html.erb
View file

@ -1,5 +1,5 @@
<%# TODO: change to map of IDs %>
<% siblings = notification.json_data["reaction"]["aggregated_siblings"] %>
<% siblings = notification.json_data["reaction"]["aggregated_siblings"].select{|n| n["created_at"] > 24.hours.ago } %>
<% cache "activity-aggregated-reactions-#{siblings}_#{siblings}" do %>
<% actors = siblings.map { |n| n["user"] }.uniq %>
<% reactable_data = notification.json_data["reaction"]["reactable"] %>
@ -27,7 +27,7 @@
</a>
<span class="reaction-images">
with
<% reaction_categories = siblings.select{|n| n["created_at"] > 24.hours.ago }.map { |n| n["category"] } %>
<% reaction_categories = siblings.map { |n| n["category"] } %>
<% reaction_categories.each do |cat| %>
<% if ReactionImage.new(cat).path.present? %>
<%= image_tag ReactionImage.new(cat).path, class: "reaction-image", alt: "#{cat}" %>

76
app/views/notifications/_comment.html.erb
View file

@ -1,38 +1,42 @@
<% json_data = notification.json_data %>
<% cache "activity-profile-pic-#{json_data["user"]["id"]}-#{json_data["user"]["profile_image_90"]}" do %>
<a href="<%= json_data["comment"]["path"] %>" class="small-pic-link-wrapper">
<div class="small-pic">
<img src="<%= json_data["user"]["profile_image_90"] %>" alt="link to <%= json_data["user"]["username"] %>'s profile">
</div>
</a>
<% end %>
<div class="content notification-content comment-content">
<% if notification.action.blank? %>
<a href="<%= json_data["user"]["path"] %>"><%= json_data["user"]["name"] %></a>
commented on
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a>
<%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %>
<% elsif notification.action == "Moderation" %>
Hey there! <%= image_tag "emoji/apple-hugging-face.png", class: "reaction-image" %> As a trusted member, could you react to this comment
so we know it fits our community code of conduct?
<br/><br>
<b>Here's the article for context:
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a></b>
<%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "moderation" %>
<br>
<div class="footnote">All negative reactions are 100% private. If it is a good comment, consider also replying with some positive reinforcement or adding to the conversation.</div>
<% elsif notification.action == "First" %>
<a href="<%= json_data["user"]["path"] %>"><%= json_data["user"]["name"] %></a>
wrote their first comment on:
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
<% if notification.action == "Reaction" %>
<%= render "reaction", notification: notification %>
<% else %>
<% json_data = notification.json_data %>
<% cache "activity-profile-pic-#{json_data["user"]["id"]}-#{json_data["user"]["profile_image_90"]}" do %>
<a href="<%= json_data["comment"]["path"] %>" class="small-pic-link-wrapper">
<div class="small-pic">
<img src="<%= json_data["user"]["profile_image_90"] %>" alt="link to <%= json_data["user"]["username"] %>'s profile">
</div>
</a>
<%= render "notifications/activity/activities/shared/comment_box", activity: activity, context: "moderation" %>
Give them their first reply! 🎉
<br>
<% end %>
</div>
<div class="content notification-content comment-content">
<% if notification.action.blank? %>
<a href="<%= json_data["user"]["path"] %>"><%= json_data["user"]["name"] %></a>
commented on
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a>
<%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "default" %>
<% elsif notification.action == "Moderation" %>
Hey there! <%= image_tag "emoji/apple-hugging-face.png", class: "reaction-image" %> As a trusted member, could you react to this comment
so we know it fits our community code of conduct?
<br/><br>
<b>Here's the article for context:
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a></b>
<%= render "notifications/shared/comment_box", json_data: json_data, notification: notification, context: "moderation" %>
<br>
<div class="footnote">All negative reactions are 100% private. If it is a good comment, consider also replying with some positive reinforcement or adding to the conversation.</div>
<% elsif notification.action == "First" %>
<a href="<%= json_data["user"]["path"] %>"><%= json_data["user"]["name"] %></a>
wrote their first comment on:
<a href="<%= json_data["comment"]["commentable"]["path"] %>">
<%= sanitize(json_data["comment"]["commentable"]["title"]) %>
</a>
<%= render "notifications/activity/activities/shared/comment_box", activity: activity, context: "moderation" %>
Give them their first reply! 🎉
<br>
<% end %>
</div>
<% end %>

23
app/views/notifications/index.html.erb
View file

@ -20,17 +20,28 @@
<div class="user-profile-header tag-header" style="background: transparent;padding:0px;margin:22px auto 0px">
<div class="tag-or-query-header-container">
<% if user_signed_in? %>
<h1 class="notifications-header"><img src="<%=asset_path("bell.svg")%>" />Notifications</h1>
<% end %>
</div>
</div>
<div class="home" id="notifications-container" style="margin-top:0px;">
<div class="side-bar"></div>
<div class="side-bar">
<div class="widget fixed-widget">
<header>
notifications
</header>
<div class="widget-body">
<a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.downcase == "comments" %>" href="/notifications/comments">COMMENTS</a>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.downcase == "posts" %>" href="/notifications/posts">POSTS</a>
</div>
</div>
</div>
<div class="articles-list" id="articles-list">
<% if user_signed_in? %>
<div class="notifications-mobile-filters">
<a class="query-filter-button <%= "selected" if params[:filter].blank? %>" href="/notifications">ALL</a>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.downcase == "comments" %>" href="/notifications/comments">COMMENTS</a>
<a class="query-filter-button <%= "selected" if params[:filter].to_s.downcase == "posts" %>" href="/notifications/posts">POSTS</a>
</div>
<% notification_count = 0 %>
<% @notifications.each do |notification| %>
<% next if (notification.notified_at < 24.hours.ago && notification.aggregated?) %>

2
config/routes.rb
View file

@ -123,7 +123,7 @@ Rails.application.routes.draw do
resources :html_variant_successes, only: [:create]
resources :push_notification_subscriptions, only: [:create]
get "/notifications/:username" => "notifications#index"
get "/notifications/:filter" => "notifications#index"
patch "/onboarding_update" => "users#onboarding_update"
get "email_subscriptions/unsubscribe"
post "/chat_channels/:id/moderate" => "chat_channels#moderate"