[IMP] web: add example kanban background

The background example is a set of random fake column and card,
directly inspired from the kanban example modal.

We want to toggle this background depending on the kanban state;
the background will be displayed when there is no column yet,
and the quick create column is shown.

To do so, we need to update the state of the kanban when deleting
a column to (re)display the background in case of removal of the
last column. Now, on column deletion, the entire kanban is updated
and so entirely rerender (with aab's benediction).

Task-1893021

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

@@ -341,12 +341,7 @@ var KanbanController = BasicController.extend({
         this.model
             .deleteRecords([column.db_id], relatedModelName)
             .done(function () {
-                if (column.isEmpty()) {
-                    self.renderer.removeWidget(column);
-                    self._updateButtons();
-                } else {
-                    self.reload();
-                }
+                self.update({}, {reload: !column.isEmpty()});
             });
     },
     /**

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

@@ -166,15 +166,6 @@ var KanbanRenderer = BasicRenderer.extend({
         this.quickCreate.toggleFold();
         this._toggleNoContentHelper();
     },
-    /**
-     * Removes a widget (record if ungrouped, column if grouped) from the view.
-     *
-     * @param {Widget} widget the instance of the widget to remove
-     */
-    removeWidget: function (widget) {
-        this.widgets.splice(this.widgets.indexOf(widget), 1);
-        widget.destroy();
-    },
     /**
      * Updates a given column with its new state.
      *
@@ -275,6 +266,16 @@ var KanbanRenderer = BasicRenderer.extend({
             previousCard.focus();
         }
     },
+    /**
+     * Render the Example Ghost Kanban card on the background
+     *
+     * @private
+     * @param {DocumentFragment} fragment
+     */
+    _renderExampleBackground: function (fragment) {
+        var $background = $(qweb.render('KanbanView.ExamplesBackground'));
+        $background.appendTo(fragment);
+    },
     /**
      * Renders empty invisible divs in a document fragment.
      *
@@ -351,9 +352,9 @@ var KanbanRenderer = BasicRenderer.extend({
                     // Open it directly if there is no column yet
                     if (!self.state.data.length) {
                         self.quickCreate.toggleFold();
+                        self._renderExampleBackground(fragment);
                     }
                 });
-
             }
         }
     },
@@ -546,6 +547,7 @@ var KanbanRenderer = BasicRenderer.extend({
     _onQuickCreateColumnUpdated: function (ev) {
         ev.stopPropagation();
         this._toggleNoContentHelper();
+        this._updateExampleBackground();
     },
     /**
      * @private
@@ -596,6 +598,21 @@ var KanbanRenderer = BasicRenderer.extend({
     _onStartQuickCreate: function () {
         this._toggleNoContentHelper(true);
     },
+    /**
+     * Hide or display the background example:
+     *  - displayed when quick create column is display and there is no column else
+     *  - hidden otherwise
+     *
+     * @private
+     **/
+    _updateExampleBackground: function () {
+        var $elem = this.$('.o_kanban_example_background_container');
+        if (!this.state.data.length && !$elem.length) {
+            this._renderExampleBackground(this.$el);
+        } else {
+            $elem.remove();
+        }
+    },
 });
 
 return KanbanRenderer;

addons/web/static/src/scss/kanban_examples_dialog.scss

@@ -1,3 +1,4 @@
+// container ghost card in modal
 .o_kanban_examples_dialog {
     display: flex;
     padding: 0px;
@@ -37,35 +38,59 @@
             padding: 16px 16px 0;
             text-align: justify;
         }
+    }
+}
+
+// container ghost card in background
+.o_kanban_example_background_container {
+    display: flex;
+    padding: 0px;
+    opacity: 0.4;
+
+    // content
+    .o_kanban_example_background {
+        flex: 1 1 100%;
+
         .o_kanban_examples {
-            display: flex;
-            padding: 0 6px;
-
             .o_kanban_examples_group {
-                flex: 1 1 100%;
-                margin: 10px;
-
                 .o_kanban_examples_ghost {
-                    padding: 5px;
-                    margin-top: -1px;
-                    border: thin solid gray('300');
-                    background-color: white;
-                    .o_ghost_content {
-                        height: 12px;
-                        background: gray('300');
-                        &.o_ghost_tag {
-                            display: inline-block;
-                            width: 40%;
-                            margin-top: 10px;
-                        }
-                    }
-                    .o_ghost_avatar {
-                        height: 20px;
-                        width: 20px;
-                        margin-top: 6px;
-                    }
+                    width: 224px;
+                    margin-bottom: 10px;
                 }
             }
         }
     }
 }
+
+
+// kanban ghost card
+.o_kanban_examples {
+    display: flex;
+    padding: 0 6px;
+
+    .o_kanban_examples_group {
+        flex: 1 1 100%;
+        margin: 10px;
+
+        .o_kanban_examples_ghost {
+            padding: 5px;
+            margin-top: -1px;
+            border: thin solid gray('300');
+            background-color: white;
+            .o_ghost_content {
+                height: 12px;
+                background: gray('300');
+                &.o_ghost_tag {
+                    display: inline-block;
+                    width: 40%;
+                    margin-top: 10px;
+                }
+            }
+            .o_ghost_avatar {
+                height: 20px;
+                width: 20px;
+                margin-top: 6px;
+            }
+        }
+    }
+}

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

@@ -56,10 +56,10 @@
                         <button class="btn btn-primary o_kanban_add" type="button">Add</button>
                     </span>
                 </div>
+                <span class="o_discard_msg text-muted float-right">Esc to discard</span>
                 <t t-if="widget.examples">
                     <button type="button" class="btn btn-link o_kanban_examples">See examples</button>
                 </t>
-                <span class="o_discard_msg text-muted float-right">Esc to discard</span>
             </div>
             <div class="o_kanban_muted_record"/>
             <div class="o_kanban_muted_record"/>
@@ -167,6 +167,32 @@
     </div>
 </t>
 
+<!-- Kanban Example Background -->
+<t t-name="KanbanView.ExamplesBackground">
+    <div class="o_kanban_example_background_container">
+        <div class="o_kanban_example_background">
+            <div class="o_kanban_examples">
+                <t t-foreach="_.range(1,5)" t-as="num">
+                    <div class="o_kanban_examples_group">
+                        <h6><b>Column <t t-esc="num"/></b></h6>
+                        <t t-foreach="_.random(2,6)">
+                            <t t-call="KanbanView.ExamplesBackground.RecordGhost"/>
+                        </t>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </div>
+</t>
+<t t-name="KanbanView.ExamplesBackground.RecordGhost">
+    <div class="o_kanban_examples_ghost">
+        <div class="o_ghost_content"/>
+        <div class="o_ghost_content o_ghost_tag"/>
+        <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+    </div>
+</t>
+
+
 <!-- Mobile templates -->
 <t t-name="KanbanView.MobileTabs">
     <div class="o_kanban_mobile_tabs">