[IMP] web: redesign toast

Remove the icon of the toast elements. Remove the header and move the
title in the body, as simple text. Move buttons at the bottom instead
of at the right side.

Note: this will be refactored with OWL anyway but this is a first step
towards more consistent tips across backend and frontend.

task-2311554

closes odoo/odoo#61756

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web/static/src/js/widgets/notification.js

@@ -53,22 +53,14 @@ var Notification = Widget.extend({
         this._closeCallback = params.onClose;
 
         if (this.type === 'danger') {
-            this.icon = 'fa-exclamation';
             this.className += ' bg-danger';
         } else if (this.type === 'warning') {
-            this.icon = 'fa-lightbulb-o';
             this.className += ' bg-warning';
         } else if (this.type === 'success') {
-            this.icon = 'fa-check';
             this.className += ' bg-success';
         } else if (this.type === 'info') {
-            this.icon = 'fa-info';
             this.className += ' bg-info';
         }
-
-        if (this.buttons && this.buttons.length) {
-            this.icon = 'fa-question-circle-o';
-        }
     },
     /**
      * @override

addons/web/static/src/scss/notification.scss

@@ -14,7 +14,7 @@
         width: 100%;
 
         .toast-body {
-            padding: 8px 10px;
+            padding: 0.75rem;
 
             .o_notification_close {
                 height: 20px;

addons/web/static/src/xml/notification.xml

@@ -4,30 +4,21 @@
 <t t-name="Notification">
     <div t-attf-class="toast o_notification #{widget.className}"
          role="alert" aria-live="assertive" aria-atomic="true">
-        <t t-set="closeButton">
+        <div class="toast-body">
             <button 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"
+            <div t-if="widget.title" class="font-weight-bold o_notification_title mb-1"
                  t-raw="widget.title"/>
-            <t t-raw="closeButton"/>
-        </div>
-        <div t-if="widget.message or widget.subtitle or widget.buttons.length" class="toast-body">
-            <t t-if="!widget.title" t-raw="closeButton"/>
             <strong t-if="widget.subtitle" t-raw="widget.subtitle"
-                 class="o_notification_subtitle"/>
+                class="o_notification_subtitle mb-2 font-weight-normal text-muted"/>
             <div t-if="widget.message" t-raw="widget.message"
-                 class="mr-auto o_notification_content"/>
+                class="o_notification_content"/>
             <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 btn-sm #{button.primary ? 'btn-primary' : 'btn-secondary'}">
+                        t-attf-class="btn #{button.primary ? 'btn-primary' : 'btn-secondary'}">
                     <t t-if="button.icon">
                         <i t-if="button.icon.indexOf('fa-') === 0" t-attf-class="fa fa-fw o_button_icon #{button.icon}" role="img" t-att-aria-label="button.name" t-att-title="button.name"/>
                         <img t-else="" t-att-src="button.icon" t-att-alt="button.name"/>

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> <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\"> <div class=\"mr-auto o_notification_content\">b</div> </div>",
+            "<div class=\"toast-body\"> <button type=\"button\" class=\"close o_notification_close\" data-dismiss=\"toast\" aria-label=\"Close\"> <span class=\"d-inline\" aria-hidden=\"true\">×</span> </button> <div class=\"font-weight-bold o_notification_title mb-1\">a</div> <div class=\"o_notification_content\">b</div> </div>",
             "should display notification");
         assert.containsOnce($notification, '.o_notification_close');
         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> <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\"> <div class=\"mr-auto o_notification_content\">b</div> </div>",
+            "<div class=\"toast-body\"> <button type=\"button\" class=\"close o_notification_close\" data-dismiss=\"toast\" aria-label=\"Close\"> <span class=\"d-inline\" aria-hidden=\"true\">×</span> </button> <div class=\"font-weight-bold o_notification_title mb-1\">a</div> <div class=\"o_notification_content\">b</div> </div>",
             "should display notification");
         view.destroy();
     });
@@ -117,7 +117,7 @@ QUnit.module('Services', {
         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, '.o_notification_content');
         assert.containsOnce($notification, '.toast-body .o_notification_close');
 
         view.destroy();
@@ -206,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=\"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=\"mr-auto o_notification_content\">b0</div> <div class=\"mt-2 o_notification_buttons\"> <button type=\"button\" class=\"btn btn-sm btn-primary\"> <span>accept0</span> </button><button type=\"button\" class=\"btn btn-sm btn-secondary\"> <span>refuse0</span> </button> </div> </div>",
+            "<div class=\"toast-body\"> <button type=\"button\" class=\"close o_notification_close\" data-dismiss=\"toast\" aria-label=\"Close\"> <span class=\"d-inline\" aria-hidden=\"true\">×</span> </button> <div class=\"font-weight-bold o_notification_title mb-1\">a0</div> <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>",
             "should display notification");
 
         testUtils.dom.click($notification.find('.o_notification_buttons button:contains(accept0)'));