[IMP] web: keep toast open when hovered

Previously non sticky toast were automaticaly closed after a delay.
Now while a toast is hovered it will stay open and when the cursor
leaves the toast, the delay is reset.

Related to https://github.com/odoo/odoo/pull/32132 and
https://github.com/odoo/odoo/pull/35209

Part of https://github.com/odoo/odoo/pull/35342

task-2047628

1 files changed, 26 insertions, 3 deletions

diff --git a/addons/web/static/src/js/widgets/notification.js b/addons/web/static/src/js/widgets/notification.js
index a93cc97f91d..aad896bcd61 100644
--- a/addons/web/static/src/js/widgets/notification.js
+++ b/addons/web/static/src/js/widgets/notification.js
@@ -15,7 +15,9 @@ var Notification = Widget.extend({
     template: 'Notification',
     events: {
         'hidden.bs.toast': '_onClose',
-        'click .o_notification_buttons button': '_onClickButton'
+        'click .o_notification_buttons button': '_onClickButton',
+        'mouseenter': '_onMouseEnter',
+        'mouseleave': '_onMouseLeave',
     },
     _autoCloseDelay: 2500,
     _animation: true,
@@ -74,10 +76,15 @@ var Notification = Widget.extend({
     start: function () {
         this.$el.toast({
             animation: this._animation,
-            autohide: !this.sticky,
-            delay: this._autoCloseDelay,
+            autohide: false,
         });
         void this.$el[0].offsetWidth; // Force a paint refresh before showing the toast
+        if (!this.sticky) {
+            this.autohide = _.cancellableThrottleRemoveMeSoon(this.close, this._autoCloseDelay, {leading: false});
+            this.$el.on('shown.bs.toast', () => {
+                this.autohide();
+            });
+        }
         this.$el.toast('show');
         return this._super.apply(this, arguments);
     },
@@ -147,6 +154,22 @@ var Notification = Widget.extend({
         }
         this.destroy();
     },
+    /**
+     * @private
+     */
+    _onMouseEnter: function () {
+        if (!this.sticky) {
+            this.autohide.cancel();
+        }
+    },
+    /**
+     * @private
+     */
+    _onMouseLeave: function () {
+        if (!this.sticky) {
+            this.autohide();
+        }
+    },
 });
 
 return Notification;