[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>
This commit is contained in:
Laurent Stukkens (LTU)
2020-06-18 09:35:41 +00:00
parent 2feaee191b
commit c27228d95e
3 changed files with 4 additions and 4 deletions
+1 -1
View File
@@ -15,7 +15,7 @@
.o_notification_close {
height: 20px;
margin-left: 5px;
margin-left: 1rem;
}
}
}
+2 -2
View File
@@ -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>
@@ -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)'));