docbrown/app/views/notifications/index.html.erb

176 lines
8.1 KiB
Text

<% title "Notifications" %>
<%= content_for :page_meta do %>
<link rel="canonical" href="<%= app_url("/notifications") %>" />
<meta name="description" content="Notifications inbox for <%= community_name %>">
<meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">
<meta property="og:type" content="article" />
<meta property="og:url" content="<%= app_url("/notifications") %>" />
<meta property="og:title" content="Notifications - <%= community_name %>" />
<meta property="og:description" content="Notifications inbox for <%= community_name %>" />
<meta property="og:site_name" content="<%= community_qualified_name %>" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
<meta name="twitter:title" content="Notifications - <%= community_name %>">
<meta name="twitter:description" content="Notifications inbox for <%= community_name %>">
<% end %>
<script>
/**
* A script that tracks clicks for welcome notifications.
* The notification must have `trackNotification` as its onclick event
* in order for this to be triggered.
*
* @param {Event} The click event on the notification.
*/
function trackNotification(event) {
const target = event.target;
const { parentElement: { id: title }, text } = target;
// TODO: [@thepracticaldev/delightful]: This event doesn't appear to be firing on Honeybadger.
// We probably want to remove it eventually if we continually don't see it being triggered.
if (!title) {
Honeybadger.notify(`Could not find parentElement.id when clicking on event target text: ${text}`);
}
ahoy.track("Clicked Welcome Notification", { title, text, target: target.toString() });
}
</script>
<% if user_signed_in? %>
<div class="home" id="notifications-container">
<div class="side-bar">
<div class="crayons-card">
<header class="crayons-card__header">
<h3 class="crayons-card__title">Filter</h3>
</header>
<div class="crayons-card__body widget-body">
<section class="crayons-card__inner-section">
<% if @organizations.present? %>
<header class="crayons-card__subheader">
<h4 class="crayons-card__subheader__title">
<%= @user.name %>
</h4>
</header>
<% end %>
<ul class="notifications-filter__list">
<li>
<a class="notifications-filter__list--item <%= "selected" if params[:filter].blank? %>" href="/notifications">
All
<div class="notifications-filter__icon">
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
</div>
</a>
</li>
<li>
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
Comments
<div class="notifications-filter__icon">
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
</div>
</a>
</li>
<li>
</li>
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
Posts
<div class="notifications-filter__icon">
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
</div>
</a>
</li>
</ul>
</section>
<section class="crayons-card__inner-section">
<% if @organizations.present? %>
<% @organizations.each do |org| %>
<header class="crayons-card__subheader">
<h4 class="crayons-card__subheader__title">
<%= org.name %>
</h4>
</header>
<ul class="notifications-filter__list">
<li>
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
All
<div class="notifications-filter__icon">
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
</div>
</a>
</li>
<li>
<a class="notifications-filter__list--item <%= "selected" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
Comments
<div class="notifications-filter__icon">
<%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
</div>
</a>
</li>
</ul>
<% end %>
<% end %>
</section>
</div>
</div>
</div>
<div class="articles-list" id="articles-list">
<section class="notifications-filter__dropdown s:flex-col">
<% if @organizations.present? %>
<div class="p-2 s:inline-flex">
<select id="notifications-filter__select" class="crayons-select">
<option value="/notifications"><%= @user.name %></option>
<% @organizations.each do |org| %>
<option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
<% end %>
</select>
</div>
<% end %>
<div class="s:inline-flex">
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
All
</a>
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
Comments
</a>
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
Posts
</a>
</nav>
<% if @organizations.present? %>
<% @organizations.each do |org| %>
<nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
All
</a>
<a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
Comments
</a>
</nav>
<% end %>
<% end %>
</div>
</section>
<%= render "notifications_list", params: params %>
</div>
<%# new or less active users that don't have a page worth of notifications
won't be shown the "load more" button %>
<% if @notifications.size >= @initial_page_size %>
<div class="load-more-wrapper">
<button id="load-more-button" type="button" class="crayons-btn crayons-btn--secondary">
Load More
</button>
</div>
<% end %>
<div class="side-bar sidebar-additional"></div>
</div>
<%= render "articles/fitvids" %>
<% else %>
<%= render "devise/registrations/registration_form" %>
<% end %>