Integrated Perfect Scrollbar into notifications dropdown

This commit is contained in:
jaideng123 2014-08-25 12:39:30 -05:00
parent c6771e7575
commit b70f306ff5
6 changed files with 63 additions and 36 deletions

View file

@ -1,4 +1,5 @@
source 'https://rubygems.org' source 'https://rubygems.org'
source 'https://rails-assets.org'
gem 'rails', '4.1.5' gem 'rails', '4.1.5'
@ -79,6 +80,11 @@ gem 'backbone-on-rails', '1.1.1'
gem 'handlebars_assets', '0.12.0' gem 'handlebars_assets', '0.12.0'
gem 'jquery-rails', '3.0.4' gem 'jquery-rails', '3.0.4'
# jQuery plugins
gem 'rails-assets-perfect-scrollbar', '0.4.11'
gem 'rails-assets-jquery', '1.10.2'
# Localization # Localization
gem 'http_accept_language', '1.0.2' gem 'http_accept_language', '1.0.2'

View file

@ -1,5 +1,6 @@
GEM GEM
remote: https://rubygems.org/ remote: https://rubygems.org/
remote: https://rails-assets.org/
specs: specs:
actionmailer (4.1.5) actionmailer (4.1.5)
actionpack (= 4.1.5) actionpack (= 4.1.5)
@ -81,10 +82,10 @@ GEM
coffee-rails (4.0.1) coffee-rails (4.0.1)
coffee-script (>= 2.2.0) coffee-script (>= 2.2.0)
railties (>= 4.0.0, < 5.0) railties (>= 4.0.0, < 5.0)
coffee-script (2.2.0) coffee-script (2.3.0)
coffee-script-source coffee-script-source
execjs execjs
coffee-script-source (1.6.3) coffee-script-source (1.7.1)
compass (0.12.7) compass (0.12.7)
chunky_png (~> 1.2) chunky_png (~> 1.2)
fssm (>= 0.2.7) fssm (>= 0.2.7)
@ -92,7 +93,7 @@ GEM
compass-rails (2.0.0) compass-rails (2.0.0)
compass (>= 0.12.2) compass (>= 0.12.2)
configurate (0.0.8) configurate (0.0.8)
connection_pool (1.2.0) connection_pool (2.0.0)
crack (0.4.2) crack (0.4.2)
safe_yaml (~> 1.0.0) safe_yaml (~> 1.0.0)
cucumber (1.3.16) cucumber (1.3.16)
@ -133,9 +134,8 @@ GEM
erubis (2.7.0) erubis (2.7.0)
ethon (0.7.1) ethon (0.7.1)
ffi (>= 1.3.0) ffi (>= 1.3.0)
excon (0.39.0) excon (0.39.5)
execjs (1.4.0) execjs (2.2.1)
multi_json (~> 1.0)
factory_girl (4.4.0) factory_girl (4.4.0)
activesupport (>= 3.0.0) activesupport (>= 3.0.0)
factory_girl_rails (4.4.1) factory_girl_rails (4.4.1)
@ -155,7 +155,7 @@ GEM
fog-json fog-json
ipaddress (~> 0.5) ipaddress (~> 0.5)
nokogiri (~> 1.5, >= 1.5.11) nokogiri (~> 1.5, >= 1.5.11)
fog-brightbox (0.1.1) fog-brightbox (0.3.0)
fog-core (~> 1.22) fog-core (~> 1.22)
fog-json fog-json
inflecto inflecto
@ -168,7 +168,7 @@ GEM
net-ssh (>= 2.1.3) net-ssh (>= 2.1.3)
fog-json (1.0.0) fog-json (1.0.0)
multi_json (~> 1.0) multi_json (~> 1.0)
font-awesome-rails (4.0.3.1) font-awesome-rails (4.1.0.0)
railties (>= 3.2, < 5.0) railties (>= 3.2, < 5.0)
foreigner (1.6.1) foreigner (1.6.1)
activerecord (>= 3.0.0) activerecord (>= 3.0.0)
@ -184,9 +184,9 @@ GEM
gon (5.0.4) gon (5.0.4)
actionpack (>= 2.3.0) actionpack (>= 2.3.0)
json json
guard (2.2.5) guard (2.6.1)
formatador (>= 0.2.4) formatador (>= 0.2.4)
listen (~> 2.1) listen (~> 2.7)
lumberjack (~> 1.0) lumberjack (~> 1.0)
pry (>= 0.9.12) pry (>= 0.9.12)
thor (>= 0.18.1) thor (>= 0.18.1)
@ -209,7 +209,6 @@ GEM
hashie (2.1.2) hashie (2.1.2)
hike (1.2.3) hike (1.2.3)
http_accept_language (1.0.2) http_accept_language (1.0.2)
httpauth (0.2.0)
i18n (0.6.11) i18n (0.6.11)
i18n-inflector (2.6.7) i18n-inflector (2.6.7)
i18n (>= 0.4.1) i18n (>= 0.4.1)
@ -224,25 +223,24 @@ GEM
phantomjs phantomjs
rack (>= 1.2.1) rack (>= 1.2.1)
rake rake
jasmine-core (2.0.0) jasmine-core (2.0.2)
jasmine-jquery-rails (2.0.3) jasmine-jquery-rails (2.0.3)
jquery-rails (3.0.4) jquery-rails (3.0.4)
railties (>= 3.0, < 5.0) railties (>= 3.0, < 5.0)
thor (>= 0.14, < 2.0) thor (>= 0.14, < 2.0)
jquery-ui-rails (4.2.0) jquery-ui-rails (4.2.1)
railties (>= 3.2.16) railties (>= 3.2.16)
json (1.8.1) json (1.8.1)
jwt (0.1.10) jwt (1.0.0)
multi_json (>= 1.5) kaminari (0.16.1)
kaminari (0.15.1)
actionpack (>= 3.0.0) actionpack (>= 3.0.0)
activesupport (>= 3.0.0) activesupport (>= 3.0.0)
kgio (2.9.2) kgio (2.9.2)
listen (2.4.0) listen (2.7.9)
celluloid (>= 0.15.2) celluloid (>= 0.15.2)
rb-fsevent (>= 0.9.3) rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9) rb-inotify (>= 0.9)
lumberjack (1.0.4) lumberjack (1.0.9)
macaddr (1.7.1) macaddr (1.7.1)
systemu (~> 2.6.2) systemu (~> 2.6.2)
mail (2.5.4) mail (2.5.4)
@ -262,6 +260,7 @@ GEM
rails rails
multi_json (1.10.1) multi_json (1.10.1)
multi_test (0.1.1) multi_test (0.1.1)
multi_xml (0.5.5)
multipart-post (1.2.0) multipart-post (1.2.0)
mysql2 (0.3.16) mysql2 (0.3.16)
nested_form (0.3.2) nested_form (0.3.2)
@ -271,11 +270,11 @@ GEM
nokogiri (1.6.1) nokogiri (1.6.1)
mini_portile (~> 0.5.0) mini_portile (~> 0.5.0)
oauth (0.4.7) oauth (0.4.7)
oauth2 (0.8.1) oauth2 (0.9.4)
faraday (~> 0.8) faraday (>= 0.8, < 0.10)
httpauth (~> 0.1) jwt (~> 1.0)
jwt (~> 0.1.4) multi_json (~> 1.3)
multi_json (~> 1.0) multi_xml (~> 0.5)
rack (~> 1.2) rack (~> 1.2)
omniauth (1.2.1) omniauth (1.2.1)
hashie (>= 1.2, < 3) hashie (>= 1.2, < 3)
@ -285,9 +284,11 @@ GEM
omniauth-oauth (1.0.1) omniauth-oauth (1.0.1)
oauth oauth
omniauth (~> 1.0) omniauth (~> 1.0)
omniauth-oauth2 (1.1.1) omniauth-oauth2 (1.1.2)
oauth2 (~> 0.8.0) faraday (>= 0.8, < 0.10)
omniauth (~> 1.0) multi_json (~> 1.3)
oauth2 (~> 0.9.3)
omniauth (~> 1.2)
omniauth-tumblr (1.1) omniauth-tumblr (1.1)
omniauth-oauth (~> 1.0) omniauth-oauth (~> 1.0)
omniauth-twitter (1.0.1) omniauth-twitter (1.0.1)
@ -301,9 +302,9 @@ GEM
orm_adapter (0.5.0) orm_adapter (0.5.0)
phantomjs (1.9.7.1) phantomjs (1.9.7.1)
polyglot (0.3.5) polyglot (0.3.5)
pry (0.9.12.4) pry (0.10.1)
coderay (~> 1.0) coderay (~> 1.1.0)
method_source (~> 0.8) method_source (~> 0.8.1)
slop (~> 3.4) slop (~> 3.4)
rack (1.5.2) rack (1.5.2)
rack-cors (0.2.9) rack-cors (0.2.9)
@ -313,9 +314,9 @@ GEM
rack-mobile-detect (0.4.0) rack-mobile-detect (0.4.0)
rack rack
rack-piwik (0.2.2) rack-piwik (0.2.2)
rack-pjax (0.7.0) rack-pjax (0.8.0)
nokogiri (~> 1.5) nokogiri (~> 1.5)
rack (~> 1.3) rack (~> 1.1)
rack-protection (1.2.0) rack-protection (1.2.0)
rack rack
rack-rewrite (1.5.0) rack-rewrite (1.5.0)
@ -333,6 +334,9 @@ GEM
bundler (>= 1.3.0, < 2.0) bundler (>= 1.3.0, < 2.0)
railties (= 4.1.5) railties (= 4.1.5)
sprockets-rails (~> 2.0) 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) rails-i18n (4.0.2)
i18n (~> 0.6) i18n (~> 0.6)
rails (>= 4.0) rails (>= 4.0)
@ -394,7 +398,7 @@ GEM
rspec-mocks (~> 2.14.0) rspec-mocks (~> 2.14.0)
ruby-oembed (0.8.9) ruby-oembed (0.8.9)
ruby-progressbar (1.5.1) ruby-progressbar (1.5.1)
rubyzip (1.1.4) rubyzip (1.1.6)
safe_yaml (1.0.3) safe_yaml (1.0.3)
sass (3.2.19) sass (3.2.19)
sass-rails (4.0.3) sass-rails (4.0.3)
@ -422,7 +426,7 @@ GEM
tilt (~> 1.3, >= 1.3.3) tilt (~> 1.3, >= 1.3.3)
sinon-rails (1.9.0) sinon-rails (1.9.0)
railties (>= 3.1) railties (>= 3.1)
slop (3.4.7) slop (3.6.0)
spork (1.0.0rc4) spork (1.0.0rc4)
sprockets (2.11.0) sprockets (2.11.0)
hike (~> 1.2) hike (~> 1.2)
@ -470,7 +474,7 @@ GEM
will_paginate (3.0.5) will_paginate (3.0.5)
xpath (2.0.0) xpath (2.0.0)
nokogiri (~> 1.3) nokogiri (~> 1.3)
zip-zip (0.2) zip-zip (0.3)
rubyzip (>= 1.0.0) rubyzip (>= 1.0.0)
PLATFORMS PLATFORMS
@ -534,6 +538,8 @@ DEPENDENCIES
rack-rewrite (= 1.5.0) rack-rewrite (= 1.5.0)
rack-ssl (= 1.4.1) rack-ssl (= 1.4.1)
rails (= 4.1.5) rails (= 4.1.5)
rails-assets-jquery (= 1.10.2)
rails-assets-perfect-scrollbar (= 0.4.11)
rails-i18n (= 4.0.2) rails-i18n (= 4.0.2)
rails-timeago (= 2.4.0) rails-timeago (= 2.4.0)
rails_admin (= 0.6.2) rails_admin (= 0.6.2)

