[12.0] web_notify: improve popup UI (#1231)

* [ADD]: all available bootstrap notifications (success/danger/warning/info/default)
* [IMP] use black color for text for default notification.
* [FIX] reverted require string for `bus.Longpolling` and rename `on_message_received` to `on_message` to prevent collisions.

web_notify/static/src/js/web_client.js

@@ -1,44 +1,53 @@
 odoo.define('web_notify.WebClient', function (require) {
-"use strict";
+    "use strict";
 
-var WebClient = require('web.WebClient');
-var base_bus = require('bus.Longpolling');
-var session = require('web.session');
-require('bus.BusService');
+    var WebClient = require('web.WebClient');
+    var base_bus = require('bus.Longpolling');
+    var session = require('web.session');
+    require('bus.BusService');
 
 
-WebClient.include({
-    show_application: function() {
-        var res = this._super();
-        this.start_polling();
-        return res
-    },
-    start_polling: function() {
-        this.channel_warning = 'notify_warning_' + session.uid;
-        this.channel_info = 'notify_info_' + session.uid;
-        this.call('bus_service', 'addChannel', this.channel_warning);
-        this.call('bus_service', 'addChannel', this.channel_info);
-        this.call('bus_service', 'on', 'notification', this, this.bus_notification);
-        this.call('bus_service', 'startPolling');
-    },
-    bus_notification: function(notifications) {
-        var self = this;
-        _.each(notifications, function (notification) { 
-            var channel = notification[0];
-            var message = notification[1];
-            if (channel === self.channel_warning) {
-                self.on_message_warning(message);
-            } else if (channel === self.channel_info) {
-                self.on_message_info(message);
-            }
-        });
-    },
-    on_message_warning: function(message){
-        this.do_warn(message.title, message.message, message.sticky);
-    },
-    on_message_info: function(message){
-        this.do_notify(message.title, message.message, message.sticky);
-    }
-});
+    WebClient.include({
+        show_application: function () {
+            var res = this._super();
+            this.start_polling();
+            return res;
+        },
+        start_polling: function () {
+            this.channel_success = 'notify_success_' + session.uid;
+            this.channel_danger = 'notify_danger_' + session.uid;
+            this.channel_warning = 'notify_warning_' + session.uid;
+            this.channel_info = 'notify_info_' + session.uid;
+            this.channel_default = 'notify_default_' + session.uid;
+            this.call('bus_service', 'addChannel', this.channel_success);
+            this.call('bus_service', 'addChannel', this.channel_danger);
+            this.call('bus_service', 'addChannel', this.channel_warning);
+            this.call('bus_service', 'addChannel', this.channel_info);
+            this.call('bus_service', 'addChannel', this.channel_default);
+            this.call(
+                'bus_service', 'on', 'notification',
+                this, this.bus_notification);
+            this.call('bus_service', 'startPolling');
+        },
+        bus_notification: function (notifications) {
+            var self = this;
+            _.each(notifications, function (notification) {
+                // Not used: var channel = notification[0];
+                var message = notification[1];
+                self.on_message(message);
+            });
+        },
+        on_message: function (message) {
+            return this.call(
+                'notification', 'notify', {
+                    type: message.type,
+                    title: message.title,
+                    message: message.message,
+                    sticky: message.sticky,
+                    className: message.className,
+                }
+            );
+        },
+    });
 
 });

web_notify/static/src/js/widgets/notification.js

@@ -0,0 +1,26 @@
+odoo.define('web_notify.Notification', function (require) {
+    "use strict";
+
+    var Notification = require('web.Notification');
+
+    Notification.include({
+        icon_mapping: {
+            'success': 'fa-thumbs-up',
+            'danger': 'fa-exclamation-triangle',
+            'warning': 'fa-exclamation',
+            'info': 'fa-info',
+            'default': 'fa-lightbulb-o',
+        },
+        init: function () {
+            this._super.apply(this, arguments);
+            // Delete default classes
+            this.className = this.className.replace(' o_error', '');
+            // Add custom icon and custom class
+            this.icon = (this.type in this.icon_mapping) ?
+                this.icon_mapping[this.type] :
+                this.icon_mapping['default'];
+            this.className += ' o_' + this.type;
+        },
+    });
+
+});

web_notify/static/src/scss/webclient.scss

@@ -0,0 +1,24 @@
+.o_notification_manager {
+    .o_notification {
+        &.o_success {
+            color: white;
+            background-color: theme-color('success');
+        }
+        &.o_danger {
+            color: white;
+            background-color: theme-color('danger');
+        }
+        &.o_warning {
+            color: white;
+            background-color: theme-color('warning');
+        }
+        &.o_info {
+            color: white;
+            background-color: theme-color('info');
+        }
+        &.o_default {
+            color: black;
+            background-color: theme-color('default');
+        }
+    }
+}