From b42ad68c2c2a4cdb9ce214e7a0f2072d85e7550b Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Wed, 12 Aug 2020 11:11:32 +0000
Subject: [PATCH] [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>
---
 .../web/static/src/js/widgets/notification.js |  8 --------
 addons/web/static/src/scss/notification.scss  |  2 +-
 addons/web/static/src/xml/notification.xml    | 19 +++++--------------
 .../services/notification_service_tests.js    |  8 ++++----
 4 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/addons/web/static/src/js/widgets/notification.js b/addons/web/static/src/js/widgets/notification.js
index 0e9cdabe7ca..59044a19198 100644
--- a/addons/web/static/src/js/widgets/notification.js
+++ b/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
diff --git a/addons/web/static/src/scss/notification.scss b/addons/web/static/src/scss/notification.scss
index 561f7ab0552..83007fb653b 100644
--- a/addons/web/static/src/scss/notification.scss
+++ b/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;
diff --git a/addons/web/static/src/xml/notification.xml b/addons/web/static/src/xml/notification.xml
index e23538d1e28..761c02f0eb1 100644
--- a/addons/web/static/src/xml/notification.xml
+++ b/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"/>
diff --git a/addons/web/static/tests/services/notification_service_tests.js b/addons/web/static/tests/services/notification_service_tests.js
index 45b4de51b10..6cadb7f82bb 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> <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)'));