[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

1 files changed, 49 insertions, 24 deletions

diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss
index 65eadc9e0b4..2251896e3a0 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/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;
         }
-        .o_kanban_examples {
-            display: flex;
-            padding: 0 6px;
+    }
+}
 
-            .o_kanban_examples_group {
-                flex: 1 1 100%;
-                margin: 10px;
+// 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 {
+            .o_kanban_examples_group {
                 .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;
+            }
+        }
+    }
+}