[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:
@@ -15,7 +15,7 @@
|
||||
|
||||
.o_notification_close {
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)'));
|
||||
|
||||
Reference in New Issue
Block a user