Integrated Perfect Scrollbar into notifications dropdown
This commit is contained in:
jaideng123
parent
c6771e7575
commit
b70f306ff5
6 changed files with 63 additions and 36 deletions
6
Gemfile
6
Gemfile
|
|
@ -1,4 +1,5 @@
|
|||
source 'https://rubygems.org'
|
||||
source 'https://rails-assets.org'
|
||||
|
||||
gem 'rails', '4.1.5'
|
||||
|
||||
|
|
@ -79,6 +80,11 @@ gem 'backbone-on-rails', '1.1.1'
|
|||
gem 'handlebars_assets', '0.12.0'
|
||||
gem 'jquery-rails', '3.0.4'
|
||||
|
||||
# jQuery plugins
|
||||
|
||||
gem 'rails-assets-perfect-scrollbar', '0.4.11'
|
||||
gem 'rails-assets-jquery', '1.10.2'
|
||||
|
||||
# Localization
|
||||
|
||||
gem 'http_accept_language', '1.0.2'
|
||||
|
|
|
|||
74
Gemfile.lock
74
Gemfile.lock
|
|
@ -1,5 +1,6 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
remote: https://rails-assets.org/
|
||||
specs:
|
||||
actionmailer (4.1.5)
|
||||
actionpack (= 4.1.5)
|
||||
|
|
@ -81,10 +82,10 @@ GEM
|
|||
coffee-rails (4.0.1)
|
||||
coffee-script (>= 2.2.0)
|
||||
railties (>= 4.0.0, < 5.0)
|
||||
coffee-script (2.2.0)
|
||||
coffee-script (2.3.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.6.3)
|
||||
coffee-script-source (1.7.1)
|
||||
compass (0.12.7)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
|
|
@ -92,7 +93,7 @@ GEM
|
|||
compass-rails (2.0.0)
|
||||
compass (>= 0.12.2)
|
||||
configurate (0.0.8)
|
||||
connection_pool (1.2.0)
|
||||
connection_pool (2.0.0)
|
||||
crack (0.4.2)
|
||||
safe_yaml (~> 1.0.0)
|
||||
cucumber (1.3.16)
|
||||
|
|
@ -133,9 +134,8 @@ GEM
|
|||
erubis (2.7.0)
|
||||
ethon (0.7.1)
|
||||
ffi (>= 1.3.0)
|
||||
excon (0.39.0)
|
||||
execjs (1.4.0)
|
||||
multi_json (~> 1.0)
|
||||
excon (0.39.5)
|
||||
execjs (2.2.1)
|
||||
factory_girl (4.4.0)
|
||||
activesupport (>= 3.0.0)
|
||||
factory_girl_rails (4.4.1)
|
||||
|
|
@ -155,7 +155,7 @@ GEM
|
|||
fog-json
|
||||
ipaddress (~> 0.5)
|
||||
nokogiri (~> 1.5, >= 1.5.11)
|
||||
fog-brightbox (0.1.1)
|
||||
fog-brightbox (0.3.0)
|
||||
fog-core (~> 1.22)
|
||||
fog-json
|
||||
inflecto
|
||||
|
|
@ -168,7 +168,7 @@ GEM
|
|||
net-ssh (>= 2.1.3)
|
||||
fog-json (1.0.0)
|
||||
multi_json (~> 1.0)
|
||||
font-awesome-rails (4.0.3.1)
|
||||
font-awesome-rails (4.1.0.0)
|
||||
railties (>= 3.2, < 5.0)
|
||||
foreigner (1.6.1)
|
||||
activerecord (>= 3.0.0)
|
||||
|
|
@ -184,9 +184,9 @@ GEM
|
|||
gon (5.0.4)
|
||||
actionpack (>= 2.3.0)
|
||||
json
|
||||
guard (2.2.5)
|
||||
guard (2.6.1)
|
||||
formatador (>= 0.2.4)
|
||||
listen (~> 2.1)
|
||||
listen (~> 2.7)
|
||||
lumberjack (~> 1.0)
|
||||
pry (>= 0.9.12)
|
||||
thor (>= 0.18.1)
|
||||
|
|
@ -209,7 +209,6 @@ GEM
|
|||
hashie (2.1.2)
|
||||
hike (1.2.3)
|
||||
http_accept_language (1.0.2)
|
||||
httpauth (0.2.0)
|
||||
i18n (0.6.11)
|
||||
i18n-inflector (2.6.7)
|
||||
i18n (>= 0.4.1)
|
||||
|
|
@ -224,25 +223,24 @@ GEM
|
|||
phantomjs
|
||||
rack (>= 1.2.1)
|
||||
rake
|
||||
jasmine-core (2.0.0)
|
||||
jasmine-core (2.0.2)
|
||||
jasmine-jquery-rails (2.0.3)
|
||||
jquery-rails (3.0.4)
|
||||
railties (>= 3.0, < 5.0)
|
||||
thor (>= 0.14, < 2.0)
|
||||
jquery-ui-rails (4.2.0)
|
||||
jquery-ui-rails (4.2.1)
|
||||
railties (>= 3.2.16)
|
||||
json (1.8.1)
|
||||
jwt (0.1.10)
|
||||
multi_json (>= 1.5)
|
||||
kaminari (0.15.1)
|
||||
jwt (1.0.0)
|
||||
kaminari (0.16.1)
|
||||
actionpack (>= 3.0.0)
|
||||
activesupport (>= 3.0.0)
|
||||
kgio (2.9.2)
|
||||
listen (2.4.0)
|
||||
listen (2.7.9)
|
||||
celluloid (>= 0.15.2)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
lumberjack (1.0.4)
|
||||
lumberjack (1.0.9)
|
||||
macaddr (1.7.1)
|
||||
systemu (~> 2.6.2)
|
||||
mail (2.5.4)
|
||||
|
|
@ -262,6 +260,7 @@ GEM
|
|||
rails
|
||||
multi_json (1.10.1)
|
||||
multi_test (0.1.1)
|
||||
multi_xml (0.5.5)
|
||||
multipart-post (1.2.0)
|
||||
mysql2 (0.3.16)
|
||||
nested_form (0.3.2)
|
||||
|
|
@ -271,11 +270,11 @@ GEM
|
|||
nokogiri (1.6.1)
|
||||
mini_portile (~> 0.5.0)
|
||||
oauth (0.4.7)
|
||||
oauth2 (0.8.1)
|
||||
faraday (~> 0.8)
|
||||
httpauth (~> 0.1)
|
||||
jwt (~> 0.1.4)
|
||||
multi_json (~> 1.0)
|
||||
oauth2 (0.9.4)
|
||||
faraday (>= 0.8, < 0.10)
|
||||
jwt (~> 1.0)
|
||||
multi_json (~> 1.3)
|
||||
multi_xml (~> 0.5)
|
||||
rack (~> 1.2)
|
||||
omniauth (1.2.1)
|
||||
hashie (>= 1.2, < 3)
|
||||
|
|
@ -285,9 +284,11 @@ GEM
|
|||
omniauth-oauth (1.0.1)
|
||||
oauth
|
||||
omniauth (~> 1.0)
|
||||
omniauth-oauth2 (1.1.1)
|
||||
oauth2 (~> 0.8.0)
|
||||
omniauth (~> 1.0)
|
||||
omniauth-oauth2 (1.1.2)
|
||||
faraday (>= 0.8, < 0.10)
|
||||
multi_json (~> 1.3)
|
||||
oauth2 (~> 0.9.3)
|
||||
omniauth (~> 1.2)
|
||||
omniauth-tumblr (1.1)
|
||||
omniauth-oauth (~> 1.0)
|
||||
omniauth-twitter (1.0.1)
|
||||
|
|
@ -301,9 +302,9 @@ GEM
|
|||
orm_adapter (0.5.0)
|
||||
phantomjs (1.9.7.1)
|
||||
polyglot (0.3.5)
|
||||
pry (0.9.12.4)
|
||||
coderay (~> 1.0)
|
||||
method_source (~> 0.8)
|
||||
pry (0.10.1)
|
||||
coderay (~> 1.1.0)
|
||||
method_source (~> 0.8.1)
|
||||
slop (~> 3.4)
|
||||
rack (1.5.2)
|
||||
rack-cors (0.2.9)
|
||||
|
|
@ -313,9 +314,9 @@ GEM
|
|||
rack-mobile-detect (0.4.0)
|
||||
rack
|
||||
rack-piwik (0.2.2)
|
||||
rack-pjax (0.7.0)
|
||||
rack-pjax (0.8.0)
|
||||
nokogiri (~> 1.5)
|
||||
rack (~> 1.3)
|
||||
rack (~> 1.1)
|
||||
rack-protection (1.2.0)
|
||||
rack
|
||||
rack-rewrite (1.5.0)
|
||||
|
|
@ -333,6 +334,9 @@ GEM
|
|||
bundler (>= 1.3.0, < 2.0)
|
||||
railties (= 4.1.5)
|
||||
sprockets-rails (~> 2.0)
|
||||
rails-assets-jquery (1.10.2)
|
||||
rails-assets-perfect-scrollbar (0.4.11)
|
||||
rails-assets-jquery (>= 1.10)
|
||||
rails-i18n (4.0.2)
|
||||
i18n (~> 0.6)
|
||||
rails (>= 4.0)
|
||||
|
|
@ -394,7 +398,7 @@ GEM
|
|||
rspec-mocks (~> 2.14.0)
|
||||
ruby-oembed (0.8.9)
|
||||
ruby-progressbar (1.5.1)
|
||||
rubyzip (1.1.4)
|
||||
rubyzip (1.1.6)
|
||||
safe_yaml (1.0.3)
|
||||
sass (3.2.19)
|
||||
sass-rails (4.0.3)
|
||||
|
|
@ -422,7 +426,7 @@ GEM
|
|||
tilt (~> 1.3, >= 1.3.3)
|
||||
sinon-rails (1.9.0)
|
||||
railties (>= 3.1)
|
||||
slop (3.4.7)
|
||||
slop (3.6.0)
|
||||
spork (1.0.0rc4)
|
||||
sprockets (2.11.0)
|
||||
hike (~> 1.2)
|
||||
|
|
@ -470,7 +474,7 @@ GEM
|
|||
will_paginate (3.0.5)
|
||||
xpath (2.0.0)
|
||||
nokogiri (~> 1.3)
|
||||
zip-zip (0.2)
|
||||
zip-zip (0.3)
|
||||
rubyzip (>= 1.0.0)
|
||||
|
||||
PLATFORMS
|
||||
|
|
@ -534,6 +538,8 @@ DEPENDENCIES
|
|||
rack-rewrite (= 1.5.0)
|
||||
rack-ssl (= 1.4.1)
|
||||
rails (= 4.1.5)
|
||||
rails-assets-jquery (= 1.10.2)
|
||||
rails-assets-perfect-scrollbar (= 0.4.11)
|
||||
rails-i18n (= 4.0.2)
|
||||
rails-timeago (= 2.4.0)
|
||||
rails_admin (= 0.6.2)
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
//= require_tree ./collections
|
||||
//= require_tree ./views
|
||||
|
||||
//= require perfect-scrollbar
|
||||
|
||||
var app = {
|
||||
collections: {},
|
||||
models: {},
|
||||
|
|
|
|||
|
|
@ -49,10 +49,11 @@
|
|||
this.hideDropdown = function() {
|
||||
self.badge.removeClass("active");
|
||||
self.dropdown.css("display", "none");
|
||||
$('.notifications').perfectScrollbar('destroy');
|
||||
};
|
||||
|
||||
this.getNotifications = function() {
|
||||
$.getJSON("/notifications?per_page=5", function(notifications) {
|
||||
$.getJSON("/notifications?per_page=15", function(notifications) {
|
||||
self.notifications = notifications;
|
||||
self.renderNotifications();
|
||||
});
|
||||
|
|
@ -74,6 +75,8 @@
|
|||
self.dropdownNotifications.find('.read').each(function(index) {
|
||||
Diaspora.page.header.notifications.setUpRead( $(this) );
|
||||
});
|
||||
$('.notifications').perfectScrollbar();
|
||||
$(".notifications").scrollTop(0);
|
||||
self.ajaxLoader.hide();
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
@import 'tag'
|
||||
@import 'photo'
|
||||
|
||||
@import 'perfect-scrollbar'
|
||||
/* ====== media ====== */
|
||||
.media
|
||||
:margin 10px
|
||||
|
|
|
|||
|
|
@ -151,6 +151,11 @@ body > header {
|
|||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
.notifications{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 325px;
|
||||
}
|
||||
|
||||
.notification_element {
|
||||
border-bottom: 1px solid $border-grey;
|
||||
|
|
@ -169,13 +174,17 @@ body > header {
|
|||
}
|
||||
|
||||
.unread-toggle {
|
||||
padding: 9px 5px;
|
||||
padding: 9px 9px;
|
||||
position: relative;
|
||||
.entypo {
|
||||
cursor: pointer;
|
||||
color: lighten($black,75%);
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
}
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
&.unread {
|
||||
|
|
|
|||
Loading…
Reference in a new issue