From b6f6a0dacdd5e4ffb6a17d9b5311cda9e9c8d667 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Hennecart?= <jeh@odoo.com>
Date: Fri, 25 Sep 2020 09:35:10 +0000
Subject: [PATCH] [FIX] web: fix notification design

Fix the design of he notification which is sometimes broken
(if there are lists or buttons display in it for example)

task-2346462

closes odoo/odoo#59776

X-original-commit: 238654ae53582d791154388c827f725c8d136612
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 addons/web/static/src/xml/notification.xml                  | 4 ++--
 .../web/static/tests/services/notification_service_tests.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/xml/notification.xml b/addons/web/static/src/xml/notification.xml
index a6cb930b55b..e23538d1e28 100644
--- a/addons/web/static/src/xml/notification.xml
+++ b/addons/web/static/src/xml/notification.xml
@@ -19,7 +19,8 @@
                  t-raw="widget.title"/>
             <t t-raw="closeButton"/>
         </div>
-        <div t-if="widget.message or widget.subtitle or widget.buttons.length" class="toast-body d-flex">
+        <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"/>
             <div t-if="widget.message" t-raw="widget.message"
@@ -34,7 +35,6 @@
                     <span t-esc="button.text"/>
                 </button>
             </div>
-            <t t-if="!widget.title" t-raw="closeButton"/>
         </div>
     </div>
 </t>
diff --git a/addons/web/static/tests/services/notification_service_tests.js b/addons/web/static/tests/services/notification_service_tests.js
index 83ff3a5a5cd..45b4de51b10 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 d-flex\"> <div class=\"mr-auto 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> <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>",
             "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 d-flex\"> <div class=\"mr-auto 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> <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>",
             "should display notification");
         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 d-flex\"> <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-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>",
             "should display notification");
 
         testUtils.dom.click($notification.find('.o_notification_buttons button:contains(accept0)'));