[IMP] core: menu tip ux/ui improvement

We would like to make the "no item found" screens more appealing.

Before this commit, it shows a small help tip in the top-left
corner of the screen, just below the "Create" button.

With this commit, these help tips have been replaced by onboarding
screens, which consist of a picture and some text below, both of which
are horizontally centered.

The texts have been slightly changed, so that they are shorter and clearer.

Considered modules:

(A)
    account,
    account_asset,
    account_budget,
    account_test,
    account_voucher,
    analytic
(B)
    barcodes,
    base,
    base_automation,
    board
(C)
    calendar,
    contacts,
    crm
(D)
    delivery
(E)
    event
(F)
    fleet
(G)
    gamification,
    google_drive
(H)
    hr,
    hr_attendance,
    hr_contract,
    hr_expense,
    hr_gamification,
    hr_holidays,
    hr_payroll,
    hr_recruitment,
    hr_timesheet
(I)
    im_livechat
(L)
    l10n_fr_sale_closing,
    link_tracker,
    lunch
(M)
    mail,
    maintenance,
    mass_mailing,
    membership,
    mrp
(N)
    note
(P)
    payment,
    point_of_sale,
    post_mercury,
    pos_restaurant,
    product,
    project,
    purchase,
    purchase_requisition
(R)
    rating,
    repair,
    resource
(S)
    sale,
    sale_timesheet,
    sales_team,
    stock,
    stock_account,
    stock_landed_costs,
    stock_picking_batch,
    survey
(U)
    utm
(W)
    web,
    website,
    website_blog,
    website_customer,
    website_event_track,
    website_forum,
    website_quote,
    website_sale,
    website_sale_digital,
    website_slides

13 files changed, 80 insertions, 66 deletions

