improve notification system

web/static/src/scss/app.scss

@@ -68,6 +68,15 @@ body {
     margin: 5px 0 0 0;
     background-color: $o-notification-info-bg-color;
     box-shadow: 0px 0px 5px 1px $o-main-text-color;
+    position: relative;
+
+    .o_close {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      color: rgba(0, 0, 0, 0.3);
+      text-decoration: none;
+    }
 
     .o_notification_title {
       display: flex;

web/static/src/ts/root.ts

@@ -8,7 +8,7 @@ import { Env } from "./env";
 const template = `
     <div class="o_web_client">
         <t t-widget="Navbar"/>
-        <div class="o_content" t-ref="content"></div>
+        <div class="o_content" t-ref="content"/>
         <div class="o_notification_container">
           <t t-foreach="state.notifications" t-as="notif">
             <t t-widget="Notification" t-props="notif"/>
@@ -27,7 +27,9 @@ export class Root extends Widget<Env, {}> {
 
   mounted() {
     this.env.actionManager.on("action_ready", this, this.setContentWidget);
-    this.env.notifications.on("notification_added", this, this.addNotification);
+    this.env.notifications.on("notification_added", this, this.addNotif);
+    this.env.notifications.on("notification_removed", this, this.removeNotif);
+
     const actionWidget = this.env.actionManager.getCurrentAction();
     if (actionWidget) {
       this.setContentWidget(actionWidget);
@@ -44,8 +46,12 @@ export class Root extends Widget<Env, {}> {
     this.content = newWidget;
   }
 
-  addNotification(notif: INotification) {
+  addNotif(notif: INotification) {
     const notifications = this.state.notifications.concat(notif);
     this.updateState({ notifications });
   }
+  removeNotif(notif: INotification) {
+    const notifs = this.state.notifications.filter(f => f.id !== notif.id);
+    this.updateState({ notifications: notifs });
+  }
 }

web/static/src/ts/services/notifications.ts

@@ -12,7 +12,7 @@ export interface INotification {
   sticky: boolean;
 }
 
-export type NotificationEvent = "notification_added" | "notification_closed";
+export type NotificationEvent = "notification_added" | "notification_removed";
 
 export type Callback = (notif: INotification) => void;
 
@@ -40,13 +40,16 @@ export class NotificationManager extends Bus implements INotificationManager {
     const notification = Object.assign(defaultVals, notif, { id });
     this.notifications[id] = notification;
     this.trigger("notification_added", notification);
+    if (!notification.sticky) {
+      setTimeout(() => this.close(id), 2500);
+    }
     return id;
   }
   close(id: number) {
     let notification = this.notifications[id];
     if (notification) {
       delete this.notifications[id];
-      this.trigger("notification_closed", notification);
+      this.trigger("notification_removed", notification);
     }
   }
 }

web/static/src/ts/widgets/Discuss.ts

@@ -20,7 +20,8 @@ const template = `
             <t t-widget="Clock"/>
         </t>
         <t t-widget="ColorWidget" t-props="{color: state.color}"/>
-        <button t-on-click="addNotif">Add Notification</button>
+        <button t-on-click="addNotif(false)">Add notif</button>
+        <button t-on-click="addNotif(true)">Add sticky notif</button>
     </div>
 `;
 
@@ -54,10 +55,10 @@ export class Discuss extends Widget<Env, {}> {
     this.updateState({ color: newColor });
   }
 
-  addNotif() {
+  addNotif(sticky: boolean) {
     const text = (<any>this.refs.textinput).value;
     const message = `It is now ${new Date().toLocaleTimeString()}.<br/> Msg: ${text}`;
-    this.env.notifications.add({ title: "hey", message: message });
+    this.env.notifications.add({ title: "hey", message: message, sticky });
   }
 }