[FIX] add scrollbar to filters menu if needed (web client)

the filters menu can quickly grow if the user adds many conditions.
Once it grows out of the screen, the lower buttons can not be reached
anymore.  This patch adds a vertical scrollbar to fix this issue.  It
has to use some javascript to update its max-height property.

3 files changed, 13 insertions, 1 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 8eed87ff9a2..68eb69b3076 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -532,7 +532,7 @@
   background-image: -webkit-radial-gradient(circle, #eee 0%, #ccc 40%, #bbb 100%);
   background-image: -moz-radial-gradient(#eee 0%, #ccc 40%, #bbb 100%);
   background-image: -ms-radial-gradient(#eee 0%, #ccc 40%, #bbb 100%);
-  background-image: radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: radial-gradient(circle, #eee 0%, #ccc 40%, #bbb 100%);
 }
 .openerp .oe_kanban_status_green {
   background: green;
@@ -1361,6 +1361,10 @@
 .openerp .oe-search-options .divider {
   display: none;
 }
+.openerp .oe-search-options .filters-menu {
+  overflow: auto;
+  overflow-x: hidden;
+}
 .openerp .oe-search-options .filters-menu .divider {
   display: list-item;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 2d9c5b9cd33..19bb17276e5 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1162,6 +1162,8 @@ $sheet-padding: 16px
         .divider
             display: none
         .filters-menu
+            overflow: auto
+            overflow-x: hidden
             .divider
                 display: list-item
         .closed-menu
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index defee864295..29f4657b7ea 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -1441,6 +1441,10 @@ instance.web.search.FilterMenu = instance.web.Widget.extend({
             prop.$el.hide();
         });
     },
+    update_max_height: function () {
+        var max_height = $(window).height() - this.$menu[0].getBoundingClientRect().top - 10;
+        this.$menu.css('max-height', max_height);
+    },
     toggle_custom_filter_menu: function (is_open) {
         this.$add_filter
             .toggleClass('closed-menu', !is_open)
@@ -1450,6 +1454,7 @@ instance.web.search.FilterMenu = instance.web.Widget.extend({
             this.append_proposition();
         }
         this.$('.oe-filter-condition').toggle(is_open);
+        this.update_max_height();
     },
     append_proposition: function () {
         var self = this;
@@ -1458,6 +1463,7 @@ instance.web.search.FilterMenu = instance.web.Widget.extend({
             self.propositions.push(prop);
             prop.insertBefore(self.$add_filter_menu);
             self.$apply_filter.prop('disabled', false);
+            self.update_max_height();
             return prop;
         });
     },