Merge pull request #5129 from jaideng123/5106-scrolling_in_notifications

Increased the number of notifications shown in drop down bar to 15

Conflicts:
	Gemfile.lock

Changelog.md

@@ -22,6 +22,7 @@ Diaspora::Application.config.secret_key_base = '*************...'
 * Don't pull jQuery from a CDN by default [#5105](https://github.com/diaspora/diaspora/pull/5105)
 * Better character limit message [#5151](https://github.com/diaspora/diaspora/pull/5151)
 * Remember whether a AccountDeletion was performed [#5156](https://github.com/diaspora/diaspora/pull/5156)
+* Increased the number of notifications shown in drop down bar to 15 [#5129](https://github.com/diaspora/diaspora/pull/5129)
 
 # 0.4.1.0
 

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', '2.0.2'

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)
@@ -187,14 +188,13 @@ GEM
       multi_json (~> 1.3)
     gon (5.1.2)
       actionpack (>= 2.3.0)
-      json
-      multi_json
-      request_store (>= 1.0.5)
-    guard (2.6.1)
       formatador (>= 0.2.4)
+      json
       listen (~> 2.7)
       lumberjack (~> 1.0)
+      multi_json
       pry (>= 0.9.12)
+      request_store (>= 1.0.5)
       thor (>= 0.18.1)
     guard-cucumber (1.4.1)
       cucumber (>= 1.2.0)
@@ -340,6 +340,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)
@@ -547,6 +550,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.11.0)
   rails_admin (= 0.6.3)

app/assets/javascripts/app/app.js

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

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();
     };
   };

app/assets/stylesheets/application.css.sass

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

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 {