[FIX] web,*: various nocontent helper fixes

* account, board, hr_holidays, mail, sale, website_sale

Small fixes on nocontent onboarding screens.

Initial commit: https://github.com/odoo/odoo/commit/a87d761fdbf345ada5dc93e0a686b08a0f5a0417

Details:

- list: centered;
- pivot/graph: centered + empty folder face;
- Dashboard app with nocontent helper;
- Discuss inbox/starred: centered without neutral/smiling faces;
    => no faces because it's too much with animated
       rainbow man when emptying the any of the boxes.
- hr_holidays: fixed onboarding screens;
- (technical) dropped obsolete 'o_view_nocontent_container' style;
- manual reconciliation 'nothing to reconcile': centered + inside form sheet;
    => renamed account's o_view_nocontent to o_view_noreconciliation,
       so that it doesn't use the style of views.less.
- kanban: nocontent helper above the columns (if any);
- texts "no order to upsell"/"abandonned cart" paragraph split in two.

18 files changed, 65 insertions, 85 deletions

diff --git a/addons/account/static/src/less/account_reconciliation.less b/addons/account/static/src/less/account_reconciliation.less
index 66b39301fbb..a8dd669e918 100644
--- a/addons/account/static/src/less/account_reconciliation.less
+++ b/addons/account/static/src/less/account_reconciliation.less
@@ -39,7 +39,7 @@
         clear: both;
     }
 
-    .o_view_nocontent {
+    .o_view_noreconciliation {
         max-width: none;
         padding: 0 10%;
         color: @odoo-main-color-muted;
diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml
index 1969432eb77..13cb9b9e910 100644
--- a/addons/account/static/src/xml/account_reconciliation.xml
+++ b/addons/account/static/src/xml/account_reconciliation.xml
@@ -30,7 +30,7 @@
         </div>
         <div class="pull-right text-muted">Tip: Hit CTRL-Enter to reconcile all the balanced items in the sheet.</div>
     </div>
-    <div t-else="" class="o_view_nocontent">
+    <div t-else="" class="o_view_noreconciliation">
         <p>Nothing to do!</p>
         <p>This page displays all the bank transactions that are to be reconciled and provides with a neat interface to do so.</p>
     </div>
@@ -41,8 +41,8 @@
         <attribute name="class">o_manual_statement</attribute>
     </t>
     <t t-jquery="h1:last, .progress, .o_automatic_reconciliation" t-operation="replace"></t>
-    <t t-jquery=".o_view_nocontent p" t-operation="replace"></t>
-    <t t-jquery=".o_view_nocontent" t-operation="append">
+    <t t-jquery=".o_view_noreconciliation p" t-operation="replace"></t>
+    <t t-jquery=".o_view_noreconciliation" t-operation="append">
         <p><b>Good Job!</b> There is nothing to reconcile.</p>
         <p>All invoices and payments have been matched, your accounts' balances are clean.</p>
     </t>
diff --git a/addons/board/static/src/js/dashboard.js b/addons/board/static/src/js/dashboard.js
index c47e9b9564f..2e56eb39685 100644
--- a/addons/board/static/src/js/dashboard.js
+++ b/addons/board/static/src/js/dashboard.js
@@ -266,7 +266,9 @@ FormRenderer.include({
                 return element.tag === "action"? element: false;
             });
         });
-        this.$el.toggleClass('o_dashboard_nocontent', !hasAction);
+        if (!hasAction) {
+            return $(QWeb.render('DashBoard.NoContent'));
+        }
 
         // We should start with three columns available
         node = $.extend(true, {}, node);
