[IMP] web,*: make notification title optional

*odoo_referral,portal

Currently, it is not possible to have one line notification,
when you are not passing the title parameter as an option when
generating the notification,then it will display the blank div
with the default button icon only. so it is not possible to have
one-line notifications since the title is mandatory.

So the purpose of the task is to make the title optional, allowing
for more minimalistic notification.

Also removed some unnecessary titles from the notification and
some stying change.

This commit also increase the autoclose delay of non sticky
notifications, from 2.5s to 4s.

task : 2264749

closes odoo/odoo#52229

Related: odoo/enterprise#10981
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Dhruv Patel <dhp@odoo.com>

7 files changed, 47 insertions, 20 deletions

diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 56d00d80b9e..7c48784bd39 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -369,8 +369,7 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
      */
     _onConnectionLost: function () {
         this.connectionNotificationID = this.displayNotification({
-            title: _t('Connection lost'),
-            message: _t('Trying to reconnect...'),
+            message: _t('Connection lost. Trying to reconnect...'),
             sticky: true
         });
     },
@@ -384,8 +383,7 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
             this.call('notification', 'close', this.connectionNotificationID);
             this.displayNotification({
                 type: 'info',
-                title: _t('Connection restored'),
-                message: _t('You are back online'),
+                message: _t('Connection restored. You are back online.'),
                 sticky: false
             });
             this.connectionNotificationID = false;
