Added GLTableDropdown to flip dropdowns if they overflow20052-manual-actions-dropdown-on-pipelines-makes-to-show-a-vertical-scrollbar

Added test

Review changes and renamed to GLOverflowDropdown as it wont be used only on tables

Changed window onload for dropdown onclick

3 files changed, 46 insertions, 2 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ddf11ecf34c..9236ab61f5d 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -69,6 +69,9 @@
           new IssuableForm($('.merge-request-form'));
           new IssuableTemplateSelectors();
           break;
+        case 'projects:pipelines:index':
+          $('.content-list.pipelines').glOverflowDropdown();
+          break;
         case 'projects:tags:new':
           new ZenMode();
           new GLForm($('.tag-form'));
diff --git a/app/assets/javascripts/gl_table_dropdown.js.es6 b/app/assets/javascripts/gl_table_dropdown.js.es6
new file mode 100644
index 00000000000..199bb656f0f
--- /dev/null
+++ b/app/assets/javascripts/gl_table_dropdown.js.es6
@@ -0,0 +1,41 @@
+((global) => {
+  class GLOverflowDropdown {
+    constructor($table, $dropdown) {
+      const MENU_MAX_HEIGHT = 250;
+
+      this.$table = $table;
+      this.$dropdownToggle = $('.dropdown-toggle', $dropdown);
+      this.$dropdownMenu = $('.dropdown-menu', $dropdown);
+      this.positioned = false;
+
+      this.$dropdownMenu.css({
+        'max-height': MENU_MAX_HEIGHT,
+        overflow: 'scroll'
+      });
+
+      $dropdown.off('click.positionDropdownWithinTable')
+        .on('click.positionDropdownWithinTable', this.positionDropdownWithinTable.bind(this));
+    }
+
+    positionDropdownWithinTable() {
+      if (this.positioned) return;
+      const dropdownMenuHeight = this.$dropdownMenu.outerHeight(true);
+      if ((this.$dropdownToggle.offset().top - this.$table.offset().top + this.$dropdownToggle.outerHeight() + dropdownMenuHeight) > this.$table.outerHeight()) {
+        this.$dropdownMenu.css({ top: -(dropdownMenuHeight + 3) });
+      }
+      this.positioned = true;
+    }
+  }
+
+  global.GLOverflowDropdown = GLOverflowDropdown;
+
+  $.fn.glOverflowDropdown = function($dropdowns) {
+    const $table = this;
+    $dropdowns = $dropdowns || $('.gl-overflow-dropdown', $table);
+    $dropdowns.each(function() {
+      if (!$.data(this, 'glOverflowDropdown')) {
+        $.data(this, 'glOverflowDropdown', new global.GLOverflowDropdown($table, $(this)));
+      }
+    });
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index 6391c67021b..b00b464f2b0 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -62,7 +62,7 @@
       - if artifacts.present? || actions.any?
         .btn-group.inline
           - if actions.any?
-            .btn-group
+            .btn-group.gl-overflow-dropdown
               %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
                 = custom_icon('icon_play')
                 %b.caret
@@ -73,7 +73,7 @@
                       = custom_icon('icon_play')
                       %span= build.name.humanize
           - if artifacts.present?
-            .btn-group
+            .btn-group.gl-overflow-dropdown
               %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
                 = icon("download")
                 %b.caret