[FIX] web: quick create in RTL

- Set a language using RTL (e.g. Arabic) - Activate mobile mode (through debug mode or on a mobile device) - Go to the CRM kanban view (make sure no record exist so the no_content message is displayed) - Add a new record - Fill in the name, click outside of the field The no_content message is displayed over the form view and it is impossible to save the record. The root cause is the incorrect structure of the kanban view page in RTL, leading the user to the wrong element and triggering the wrong event. We make the structure of the view aware of the RTL configuration. opw-2046231 closes odoo/odoo#35509 Signed-off-by: Nicolas Martinelli (nim) <nim@odoo.com> Co-authored-by: Mohammed Shekha <msh@openerp.com>
2019-08-08 07:09:57 +00:00
parent 625e2f06be
commit 868bad0259
2 changed files with 57 additions and 11 deletions
@@ -90,10 +90,15 @@ KanbanRenderer.include({
        var index = _.findIndex(this.widgets, {db_id: localID});
        var $column = this.widgets[index].$el;
        var left = $column.css('left');
+        var right = $column.css('right');
        var scrollTop = $column.scrollTop();
        return this._super.apply(this, arguments).then(function () {
            $column = self.widgets[index].$el;
-            $column.css({left: left});
+            if (_t.database.parameters.direction === 'rtl') {
+                $column.css({right: right});
+            } else {
+                $column.css({left: left});
+            }
            $column.scrollTop(scrollTop); // required when clicking on 'Load More'
            self._enableSwipe();
        });
@@ -149,22 +154,32 @@ KanbanRenderer.include({
                    var columnID = column.id || column.db_id;
                    var $column = self.$('.o_kanban_group[data-id="' + columnID + '"]');
                    var $tab = self.$('.o_kanban_mobile_tab[data-id="' + columnID + '"]');
+                    var colPosition, tabPosition;
                    if (index === moveToIndex - 1) {
-                        $column[updateFunc]({left: '-100%'});
-                        $tab[updateFunc]({left: '0%'});
+                        colPosition = '-100%';
+                        tabPosition = '0%';
                    } else if (index === moveToIndex + 1) {
-                        $column[updateFunc]({left: '100%'});
-                        $tab[updateFunc]({left: '100%'});
+                        colPosition = '100%';
+                        tabPosition = '100%';
                    } else if (index === moveToIndex) {
-                        $column[updateFunc]({left: '0%'});
-                        $tab[updateFunc]({left: '50%'});
+                        colPosition = '0%';
+                        tabPosition = '50%';
                        $tab.addClass('o_current');
                    } else if (index < moveToIndex) {
-                        $column.css({left: '-100%'});
-                        $tab[updateFunc]({left: '-100%'});
+                        colPosition = '-100%';
+                        tabPosition = '-100%';
                    } else if (index > moveToIndex) {
-                        $column.css({left: '100%'});
-                        $tab[updateFunc]({left: '200%'});
+                        colPosition = '100%';
+                        tabPosition = '200%';
+                    } else {
+                        return;
+                    }
+                    if (_t.database.parameters.direction === 'rtl') {
+                        $column[updateFunc]({right: colPosition});
+                        $tab[updateFunc]({right: tabPosition});
+                    } else {
+                        $column[updateFunc]({left: colPosition});
+                        $tab[updateFunc]({left: tabPosition});
                    }
                });
                def.resolve();
@@ -1,10 +1,12 @@
 odoo.define('web.kanban_mobile_tests', function (require) {
 "use strict";

+var core = require('web.core');
 var KanbanView = require('web.KanbanView');
 var testUtils = require('web.test_utils');

 var createView = testUtils.createView;
+var _t = core._t;

 QUnit.module('Views', {
    beforeEach: function () {
@@ -104,6 +106,35 @@ QUnit.module('Views', {

        kanban.destroy();
    });
+
+    QUnit.test('mobile grouped rendering in rtl direction', function (assert) {
+        assert.expect(2);
+
+        var direction = _t.database.parameters.direction;
+        _t.database.parameters.direction = 'rtl';
+
+        var kanban = createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban class="o_kanban_test o_kanban_small_column" on_create="quick_create">' +
+                    '<templates><t t-name="kanban-box">' +
+                        '<div><field name="foo"/></div>' +
+                    '</t></templates>' +
+                '</kanban>',
+            domain: [['product_id', '!=', false]],
+            groupBy: ['product_id'],
+        });
+
+        assert.strictEqual(kanban.$('.o_kanban_group:first')[0].style.right, '0%',
+            "first tab should have 50% right");
+        assert.strictEqual(kanban.$('.o_kanban_group:nth(1)')[0].style.right, '100%',
+            "second tab should have 100% right");
+
+        kanban.destroy();
+        _t.database.parameters.direction = direction;
+    });
+
    QUnit.test('mobile grouped with undefined column', function (assert) {
        assert.expect(3);