add support for notifications of type 'warning'

web/static/src/scss/app.scss

@@ -1,6 +1,5 @@
 $navbar-height: 46px;
 $main-color: #875a7b;
-$o-notification-info-bg-color: #fcfbea;
 $o-main-text-color: #666666;
 
 html {
@@ -139,6 +138,9 @@ body {
 }
 
 /***** Notifications *****/
+$o-notification-info-bg-color: #fcfbea;
+$o-notification-error-bg-color: #f16567;
+
 .o_notification_container {
   position: absolute;
   width: 300px;
@@ -153,6 +155,11 @@ body {
     box-shadow: 0px 0px 5px 1px $o-main-text-color;
     position: relative;
 
+    &.o_error {
+      color: white;
+      background-color: $o-notification-error-bg-color;
+    }
+
     .o_close {
       position: absolute;
       top: 5px;

web/static/src/ts/discuss/discuss.ts

@@ -52,6 +52,15 @@ export class Discuss extends Widget<{}, State> {
       sticky
     });
   }
+
+  addWarning() {
+    this.env.addNotification({
+      title: "This is a warning",
+      message: "All your bases are belong to us",
+      type: "warning",
+      sticky: true
+    });
+  }
 }
 
 class ColorWidget extends Widget<{ color: "red" | "blue" }, {}> {

web/static/src/ts/ui/notification.ts

@@ -9,4 +9,8 @@ export class Notification extends Widget<INotification, {}> {
     ev.preventDefault();
     this.env.closeNotification(this.props.id);
   }
+
+  get icon() {
+    return this.props.type === "warning" ? "fa-exclamation" : "fa-lightbulb";
+  }
 }

web/static/src/xml/templates.xml

@@ -61,9 +61,10 @@
     </div>
   </div>
 
-  <div t-name="web.notification" class="o_notification">
+  <div t-name="web.notification" class="o_notification" t-att-class="props.type === 'warning' ? 'o_error' : ''">
     <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
     <div class="o_notification_title">
+      <span t-attf-class="o_icon fa fa-3x {{icon}}" role="img" t-attf-aria-label="Notification {{props.title}}" t-attf-title="Notification {{props.title}}"/>
       <t t-raw="props.title"/>
     </div>
     <div class="o_notification_content" t-if="props.message.length">
@@ -89,6 +90,7 @@
     <t t-widget="ColorWidget" t-props="{color: state.color}"/>
     <button t-on-click="addNotif(false)">Add notif</button>
     <button t-on-click="addNotif(true)">Add sticky notif</button>
+    <button t-on-click="addWarning">Add warning</button>
   </div>
 
 </templates>