[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

4 files changed, 60 insertions, 53 deletions

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;
-    }
-}