diff --git a/addons/board/static/src/less/dashboard.less b/addons/board/static/src/less/dashboard.less
index 88e30c8df7e..51f773a49a4 100644
--- a/addons/board/static/src/less/dashboard.less
+++ b/addons/board/static/src/less/dashboard.less
@@ -1,12 +1,5 @@
 .o_dashboard {
 
-    // no content help
-    &.o_dashboard_nocontent {
-        .o-flex-display();
-        .o-align-content(center);
-        .o-justify-content(center);
-    }
-
     // Dashboard layout
     .oe_dashboard_layout_1 .oe_dashboard_column {
         &.index_0 {
diff --git a/addons/board/static/src/xml/board.xml b/addons/board/static/src/xml/board.xml
index 13453a945f6..0e55c5dd77f 100644
--- a/addons/board/static/src/xml/board.xml
+++ b/addons/board/static/src/xml/board.xml
@@ -43,6 +43,22 @@
         </ul>
     </div>
 </t>
+<t t-name="DashBoard.NoContent">
+    <div class="o_view_nocontent">
+        <div class="o_nocontent_help">
+            <p class="o_view_nocontent_neutral_face">
+                Your personal dashboard is empty
+            </p><p>
+                To add your first report into this dashboard, go to any
+                menu, switch to list or graph view, and click <i>"Add to
+                Dashboard"</i> in the extended search options.
+            </p><p>
+                You can filter and group data before inserting into the
+                dashboard using the search options.
+            </p>
+        </div>
+    </div>
+</t>
 <t t-name="DashBoard.xml">
     <form t-att-string="form_title">
         <board t-att-style="style">
diff --git a/addons/board/static/tests/dashboard_tests.js b/addons/board/static/tests/dashboard_tests.js
index 87d1f1a3608..0a1264dc589 100644
--- a/addons/board/static/tests/dashboard_tests.js
+++ b/addons/board/static/tests/dashboard_tests.js
@@ -67,8 +67,8 @@ QUnit.test('dashboard basic rendering', function (assert) {
 
     assert.ok(form.renderer.$el.hasClass('o_dashboard'),
         "with a dashboard, the renderer should have the proper css class");
-    assert.strictEqual(form.$('.o_dashboard .o_view_nocontent').length, 0,
-        "should not have a no content helper");
+    assert.strictEqual(form.$('.o_dashboard .o_view_nocontent').length, 1,
+        "should have a no content helper");
     assert.strictEqual(form.get('title'), "My Dashboard",
         "should have the correct title");
     form.destroy();
@@ -93,8 +93,8 @@ QUnit.test('display the no content helper', function (assert) {
         },
     });
 
-    assert.strictEqual(form.$('.o_dashboard .o_view_nocontent').length, 0,
-        "should not have a no content helper with action help");
+    assert.strictEqual(form.$('.o_dashboard .o_view_nocontent').length, 1,
+        "should have a no content helper with action help");
     form.destroy();
 });
 
diff --git a/addons/board/views/board_views.xml b/addons/board/views/board_views.xml
index aad2eb56383..00eedce86ce 100644
--- a/addons/board/views/board_views.xml
+++ b/addons/board/views/board_views.xml
@@ -23,18 +23,6 @@
             <field name="view_mode">form</field>
             <field name="usage">menu</field>
             <field name="view_id" ref="board_my_dash_view"/>
-            <field name="help" type="html">
-                <p class="o_view_nocontent_neutral_face">
-                    Your personal dashboard is empty
-                </p><p>
-                    To add your first report into this dashboard, go to any
-                    menu, switch to list or graph view, and click <i>'Add to
-                    Dashboard'</i> in the extended search options.
-                </p><p>
-                    You can filter and group data before inserting into the
-                    dashboard using the search options.
-                </p>
-            </field>
         </record> 
 
         <!--My Dashboard Menu-->
diff --git a/addons/hr_holidays/report/hr_leave_reports.xml b/addons/hr_holidays/report/hr_leave_reports.xml
index 60c83a5d2cd..a09065847b1 100644
--- a/addons/hr_holidays/report/hr_leave_reports.xml
+++ b/addons/hr_holidays/report/hr_leave_reports.xml
@@ -133,8 +133,8 @@
             ]
         }</field>
         <field name="help" type="html">
-            <p class="o_view_nocontent_create">
-                Click here to create a new leave request.
+            <p class="o_view_nocontent_smiling_face">
+                Create a new leave request
             </p>
         </field>
         <field name="domain">[('holiday_type','=','employee')]</field>
diff --git a/addons/hr_holidays/views/hr_leave_allocation_views.xml b/addons/hr_holidays/views/hr_leave_allocation_views.xml
index 53391b5e61e..5a7453e9d06 100644
--- a/addons/hr_holidays/views/hr_leave_allocation_views.xml
+++ b/addons/hr_holidays/views/hr_leave_allocation_views.xml
@@ -137,8 +137,8 @@
         <field name="view_type">form</field>
         <field name="view_mode">tree,kanban,form</field>
         <field name="help" type="html">
-            <p class="o_view_nocontent_create">
-                Click here to create a new leave allocation request.
+            <p class="o_view_nocontent_smiling_face">
+                Create a new leave allocation request
             </p>
         </field>
         <field name="domain">[('employee_id.user_id', '=', uid)]</field>
@@ -164,8 +164,8 @@
         <field name="view_mode">tree,form</field>
         <field name="context">{'search_default_department':1, 'search_default_approve':1}</field>
         <field name="help" type="html">
-            <p class="o_view_nocontent_create">
-                Click here to create a new leave allocation.
+            <p class="o_view_nocontent_smiling_face">
+                Create a new leave allocation
             </p>
         </field>
         <field name="search_view_id" ref="view_hr_leave_allocation_filter"/>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 611b3a3997a..4a7ba086ebf 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -104,22 +104,18 @@
     </t>
 
     <!-- When a channel is empty-->
-    <div t-name="mail.EmptyChannel" class="o_mail_no_content o_view_nocontent_container">
+    <div t-name="mail.EmptyChannel" class="o_mail_no_content">
         <div class="o_view_nocontent">
