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

Extract component to render notifications item

Browse Source
This commit is contained in:
Javi Martín
2021-02-15 23:36:58 +01:00
parent b6c269008f
commit f11f2cd3dd
6 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@
@import "legislation"; @import "legislation";
@import "legislation_process"; @import "legislation_process";
@import "legislation_process_form"; @import "legislation_process_form";
@import "notification_item";
@import "community"; @import "community";
@import "stats"; @import "stats";
@import "custom"; @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 { .notifications-list {
position: relative; position: relative;

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

@@ -0,0 +1,25 @@
.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;
}
}
}

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

@@ -0,0 +1,30 @@
<% if user %>
<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 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: user.notifications_count) %>">
</span>
<span class="show-for-small-only">
<%= t("layouts.header.notification_item.new_notifications",
count: 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 %>

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

@@ -0,0 +1,7 @@
class Layout::NotificationItemComponent < ApplicationComponent
attr_reader :user
def initialize(user)
@user = user
end
end

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

@@ -1,30 +1 @@
<% if user_signed_in? %> <%= render Layout::NotificationItemComponent.new(current_user) %>
<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 %>