From 2629348090d6eabe8f9d3ae70a41f7ff7d45bbb6 Mon Sep 17 00:00:00 2001
From: xlu-odoo <xlu@odoo.com>
Date: Mon, 20 Dec 2021 10:43:39 +0000
Subject: [PATCH] [REF] web: notifications revamp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../tests/product_pricelist_report_test.js    |  9 ++--
 .../src/core/notifications/notification.js    | 21 +--------
 .../src/core/notifications/notification.scss  | 43 +++----------------
 .../notifications/notification.variables.scss |  4 ++
 .../src/core/notifications/notification.xml   | 19 ++++----
 .../core/notifications/notifications_tests.js |  6 +--
 ...ice_provider_adapter_notification_tests.js |  2 +-
 .../tests/webclient/actions/legacy_tests.js   |  2 +-
 8 files changed, 30 insertions(+), 76 deletions(-)
 create mode 100644 addons/web/static/src/core/notifications/notification.variables.scss

diff --git a/addons/product/static/tests/product_pricelist_report_test.js b/addons/product/static/tests/product_pricelist_report_test.js
index 9774d3cad15..d6a345cf019 100644
--- a/addons/product/static/tests/product_pricelist_report_test.js
+++ b/addons/product/static/tests/product_pricelist_report_test.js
@@ -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'));
diff --git a/addons/web/static/src/core/notifications/notification.js b/addons/web/static/src/core/notifications/notification.js
index 3567f653725..7ff042ec267 100644
--- a/addons/web/static/src/core/notifications/notification.js
+++ b/addons/web/static/src/core/notifications/notification.js
@@ -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 = {
diff --git a/addons/web/static/src/core/notifications/notification.scss b/addons/web/static/src/core/notifications/notification.scss
index 2a45afcb4a9..c3147f42196 100644
--- a/addons/web/static/src/core/notifications/notification.scss
+++ b/addons/web/static/src/core/notifications/notification.scss
@@ -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");
diff --git a/addons/web/static/src/core/notifications/notification.variables.scss b/addons/web/static/src/core/notifications/notification.variables.scss
new file mode 100644
index 00000000000..f1cde37df56
--- /dev/null
+++ b/addons/web/static/src/core/notifications/notification.variables.scss
@@ -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;
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index aa45770f6b0..59ece7b3147 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -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">
diff --git a/addons/web/static/tests/core/notifications/notifications_tests.js b/addons/web/static/tests/core/notifications/notifications_tests.js
index 86985f34f32..d7d516f8944 100644
--- a/addons/web/static/tests/core/notifications/notifications_tests.js
+++ b/addons/web/static/tests/core/notifications/notifications_tests.js
@@ -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) => {
diff --git a/addons/web/static/tests/legacy/services/service_provider_adapter_notification_tests.js b/addons/web/static/tests/legacy/services/service_provider_adapter_notification_tests.js
index 020bd57d094..56c6c4a86ce 100644
--- a/addons/web/static/tests/legacy/services/service_provider_adapter_notification_tests.js
+++ b/addons/web/static/tests/legacy/services/service_provider_adapter_notification_tests.js
@@ -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");
diff --git a/addons/web/static/tests/webclient/actions/legacy_tests.js b/addons/web/static/tests/webclient/actions/legacy_tests.js
index 6105dfcc2ed..b6a7e59b67d 100644
--- a/addons/web/static/tests/webclient/actions/legacy_tests.js
+++ b/addons/web/static/tests/webclient/actions/legacy_tests.js
@@ -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...");
     });