[MERGE] project,hr_timesheet: simplify the user onboarding

This merge provides many little changes to improve the usability
and the onboarding of users in project and timesheet
applications.
This mostly contains labels renaming, restruration of views, ...
but some new mecanism appears like the "ghost kanban examples",
and improvements of the kanban examples modal.

Task-1893021

closes odoo/odoo#28461

4 files changed, 130 insertions, 42 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_controller.js b/addons/web/static/src/js/views/kanban/kanban_controller.js
index 2383a0ac730..15c804f5a8e 100644
--- a/addons/web/static/src/js/views/kanban/kanban_controller.js
+++ b/addons/web/static/src/js/views/kanban/kanban_controller.js
@@ -33,6 +33,9 @@ var KanbanController = BasicController.extend({
         column_toggle_fold: '_onToggleColumn',
         kanban_column_records_toggle_active: '_onToggleActiveRecords',
     }),
+    events: _.extend({}, BasicController.prototype.events, {
+        click: '_onClick',
+    }),
     /**
      * @override
      * @param {Object} params
@@ -303,6 +306,23 @@ var KanbanController = BasicController.extend({
         }
     },
     /**
+     * Bounce the 'Create' button.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     **/
+    _onClick: function (ev) {
+        var state = this.model.get(this.handle, {raw: true});
+        if (!state.count && this.buttons) {
+            var classesList = ['o_kanban_view', 'o_kanban_group', 'o_column_quick_create', 'o_view_nocontent_smiling_face'];
+            var $target = $(ev.target);
+            var hasClassList = _.map(classesList, function(klass){ return $target.hasClass(klass) });
+            if (_.some(hasClassList)) {
+                this.$buttons.find('.o-kanban-button-new').odooBounce();
+            }
+        }
+    },
+    /**
      * @private
      * @param {OdooEvent} ev
      */
@@ -321,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()});
             });
     },
     /**
diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer.js b/addons/web/static/src/js/views/kanban/kanban_renderer.js
index 316fb9114cd..51d75a167c7 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer.js
@@ -167,15 +167,6 @@ var KanbanRenderer = BasicRenderer.extend({
         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.
      *
      * @param {string} localID the column id
@@ -276,6 +267,16 @@ var KanbanRenderer = BasicRenderer.extend({
         }
     },
     /**
+     * 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.
      *
      * @private
@@ -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;
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;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index 220395fef02..06ba6b71eb6 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/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">Examples</button>
+                    <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"/>
@@ -158,10 +158,41 @@
     <div class="o_kanban_examples_ghost">
         <div class="o_ghost_content"/>
         <div class="o_ghost_content o_ghost_tag"/>
+            <t t-if="example.bullets">
+                <t t-if="_.random(0,5) > 3">
+                    <t t-raw="example.bullets[_.random(0, example.bullets.length-1)]"/>
+                </t>
+            </t>
         <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
     </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">