[IMP] web: Made Kanban Mobile Tabs more closer to Material Design spec

With this change, it's apply a kanban tabs more closer to something like material design tabs See: https://material.io/design/components/tabs.html Task: 1893168
odoo · Feb 11, 2019 · 74afbf96d9510883096fc5429855cd823de83e24 · 74afbf9
1 parent b7e2fa4
commit 74afbf96d9510883096fc5429855cd823de83e24
Unified Split

Showing with 53 additions and 25 deletions.

+45 −21 addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js

+5 −3 addons/web/static/src/scss/kanban_view_mobile.scss

+3 −1 addons/web/static/tests/views/kanban_mobile_tests.js
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
@@ -45,6 +45,7 @@ KanbanRenderer.include({
            $column.scrollLeft(this._scrollPosition.left);
            $column.scrollTop(this._scrollPosition.top);
        }
+  
+        this._computeTabPosition();
        this._super.apply(this, arguments);
    },
    /**
@@ -142,38 +143,61 @@ KanbanRenderer.include({
                   '.o_kanban_group.o_current')
                .removeClass('o_current');
            this.$('.o_kanban_group[data-id="' + columnID + '"], ' +
-  
-                  '.o_kanban_mobile_tab[data-id="' + columnID + '"]')
+  
+                   '.o_kanban_mobile_tab[data-id="' + columnID + '"]')
                .addClass('o_current');
        }
    },
    /**
-  
-     * Update the tabs positions
+  
+     * Compute the justify content of the kanban tab headers
     * @private
-  
-     * @param {boolean} [animate=false] set to true to animate
     */
-  
-    _computeTabPosition: function (animate) {
+  
+    _computeTabHeaderJustifyContent: function () {
        if (this.widgets && this.widgets.length) {
            var self = this;
+  
+            // Use to compute the sum of the outerWidth of all tab
+  
+            var widthChilds = this.widgets.map(function (column) {
+  
+                return self.$('.o_kanban_mobile_tab[data-id="' + (column.id || column.db_id) + '"]').outerWidth();
+  
+            }).reduce(function (a, b) {
+  
+                return a + b;
+  
+            });
+  
+            // Apply a space around between child if the parent length is higher then the sum of the child width
+  
+            var $oKanbanMobileTabs = this.$('.o_kanban_mobile_tabs');
+  
+            if ($oKanbanMobileTabs.outerWidth() >= widthChilds) {
+  
+                $oKanbanMobileTabs.addClass('justify-content-around');
+  
+            } else {
+  
+                $oKanbanMobileTabs.removeClass('justify-content-around');
+  
+            }
+  
+        }
+  
+    },
+  
+    /**
+  
+     * Compute the scroll x value for the tabs
+  
+     * @private
+  
+     */
+  
+    _computeTabScrollPosition: function () {
+  
+        if (this.widgets && this.widgets.length) {
+  
+            var lastItemIndex = this.widgets.length - 1;
            var moveToIndex = this.activeColumnIndex;
-  
-            // update the columns and tabs positions (optionally with an animation)
-  
-            var updateFunc = animate ? 'animate' : 'css';
-  
-            _.each(self.widgets, function (column, index) {
-  
-                var columnID = column.id || column.db_id;
-  
-                var $tab = self.$('.o_kanban_mobile_tab[data-id="' + columnID + '"]');
-  
-                if (index === moveToIndex - 1) {
-  
-                    $tab[updateFunc]({left: '0%'});
-  
-                } else if (index === moveToIndex + 1) {
-  
-                    $tab[updateFunc]({left: '100%'});
-  
-                } else if (index === moveToIndex) {
-  
-                    $tab[updateFunc]({left: '50%'});
-  
-                } else if (index < moveToIndex) {
-  
-                    $tab[updateFunc]({left: '-100%'});
-  
-                } else if (index > moveToIndex) {
-  
-                    $tab[updateFunc]({left: '200%'});
+  
+            var scrollToLeft = 0;
+  
+            for (var i = 0; i < moveToIndex; i++) {
+  
+                var $tab = this.$('.o_kanban_mobile_tab[data-id="' + (this.widgets[i].id || this.widgets[i].db_id) + '"]');
+  
+                if (moveToIndex !== lastItemIndex && i === moveToIndex - 1) {
+  
+                    scrollToLeft += $tab.outerWidth() * 0.75;
+  
+                } else {
+  
+                    scrollToLeft += $tab.outerWidth();
                }
-  
-            });
+  
+            }
+  
+            // Apply the scroll x on the tabs
+  
+            this.$('.o_kanban_mobile_tabs').scrollLeft(scrollToLeft);
        }
    },
+  
+    /**
+  
+     * Update the tabs positions
+  
+     * @private
+  
+     */
+  
+    _computeTabPosition: function () {
+  
+        this._computeTabHeaderJustifyContent();
+  
+        this._computeTabScrollPosition();
+  
+    },
    /**
     * Update the columns positions
     * @private
@@ -208,7 +232,7 @@ KanbanRenderer.include({
     */
    _moveToGroupUpdateLayoutKanban : function (animate) {
        this._computeOCurrentClass();
-  
-        this._computeTabPosition(animate);
+  
+        this._computeTabPosition();
        this._computeColumnPosition(animate);
    },
    /**

diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -5,15 +5,16 @@
        overflow: hidden;
        .o_kanban_mobile_tabs {
+  
+            display:flex;
+  
+            width: 100%;
            height: $o-kanban-mobile-tabs-height;
            position: relative;
+  
+            overflow-x: auto;
            background-color: #5E5E5E;
            .o_kanban_mobile_tab {
-  
-                @include o-position-absolute($left: 100%);
-  
-                transform: translateX(-50%);
                height: $o-kanban-mobile-tabs-height;
-  
-                padding: 10px;
+  
+                padding: 10px 20px;
                font-size: 14px;
                color: white;
@@ -23,6 +24,7 @@
                }
                .o_column_title {
                    white-space: nowrap;
+  
+                    text-transform: uppercase;
                }
            }
        }

diff --git 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(11);
+  
+        assert.expect(12);
        var kanban = createView({
            View: KanbanView,
@@ -73,6 +73,8 @@ QUnit.module('Views', {
        // basic rendering tests
        assert.containsN(kanban, '.o_kanban_group', 2, "should have 2 columns" );
+  
+        assert.hasClass(kanban.$('.o_kanban_mobile_tabs'),'justify-content-around',
+  
+            "tabs should have class 'justify-content-around'");
        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',