View file

@ -12,6 +12,8 @@
//= require_tree ./collections //= require_tree ./collections
//= require_tree ./views //= require_tree ./views
//= require perfect-scrollbar
var app = { var app = {
collections: {}, collections: {},
models: {}, models: {},

View file

@ -49,10 +49,11 @@
this.hideDropdown = function() { this.hideDropdown = function() {
self.badge.removeClass("active"); self.badge.removeClass("active");
self.dropdown.css("display", "none"); self.dropdown.css("display", "none");
$('.notifications').perfectScrollbar('destroy');
}; };
this.getNotifications = function() { this.getNotifications = function() {
$.getJSON("/notifications?per_page=5", function(notifications) { $.getJSON("/notifications?per_page=15", function(notifications) {
self.notifications = notifications; self.notifications = notifications;
self.renderNotifications(); self.renderNotifications();
}); });
@ -74,6 +75,8 @@
self.dropdownNotifications.find('.read').each(function(index) { self.dropdownNotifications.find('.read').each(function(index) {
Diaspora.page.header.notifications.setUpRead( $(this) ); Diaspora.page.header.notifications.setUpRead( $(this) );
}); });
$('.notifications').perfectScrollbar();
$(".notifications").scrollTop(0);
self.ajaxLoader.hide(); self.ajaxLoader.hide();
}; };
}; };

View file

@ -25,6 +25,7 @@
@import 'tag' @import 'tag'
@import 'photo' @import 'photo'
@import 'perfect-scrollbar'
/* ====== media ====== */ /* ====== media ====== */
.media .media
:margin 10px :margin 10px

View file

@ -151,6 +151,11 @@ body > header {
text-align: center; text-align: center;
padding: 15px; padding: 15px;
} }
.notifications{
overflow: hidden;
position: relative;
max-height: 325px;
}
.notification_element { .notification_element {
border-bottom: 1px solid $border-grey; border-bottom: 1px solid $border-grey;
@ -169,13 +174,17 @@ body > header {
} }
.unread-toggle { .unread-toggle {
padding: 9px 5px; padding: 9px 9px;
position: relative;
.entypo { .entypo {
cursor: pointer; cursor: pointer;
color: lighten($black,75%); color: lighten($black,75%);
font-size: 17px; font-size: 17px;
line-height: 17px; line-height: 17px;
} }
.tooltip {
position: fixed;
}
} }
&.unread { &.unread {