mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-25 01:03:18 +08:00
Global notifications index page added [SCI-442]
This commit is contained in:
Oleksii Kriuchykhin
parent
8b5b0723d1
commit
8907e54b49
8 changed files with 171 additions and 87 deletions
17
app/assets/javascripts/notifications.js
Normal file
17
app/assets/javascripts/notifications.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
$(document.body).ready(function () {
|
||||
$('.btn-more-notifications')
|
||||
.on("ajax:success", function (e, data) {
|
||||
if (data.html) {
|
||||
var list = $('.notifications-list');
|
||||
var moreBtn = $('.btn-more-notifications');
|
||||
// Remove button if all notifications are shown
|
||||
if (data.results_number < data.per_page) {
|
||||
moreBtn.remove();
|
||||
// Otherwise update reference
|
||||
} else {
|
||||
moreBtn.attr('href', data.more_notifications_url);
|
||||
}
|
||||
$(list).append(data.html);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,58 +1,82 @@
|
|||
@import "colors";
|
||||
@import "mixins";
|
||||
|
||||
.notifications-list {
|
||||
list-style: none;
|
||||
min-width: 450px;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
.notifications-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-bottom: 1px solid $color-alto;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
.notifications-header {
|
||||
background-color: $color-concrete;
|
||||
border-top: 1px solid $color-alto;
|
||||
border-left: 1px solid $color-alto;
|
||||
border-right: 1px solid $color-alto;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
color: $color-dove-gray;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-concrete;
|
||||
.notifications-body {
|
||||
|
||||
.notifications-list {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-alto;
|
||||
list-style: none;
|
||||
margin-bottom: 0px;
|
||||
padding: 0;
|
||||
|
||||
.notification {
|
||||
border-bottom: 1px solid $color-alto;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: #ECF5FC;
|
||||
}
|
||||
}
|
||||
|
||||
.unseen {
|
||||
border-left: 4px solid $color-theme-primary;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
margin-left: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.assignment {
|
||||
background-color: $color-theme-primary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 15px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.system_message {
|
||||
background-color: $color-theme-secondary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 13px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unseen {
|
||||
border-left: 4px solid $color-theme-primary;
|
||||
}
|
||||
.notifications-footer {
|
||||
|
||||
.text-center {
|
||||
margin-left: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
background-color: $color-mystic;
|
||||
|
||||
.assignment {
|
||||
background-color: $color-theme-primary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 15px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.system_message {
|
||||
background-color: $color-theme-secondary;
|
||||
border-radius: 50%;
|
||||
color: $color-wild-sand;
|
||||
font-size: 13px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.notifications-header {
|
||||
background-color: $color-theme-primary;
|
||||
color: $color-wild-sand;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.notifications-footer {
|
||||
background-color: $color-mystic;
|
||||
.btn-more-notifications {
|
||||
border-bottom: 1px solid $color-alto;
|
||||
border-left: 1px solid $color-alto;
|
||||
border-right: 1px solid $color-alto;
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-mystic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,44 @@
|
|||
class UserNotificationsController < ApplicationController
|
||||
layout "fluid"
|
||||
layout 'main'
|
||||
|
||||
def index
|
||||
@notifications = UserNotification.list_all(@current_user)
|
||||
@notifications_by_type = { :assignment => 3, :recent_changes => 4, :system_message => 5 }
|
||||
@last_notification_id = params[:from].to_i || 0
|
||||
@per_page = 5
|
||||
|
||||
@notifications =
|
||||
UserNotification.last_notifications(@current_user,
|
||||
@last_notification_id,
|
||||
@per_page + 1)
|
||||
|
||||
@more_notifications_url = ""
|
||||
|
||||
@overflown = @notifications.length > @per_page
|
||||
|
||||
@notifications = UserNotification
|
||||
.last_notifications(@current_user, @last_notification_id, @per_page)
|
||||
|
||||
if @notifications.count > 0
|
||||
@more_notifications_url = url_for(
|
||||
controller: 'user_notifications',
|
||||
action: 'index',
|
||||
format: :json,
|
||||
from: @notifications.last.id)
|
||||
end
|
||||
|
||||
respond_to do |format|
|
||||
format.html
|
||||
format.json {
|
||||
render :json => {
|
||||
:per_page => @per_page,
|
||||
:results_number => @notifications.length,
|
||||
:more_notifications_url => @more_notifications_url,
|
||||
:html => render_to_string({
|
||||
:partial => 'list.html.erb'
|
||||
})
|
||||
}
|
||||
}
|
||||
end
|
||||
mark_seen_notification @notifications
|
||||
end
|
||||
|
||||
def recent_notifications
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@ class UserNotification < ActiveRecord::Base
|
|||
belongs_to :user
|
||||
belongs_to :notification
|
||||
|
||||
def self.list_all(user)
|
||||
def self.last_notifications(user, last_notification_id = nil, per_page = 10)
|
||||
last_notification_id = 999999999999999999999999 if last_notification_id < 1
|
||||
Notification.joins(:user_notifications)
|
||||
.where('user_notifications.user_id = ?', user.id)
|
||||
.where('notifications.id < ?', last_notification_id)
|
||||
.order(created_at: :DESC)
|
||||
.limit(per_page)
|
||||
end
|
||||
|
||||
def self.recent_notifications(user)
|
||||
|
|
|
|||
27
app/views/user_notifications/_list.html.erb
Normal file
27
app/views/user_notifications/_list.html.erb
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<% @notifications.each do |notification| %>
|
||||
<li class="notification <%= 'unseen' unless notification.already_seen(current_user) %>">
|
||||
<div class="row">
|
||||
<div class="col-xs-3 col-md-1">
|
||||
<% if notification.type_of == 'recent_changes' %>
|
||||
<div class="text-center">
|
||||
<%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar' %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if notification.type_of == 'assignment' %>
|
||||
<div class="text-center">
|
||||
<span class="assignment"><%= fa_icon 'newspaper-o' %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if notification.type_of == 'system_message' %>
|
||||
<div class="text-center">
|
||||
<span class="system_message"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="col-xs-9 col-md-11">
|
||||
<strong><%= notification.title %></strong> <br>
|
||||
<%= l(notification.created_at, format: :full) %> | <%= notification.message %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
@ -1,40 +1,19 @@
|
|||
|
||||
|
||||
<div class="row">
|
||||
<div class="container-fluid">
|
||||
<div class="notifications-container">
|
||||
<div class="notifications-header">
|
||||
<span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span>
|
||||
</div>
|
||||
<div class="notifications-body">
|
||||
<ul class="notifications-list">
|
||||
<li class="notifications-header"><span><%= t('notifications.title') %></span><span class="pull-right"><%= t('nav.user.settings') %></span></li>
|
||||
<% @notifications.each do |notification| %>
|
||||
<li class="notification <%= 'unseen' unless notification.already_seen(current_user) %>">
|
||||
<div class="row">
|
||||
<div class="col-xs-2">
|
||||
<% if notification.type_of == 'recent_changes' %>
|
||||
<div class="text-center">
|
||||
<%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar' %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if notification.type_of == 'assignment' %>
|
||||
<div class="text-center">
|
||||
<span class="assignment"><%= fa_icon 'newspaper-o' %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if notification.type_of == 'system_message' %>
|
||||
<div class="text-center">
|
||||
<span class="system_message"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="col-xs-10">
|
||||
<strong><%= notification.title %></strong> <br>
|
||||
<%= l(notification.created_at, format: :full) %> | <%= notification.message %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<%= render 'list', notifications: @notifications %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="notifications-footer">
|
||||
<% if @overflown %>
|
||||
<a class="btn-more-notifications col-xs-12" href="<%= @more_notifications_url %>" data-remote="true">
|
||||
<span><%= t('notifications.show_more') %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById("wrapper").style.display = "block";
|
||||
</script>
|
||||
<%= javascript_include_tag("notifications") %>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@ Rails.application.config.assets.precompile += %w(assets.js)
|
|||
Rails.application.config.assets.precompile += %w(comments.js)
|
||||
Rails.application.config.assets.precompile += %w(projects/show.js)
|
||||
Rails.application.config.assets.precompile += %w(projects/introdutory_popup.js)
|
||||
Rails.application.config.assets.precompile += %w(step_result_comments.js)
|
||||
Rails.application.config.assets.precompile += %w(notifications.js)
|
||||
|
||||
# Libraries needed for Handsontable formulas
|
||||
Rails.application.config.assets.precompile += %w(lodash.js)
|
||||
|
|
|
|||
|
|
@ -1515,11 +1515,8 @@ en:
|
|||
assignments: "Assignments notifications"
|
||||
recent_notification: "Change notifications"
|
||||
filter: "Filter"
|
||||
types:
|
||||
assignment: "Assignment"
|
||||
recent_changes: "Recent changes"
|
||||
system_message: "System changes"
|
||||
show_all: "Show all notifications"
|
||||
show_more: "Show more notifications"
|
||||
# This section contains general words that can be used in any parts of
|
||||
# application.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue