Add scroll to team selector (#1659)

app/assets/javascripts/navigation.js

@@ -1,4 +1,4 @@
-/* globals animateSpinner */
+/* globals animateSpinner PerfectScrollbar */
 
 (function() {
   'use strict';
@@ -87,6 +87,23 @@
 
   function initGlobalSwitchForm() {
     var teamSwitch = $('#team-switch');
+    var dropDownMenu = teamSwitch.find('.dropdown-menu');
+    var dropDownHeight;
+    var ps = new PerfectScrollbar(teamSwitch.find('.team-container')[0], { scrollYMarginOffset: 5 });
+    teamSwitch.click(() => {
+      dropDownHeight = dropDownMenu.height();
+      if (teamSwitch.find('.new-team').length === 0) {
+        teamSwitch.find('.edit_user').css('height', '100%');
+      }
+      dropDownMenu.css('height', (dropDownHeight + 'px'));
+      setTimeout(() => {
+        ps.update();
+      }, 0);
+    });
+    teamSwitch.find('.ps__rail-y').click((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
     teamSwitch
       .find('.dropdown-menu .change-team')
       .on('click', function() {

app/assets/stylesheets/themes/main_navigation.scss

@@ -250,6 +250,11 @@
     margin-left: 17px;
   }
 
+  .edit_user {
+    height: calc(100% - 35px);
+    position: relative;
+  }
+
   .fa-check-circle {
     color: $brand-primary;
     margin-left: -2px;
@@ -279,8 +284,15 @@
   .dropdown-menu {
     border-radius: 0;
     margin-top: 0;
+    max-height: calc(100vh - 50px);
+    padding-bottom: 0;
     padding-top: 0;
     width: 100%;
+
+    .team-container {
+      height: calc(100% - 35px);
+      position: relative;
+    }
   }
 
   i {
@@ -292,6 +304,17 @@
     text-align: left;
     word-wrap: break-word;
 
+    &.new-team {
+      border-top: 1px solid $color-alto;
+      height: 35px;
+      line-height: 30px;
+
+      a {
+        line-height: 30px;
+        padding: 0 20px;
+      }
+    }
+
     &:hover {
       background-color: $color-concrete;
     }
@@ -299,7 +322,6 @@
     a {
       color: $color-emperor;
       display: block;
-      line-height: 1.6em;
       padding: 3px 20px;
       text-align: left;
       text-decoration: none;

app/views/shared/_navigation.html.erb

@@ -70,23 +70,25 @@
                              method: :post) do |f| %>
                   <%= hidden_field(:user, :current_team_id) %>
                   <div class="dropdown-header"><%= t('nav.team_switch_title') %></div>
-                  <% current_user.teams.each do |team| %>
-                    <li class="team-name-item">
-                      <a href="#"
-                        data-id="<%= team.id %>"
-                        class="text-center change-team"
-                        data-turbolinks="false">
-                        <% if current_team == team %>
-                          <span class="fas fa-check-circle"></span> <strong><%= team.name %></strong>
-                        <% else %>
-                          <span class="team-name"><%= team.name %></span>
-                        <% end %>
-                      </a>
-                    </li>
-                  <% end %>
+                  <div class="team-container">
+                    <% current_user.teams.each do |team| %>
+                      <li class="team-name-item">
+                        <a href="#"
+                          data-id="<%= team.id %>"
+                          class="text-center change-team"
+                          data-turbolinks="false">
+                          <% if current_team == team %>
+                            <span class="fas fa-check-circle"></span> <strong><%= team.name %></strong>
+                          <% else %>
+                            <span class="team-name"><%= team.name %></span>
+                          <% end %>
+                        </a>
+                      </li>
+                    <% end %>
+                  </div>
                 <% end %>
                 <% if current_user.teams.length > 1 && can_create_teams? %>
-                  <li>
+                  <li class="new-team">
                     <%= link_to new_team_path do %>
                       <span class="fas fa-plus"></span>
                       <%= t('users.settings.teams.index.new_team') %>