From b70f306ff5efbefa5ce847c6df683b49c7bb9001 Mon Sep 17 00:00:00 2001 From: jaideng123 Date: Mon, 25 Aug 2014 12:39:30 -0500 Subject: [PATCH] Integrated Perfect Scrollbar into notifications dropdown --- Gemfile | 6 ++ Gemfile.lock | 74 ++++++++++--------- app/assets/javascripts/app/app.js | 2 + .../widgets/notifications-badge.js | 5 +- app/assets/stylesheets/application.css.sass | 1 + app/assets/stylesheets/header.css.scss | 11 ++- 6 files changed, 63 insertions(+), 36 deletions(-) diff --git a/Gemfile b/Gemfile index 24d694d4b..8889e1dee 100644 --- a/Gemfile +++ b/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' diff --git a/Gemfile.lock b/Gemfile.lock index dfa113a28..027d120f3 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/javascripts/app/app.js b/app/assets/javascripts/app/app.js index efb3232a8..1af41169f 100644 --- a/app/assets/javascripts/app/app.js +++ b/app/assets/javascripts/app/app.js @@ -12,6 +12,8 @@ //= require_tree ./collections //= require_tree ./views +//= require perfect-scrollbar + var app = { collections: {}, models: {}, diff --git a/app/assets/javascripts/widgets/notifications-badge.js b/app/assets/javascripts/widgets/notifications-badge.js index e56b65d0a..3b4ecc90e 100644 --- a/app/assets/javascripts/widgets/notifications-badge.js +++ b/app/assets/javascripts/widgets/notifications-badge.js @@ -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(); }; }; diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index fcca31881..8a0bf14b0 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -25,6 +25,7 @@ @import 'tag' @import 'photo' +@import 'perfect-scrollbar' /* ====== media ====== */ .media :margin 10px diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss index a6073c1fc..ba5c8f3f9 100644 --- a/app/assets/stylesheets/header.css.scss +++ b/app/assets/stylesheets/header.css.scss @@ -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 {