[IMP] web: New notification system

Backport of the Notification system

7 files changed, 140 insertions, 63 deletions

diff --git a/addons/web/static/src/js/framework/widget.js b/addons/web/static/src/js/framework/widget.js
index 70f48caa261..6d2a3728ed8 100644
--- a/addons/web/static/src/js/framework/widget.js
+++ b/addons/web/static/src/js/framework/widget.js
@@ -390,14 +390,11 @@ var Widget = core.Class.extend(mixins.PropertiesMixin, {
         }
         return false;
     },
-    do_notify: function() {
-        if (this.getParent()) {
-            return this.getParent().do_notify.apply(this,arguments);
-        }
-        return false;
+    do_notify: function(title, message, sticky) {
+        this.trigger_up('notification', {title: title, message: message, sticky: sticky});
     },
-    do_warn: function(title, message) {
-        core.bus.trigger('display_notification_warning', title, message);
+    do_warn: function(title, message, sticky) {
+        this.trigger_up('warning', {title: title, message: message, sticky: sticky});
     },
     rpc: function(url, data, options) {
         return this.alive(session.rpc(url, data, options));
diff --git a/addons/web/static/src/js/views/form_relational_widgets.js b/addons/web/static/src/js/views/form_relational_widgets.js
index fb77d9feb3b..78224f4e9be 100644
--- a/addons/web/static/src/js/views/form_relational_widgets.js
+++ b/addons/web/static/src/js/views/form_relational_widgets.js
@@ -1111,9 +1111,8 @@ var One2ManyListView = X2ManyListView.extend({
     },
     do_button_action: function (name, id, callback) {
         if (!_.isNumber(id)) {
-            core.bus.trigger('display_notification_warning', 
-                _t("Action Button"),
-                _t("The o2m record must be saved before an action can be used"));
+            this.do_warn(_t("Action Button"),
+                         _t("The o2m record must be saved before an action can be used"));
             return;
         }
         var parent_form = this.x2m.view;
diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 274d59b0ee3..e8b83aeb91e 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -1125,7 +1125,7 @@ var FieldBinary = common.AbstractField.extend(common.ReinitializeFieldMixin, {
                 var file = file_node.files[0];
                 if (file.size > this.max_upload_size) {
                     var msg = _t("The selected file exceed the maximum file size of %s.");
-                    core.bus.trigger('display_notification_warning', _t("File upload"), _.str.sprintf(msg, utils.human_size(this.max_upload_size)));
+                    this.do_warn(_t("File upload"), _.str.sprintf(msg, utils.human_size(this.max_upload_size)));
                     return false;
                 }
                 var filereader = new FileReader();
@@ -1303,7 +1303,7 @@ var FieldBinaryImage = FieldBinary.extend({
         });
         $img.on('error', function() {
             $img.attr('src', self.placeholder);
-            core.bus.trigger('display_notification_warning', _t("Image"), _t("Could not display the selected image."));
+            self.do_warn(_t("Image"), _t("Could not display the selected image."));
         });
     },
     on_file_uploaded_and_valid: function(size, name, content_type, file_base64) {
diff --git a/addons/web/static/src/js/web_client.js b/addons/web/static/src/js/web_client.js
index d3b27ae48dc..5b73be852cd 100644
--- a/addons/web/static/src/js/web_client.js
+++ b/addons/web/static/src/js/web_client.js
@@ -9,7 +9,7 @@ var framework = require('web.framework');
 var Loading = require('web.Loading');
 var Menu = require('web.Menu');
 var Model = require('web.DataModel');
-var Notification = require('web.Notification');
+var NotificationManager = require('web.notification').NotificationManager;
 var session = require('web.session');
 var SystrayMenu = require('web.SystrayMenu');
 var UserMenu = require('web.UserMenu');
@@ -20,12 +20,23 @@ var BarcodeEvents = require('web.BarcodeEvents');
 var QWeb = core.qweb;
 var _t = core._t;
 
-
 var WebClient = Widget.extend({
     events: {
         'click .oe_logo_edit_admin': 'logo_edit',
         'click .oe_logo img': 'on_logo_click',
     },
+    custom_events: {
+        'notification': function (e) {
+            if(this.notification_manager) {
+                this.notification_manager.notify(e.data.title, e.data.message, e.data.sticky);
+            }
+        },
+        'warning': function (e) {
+            if(this.notification_manager) {
+                this.notification_manager.warn(e.data.title, e.data.message, e.data.sticky);
+            }
+        },
+    },
 
     init: function(parent, client_options) {
         this.client_options = {};
@@ -110,16 +121,13 @@ var WebClient = Widget.extend({
     show_common: function() {
         var self = this;
         session.on('error', crash_manager, crash_manager.rpc_error);
-        self.notification = new Notification(this);
-        self.notification.appendTo(self.$('.openerp'));
+        self.notification_manager = new NotificationManager(this);
+        self.notification_manager.appendTo(self.$('.openerp'));
         self.loading = new Loading(self);
         self.loading.appendTo(self.$('.openerp_webclient_container'));
         self.action_manager = new ActionManager(self);
         self.action_manager.replace(self.$('.oe_application'));
 
-        core.bus.on('display_notification_warning', this, function (title, message) {
-            self.notification.warn(title, message);
-        });
         window.onerror = function (message, file, line, col, error) {
             var traceback = error ? error.stack : '';
             crash_manager.show_error({
@@ -250,14 +258,6 @@ var WebClient = Widget.extend({
             session.load_modules(true).then(
                 self.menu.proxy('do_reload')); });
     },
-    do_notify: function() {
-        var n = this.notification;
-        return n.notify.apply(n, arguments);
-    },
-    do_warn: function() {
-        var n = this.notification;
-        return n.warn.apply(n, arguments);
-    },
     on_logout: function() {
         var self = this;
         this.clear_uncommitted_changes().then(function() {
diff --git a/addons/web/static/src/js/widgets/notification.js b/addons/web/static/src/js/widgets/notification.js
index d9376155787..314034ef748 100644
--- a/addons/web/static/src/js/widgets/notification.js
+++ b/addons/web/static/src/js/widgets/notification.js
@@ -1,44 +1,73 @@
-odoo.define('web.Notification', function (require) {
+odoo.define('web.notification', function (require) {
 "use strict";
 
+var core = require('web.core');
 var Widget = require('web.Widget');
+var _t = core._t;
 
 var Notification = Widget.extend({
     template: 'Notification',
-    init: function() {
+    events: {
+        'click .o_close': function(e) {
+            e.preventDefault();
+            this.destroy(true);
+        }
+    },
+    init: function(parent, title, text, sticky) {
         this._super.apply(this, arguments);
+        this.title = title;
+        this.text = text;
+        this.sticky = !!sticky;
     },
     start: function() {
         this._super.apply(this, arguments);
-        this.$el.notify({
-            speed: 500,
-            expires: 2500
+
+        var self = this;
+        this.$el.animate({opacity: 1.0}, 400, "swing", function() {
+            if(!self.sticky) {
+                setTimeout(function() {
+                    self.destroy(true);
+                }, 2500);
+            }
         });
     },
-    notify: function(title, text, sticky) {
-        sticky = !!sticky;
-        var opts = {};
-        if (sticky) {
-            opts.expires = false;
+    destroy: function(animate) {
+        if(!animate) {
+            return this._super.apply(this, arguments);
         }
-        return this.$el.notify('create', {
-            title: title,
-            text: text
-        }, opts);
+
+        var self = this, 
+            superDestroy = this._super;
+        this.$el.animate({opacity: 0.0}, 400, "swing", function() {
+            self.$el.animate({height: 0}, 400, "swing", function() {
+                superDestroy.call(self);
+            });
+        });
+    },
+});
+
+var Warning = Notification.extend({
+    template: 'Warning',
+});
+
+var NotificationManager = Widget.extend({
+    className: 'o_notification_manager',
+
+    display: function(notification) {
+        return notification.appendTo(this.$el);
+    },
+    notify: function(title, text, sticky) {
+        return this.display(new Notification(this, title, text, sticky));
     },
     warn: function(title, text, sticky) {
-        sticky = !!sticky;
-        var opts = {};
-        if (sticky) {
-            opts.expires = false;
-        }
-        return this.$el.notify('create', 'oe_notification_alert', {
-            title: title,
-            text: text
-        }, opts);
-    }
+        return this.display(new Warning(this, title, text, sticky));
+    },
 });
 
-return Notification;
+return {
+    Notification: Notification,
+    Warning: Warning,
+    NotificationManager: NotificationManager,
+};
 
 });
diff --git a/addons/web/static/src/less/notification.less b/addons/web/static/src/less/notification.less
new file mode 100644
index 00000000000..0c910dbc5c5
--- /dev/null
+++ b/addons/web/static/src/less/notification.less
@@ -0,0 +1,51 @@
+@notification-error-bg-color: #F16567;
+@notification-info-bg-color: #FCFBEA;
+.o_notification_manager {
+    width: 300px;
+    max-width: 100%;
+
+    .o-position-absolute(@navbar-height, 0px);
+    z-index: 50;  // same as debug manager. Fixme: expose a variable
+
+    .o_notification {
+        padding: 0;
+        margin: 5px 0 0 0;
+
+        opacity: 0;
+
+        background-color: @notification-info-bg-color;
+        box-shadow: 0px 0px 5px 1px @odoo-main-text-color;
+
+        position: relative;
+        .o_close {
+            .o-position-absolute(5px, 5px);
+            color: rgba(0, 0, 0, 0.3);
+            text-decoration: none;
+        }
+
+        .o_notification_title {
+            .o-flex-display();
+            .o-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: @notification-error-bg-color;
+        }
+    }
+}
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 7cc668838e7..8217607f197 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -9,20 +9,21 @@
     </div>
 </t>
 <t t-name="Notification">
-    <div class="oe_notification" t-translation="off">
-        <div id="oe_notification_default">
-            <a class="ui-notify-cross ui-notify-close" href="#">x</a>
-            <h1>#{title}</h1>
-            <p>#{text}</p>
-        </div>
-        <div id="oe_notification_alert" class="ui-state-error">
-            <a class="ui-notify-cross ui-notify-close" href="#">x</a>
-            <span style="float:left; margin:2px 5px 0 0;" class="ui-icon ui-icon-alert"></span>
-            <h1>#{title}</h1>
-            <p>#{text}</p>
+    <div class="o_notification" t-translation="off">
+        <a t-if="widget.sticky" class="fa fa-times o_close" href="#"/>
+        <div class="o_notification_title">
+            <span class="o_icon fa fa-3x fa-lightbulb-o"/>
+            <t t-raw="widget.title"/>
         </div>
+        <div class="o_notification_content"><t t-raw="widget.text"/></div>
     </div>
 </t>
+<t t-name="Warning" t-extend="Notification">
+    <t t-jquery=".o_notification">$(this).addClass('o_error');</t>
+    <t t-jquery=".o_icon" t-operation="replace">
+        <span class="o_icon fa fa-3x fa-exclamation"/>
+    </t>
+</t>
 <t t-name="Dialog">
     <div class="modal" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
         <div class="modal-dialog">