diff --git a/addons/web/static/src/img/empty_state_folder_neutral.svg b/addons/web/static/src/img/empty_folder.svg
index a770048e9c1..a770048e9c1 100644
--- a/addons/web/static/src/img/empty_state_folder_neutral.svg
+++ b/addons/web/static/src/img/empty_folder.svg
diff --git a/addons/web/static/src/img/empty_state_file_neutral.svg b/addons/web/static/src/img/neutral_face.svg
index 8ead42fee13..8ead42fee13 100644
--- a/addons/web/static/src/img/empty_state_file_neutral.svg
+++ b/addons/web/static/src/img/neutral_face.svg
diff --git a/addons/web/static/src/img/smiling_face.png b/addons/web/static/src/img/smiling_face.png
new file mode 100644
index 00000000000..ff1e070ff5b
--- /dev/null
+++ b/addons/web/static/src/img/smiling_face.png
diff --git a/addons/web/static/src/img/empty_state_file_happy.svg b/addons/web/static/src/img/smiling_face.svg
index 9aaa6ba0840..9aaa6ba0840 100644
--- a/addons/web/static/src/img/empty_state_file_happy.svg
+++ b/addons/web/static/src/img/smiling_face.svg
diff --git a/addons/web/static/src/js/views/basic/basic_renderer.js b/addons/web/static/src/js/views/basic/basic_renderer.js
index 042d85d414a..83d2da5169a 100644
--- a/addons/web/static/src/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/js/views/basic/basic_renderer.js
@@ -562,7 +562,7 @@ var BasicRenderer = AbstractRenderer.extend({
      */
     _renderNoContentHelper: function () {
         var $msg = $('<div>')
-            .addClass('oe_view_nocontent')
+            .addClass('o_view_nocontent')
             .html(this.noContentHelp);
         this.$el.html($msg);
     },
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 178d3ef3bd5..4d51f8786d0 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -55,9 +55,12 @@ return AbstractRenderer.extend({
      * returning immediately, then wait a tiny interval before actually
      * displaying the data.
      *
+     * @override
+     * @private
      * @returns {Deferred} The _super deferred is actually resolved immediately
      */
     _render: function () {
+        this.$el.toggleClass('o_view_nocontent_container', !this.state.data.length);
         if (this.to_remove) {
             nv.utils.offWindowResize(this.to_remove);
         }
@@ -71,8 +74,7 @@ return AbstractRenderer.extend({
             this.$el.empty();
             this.$el.append(qweb.render('GraphView.error', {
                 title: _t("No data to display"),
-                description: _t("No data available for this chart. " +
-                    "Try to add some records, or make sure that " +
+                description: _t("Try to add some records, or make sure that " +
                     "there is no active filter in the search bar."),
             }));
         } else {
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 e4e37095afa..1dad8e9c35d 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer.js
@@ -305,7 +305,7 @@ var KanbanRenderer = BasicRenderer.extend({
         this.$el.empty();
 
         var displayNoContentHelper = !this._hasContent() && !!this.noContentHelp;
-        this.$el.toggleClass('o_kanban_nocontent', displayNoContentHelper);
+        this.$el.toggleClass('o_view_nocontent_container', displayNoContentHelper);
         if (displayNoContentHelper) {
             // display the no content helper if there is no data to display
             this._renderNoContentHelper();
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index f4c5219259a..470e0dae0e5 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -629,8 +629,10 @@ var ListRenderer = BasicRenderer.extend({
         _.invoke(this.pagers, 'destroy');
         this.pagers = [];
 
+        var displayNoContentHelper = !this._hasContent() && !!this.noContentHelp;
+        this.$el.toggleClass('o_view_nocontent_container', displayNoContentHelper);
         // display the no content helper if there is no data to display
-        if (!this._hasContent() && this.noContentHelp) {
+        if (displayNoContentHelper) {
             this._renderNoContentHelper();
             return this._super();
         }
diff --git a/addons/web/static/src/less/kanban_view.less b/addons/web/static/src/less/kanban_view.less
index 4b576c9082d..8e31f176e81 100644
--- a/addons/web/static/src/less/kanban_view.less
+++ b/addons/web/static/src/less/kanban_view.less
@@ -616,12 +616,6 @@
         }
     }
 
-    // Kanban special layouts
-    &.o_kanban_nocontent {
-        min-height: 0;
-        padding: 0;
-    }
-
     &.o_kanban_mobile .o_kanban_record {
         div.label {
             .o-text-overflow();
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
index 010c972f29b..0be635aae18 100644
--- a/addons/web/static/src/less/variables.less
+++ b/addons/web/static/src/less/variables.less
@@ -40,6 +40,8 @@
 @odoo-tooltip-background-color: black;
 @odoo-tooltip-color: white;
 @odoo-tooltip-arrow-color: black;
+@odoo-tooltip-text-color: #777777;
+@odoo-tooltip-title-text-color: #4c4c4c;
 
 // UI custom colors for tags, kanban records' colors, ...)
 @odoo-nb-ui-color: 12;
diff --git a/addons/web/static/src/less/views.less b/addons/web/static/src/less/views.less
index 48117cb1b75..e882ac31659 100644
--- a/addons/web/static/src/less/views.less
+++ b/addons/web/static/src/less/views.less
@@ -3,20 +3,6 @@
  * all renderers. For field default rules, see the fields.less file.
  */
 
-// No content helper
-.oe_view_nocontent {
-    a {
-        cursor: pointer;
-    }
-    span, a {
-        display: inline!important;
-    }
-}
-.o_field_widget .oe_view_nocontent,
-.o_cannot_create .oe_view_nocontent_create {
-    display: none;
-}
-
 // Invisible modifier (can be inside the view, the button area, ...)
 .o_invisible_modifier {
     display: none!important;
@@ -51,3 +37,61 @@
         margin-left: 3px;
     }
 }
+
+// No content helper
+.o_view_nocontent_container {
+    .o-flex-display();
+    height: 100%;
+    padding: 0;
+}
+
+.o_view_nocontent {
+    max-width: 650px;
+    margin: auto;
+    padding: 15px;
+    text-align: center;
+    color: @odoo-tooltip-text-color;
+    font-size: 115%;
+
+    > p:first-of-type {
+        margin-top: 0;
+        color: @odoo-tooltip-title-text-color;
+        font-weight: bold;
+        font-size: 125%;
+    }
+
+    .o-init-image() {
+        content: "";
+        display: block;
+        margin: auto;
+        background-size: cover;
+    }
+
+    .o_view_nocontent_smiling_face:before {
+        .o-init-image();
+        .size(120px, 140px);
+        background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center;
+    }
+
+    .o_view_nocontent_neutral_face:before {
+        .o-init-image();
+        .size(120px, 140px);
+        background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
+    }
+
+    .o_view_nocontent_empty_folder:before {
+        .o-init-image();
+        .size(120px, 80px);
+        margin-top: 30px;
+        margin-bottom: 30px;
+        background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
+    }
+
+    .o_empty_custom_dashboard {
+        min-height: 327px;
+        margin-left: -@grid-gutter-width/2;
+        margin-top: -@grid-gutter-width/2;
+        padding: 100px 0 0 137px;
+        background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
+    }
+}
diff --git a/addons/web/static/src/less/views_extra.less b/addons/web/static/src/less/views_extra.less
deleted file mode 100644
index ad6f4c83017..00000000000
--- a/addons/web/static/src/less/views_extra.less
+++ /dev/null
@@ -1,33 +0,0 @@
-// No content helper
-.oe_view_nocontent {
-    padding: 15px;
-    margin-top: 0;
-    color: #777777;
-    font-size: 125%;
-    max-width: 700px;
-    .oe_view_nocontent_create {
-        margin-top: 0;
-        padding-top: 35px;
-        color: #4c4c4c;
-        &:before {
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 70px;
-            height: 80px;
-            margin-left: -70px;
-            margin-top: -50px;
-            background: transparent url(/web/static/src/img/view_empty_arrow.png) no-repeat 0px 0px;
-        }
-    }
-    > p {
-        padding-left: 78px;
-    }
-    .oe_empty_custom_dashboard {
-        background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
-        margin-top: -15px;
-        padding: 100px 0 0 137px;
-        min-height: 327px;
-        margin-left: -15px;
-    }
-}
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index ea4f554b183..196346d4d9c 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -487,8 +487,8 @@
         <button class="btn btn-default fa fa-pie-chart o_graph_button" title="Pie Chart" data-mode="pie"/>
     </div>
 </t>
-<div t-name="GraphView.error" class="oe_view_nocontent" >
-    <p><strong><t t-esc="title"/></strong></p>
+<div t-name="GraphView.error" class="o_view_nocontent" >
+    <p class="o_view_nocontent_empty_folder"><t t-esc="title"/></p>
     <p><t t-esc="description"/></p>
 </div>
 
@@ -539,12 +539,15 @@
         </t>
     </ul>
 </t>
-<div t-name="PivotView.nodata" class="oe_view_nocontent" >
-    <p><strong>No data to display.</strong></p>
-    <p>
-        No data available for this pivot table.  Try to add some records, or make sure
-        that there is at least one measure and no active filter in the search bar.
-    </p>
+<div t-name="PivotView.nodata" class="o_view_nocontent_container" >
+    <div class="o_view_nocontent">
+        <p class="o_view_nocontent_empty_folder">
+            No data to display
+        </p><p>
+            Try to add some records, or make sure
+            that there is at least one measure and no active filter in the search bar.
+        </p>
+    </div>
 </div>
 
 <t t-name="FormSelection">