pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web: notifications revamp

Browse Source 
Notifications have now a new look and SCSS has been cleaned up
accordingly. This commit is part of v16 overall restyle (task-2704984).

task#2719037

closes odoo/odoo#82524

Related: odoo/enterprise#23580
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
xlu-odoo
2022-03-03 11:03:45 +00:00
committed by stefanorigano (SRI)
parent 6d04d62117
commit 2629348090
8 changed files with 30 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/product/static/tests/product_pricelist_report_test.js
+5 -4
View File
@@ -37,7 +37,7 @@ QUnit.module('Product Pricelist', {
},
}, function () {
QUnit.test('Pricelist Client Action', async function (assert) {
assert.expect(21);
assert.expect(23);
let Qty = [1, 5, 10]; // default quantities
patchWithCleanup(GeneratePriceList.prototype, {
@@ -88,9 +88,10 @@ QUnit.module('Product Pricelist', {
// existing quantity can not be added.
await testUtils.dom.click($(target).find('.o_add_qty'));
let notificationElement = document.body.querySelector('.o_notification_manager .o_notification.bg-info');
let notificationElement = document.body.querySelector('.o_notification_manager .o_notification');
assert.strictEqual(notificationElement.querySelector('.o_notification_content').textContent,
"Quantity already present (1).", "Existing Quantity can not be added");
assert.hasClass(notificationElement, "border-info");
// adding few more quantities to check.
$(target).find('.o_product_qty').val(2);
@@ -104,11 +105,11 @@ QUnit.module('Product Pricelist', {
$(target).find('.o_product_qty').val(4);
await testUtils.dom.click($(target).find('.o_add_qty'));
notificationElement = document.body.querySelector('.o_notification_manager .o_notification.bg-warning');
notificationElement = document.body.querySelector('.o_notification_manager .o_notification:nth-child(2)');
assert.strictEqual(notificationElement.querySelector('.o_notification_content').textContent,
"At most 5 quantities can be displayed simultaneously. Remove a selected quantity to add others.",
"Can not add more then 5 quantities");
assert.hasClass(notificationElement, "border-warning");
// removing all the quantities should work
Qty.pop(10);
await testUtils.dom.click($(target).find('.o_badges .badge:contains("10") .o_remove_qty'));
addons/web/static/src/core/notifications/notification.js
+1 -20
View File
@@ -2,26 +2,7 @@
const { Component } = owl;
export class Notification extends Component {
get className() {
let className;
switch (this.props.type) {
case "danger":
className = "bg-danger";
break;
case "warning":
className = "bg-warning";
break;
case "success":
className = "bg-success";
break;
case "info":
className = "bg-info";
break;
}
return className ? `${className} ${this.props.className}` : this.props.className;
}
}
export class Notification extends Component {}
Notification.template = "web.NotificationWowl";
Notification.props = {
addons/web/static/src/core/notifications/notification.scss
+7 -36
View File
@@ -1,48 +1,19 @@
$notification-width: 320px;
$notification-text-color: #212529;
$notification-title-text-color: #6c757d;
// Colors of the notification are not managed by this file.
// It is handled by the other classes defining a background. (like danger, warning, etc.)
// The notification just add overlays.
.o_notification_manager {
@include o-position-absolute(3.5rem, 0);
position: fixed;
z-index: ($zindex-modal + $zindex-popover) / 2;
width: $notification-width;
margin-right: 0.5rem;
max-width: 100%;
@include o-position-absolute($o-navbar-height * 1.15, map-get($spacers, 2), $left: calc(100vw - #{$o-notification-max-width}));
z-index: $o-notification-zindex;
.o_notification {
width: 100%;
margin-bottom: 0.375rem;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.7);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
.o_notification_body {
padding: 0.5rem 0.625rem;
background-color: rgba(255, 255, 255, 0.78) !important;
color: $notification-text-color;
.o_notification_close {
margin-left: 1rem;
}
.o_notification {
border-left-width: $o-notification-border-left-width !important; // Overrides border-[x] utility classes
box-shadow: $o-notification-shadow;
}
.o_notification_header {
display: flex;
align-items: center;
padding: 0.5rem 1.5rem;
color: $notification-title-text-color;
background-color: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
.o_notification_close {
@include o-position-absolute(0, 0);
}
}
}
@include owl-fade(0.5s, "o_notification");
addons/web/static/src/core/notifications/notification.variables.scss
+4
View File
@@ -0,0 +1,4 @@
$o-notification-max-width: 320px !default;
$o-notification-border-left-width: 0.75rem !default;
$o-notification-shadow: 0 .25rem .75rem rgba(#000, .1)!default;
$o-notification-zindex: 1055 !default;
addons/web/static/src/core/notifications/notification.xml
+8 -11
View File
@@ -2,17 +2,14 @@
<templates xml:space="preserve">
<t t-name="web.NotificationWowl" owl="1">
<div t-attf-class="o_notification {{className}}"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="o_notification_body">
<button type="button" class="close o_notification_close"
aria-label="Close" t-on-click="props.close">
<span class="d-inline" aria-hidden="true">×</span>
</button>
<div t-if="props.title" class="font-weight-bold o_notification_title mb-1" t-esc="props.title"/>
<div t-if="props.message" class="mr-auto o_notification_content">
<t t-out="props.message"/>
</div>
<div t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-white mb-2 position-relative"
role="alert" aria-live="assertive" aria-atomic="true">
<strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 pl-3 pr-5" t-out="props.title"/>
<button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
<i class="oi oi-close"/>
</button>
<div t-attf-class="o_notification_body pl-3 pr-5 py-2">
<div t-if="props.message" class="mr-auto o_notification_content" t-out="props.message"/>
<div t-if="props.buttons.length" class="mt-2 o_notification_buttons">
<button t-foreach="props.buttons" t-as="button" type="button" t-key="button_index"
t-attf-class="btn {{button.primary ? 'btn-primary' : 'btn-link'}}" t-on-click="button.onClick">
addons/web/static/tests/core/notifications/notifications_tests.js
+3 -3
View File
@@ -35,7 +35,7 @@ QUnit.test("can display a basic notification", async (assert) => {
notif.querySelector(".o_notification_content").textContent,
"I'm a basic notification"
);
assert.hasClass(notif, "bg-warning");
assert.hasClass(notif, "border-warning");
});
QUnit.test("title and message are escaped by default", async (assert) => {
@@ -94,7 +94,7 @@ QUnit.test("can display a notification of type danger", async (assert) => {
notif.querySelector(".o_notification_content").textContent,
"I'm a danger notification"
);
assert.hasClass(notif, "bg-danger");
assert.hasClass(notif, "border-danger");
});
QUnit.test("can display a danger notification with a title", async (assert) => {
@@ -114,7 +114,7 @@ QUnit.test("can display a danger notification with a title", async (assert) => {
notif.querySelector(".o_notification_content").textContent,
"I'm a danger notification"
);
assert.hasClass(notif, "bg-danger");
assert.hasClass(notif, "border-danger");
});
QUnit.test("can display a notification with a button", async (assert) => {
addons/web/static/tests/legacy/services/service_provider_adapter_notification_tests.js
+1 -1
View File
@@ -64,7 +64,7 @@ QUnit.module("Service Provider Adapter Notification", (hooks) => {
notif.querySelector(".o_notification_content").textContent,
"I'm a danger notification"
);
assert.hasClass(notif, "bg-danger");
assert.hasClass(notif, "border-danger");
//Close the notification
await doAction(webClient, "CloseTestLeg");
addons/web/static/tests/webclient/actions/legacy_tests.js
+1 -1
View File
@@ -59,7 +59,7 @@ QUnit.module("ActionManager", (hooks) => {
await testUtils.nextTick();
await legacyExtraNextTick();
assert.containsOnce(target, ".o_list_view");
assert.containsOnce(document.body, ".o_notification.bg-warning");
assert.containsOnce(document.body, ".o_notification.border-warning");
assert.strictEqual($(".o_notification_title").text(), "Warning!!!");
assert.strictEqual($(".o_notification_content").text(), "This is a warning...");
});