consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4360 from consul/notifications_link

Browse Source 
Fix new notifications count
This commit is contained in:
Javi Martín
2021-02-18 16:53:49 +01:00
committed by GitHub
parent b6c269008f e266e0e0e2
commit d1cbc1ef61
13 changed files with 110 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/admin.scss
View File

@@ -99,7 +99,7 @@ $sidebar-active: #f4fcd0;
}
}
[class^="icon-"]:not(.icon-circle) {
[class^="icon-"] {
font-size: $base-font-size;
}
}
@@ -156,7 +156,7 @@ $sidebar-active: #f4fcd0;
}
}
.notifications .icon-circle {
.notifications.unread-notifications::after {
color: $admin-color;
}

1
app/assets/stylesheets/application.scss
View File

@@ -15,6 +15,7 @@
@import "legislation";
@import "legislation_process";
@import "legislation_process_form";
@import "notification_item";
@import "community";
@import "stats";
@import "custom";

26
app/assets/stylesheets/layout.scss
View File

@@ -1345,32 +1345,6 @@ form {
}
}
.notifications {
position: relative;
&:hover {
text-decoration: none;
}
[class^="icon-"] {
font-size: rem-calc(19);
vertical-align: middle;
}
.icon-circle {
color: #ecf00b;
font-size: rem-calc(10);
position: absolute;
left: 12px;
top: 6px;
@include breakpoint(medium) {
left: auto;
right: 8px;
}
}
}
.notifications-list {
position: relative;

8
app/assets/stylesheets/mixins.scss
View File

@@ -163,11 +163,11 @@
margin-right: rem-calc(10);
}
@mixin has-fa-icon($icon, $style) {
@extend .fa-#{$icon};
@mixin has-fa-icon($icon, $style, $position: "before") {
&::before {
&::#{$position} {
@extend %font-icon;
@extend .fa-#{$icon}:before;
@if $style == "solid" {
font-weight: bold;
@@ -182,7 +182,7 @@
@supports (mask-image: url()) {
&::before {
&::#{$position} {
@extend %svg-icon;
mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
}

44
app/assets/stylesheets/notification_item.scss Normal file
View File

@@ -0,0 +1,44 @@
.notifications {
$notification-icon-size: rem-calc(19);
position: relative;
&.unread-notifications {
@include has-fa-icon(bell, solid);
@include has-fa-icon(circle, solid, after);
&::before {
@include breakpoint(medium) {
margin-right: 0;
}
}
&::after {
$menu-link-top-padding: rem-calc(11);
$circle-icon-size: rem-calc(10);
color: #ecf00b;
font-size: $circle-icon-size;
margin-right: 0;
position: absolute;
left: $notification-icon-size - rem-calc(5);
top: $menu-link-top-padding - $circle-icon-size / 2;
@include breakpoint(medium) {
$menu-link-left-padding: rem-calc(16);
left: $notification-icon-size + $menu-link-left-padding;
}
}
}
&.no-notifications {
@include has-fa-icon(bell, regular);
}
&::before {
font-size: $notification-icon-size;
}
&:hover {
text-decoration: none;
}
}

11
app/components/layout/notification_item_component.html.erb Normal file
View File

@@ -0,0 +1,11 @@
<% if user %>
<li id="notifications">
<%= link_to notifications_path, rel: "nofollow", title: text,
class: "notifications #{notifications_class}" do %>
<span class="show-for-sr">
<%= t("layouts.header.notification_item.notifications") %>
</span>
<span class="show-for-small-only"><%= text %></span>
<% end %>
</li>
<% end %>

25
app/components/layout/notification_item_component.rb Normal file
View File

@@ -0,0 +1,25 @@
class Layout::NotificationItemComponent < ApplicationComponent
attr_reader :user
def initialize(user)
@user = user
end
private
def text
t("layouts.header.notification_item.new_notifications", count: unread_notifications.count)
end
def notifications_class
if unread_notifications.count > 0
"unread-notifications"
else
"no-notifications"
end
end
def unread_notifications
user.notifications.unread
end
end

31
app/views/layouts/_notification_item.html.erb
View File

@@ -1,30 +1 @@
<% if user_signed_in? %>
<li id="notifications">
<%= link_to notifications_path, rel: "nofollow",
class: "notifications" do %>
<span class="show-for-sr">
<%= t("layouts.header.notification_item.notifications") %>
</span>
<% if current_user.notifications.unread.count > 0 %>
<span class="icon-circle" aria-hidden="true"></span>
<span class="icon-notification" aria-hidden="true"
title="<%= t("layouts.header.notification_item.new_notifications",
count: current_user.notifications_count) %>">
</span>
<span class="show-for-small-only">
<%= t("layouts.header.notification_item.new_notifications",
count: current_user.notifications_count) %>
</span>
<% else %>
<span class="icon-no-notification" aria-hidden="true"
title="<%= t("layouts.header.notification_item.no_notifications") %>">
</span>
<span class="show-for-small-only">
<%= t("layouts.header.notification_item.no_notifications") %>
</span>
<% end %>
<% end %>
</li>
<% end %>
<%= render Layout::NotificationItemComponent.new(current_user) %>

2
config/locales/en/general.yml
View File

@@ -249,8 +249,8 @@ en:
new_notifications:
one: You have a new notification
other: You have %{count} new notifications
zero: "You don't have new notifications"
notifications: Notifications
no_notifications: "You don't have new notifications"
sdg: "SDG"
notifications:
index:

2
config/locales/es/general.yml
View File

@@ -249,8 +249,8 @@ es:
new_notifications:
one: Tienes una nueva notificación
other: Tienes %{count} notificaciones nuevas
zero: "No tienes notificaciones nuevas"
notifications: Notificaciones
no_notifications: "No tienes notificaciones nuevas"
sdg: "ODS"
notifications:
index:

15
spec/shared/system/notifiable_in_app.rb
View File

@@ -2,13 +2,15 @@ shared_examples "notifiable in-app" do |factory_name|
let(:author) { create(:user, :verified) }
let!(:notifiable) { create(factory_name, author: author) }
scenario "Notification icon is shown" do
before { create(:notification, :read, notifiable: notifiable, user: author) }
scenario "Notification message is shown" do
create(:notification, notifiable: notifiable, user: author)
login_as author
visit root_path
expect(page).to have_css ".icon-notification"
expect(page).to have_link "You have a new notification"
end
scenario "A user commented on my notifiable", :js do
@@ -16,7 +18,8 @@ shared_examples "notifiable in-app" do |factory_name|
login_as author
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
expect(page).to have_content "Someone commented on"
@@ -108,7 +111,8 @@ shared_examples "notifiable in-app" do |factory_name|
end
within("#notifications") do
find(".icon-no-notification").click
click_link "You don't have new notifications"
expect(page).to have_css ".notification", count: 0
end
end
@@ -130,7 +134,8 @@ shared_examples "notifiable in-app" do |factory_name|
end
within("#notifications") do
find(".icon-no-notification").click
click_link "You don't have new notifications"
expect(page).to have_css ".notification", count: 0
end
end

4
spec/system/notifications_spec.rb
View File

@@ -103,14 +103,14 @@ describe "Notifications" do
visit root_path
within("#notifications") do
expect(page).to have_css(".icon-circle")
expect(page).to have_css(".unread-notifications")
end
click_notifications_icon
first(".notification a").click
within("#notifications") do
expect(page).not_to have_css(".icon-circle")
expect(page).not_to have_css(".unread-notifications")
end
end

17
spec/system/proposal_notifications_spec.rb
View File

@@ -198,7 +198,7 @@ describe "Proposal Notifications" do
login_as user1
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
@@ -210,7 +210,7 @@ describe "Proposal Notifications" do
login_as user2
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
@@ -222,7 +222,7 @@ describe "Proposal Notifications" do
login_as user3
visit root_path
find(".icon-no-notification").click
click_link "You don't have new notifications"
expect(page).to have_css ".notification", count: 0
end
@@ -251,7 +251,7 @@ describe "Proposal Notifications" do
login_as user1.reload
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
@@ -263,7 +263,7 @@ describe "Proposal Notifications" do
login_as user2.reload
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
@@ -275,7 +275,7 @@ describe "Proposal Notifications" do
login_as user3.reload
visit root_path
find(".icon-no-notification").click
click_link "You don't have new notifications"
expect(page).to have_css ".notification", count: 0
end
@@ -303,7 +303,7 @@ describe "Proposal Notifications" do
login_as user
visit root_path
find(".icon-notification").click
click_link "You have a new notification"
expect(page).to have_css ".notification", count: 1
expect(page).to have_content "This resource is not available anymore"
@@ -346,8 +346,7 @@ describe "Proposal Notifications" do
login_as user.reload
visit root_path
within("#notifications") { expect(page).to have_content :all, "You have 3 new notifications" }
find(".icon-notification").click
click_link "You have 3 new notifications"
expect(page).to have_css ".notification", count: 3
expect(page).to have_content "There is one new notification on #{proposal.title}", count: 3