[IMP] web: improve kanban mobile

Improve the mobile kanban when it's embedded in another view like
the Dashboard app

- Improve swipe: Allow to swipe on empty space
- When it's embedded :
     - The Kanban column height now is fit to the content
     - A empty space is now display if the Kanban column is empty

Task Id: 1904747

4 files changed, 25 insertions, 11 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
index 8619448e793..b5aa4945364 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
@@ -111,8 +111,8 @@ KanbanRenderer.include({
      */
     _enableSwipe: function () {
         var self = this;
-        var currentColumn = this.widgets[this.activeColumnIndex];
-        currentColumn.$el.swipe({
+        this.$el.swipe({
+            excludedElements: ".o_kanban_mobile_tabs",
             swipeLeft: function () {
                 self._moveToGroup(self.activeColumnIndex + 1, self.ANIMATE);
             },
@@ -143,7 +143,7 @@ KanbanRenderer.include({
             onSuccess: function () {
                 // update the columns and tabs positions (optionally with an animation)
                 var updateFunc = animate ? 'animate' : 'css';
-                self.$('.o_kanban_mobile_tab').removeClass('o_current');
+                self.$('.o_kanban_mobile_tab, .o_kanban_group').removeClass('o_current');
                 _.each(self.widgets, function (column, index) {
                     var columnID = column.id || column.db_id;
                     var $column = self.$('.o_kanban_group[data-id="' + columnID + '"]');
@@ -157,7 +157,7 @@ KanbanRenderer.include({
                     } else if (index === moveToIndex) {
                         $column[updateFunc]({left: '0%'});
                         $tab[updateFunc]({left: '50%'});
-                        $tab.addClass('o_current');
+                        $tab.add($column).addClass('o_current');
                     } else if (index < moveToIndex) {
                         $column.css({left: '-100%'});
                         $tab[updateFunc]({left: '-100%'});
@@ -176,6 +176,7 @@ KanbanRenderer.include({
      * @private
      */
     _renderGrouped: function (fragment) {
+        var result = this._super.apply(this, arguments);
         var data = [];
         _.each(this.state.data, function (group) {
             if (!group.value) {
@@ -187,11 +188,10 @@ KanbanRenderer.include({
             }
         });
 
-        var $tabs = $(qweb.render('KanbanView.MobileTabs', {
+        $(qweb.render('KanbanView.MobileTabs', {
             data: data,
-        }));
-        $tabs.appendTo(fragment);
-        return this._super.apply(this, arguments);
+        })).prependTo(fragment);
+        return result;
     },
     /**
      * @override
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index b74ae8aaea5..53dc200f398 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -36,6 +36,16 @@
             margin-left: 0; // override the margin-left: -1px of the desktop mode
             border: none;
 
+            &.o_current {
+                position: inherit;
+                top: 0;
+
+                &.o_kanban_no_records {
+                    // set a default height for clarity when embedded in another view
+                    min-height: $o-kanban-mobile-empty-height;
+                }
+            }
+
             .o_kanban_header {
                 display: none;
             }
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 2bdc03a132b..5196805625d 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -106,7 +106,7 @@ $o-kanban-inner-hmargin: 5px;
 $o-kanban-progressbar-height: 20px;
 
 $o-kanban-mobile-tabs-height: 40px;
-
+$o-kanban-mobile-empty-height: $o-kanban-image-width;
 // ------- Kanban dashboard variables -------
 
 // Used to manage spacing in complex dropdown menu
diff --git a/addons/web/static/tests/views/kanban_mobile_tests.js b/addons/web/static/tests/views/kanban_mobile_tests.js
index 98e65d1ea9c..d6c9a6d9a26 100644
--- a/addons/web/static/tests/views/kanban_mobile_tests.js
+++ b/addons/web/static/tests/views/kanban_mobile_tests.js
@@ -56,7 +56,7 @@ QUnit.module('Views', {
     QUnit.module('KanbanView Mobile');
 
     QUnit.test('mobile grouped rendering', function (assert) {
-        assert.expect(9);
+        assert.expect(11);
 
         var kanban = createView({
             View: KanbanView,
@@ -75,6 +75,8 @@ QUnit.module('Views', {
         assert.containsN(kanban, '.o_kanban_group', 2, "should have 2 columns" );
         assert.hasClass(kanban.$('.o_kanban_mobile_tab:first'),'o_current',
             "first tab is the active tab with class 'o_current'");
+        assert.hasClass(kanban.$('.o_kanban_group:first'),'o_current',
+            "first column is the active column with class 'o_current'");
         assert.containsN(kanban, '.o_kanban_group:first > div.o_kanban_record', 2,
             "there are 2 records in active tab");
         assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 0,
@@ -89,6 +91,8 @@ QUnit.module('Views', {
         kanban.$('.o_kanban_mobile_tab:nth(1)').trigger('click');
         assert.hasClass(kanban.$('.o_kanban_mobile_tab:nth(1)'),'o_current',
             "second tab is now active with class 'o_current'");
+        assert.hasClass(kanban.$('.o_kanban_group:nth(1)'),'o_current',
+            "second column is now active with class 'o_current'");
         assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 2,
             "the 2 records of the second group have now been loaded");
 
@@ -121,7 +125,7 @@ QUnit.module('Views', {
 
         // first column should be undefined with framework unique identifier
         assert.containsN(kanban, '.o_kanban_group', 3, "should have 3 columns" );
-        assert.containsOnce(kanban, '.o_kanban_group:first-child[data-id^="partner_"]',
+        assert.containsOnce(kanban, '.o_kanban_mobile_tabs + .o_kanban_group[data-id^="partner_"]',
             "Undefined column should be first and have unique framework identifier as data-id")
 
         // kanban column should match kanban mobile tabs