Added perfect-scrollbar

diaspora · Aug 21, 2014 · 2ffae3d · 2ffae3d
1 parent 920b91f
commit 2ffae3d
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 8 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,5 @@
 source 'https://rubygems.org'
+source 'https://rails-assets.org'
 
 gem 'rails', '3.2.19'
 
@@ -119,7 +120,7 @@ group :assets do
 
   # CSS
 
-  gem 'bootstrap-sass', '2.2.2.0'
+  gem 'bootstrap-sass', '2.3.0.0'
   gem 'compass-rails',  '1.1.7'
   gem 'sass-rails',     '3.2.6'
 
@@ -132,6 +133,10 @@ group :assets do
   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'
 
   # Windows and OSX have an execjs compatible runtime built-in, Linux users should
   # install Node.js or use 'therubyracer'.

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -51,7 +51,7 @@ GEM
       jquery-rails
       railties
     bcrypt (3.1.7)
-    bootstrap-sass (2.2.2.0)
+    bootstrap-sass (2.3.0.0)
       sass (~> 3.2)
     builder (3.0.4)
     capybara (2.2.1)
@@ -331,7 +331,7 @@ GEM
       actionpack (>= 3.1)
       activesupport (>= 3.1)
     rails_admin (0.4.9)
-      bootstrap-sass (~> 2.2)
+      bootstrap-sass (~> 2.3)
       builder (~> 3.0)
       coffee-rails (>= 3.1, < 5)
       font-awesome-rails (~> 3.0)
@@ -475,7 +475,7 @@ DEPENDENCIES
   addressable (= 2.3.6)
   asset_sync (= 1.0.0)
   backbone-on-rails (= 1.1.1)
-  bootstrap-sass (= 2.2.2.0)
+  bootstrap-sass (= 2.3.0.0)
   capybara (= 2.2.1)
   carrierwave (= 0.10.0)
   compass-rails (= 1.1.7)

diff --git 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
@@ -47,6 +47,7 @@
     };
 
     this.hideDropdown = function() {
+      $('.notifications').perfectScrollbar('destroy');
       self.badge.removeClass("active");
       self.dropdown.css("display", "none");
     };
@@ -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/javascripts/widgets/notifications.js b/app/assets/javascripts/widgets/notifications.js
@@ -58,6 +58,7 @@
       });
     };
     this.setUpUnread = function( an_obj ) {
+      console.log('Set up unread');
       an_obj.removeClass("read").addClass( "unread" );
       an_obj.find('.unread-toggle')
         .unbind("click")
@@ -66,9 +67,10 @@
         .tooltip('destroy')
         .removeAttr('data-original-title')
         .attr('title', Diaspora.I18n.t('notifications.mark_read'))
-        .tooltip();
+        .tooltip({container: '#notification_dropdown'});
     }
     this.setUpRead = function( an_obj ) {
+      console.log('Set up read');
       an_obj.removeClass("unread").addClass( "read" );
       an_obj.find('.unread-toggle')
         .unbind("click")
@@ -77,7 +79,7 @@
         .tooltip('destroy')
         .removeAttr('data-original-title')
         .attr('title', Diaspora.I18n.t('notifications.mark_unread'))
-        .tooltip();
+        .tooltip({container: '#notification_dropdown'});
     }
     this.clickSuccess = function( data ) {
       var itemID = data["guid"]

diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
@@ -22,6 +22,8 @@
 @import 'new_styles/_forms'
 @import 'tag'
 
+@import 'perfect-scrollbar'
+
 /* ====== media ====== */
 .media
   :margin 10px

diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
@@ -152,8 +152,8 @@ body > header {
         padding: 15px;
       }
       .notifications{
-        overflow-y: auto;
-        overflow-x: hidden;
+        overflow: hidden;
+        position: relative;
         max-height: 325px;
       }
 
@@ -184,6 +184,7 @@ body > header {
         }
 
         &.unread {
+
           background-color: $background-grey;
           color: $black;
           .unread-toggle {