[IMP] web, *: share and improve notification system

* barcodes, calendar, partner_autocomplete, web_settings_dashboard

Make the notification system better, using bootstrap toast component,
and make it available in the frontend.

The toast component allowed to remove some JS code and made the
component customizable by themes but it had to be reviewed/fixed to make
it functional (maybe bootstrap will review its work in next versions).

This work should still be improved because there are still too many
ways (deprecated and not deprecated) to instantiate toasts in the
backend. The goal here was however to make the toasts more modern and
make them available in the frontend.

This work is needed for some tasks. @kig-odoo and @fja-odoo made a
pre-work to instantiate toasts in the frontend for their respective
tasks. This commit unifies the system.

Part of https://github.com/odoo/odoo/pull/32793
task-1970731

closes odoo/odoo#32793

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

6 files changed, 30 insertions, 53 deletions

diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index c1f8cbb44d3..8cfd6dbd48b 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -117,6 +117,15 @@ $nav-pills-border-radius: 0 !default;
 $nav-pills-link-active-color: $white !default;
 $nav-pills-link-active-bg: $o-brand-primary !default;
 
+// Toasts
+
+$toast-max-width: 300px !default;
+$toast-padding-x: 1.5rem !default;
+$toast-padding-y: 0.5rem !default;
+$toast-font-size: $font-size-base !default;
+$toast-background-color: rgba($white, .7) !default;
+$toast-header-background-color: $toast-background-color !default;
+
 // Badges
 
 $badge-font-weight: normal !default;
diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index b55e454d723..b9e889ce71a 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -41,6 +41,14 @@
     }
 }
 
+.toast-header {
+    background-clip: border-box;
+}
+.toast-body {
+    // Same as card-body, see explanation above
+    @include o-bg-color(opacify($toast-background-color, 0.08));
+}
+
 // Modify modals so that their scrollable element is the modal-body (except in
 // mobile).
 @include media-breakpoint-up(sm) {
diff --git a/addons/web/static/src/scss/name_and_signature.scss b/addons/web/static/src/scss/name_and_signature.scss
index 9dc32d5396b..439e9e0bcb1 100644
--- a/addons/web/static/src/scss/name_and_signature.scss
+++ b/addons/web/static/src/scss/name_and_signature.scss
@@ -37,7 +37,7 @@
 
 .o_field_invalid {
     .o_signature {
-        outline: 3px solid $o-notification-error-bg-color;
+        outline: 3px solid theme-color('danger');
         cursor: pointer;
     }
 }
diff --git a/addons/web/static/src/scss/notification.scss b/addons/web/static/src/scss/notification.scss
new file mode 100644
index 00000000000..7bf292ad94c
--- /dev/null
+++ b/addons/web/static/src/scss/notification.scss
@@ -0,0 +1,12 @@
+
+.o_notification_manager {
+    @include o-position-absolute($nav-link-height, 0);
+    position: fixed;
+    z-index: ($zindex-modal + $zindex-popover) / 2;
+    width: $toast-max-width;
+    max-width: 100%;
+
+    .o_notification {
+        width: 100%;
+    }
+}
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 5196805625d..2370ffb7be2 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -62,9 +62,6 @@ $o-dropdown-hpadding: 20px;
 
 $o-sheet-vpadding: 24px;
 
-$o-notification-error-bg-color: #F16567;
-$o-notification-info-bg-color: #FCFBEA;
-
 $o-modal-lg: 980px;
 $o-modal-md: 650px;
 
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 436c8074302..fca898f262a 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -14,55 +14,6 @@
 // ------------------------------------------------------------------
 // Misc. widgets
 // ------------------------------------------------------------------
-.o_notification_manager {
-    width: 300px;
-    max-width: 100%;
-
-    @include o-position-absolute($nav-link-height, 0);
-    z-index: 1100; // Bootstrap modal z-index is 1050
-
-    .o_notification {
-        padding: 0;
-        margin: 5px 0 0 0;
-
-        opacity: 0;
-
-        background-color: $o-notification-info-bg-color;
-        box-shadow: 0px 0px 5px 1px $o-main-text-color;
-
-        position: relative;
-        .o_close {
-            @include o-position-absolute(5px, 5px);
-            color: rgba(0, 0, 0, 0.3);
-            text-decoration: none;
-        }
-
-        .o_notification_title {
-            display: flex;
-            align-items: center;
-
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            padding: 10px 10px 10px 20px;
-
-            font-weight: bold;
-
-            .o_icon {
-                display: inline-block;
-                margin-right: 20px;
-                color: rgba(0, 0, 0, 0.3);
-            }
-        }
-
-        .o_notification_content {
-            padding: 10px;
-        }
-
-        &.o_error {
-            color: white;
-            background-color: $o-notification-error-bg-color;
-        }
-    }
-}
 
 // Buttons
 .o_icon_button {