-            <t t-if="options.channel_id==='channel_inbox'">
-                <p class="o_view_nocontent_smiling_face">
-                    Congratulations, your inbox is empty
-                </p><p>
-                    New messages appear here.
-                </p>
-            </t>
-            <t t-if="options.channel_id==='channel_starred'">
-                <p class="o_view_nocontent_neutral_face">
-                    No starred message
-                </p><p>
-                    You can mark any message as 'starred', and it shows up in this channel.
-                </p>
-            </t>
+            <div class="o_nocontent_help">
+                <t t-if="options.channel_id==='channel_inbox'">
+                    <p>Congratulations, your inbox is empty</p>
+                    <p>New messages appear here.</p>
+                </t>
+                <t t-if="options.channel_id==='channel_starred'">
+                    <p>No starred message</p>
+                    <p>You can mark any message as 'starred', and it shows up in this channel.</p>
+                </t>
+            </div>
         </div>
     </div>
 
diff --git a/addons/sale/views/sale_views.xml b/addons/sale/views/sale_views.xml
index f1d776d6ad2..4357a9ca0e1 100644
--- a/addons/sale/views/sale_views.xml
+++ b/addons/sale/views/sale_views.xml
@@ -553,6 +553,7 @@
               </p><p>
                 These are orders with products invoiced based on ordered quantities, 
                 in the case you have delivered more than what was ordered.
+              </p><p>
                 A typical example is the pre-paid hours of service, 
                 where you want to sell extra hours to the customer
                 because the initial hours have already been used.
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 07155e327e3..8ce6ec14aba 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -60,7 +60,6 @@ return AbstractRenderer.extend({
      * @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);
         }
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 6721f6d446c..4236ce74da4 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer.js
@@ -302,16 +302,6 @@ var KanbanRenderer = BasicRenderer.extend({
         }
     },
     /**
-     * @private
-     * @override
-     * adds a specific class to the kanban helper so that it can be targetted by specific css
-     */
-    _renderNoContentHelper: function() {
-        var $el = this._super.apply(this, arguments);
-        $el.toggleClass('o_kanban_view_nocontent',true)
-        return $el;
-    },
-    /**
      * Renders an ungrouped kanban view in a fragment.
      *
      * @private
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 601752ce532..e9c9a4d1f76 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -633,7 +633,6 @@ var ListRenderer = BasicRenderer.extend({
         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 (displayNoContentHelper) {
             this.$el.html(this._renderNoContentHelper());
diff --git a/addons/web/static/src/less/views.less b/addons/web/static/src/less/views.less
index fa50c2e2bd8..aaa75b9156a 100644
--- a/addons/web/static/src/less/views.less
+++ b/addons/web/static/src/less/views.less
@@ -39,18 +39,11 @@
 }
 
 // No content helper
-.o_view_nocontent_container {
-    .o-flex-display();
-    height: 100%;
-    padding: 0;
-}
-
 .o_view_nocontent {
-    &.o_kanban_view_nocontent {
-        .o-position-absolute(20%, 0, 0, 0);        
-        pointer-events: none;
-    }
-
+    .o-position-absolute(20%, 0, 0, 0);        
+    pointer-events: none;
+    z-index: 1;
+    
     .o_nocontent_help {
         pointer-events: auto;
         max-width: 650px;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 196346d4d9c..ed9709d2c4c 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -488,8 +488,10 @@
     </div>
 </t>
 <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 class="o_nocontent_help">
+        <p class="o_view_nocontent_empty_folder"><t t-esc="title"/></p>
+        <p><t t-esc="description"/></p>
+    </div>
 </div>
 
 <div t-name="PivotView" class="o_pivot">
@@ -539,14 +541,16 @@
         </t>
     </ul>
 </t>
-<div t-name="PivotView.nodata" class="o_view_nocontent_container" >
+<div t-name="PivotView.nodata">
     <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 class="o_nocontent_help">
+            <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>
 </div>
 
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index 8c85caa8bb5..a399ffb5876 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/addons/web/static/tests/views/kanban_tests.js
@@ -2107,7 +2107,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('no content helper when no data', function (assert) {
-        assert.expect(4);
+        assert.expect(3);
 
         var records = this.data.partner.records;
 
@@ -2139,9 +2139,6 @@ QUnit.module('Views', {
         this.data.partner.records = records;
         kanban.reload();
 
-        assert.notOk(kanban.$el.hasClass('o_view_nocontent_container'),
-            "$el should have removed no content class");
-
         assert.strictEqual(kanban.$('.o_view_nocontent').length, 0,
             "should not display the no content helper");
         kanban.destroy();
diff --git a/addons/website_sale/views/sale_order_views.xml b/addons/website_sale/views/sale_order_views.xml
index cb895d7bb0d..a9f1211e3a4 100644
--- a/addons/website_sale/views/sale_order_views.xml
+++ b/addons/website_sale/views/sale_order_views.xml
@@ -81,6 +81,7 @@
             </p><p>
                 You'll find here all the carts abandoned by your visitors, if they completed their address.
                 You should send them a recovery email!
+            </p><p>
                 The time to mark a cart as abandoned can be changed in the settings.
             </p>
         </field>
@@ -142,6 +143,7 @@
             </p><p>
                 You'll find here all the carts abandoned by your visitors, if they completed their address.
                 You should send them a recovery email!
+            </p><p>
                 The time to mark a cart as abandoned can be changed in the settings.
             </p>
         </field>