[FIX] web: place the notification close button to the right end

Prior to this commit the close button of the notification is wrongly
placed when no title is provided.

Applying this commit places the close button at the right end. This commit also
modifies the size of the buttons to btn-sm.

task-2277737
Fixes #52229

closes odoo/odoo#53219

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

3 files changed, 4 insertions, 4 deletions

diff --git a/addons/web/static/src/scss/notification.scss b/addons/web/static/src/scss/notification.scss
index 4641b7866ce..5dcf08f6c8b 100644
--- a/addons/web/static/src/scss/notification.scss
+++ b/addons/web/static/src/scss/notification.scss
@@ -15,7 +15,7 @@
 
             .o_notification_close {
                 height: 20px;
-                margin-left: 5px;
+                margin-left: 1rem;
             }
         }
     }
diff --git a/addons/web/static/src/xml/notification.xml b/addons/web/static/src/xml/notification.xml
index 42aab39f889..a6cb930b55b 100644
--- a/addons/web/static/src/xml/notification.xml
+++ b/addons/web/static/src/xml/notification.xml
@@ -24,10 +24,9 @@
                  class="o_notification_subtitle"/>
             <div t-if="widget.message" t-raw="widget.message"
                  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'}">
+                        t-attf-class="btn btn-sm #{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"/>
@@ -35,6 +34,7 @@
                     <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 f796ba431df..83ff3a5a5cd 100644
--- a/addons/web/static/tests/services/notification_service_tests.js
+++ b/addons/web/static/tests/services/notification_service_tests.js
@@ -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-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-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)'));