diff --git a/addons/web/static/src/js/core/service_mixins.js b/addons/web/static/src/js/core/service_mixins.js
index d03d90456d0..f191dba5c08 100644
--- a/addons/web/static/src/js/core/service_mixins.js
+++ b/addons/web/static/src/js/core/service_mixins.js
@@ -250,7 +250,7 @@ var ServicesMixin = {
      * @deprecated will be removed as soon as the notification system is reviewed
      * @see displayNotification
      */
-    do_notify: function (title, message, sticky, className) {
+    do_notify: function (title = false, message, sticky, className) {
         return this.displayNotification({
             type: 'warning',
             title: title,
@@ -263,7 +263,7 @@ var ServicesMixin = {
      * @deprecated will be removed as soon as the notification system is reviewed
      * @see displayNotification
      */
-    do_warn: function (title, message, sticky, className) {
+    do_warn: function (title = false, message, sticky, className) {
         console.warn(title, message);
         return this.displayNotification({
             type: 'danger',
diff --git a/addons/web/static/src/js/widgets/notification.js b/addons/web/static/src/js/widgets/notification.js
index aad896bcd61..0e9cdabe7ca 100644
--- a/addons/web/static/src/js/widgets/notification.js
+++ b/addons/web/static/src/js/widgets/notification.js
@@ -19,7 +19,7 @@ var Notification = Widget.extend({
         'mouseenter': '_onMouseEnter',
         'mouseleave': '_onMouseLeave',
     },
-    _autoCloseDelay: 2500,
+    _autoCloseDelay: 4000,
     _animation: true,
 
     /**
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 2bfbc0ea266..c9014a0334e 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -119,7 +119,7 @@ $nav-pills-link-active-bg: $o-brand-primary !default;
 
 // Toasts
 
-$toast-max-width: 300px !default;
+$toast-max-width: 320px !default;
 $toast-padding-x: 1.5rem !default;
 $toast-padding-y: 0.5rem !default;
 $toast-font-size: $font-size-base !default;
diff --git a/addons/web/static/src/scss/notification.scss b/addons/web/static/src/scss/notification.scss
index 7bf292ad94c..ce2865fe9a3 100644
--- a/addons/web/static/src/scss/notification.scss
+++ b/addons/web/static/src/scss/notification.scss
@@ -1,6 +1,6 @@
 
 .o_notification_manager {
-    @include o-position-absolute($nav-link-height, 0);
+    @include o-position-absolute(3.5rem, 0);
     position: fixed;
     z-index: ($zindex-modal + $zindex-popover) / 2;
     width: $toast-max-width;
@@ -8,5 +8,12 @@
 
     .o_notification {
         width: 100%;
+        .toast-body {
+            padding: 1.2rem 1.5rem;
+            .o_notification_close {
+                height: 20px;
+                margin-left: 5px;
+            }
+        }
     }
 }
diff --git a/addons/web/static/src/xml/notification.xml b/addons/web/static/src/xml/notification.xml
index 592c3ee23b0..03ff4cd637b 100644
--- a/addons/web/static/src/xml/notification.xml
+++ b/addons/web/static/src/xml/notification.xml
@@ -4,23 +4,27 @@
 <t t-name="Notification">
     <div t-attf-class="toast o_notification #{widget.className}"
          role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="toast-header">
+        <t t-set="closeButton">
+            <button t-if="widget.sticky" type="button"
+                    class="close o_notification_close"
+                    data-dismiss="toast" aria-label="Close">
+                <span class="d-inline" aria-hidden="true">&amp;times;</span>
+            </button>
+        </t>
+        <div t-if="widget.title" class="toast-header">
             <span t-attf-class="fa fa-2x mr-3 #{widget.icon} o_notification_icon"
                   role="img" t-attf-aria-label="Notification #{widget.name}"
                   t-attf-title="Notification #{widget.name}"/>
             <div class="d-flex align-items-center mr-auto font-weight-bold o_notification_title"
                  t-raw="widget.title"/>
-            <button t-if="widget.sticky" type="button"
-                    class="mb-1 close o_notification_close"
-                    data-dismiss="toast" aria-label="Close">
-                <span class="d-inline" aria-hidden="true">&amp;times;</span>
-            </button>
+            <t t-raw="closeButton"/>
         </div>
-        <div t-if="widget.message or widget.subtitle or widget.buttons.length" class="toast-body">
+        <div t-if="widget.message or widget.subtitle or widget.buttons.length" class="toast-body d-flex">
             <strong t-if="widget.subtitle" t-raw="widget.subtitle"
                  class="o_notification_subtitle"/>
             <div t-if="widget.message" t-raw="widget.message"
-                 class="o_notification_content"/>
+                 class="mr-auto o_notification_content"/>
+            <t t-if="!widget.title" t-raw="closeButton"/>
             <div t-if="widget.buttons.length" class="mt-2 o_notification_buttons">
                 <button t-foreach="widget.buttons" t-as="button" type="button"
                         t-attf-class="btn #{button.primary ? 'btn-primary' : 'btn-secondary'}">
diff --git a/addons/web/static/tests/services/notification_service_tests.js b/addons/web/static/tests/services/notification_service_tests.js
index 164022c1706..e4f4c6730f3 100644
--- a/addons/web/static/tests/services/notification_service_tests.js
+++ b/addons/web/static/tests/services/notification_service_tests.js
@@ -59,7 +59,7 @@ QUnit.module('Services', {
         await testUtils.nextMicrotaskTick();
         var $notification = $('body .o_notification_manager .o_notification');
         assert.strictEqual($notification.html().trim().replace(/\s+/g, ' '),
-            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-lightbulb-o o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a</div> </div> <div class=\"toast-body\"> <div class=\"o_notification_content\">b</div> </div>",
+            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-lightbulb-o o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a</div> </div> <div class=\"toast-body d-flex\"> <div class=\"mr-auto o_notification_content\">b</div> </div>",
             "should display notification");
         assert.containsNone($notification, '.o_notification_close', "should not display the close button in ");
         await waitCloseNotification();
@@ -80,7 +80,7 @@ QUnit.module('Services', {
         await testUtils.nextMicrotaskTick();
         var $notification = $('body .o_notification_manager .o_notification');
         assert.strictEqual($notification.html().trim().replace(/\s+/g, ' '),
-            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-exclamation o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a</div> </div> <div class=\"toast-body\"> <div class=\"o_notification_content\">b</div> </div>",
+            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-exclamation o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a</div> </div> <div class=\"toast-body d-flex\"> <div class=\"mr-auto o_notification_content\">b</div> </div>",
             "should display notification");
         view.destroy();
     });
@@ -105,6 +105,24 @@ QUnit.module('Services', {
         view.destroy();
     });
 
+    QUnit.test('Display a notification without title', async function (assert) {
+        assert.expect(3);
+
+        const view = await createView(this.viewParams);
+        view.call('notification', 'notify', {
+            title: false,
+            message: 'b',
+            sticky: true,
+        });
+        await testUtils.nextTick();
+        const $notification = $('body .o_notification_manager .o_notification');
+        assert.containsNone($notification, '.toast-header .o_notification_title');
+        assert.containsNone($notification, '.o_notification_icon');
+        assert.containsOnce($notification, '.toast-body .o_notification_close');
+
+        view.destroy();
+    });
+
     // FIXME skip because the feature is unused and do not understand why the test even worked before
     QUnit.skip('Display a simple notification with onClose callback when automatically close', async function (assert) {
         assert.expect(2);
@@ -188,7 +206,7 @@ QUnit.module('Services', {
         assert.containsOnce($notification.eq(0), '.o_notification_close',
             "should display the close button in notification");
         assert.strictEqual($notification.html().trim().replace(/\s+/g, ' '),
-            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-question-circle-o o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a0</div> <button type=\"button\" class=\"mb-1 close o_notification_close\" data-dismiss=\"toast\" aria-label=\"Close\"> <span class=\"d-inline\" aria-hidden=\"true\">×</span> </button> </div> <div class=\"toast-body\"> <div class=\"o_notification_content\">b0</div> <div class=\"mt-2 o_notification_buttons\"> <button type=\"button\" class=\"btn btn-primary\"> <span>accept0</span> </button><button type=\"button\" class=\"btn btn-secondary\"> <span>refuse0</span> </button> </div> </div>",
+            "<div class=\"toast-header\"> <span class=\"fa fa-2x mr-3 fa-question-circle-o o_notification_icon\" role=\"img\" aria-label=\"Notification undefined\" title=\"Notification undefined\"></span> <div class=\"d-flex align-items-center mr-auto font-weight-bold o_notification_title\">a0</div> <button type=\"button\" class=\"close o_notification_close\" data-dismiss=\"toast\" aria-label=\"Close\"> <span class=\"d-inline\" aria-hidden=\"true\">×</span> </button> </div> <div class=\"toast-body d-flex\"> <div class=\"mr-auto o_notification_content\">b0</div> <div class=\"mt-2 o_notification_buttons\"> <button type=\"button\" class=\"btn btn-primary\"> <span>accept0</span> </button><button type=\"button\" class=\"btn btn-secondary\"> <span>refuse0</span> </button> </div> </div>",
             "should display notification");
 
         testUtils.dom.click($notification.find('.o_notification_buttons button:contains(accept0)'));