Add scrollbar to aspect dropdowns

closes #8213
closes #7696

Co-authored-by: Hank Grabowski <hankgrabowski@gmail.com>
Co-authored-by: Thorsten Claus <thorstenclaus@web.de>

Changelog.md

@@ -11,6 +11,7 @@
 * Bump mimemagic [#8231](https://github.com/diaspora/diaspora/pull/8231)
 * Removed support for defunct Uni Heidelberg OSM tile server, Mapbox is now required if you want to show maps [#8215](https://github.com/diaspora/diaspora/pull/8215)
 * Render only two fractional digits in the posts per user/day admin statistics [#8227](https://github.com/diaspora/diaspora/pull/8227)
+* Make aspect dropdowns scrollable [#8213](https://github.com/diaspora/diaspora/pull/8213)
 
 ## Features
 * Support and recommend TOML as configuration format [#8132](https://github.com/diaspora/diaspora/pull/8132)

app/assets/javascripts/app/views/aspect_membership_view.js

@@ -16,10 +16,8 @@ app.views.AspectMembership = app.views.Base.extend({
   },
 
   events: {
-    "click ul.aspect_membership.dropdown-menu > li.aspect_selector"
+    "click ul.aspect-membership.dropdown-menu > li.aspect_selector": "_clickHandler",
-        : "_clickHandler",
+    "keypress ul.aspect-membership.dropdown-menu > li.aspect_selector": "_clickHandler"
-    "keypress ul.aspect_membership.dropdown-menu > li.aspect_selector"
-        : "_clickHandler"
   },
 
   initialize: function(opts) {

app/assets/stylesheets/aspects.scss

@@ -21,3 +21,7 @@
     }
   }
 }
+.aspect-membership {
+  max-height: 300px;
+  overflow: auto;
+}

app/assets/templates/aspect_membership_dropdown_tpl.jst.hbs

@@ -13,7 +13,7 @@
   <span class="caret" />
 </button>
 
-<ul class="dropdown-menu aspect_membership pull-right" unselectable="on">
+<ul class="dropdown-menu aspect-membership pull-right" unselectable="on">
 {{#each aspects}}
   <li
     {{#if membership}}

app/assets/templates/aspects-list_tpl.jst.hbs

@@ -1,5 +1,5 @@
 <li class="hoverable">
-  <a class="selectable toggle_selector" href="#">
+  <a class="selectable toggle_selector aspect-membership" href="#">
     {{ t "aspect_navigation.select_all" }}
   </a>
 </li>

app/views/aspects/_aspect_dropdown.html.haml

@@ -22,7 +22,7 @@
         - else
           = t("shared.aspect_dropdown.toggle", count: selected_aspects.size)
     %span.caret
-  %ul.dropdown-menu.pull-right{unSelectable: "on"}
+  %ul.dropdown-menu.aspect-membership.pull-right{unSelectable: "on"}
 
     %li.public.radio{"data-aspect_id" => "public", :class => ("selected" if public_selected?(selected_aspects))}
       %a

spec/controllers/notifications_controller_spec.rb

@@ -115,7 +115,7 @@ describe NotificationsController, :type => :controller do
       it "should not provide a contacts menu for standard notifications" do
         FactoryGirl.create(:notification, :recipient => alice, :target => @post)
         get :index, params: {per_page: 5}
-        expect(Nokogiri(response.body).css('.aspect_membership')).to be_empty
+        expect(Nokogiri(response.body).css(".aspect-membership")).to be_empty
       end
 
       it "should provide a contacts menu for start sharing notifications" do

spec/javascripts/app/pages/getting_started_spec.js

@@ -10,6 +10,6 @@ describe("app.pages.GettingStarted", function() {
 
   it("renders aspect membership dropdown", function() {
     this.view.render();
-    expect($("ul.dropdown-menu.aspect_membership").length).toEqual(1);
+    expect($("ul.dropdown-menu.aspect-membership").length).toEqual(1);
   });
 });