[REF] web: allow adding custom stuff in kanban header

Previous kanban header was a div with `flex-flow: row nowrap`. So if
someone tried to add some stuff in it, it will be forced to stay on
the same row as the title and config buttons. This commit wraps these
row elements in a new div to allow kanban header customization (this
prepares for the kanban progressbars).

addons/web/static/src/js/views/kanban/kanban_column.js

@@ -86,7 +86,7 @@ var KanbanColumn = Widget.extend({
         for (var i = 0; i < this.data_records.length; i++) {
             this.addRecord(this.data_records[i], {no_update: true});
         }
-        this.$header.tooltip();
+        this.$header.find('.o_kanban_header_title').tooltip();
 
         if (config.device.size_class > config.device.SIZES.XS && this.draggable !== false) {
             // deactivate sortable in mobile mode.  It does not work anyway,
@@ -215,7 +215,7 @@ var KanbanColumn = Widget.extend({
         this.$el.toggleClass('o_column_folded', this.folded);
         var tooltip = this.size + _t(' records');
         tooltip = '<p>' + tooltip + '</p>' + this.tooltipInfo;
-        this.$header.tooltip({html: true}).attr('data-original-title', tooltip);
+        this.$header.find('.o_kanban_header_title').tooltip({html: true}).attr('data-original-title', tooltip);
         if (!this.remaining) {
             this.$('.o_kanban_load_more').remove();
         } else {

addons/web/static/src/js/views/kanban/kanban_renderer.js

@@ -233,7 +233,7 @@ var KanbanRenderer = BasicRenderer.extend({
             this.$el.sortable({
                 axis: 'x',
                 items: '> .o_kanban_group',
-                handle: '.o_kanban_header',
+                handle: '.o_kanban_header_title',
                 cursor: 'move',
                 revert: 150,
                 delay: 100,

addons/web/static/src/less/kanban_view.less

@@ -47,7 +47,7 @@
     padding: 0 @o-kanban-group-padding * 0.5;
     cursor: pointer;
 }
-.o-kanban-header() {
+.o-kanban-header-title() {
     .o-flex-display();
     height: 50px;
     line-height: 2.2;
@@ -485,8 +485,8 @@
         border-width: 0 1px;
         margin-left: -1px;
 
-        .o_kanban_header {
-            .o-kanban-header();
+        .o_kanban_header > .o_kanban_header_title {
+            .o-kanban-header-title();
 
             .o_column_title {
                 .o-flex(1, 1, auto);
@@ -544,7 +544,7 @@
         }
     }
 
-    &.ui-sortable .o_kanban_header {
+    &.ui-sortable .o_kanban_header_title {
         cursor: move;
     }
 
@@ -557,7 +557,7 @@
             margin-left: 1px;
         }
 
-        .o_kanban_header {
+        .o_kanban_header_title {
             position: relative;
             opacity: 0.5;
 
@@ -583,7 +583,7 @@
         .o-kanban-slim-col();
 
         .o_column_header {
-            .o-kanban-header();
+            .o-kanban-header-title();
             position: relative;
             opacity: 0.5;
 

addons/web/static/src/xml/kanban.xml

@@ -10,26 +10,26 @@
 
 <t t-name="KanbanView.Group">
     <div class="o_kanban_group" t-att-data-id="widget.id">
-        <div class="o_kanban_header" t-att-title="widget.data_records.length + ' records'" data-delay="500">
-            <span class="o_column_title"><t t-esc="widget.title"/></span>
-            <span class="o_column_unfold"><i class="fa fa-arrows-h"/></span>
-            <span class="o_kanban_config dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-gear"/></a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a class="o_kanban_toggle_fold" href="#">Fold</a></li>
-                    <t t-if="widget.grouped_by_m2o">
-                        <li t-if="widget.editable and widget.id"><a class="o_column_edit" href="#">Edit Stage</a></li>
-                        <li t-if="widget.deletable and widget.id"><a class="o_column_delete" href="#">Delete</a></li>
-                    </t>
-                    <t t-if="widget.has_active_field">
-                        <li><a class="o_column_archive" href="#">Archive Records</a></li>
-                        <li><a class="o_column_unarchive" href="#">Restore Records</a></li>
-                    </t>
-                </ul>
-            </span>
-            <t t-if="widget.quick_create">
-                <span class="o_kanban_quick_add"><i class="fa fa-plus"/></span>
-            </t>
+        <div class="o_kanban_header">
+            <div class="o_kanban_header_title" t-att-title="widget.data_records.length + ' records'" data-delay="500">
+                <span class="o_column_title"><t t-esc="widget.title"/></span>
+                <span class="o_column_unfold"><i class="fa fa-arrows-h"/></span>
+                <span class="o_kanban_config dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-gear"/></a>
+                    <ul class="dropdown-menu" role="menu">
+                        <li><a class="o_kanban_toggle_fold" href="#">Fold</a></li>
+                        <t t-if="widget.grouped_by_m2o">
+                            <li t-if="widget.editable and widget.id"><a class="o_column_edit" href="#">Edit Stage</a></li>
+                            <li t-if="widget.deletable and widget.id"><a class="o_column_delete" href="#">Delete</a></li>
+                        </t>
+                        <t t-if="widget.has_active_field">
+                            <li><a class="o_column_archive" href="#">Archive Records</a></li>
+                            <li><a class="o_column_unarchive" href="#">Restore Records</a></li>
+                        </t>
+                    </ul>
+                </span>
+                <span t-if="widget.quick_create" class="o_kanban_quick_add"><i class="fa fa-plus"/></span>
+            </div>
         </div>
         <div t-if="widget.remaining > 0" class="o_kanban_load_more">
             <t t-call="KanbanView.LoadMore"/>

addons/web/static/tests/views/kanban_tests.js

@@ -1734,13 +1734,13 @@ QUnit.module('Views', {
                         "column should contain 1 record(s)");
         assert.ok(kanban.$('.o_kanban_group:first span.o_column_title:contains(Undefined)').length,
             "first column should have a default title for when no value is provided");
-        assert.strictEqual(kanban.$('.o_kanban_group:first .o_kanban_header').data('original-title'),
+        assert.strictEqual(kanban.$('.o_kanban_group:first .o_kanban_header_title').data('original-title'),
             "<p>1 records</p>",
             "first column should have a tooltip with the number of records, but not" +
             "the group_by_tooltip title and the many2one field value since it has no value");
         assert.ok(kanban.$('.o_kanban_group:eq(1) span.o_column_title:contains(hello)').length,
             "second column should have a title with a value from the many2one");
-        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_header').data('original-title'),
+        assert.strictEqual(kanban.$('.o_kanban_group:eq(1) .o_kanban_header_title').data('original-title'),
             "<p>2 records</p><div>Kikou<br>hello</div>",
             "second column should have a tooltip with the number of records, the group_by_tooltip title and many2one field value");